Improve the display of trigger icon (pencil)

I've tested your patch on a mac :

on chrome 38.0.2125.101
on safari 7.0.6 (9537.78.2)
on firefox 32.0.3

every think works like charm :)

maybe someone should test too on a PC.

ok, i read your patch - its only about changing left/right and border-radius css attributes - i think it will work on PC too :)

you've shown me how to review a patch at Drupalcon Amsterdam, so i must be very careful since my mentor is watching :D

It looks ok. Only changes in CSS - shouldn't be a problem for testbot.

Committed and pushed to 8.0.x. Thanks!

Unfortunately this has caused a regression, which is even visible in the issue summary. Look at the top left part of the contextual links triggers of the original (https://www.drupal.org/files/issues/d8-trigger-icon.png) versus the new (https://www.drupal.org/files/issues/d8-trigger-icon-after.png). You'll see that it's almost impossible to discern. This looks plain broken.

This is probably because the border was removed.

Since tkoleary designed this, I'll ping him to take a look. For now though I've rolled the patch back because I'm concerned we may have introduced an accessibility regression here with the lack of contrast on the white background.

@thamas

I see what you mean about the shadow and I agree, but I have a different take on it. After living with this for some time since I initially designed it I have a few thoughts on the design as well as the current implementation.

• When edit mode is toggled on and there are several buttons on the screen the size of them creates too much visual noise
• The shadow effect does not really aid the separation from the background and the gradient+radius just makes it look "muddy". It also conflicts with the dropdown
• The square focus effect on a circular button fills my heart with grief

Webchick is correct that the change in your patch is an accessibility regression but I think we can be both more modern and more accessible if we simply remove the shado entirely and darken the border like so:

.contextual .trigger {
border: 1px solid #ccc;
/* box-shadow: 0px 3px 0px rgba(0,0,0,0.2); */
}

I think the other issues may be small enough to handle in this patch as well.

1 we can mitigate the excessive noise of too many buttons by reducing the size of them by 2px:

.contextual .trigger {
height: 26px !important;
width: 26px !important;
}

On hover we keep the dark grey icon:

.contextual .trigger:focus, .contextual .trigger:hover {
background-image: url(http://s348d2a336e2faea.s3.simplytest.me/core/misc/icons/787878/pencil.svg);
}

But on focus use the blue icon and remove the outline:

.contextual .trigger:focus, .contextual .trigger:hover {
background-image: url(http://s348d2a336e2faea.s3.simplytest.me/core/misc/icons/5181c6/pencil.svg);
outline: none;
}

With the above the changes

The normal state should change from this:

To this:

The hover state changes from this:

To this:

The Focussed state changes from this:

To this:

And the Pressed state changes from this:

To this:

Since this issue touches core CSS, I've checked Stark theme for regression. Everything works good.

Awesome. Nice work.

From a design and usabiltiy perspective I think it's RTBC.

@wim-leers code review?

Only one extremely silly nitpick before I can re-RTBC this:

+++ b/core/themes/bartik/css/style.css
@@ -1662,6 +1662,8 @@ div.password-suggestions {
+#footer-wrapper .contextual .trigger { border: none; }

We always put the statements on a new line.

Aha! :) I couldn't find any such example in Bartik's style.css, so I assumed that was the rule.

RTBC then — thanks!

Actually looked a bit weird to me too, so I just changed that on commit. ;)

Committed and pushed to 8.0.x. Thanks!

Updated to latest HEAD this morning (Wed 2014-Oct-15) - so this patch is in - and Quick Edit function has entirely vanished. No pencil icon in menu bar, no trigger icons.

• Checked that QuickEdit module is there and active under Extended.
• Logged in as Admin user 1 - so I have the necessary permissions.

Of course, I have no evidence that this patch is the one responsible! But it is the only one I can see that has been committed since Monday (when it last worked) that touches QuickEdit.

Hm. Quickedit is working for me in the latest 8.0.x branch (at least in Chrome). Can you provide more info on what's broken for you? Browser? Errors in JS console? etc.

I did a re-install today with the latest HEAD and that fixed the problem. Pencil icons are back and Quickedit works.

Again, no idea what changed!

I bet it was the browser cache :)