Problem/Motivation

During the usability study, some participants did not realise the 'manage' tool tab was open by default. The effect is very subtle. Gradients are also very rare in the admin interface, so the new styling should follow the Seven style guide

Proposed resolution

Design experimentation needed

Remaining tasks

Design
Patch
Test

User interface changes

Toolbar tab active state

API changes

None.

Data model changes

None.

CommentFileSizeAuthor
#5 invert_active_toolbar-2523062-5.patch6.45 KBmerilainen
#4 contextual.png4.34 KBmerilainen
#4 user.png19.96 KBmerilainen
#4 shortcuts.png20.16 KBmerilainen
#4 manage.png19.9 KBmerilainen
#4 invert_active_toolbar-2523062-4.patch5.79 KBmerilainen
#3 Screen Shot 2015-08-13 at 14.24.47.jpg365.2 KBlewisnyman
#3 Screen Shot 2015-08-13 at 14.22.23.jpg135.92 KBlewisnyman
#3 Screen Shot 2015-08-13 at 14.21.58.jpg361.56 KBlewisnyman
#2 lighter-active-tab.png60.43 KBmerilainen
#2 lighter_active_toolbar_tab-2523062-2.patch774 bytesmerilainen

Comments

amateescu’s picture

amateescu commented
Component: entity_reference.module » toolbar.module

Moving to the right component :)

merilainen’s picture

merilainen commented
Status: Active » Needs review
StatusFileSize
new lighter_active_toolbar_tab-2523062-2.patch774 bytes
new lighter-active-tab.png60.43 KB

Simply making the background gradient lighter helps a lot.

lewisnyman’s picture

lewisnyman
he/him
commented
Issue summary: View changes
StatusFileSize
new Screen Shot 2015-08-13 at 14.21.58.jpg361.56 KB
new Screen Shot 2015-08-13 at 14.22.23.jpg135.92 KB
new Screen Shot 2015-08-13 at 14.24.47.jpg365.2 KB

I think that we are going to run into text color contrast issues with this solution. If we leave the text white then it limits how much contrast we can have between the active state and the regular state.

Other options would be to invert the colors or use a different highlight color:

I prefer the inverted colors as it creates a relationship between the active tab and the toolbar tray below it.

merilainen’s picture

merilainen commented
StatusFileSize
new invert_active_toolbar-2523062-4.patch5.79 KB
new manage.png19.9 KB
new shortcuts.png20.16 KB
new user.png19.96 KB
new contextual.png4.34 KB

I like the inverted colors approach also. It will make the patch a lot more complicated, because I had to add new inverted svg icons not only for toolbar module, but also shortcut, user and contextual modules. Attached screenshots of the changes.

merilainen’s picture

merilainen commented
StatusFileSize
new invert_active_toolbar-2523062-5.patch6.45 KB

Whoops, the active edit link background changed to blue after clicking anywhere, fixed that.

lewisnyman’s picture

lewisnyman
he/him
commented
Status: Needs review » Needs work

I think this looks pretty good. I noticed that the toolbar background color is not actually pure black #000. It's #0f0f0f

Two other comments

+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -47,8 +47,8 @@
+  color: #000000;
+  background-color: #ffffff;

Where possible, we use the three character color values. https://www.drupal.org/node/1887862#properties

Bojhan’s picture

Bojhan commented

I am wondering if this is actually going to solve the issue. Isn't it more that they don't really look like tabs but are? We don't have issues like this with the tabs on admin pages.

merilainen’s picture

merilainen commented
Status: Needs work » Needs review

Even if the background isn't "pure black", I think the font can be exactly pure black. Does it make any sense to create a svg icon for fifty shades of gray, bloating the curiously named "misc" folder even more?

When it comes to the three character values vs. six char values, I was trying to follow the convention in the same file. There are no three char values there.

Are we trying to get Drupal8 out someday, or fine tune it until perfection?

Changing back to Needs review, because I disagree.

lewisnyman’s picture

lewisnyman
he/him
commented

I am wondering if this is actually going to solve the issue. Isn't it more that they don't really look like tabs but are?

My first thought went to contrast because the eye tracking seemed to completely ignore the area.

lewisnyman’s picture

lewisnyman
he/him
commented
Status: Needs review » Needs work

Changing back to Needs review, because I disagree.

We have agreed standards for this, my opinion or your opinion aren't worth much compared to an agreed consensus. Setting back to needs work.

mgifford’s picture

mgifford
he/him
Primary language English
commented

Just following up on #9 - @Bojhan if contrast isn't enough, what else should we throw at this?

The last submitted patch, 5: invert_active_toolbar-2523062-5.patch, failed testing.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

tkoleary’s picture

tkoleary commented
Status: Needs work » Closed (duplicate)

This is addressed by settings tray module.