There's an issue when gin_toolbar and environment_indicator are used together, environment_indicator assigns a background color via an inline style to .toolbar-bar. The issue is that .toolbar-bar still occupies the top 39px of the screen and that is what environment_indicator is coloring:
https://drive.google.com/file/d/1qvW9epjmA22lbTPGJgKhu1qRDCfQqyuP/view (can't get embedded image to work)
Can gin_toolbar support environment_indicator to display in the gin_toolbar? OR should it be vice versa: https://www.drupal.org/project/environment_indicator/issues/3156863
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | Screenshot 2020-09-09 at 22.15.54.png | 27.65 KB | immoreel |
| #6 | Schermafdruk van 2020-07-20 17-34-11.png | 6.08 KB | johan den hollander |
Comments
Comment #2
adamjuran commentedComment #3
johan den hollander commentedFollowing
Comment #4
saschaeggiIdeas are welcomed here
Comment #5
adamjuran commented@saschaeggi, one possibility is moving the styles of "toolbar-menu-administration" to "toolbar-bar" (this is an over simplification as I've not looked carefully at the code). This would help solve the following:
a) the top 39px, whether colored by environment indicator or not, would still be clickable (currently they block part of our header menu when user is logged in)
b) the bg color that environment indicator is attempting to apply would be placed correctly (overlaying the gin toolbar) and then it would simply be a matter of setting some more "gin-like" colors for local, dev, prod, etc environments.
If you think this approach has merit, I'm happy to look more deeply and come up with a more precise plan!
Comment #6
johan den hollander commentedJust found out that:
$('#toolbar-bar', context).css('background-color', settings.environmentIndicator.bgColor);
$('#toolbar-bar .toolbar-item, #toolbar-bar .toolbar-item a', context).css('color', settings.environmentIndicator.fgColor);
These lines in environment indicator apply color to the links in toolbar items.
When using the horizontal or vertical modern toolbar this is making the toolbar items unreadable when environment foreground color is set to white...
Comment #7
johan den hollander commentedFor me the Legacy classic toolbar and Environment indicator work well together. Will stick to them for the time being.
Comment #8
immoreel commentedAdding a
top: 3pxto#toolbar-item-administration-trayin a custom module (my_project_tweaks comes to mind :) ) should give you a nice cool colored border on the top.The "back to the website" links can be fixed in the settings of environment indicator:
Comment #9
lexsoft commentedNice idea @immoreel!
I like the "
top: 3px" .Comment #10
saschaeggiLooks like a cool solution for the horizontal toolbar(s). Can you provide a patch for your changes @immoreel? I'll have a look at it then.
Also how we could integrate this for the vertical toolbar as well.
Cheers
Comment #11
jcnventura@saschaeggi. The idea in #8 would be add a "top: 3px" to the #toolbar-bar selector. This adds a thin line on the window top margin, with the right color.
However, this is really a color on the location of the legacy bar, which has been set to 0 height. The best way would be to write some Javascript to read the background color applied to the #toolbar-bar selector, and to add them to the following CSS for the gin toolbar:
.toolbar-menu-administration {border-left: 5px solid rgb(xx, yy, zz) }border-left like above for the vertical toolbar and border-top for the horizontal toolbar.
Comment #12
saschaeggiThis was recently fixed directly in environment_indicator with #3156863: Gin Toolbar support