Project

General

Profile

Actions

User story #8368

closed

Create multiple color schemas of the UI for the criticality of the environment

Added by Janos Mattyasovszky over 8 years ago. Updated over 6 years ago.

Status:
Rejected
Priority:
N/A
Category:
Web - UI & UX
UX impact:
Suggestion strength:
User visibility:
Effort required:
Name check:
Fix check:
Regression:

Description

Hi,

Imagine this scenario: You have a full blown Test -> Integration -> Production(s) kind of separation in your Rudder-Usage, and we could also think of a handful some sandbox-systems running around in the Lab, where you just play around. Could easily happen in bigger environments...

This would mean you have to deal at least with 3-5 UI-s, from which at least 3 are identical (Test/Int/Prod), and maybe have also some newer versions on some sandbox systems...

In this case there is almost NO WAY to differentiate between them, you always have to look at the URL to make sure you are in the correct Browser Tab (right, jooooooon42? :]).

This is also topped by having the same FavIcon for the browser tab for all your Rudder installations AND all the official Rudder Pages (at least Issue Tracker + Documentation). I once had a browser having about ~20 tabs open all with the Rudder ICON, try to find your own Rudder Environment there...

I think you can get the idea of it...

My suggestion is that you could make some different "shades" of your UI, so one could choose "red" for Production, "yellow" for Integration, and "green" for Test, and maybe some other color for sandboxes. This way when you have a browser window open, you would see on the first blink of the eye, OK, this is RED, make sure not to to break anything, or This is GREEN, this is where I work out my ideas.


Files

rudder_menu_prod.png (353 KB) rudder_menu_prod.png Rudder Menu - Prod Color Scheme Janos Mattyasovszky, 2016-06-02 21:16
rudder_menu_test.png (353 KB) rudder_menu_test.png Rudder Menu - Test Color Scheme Janos Mattyasovszky, 2016-06-02 21:16
rudder_menu_sandbox.png (353 KB) rudder_menu_sandbox.png Rudder Menu - Sandbox Color Scheme Janos Mattyasovszky, 2016-06-02 21:17

Related issues 2 (0 open2 closed)

Related to Rudder - User story #8359: Redesigning the main menuReleasedVincent MEMBRÉ2016-06-16Actions
Is duplicate of Branding - Architecture #6661: Customize Login frontend and Rudder color them to differentiate environmentsReleasedVincent MEMBRÉActions
Actions #1

Updated by Janos Mattyasovszky over 8 years ago

  • Related to Architecture #6661: Customize Login frontend and Rudder color them to differentiate environments added
Actions #2

Updated by Janos Mattyasovszky over 8 years ago

Actions #3

Updated by Nicolas CHARLES over 8 years ago

Thanks for the idea.
Where would be the shade, in your idea ? The menu, or something else ?

Actions #4

Updated by Janos Mattyasovszky over 8 years ago

I wrote "shade" in but was thinking about a generic color scheme, so you'd have a red / yellow / green color you could choose from, and that would be visible significantly.

That could manifest in having key elements of the UI represent that color, like buttons (I think twice before clicking on a red button than a green one), and/or the top menu bar's color (as seen in #8359).

Updated by Janos Mattyasovszky over 8 years ago

Adding some painbucketed ideas of different environments.

Prod:
Rudder Menu - Prod Color Scheme

Test:
Rudder Menu - Test Color Scheme

Sandbox:
Rudder Menu - Sandbox Color Scheme

Actions #6

Updated by Janos Mattyasovszky over 8 years ago

  • Description updated (diff)
Actions #7

Updated by Janos Mattyasovszky over 7 years ago

For those who might want to achieve the same on 4.1.x, where is a howto.

First, pick a color. Each HTML color name which has a "dark*" version is OK, like "red", "green", "blue".

# export COLOR=red

Then fetch the original CSS files and sed then through:

# cd /opt/rudder/share/load-page/files/
# wget http://localhost:8080/rudder/style/{login.css,AdminLTE/AdminLTE.min.css};
# sed -i " 
    s/#f08004/${COLOR}/ig;       # generic menu background color
    s/#e07a07/${COLOR}/ig;       # top left logo background color
    s/#FF8702/dark${COLOR}/ig;   # logo hower
    s/#D47001/dark${COLOR}/ig;   # menu button hower
" login.css AdminLTE.min.css

Create a custom apache config file to override some reverse-proxy settings to serve the modified files

# cat > /opt/rudder/etc/rudder-custom-ssl.conf <<<'
Alias             "/rudder/cache-4.1.5/style/login.css" /opt/rudder/share/load-page/files/login.css
ProxyPass         "/rudder/cache-4.1.5/style/login.css" "!" 
Alias             "/rudder/cache-4.1.5/style/AdminLTE/AdminLTE.min.css" /opt/rudder/share/load-page/files/AdminLTE.min.css
ProxyPass         "/rudder/cache-4.1.5/style/AdminLTE/AdminLTE.min.css" "!" 
';

Just make sure the cache-4.1.5 matches your current version, which you can get from the rudder-server-root package's version.

Actions #8

Updated by Benoît PECCATTE almost 7 years ago

  • Target version set to Ideas (not version specific)
Actions #9

Updated by François ARMAND over 6 years ago

  • Related to deleted (Architecture #6661: Customize Login frontend and Rudder color them to differentiate environments)
Actions #10

Updated by François ARMAND over 6 years ago

  • Is duplicate of Architecture #6661: Customize Login frontend and Rudder color them to differentiate environments added
Actions #11

Updated by François ARMAND over 6 years ago

  • Status changed from New to Rejected

I'm closing that one to keep #6661 as the main entry point for the last development around the branding plugin.

Actions

Also available in: Atom PDF