BZ#145849913 Allows for image assets to be dynamically skinned

[AllenBW]

https://bugzilla.redhat.com/show_bug.cgi?id=1452396
https://www.pivotaltracker.com/story/show/145849913

TL;DR

• (in production) all skinned image now change when the source file in /images change
• bundling of assets is still possible by defining it by relative path
• the skinning process hasn't changed at all. still need to link to client/app/skin (for style sheets and the like).
• again, nothing changed with link, this pr essentially configures webpack so that we dynamically set asset urls in sass based on deployment environment, so when we're in production, we'll use the appropriate /images folder assets vs development
• the process for adding a new image that supports skinning is to add build the url in the .sass file as follows: url('#{$img-base-path}images/foo.(jpg|png|etc)') where foo is the file to be skinned and the extension is whatever checkout _navigation.sass for an example
• webpack output hasn't changed, though there is some work to be done there... (duplicate folders etc)

I can proudly say, no ux review is necessary as nothing visually changed 🤘 🌮 💃 (except those things that are supposed to change, ie skinned images).

Production build file structure before, the second one is after, just showing nothing changed

Screenshots (before/after) showing support for replacing contents of /ui/service/images on the fly

but before you look at these I need you to do a few things

1. look at the url, we're on a production url (NOT dev)
2. in the after shots, ignore the blue in the nav header, all this pr touches is how the images are loaded not the css
3. ok now your ready to now 👀's

before skinning

after skinning

[chriskacerguis]

@AllenBW do we still need the skinning dir? Also, should we have some docs on how to do a skin now?

Looking much 🌮

[AllenBW]

@chriskacerguis this doesn't change anything with skinning, other than now it works, still gotta do the whole link thing, will explain all in the pr before removing the wip

[miq-bot]

Checked commits AllenBW/manageiq-ui-service@9e9776e~...4f2edeb with ruby 2.2.6, rubocop 0.47.1, and haml-lint 0.20.0
0 files checked, 0 offenses detected
Everything looks fine. 🍰

[serenamarie125]

@AllenBW has the rebranding always changed the selection color ? 👀

[AllenBW]

@serenamarie125 this is still a wip, working on getting better screen shots, see the comment i made before the odd color ss, also mentioned there, i only replaced the images

[serenamarie125]

ok @AllenBW i thought it may be helpful to ask questions now rather than later. I'll hold off

[AllenBW]

@serenamarie125 we're good to go now, outta wip, feel free to ask away 🌮

[chriskacerguis]

Nice elegant fix. Much wow!

[serenamarie125]

I'm not sure if I'm providing information in the correct area, but the colors you are showing for the ManageIQ login screen here are incorrect

[AllenBW]

@serenamarie125 again, as I mentioned in the pr, the only thing that has been skinned are the images, the colors have unmodified (this pr doesn't touch them, so I didn't touch them in the ss)

no ux has changed here

[serenamarie125]

Understood @AllenBW, but there is still an issue, so I'm calling it out. @chriskacerguis can you follow up to make sure that the background color of the CloudForms Login screen is the correct color ?

[AllenBW]

@serenamarie125 If there is another issue this pr brought to light, it should be dealt with in another pr/pt.
The background color is not changed by this pr. Meaning there might very well be another color for production, (there actually is, its black ish) but it wasn't touched. Didn't change. And as such wasn't skinned for the example screen shots.

[serenamarie125]

Understood @AllenBW - I'm not requesting changes, just pointing out another issue.

[AllenBW]

@serenamarie125 gotcha, so I'm saying it's not another issue. Last time I checked the background colors changed for production, the images did not. This doesn't touch the former, only latter. As has been previously stated, the colors might be wrong, they were not changed in the ss, only the images were.

[AllenBW]

In fact, if you follow this pr to the bz, you'll see the background colors are correct, again this pr didn't change that, they'll still be correct.

[serenamarie125]

great thanks @AllenBW

[chriskacerguis]

@serenamarie125 going over the comments I wasn't 100% sure if you were good with this. If you are could you please add your approval? 😄

[serenamarie125]

Course sorry I read no UX approval needed 🤣

[serenamarie125]

LGTM!

[simaishi]

Fine backport details:

$ git log -1
commit f1510302c1def92108c581ab771c79489fafa1a9
Author: Chris Kacerguis <[email protected]>
Date:   Fri May 26 08:34:31 2017 -0500

    Merge pull request #790 from AllenBW/BZ/#145849913-live-skinning
    
    BZ#145849913 Allows for image assets to be dynamically skinned
    (cherry picked from commit 23c1ebbe6e9b1de5bca052702a2d5e5ca022132b)
    
    https://bugzilla.redhat.com/show_bug.cgi?id=1460755