TinyMCE Icons with borders are too busy/distracting

[fadingdust]

I've modified the css for TinyMCE to no longer have borders or backgrounds (flat, with just icons) and it looks 1000x better! It's less work to focus on what the icon is/does. Attached is a mock-up.

This is a suggestion to improve the already improved TinyMCE coloration-on-hover.

[fadingdust]

TinyMCe mockup with no borders or background

[nacin]

I'm intrigued. Can you post a patch?

[azaozz]

Looks interesting. Just remember that the TinyMCE buttons have five states: normal, disabled and active - these are set by adding/removing classes depending where in the editor you click, then normal:hover and active:hover.

[fadingdust]

This was a quick hack, I can svn co WP later this week & clean it up.

@azaozz, as far as I know, I've only knocked out the active state, so: (a) the hover is still showing the background-gradient as well as the icon-color, (b) the disabled is still greyed out , and (c) the active is the hover-state, held on mouse-out.

So basically, the same. Any suggestions? The disabled is a little weak for contrast at present, I'd almost prefer brighter/darker icons, but that's a matter of modding wp-includes/js/tinymce/themes/advanced/img/wpicons.png

[fadingdust]

Edit of ui.css and colors-fresh.css

[ocean90]

Please use the .dev files to show changes, the commitor will re-minify it afterwards.

[jane]

I like the borderless icons, would want the outlines to show on hover/active.

[helenyhou]

18141.diff​ shows outline/gradient on hover and reversed gradient on active.

Gray theme:

Blue theme:

[helenyhou]

Just realized that there's a change to the editor container border color in the blue theme that isn't related to the buttons in that patch. Sorry about that.

[trepmal]

I'm loving this.

Should the HTML editor buttons follow the same style? In fullscreen mode they match the Visual Editors buttons.

[trepmal]

I've been enlightened to some inherent problems with smooth text-based HTML buttons... But after playing with it a bit more, I noticed a couple other little things.

Something is missing for the font color dropdown - when you click to expand, but aren't hovering over it, only the arrow is outlined.

Also, without the borders (even though they're there on mouseover) I seem to click between the buttons more frequently - which isn't a big deal, except that the whole row then gets outlined.

[trepmal]

2 variations for HTML mode buttons (just some late-night brainstorming)

[trepmal]

"slightly updated HTML mode buttons"

[trepmal]

"more slightly updated HTML mode buttons"

[helenyhou]

I noticed the behavior of the arrows but it's currently that way, just less noticeable with all of the other gradients and box shadows going on. I'll see if I can refine it and remove the focus outline in another pass.

After more thought, I'm not convinced about changing the HTML buttons. The rounded corners match the other rounded corners in the admin area, and since it's not advisable to switch between Visual and HTML, I don't think they really need to match, even given the icons in fullscreen mode. Maybe they could actually look depressed when clicked, though, even though they don't have a stay-active state.

[helenyhou]

Focus outline, split button border

[helenyhou]

18141.2.diff​ removes the outline on focus and makes the split button dropdown button have a background when open so it looks less like a random border:

[helenyhou]

18141.3.diff​ is a refresh plus a little more refinement for blue. Looks like we can get rid of ed-bg.gif and ed-bg-vs.gif in favor of CSS3 gradients.

[helenyhou]

18141.4.diff​ adds some borders and gradients back in so that the visual grouping of split buttons with arrows is not lost. Borders/gradients are left off of the disabled buttons - seems to creates an even clearer distinction. Looks a little something like this:

[azaozz]

Replying to helenyhou:

These look nice, remind me a bit of the editor buttons in 3.0 - 3.1 (before they had box-shadow).

Was testing something like that too:

with border only around the "split-buttons".

If we are going with no border, even only for the "disabled" state, thinking we will need to remove the separators/grouping of the buttons as it looses it's meaning and looks out of place.

[helenyhou]

You're right - they do look similar to how they were previously. I started with just putting borders back but it looks unfinished somehow with them just being flat.

I went back to restart the CSS from its current state rather than continuing to build on the work-in-progress and came up with something much simpler - removing both box-shadows from the buttons and adding back the outer one on hover. Also still removing the background image in favor of a CSS3 gradient for the blue. 18141.5.diff​

[helenyhou]

Refresh, coding standards, better blue active state for buttons

[helenyhou]

Per ​today's UI chat, we're going to go for it to better match with #21598. lessbloat is taking a stab at the refresh for the moment, as the patch needs one badly.

[lessbloat]

18141.7.diff is my first pass at this:

Going to focus on getting the default colors right, then I'll add blue theme support.

Thoughts?

[helenyhou]

Talking to koopersmith has us thinking we might try for the borderless look again and work some spacing magic with the arrows to not lose the grouping in split buttons. See comment 8 and 18141.3.diff​. trepmal is going to take a stab for the moment.

[trepmal]

flattened buttons

[trepmal]

Still not sure of the best way to highlight a split-button when the dropdown is, well, down. Currently, the arrow remains highlighted but the main part of the button is flat/smooth - looks very odd to me.

[trepmal]

Trying to fix some split-button issues:

• Arrows hidden until either side of the split-button is :hover'd
• Main button and arrow highlighted when dropdown is active.

[trepmal]

The 'selected' state (when dropdown is active) is now depressed (like :active) instead of a flat color.

[lessbloat]

Looking really good Trepmal. :-)

A couple of things you may try:

• Lightening the entire background behind the buttons.
• A very faint border around the default drop downs (perhaps something like border 1px dotted #ccc). The gap to the right of "Paragraph" just looks out of place to me without mousing over it.
• An indented border for the depressed style (perhaps something like border-color: #999 #ccc #ccc #999;)
• The word "Paragraph" stands out to me at #000, maybe tone it down a tad.
• Double check the padding around the drop down arrow, on hover when the left border is showing, it looks 1px off.

[lessbloat]

In 18141.11.diff I addressed the items in #comment:25, and reworked colors-classic.css styles.

[lessbloat]

Couple of small tweaks in 18141.12.diff:

• Removed light border around drop downs.
• Removed drop down arrow from paragraph drop down, and reduced it's width.
• Forced other drop down arrows to show even when not hovering (to fix issue with what looked like extra padding-right).

We should probably remove the spacers in between the groups (e.g. between strikeout and bullet list). I can do it with CSS easily, but I'm sure there is a better way through the TinyMCE JS init or something. @azaozz thoughts?

[azaozz]

Yes, the spacers are part of $mce_buttons and $mce_buttons_2 in class-wp-editor.php. We can even remove them after the filters are applied as plugins can add them too.

[azaozz]

Perhaps we could try something like this for the split buttons:

[helenyhou]

nacin and I discussed making the dropdowns (like Paragraph/style) look like select elements. Basically, the way MS Word handles the difference. I think that might be the best way to go - it's not a button and shouldn't look the same as a button.

[helenyhou]

18141.13.diff​ makes the dropdowns (like the format selector) look more like selects. Also styles blue a bit better overall. Tested with added TinyMCE buttons/plugins - seems to work well.

[helenyhou]

Whoops, used a selector that was specific to the main content editor and didn't work for multiple wp_editors. 18141.14.diff​ instead.

[lessbloat]

Looking good Helenyhou!

The only thing that stands out to me now is the box-shadow on the paragraph dropdown. Seems a tad heavy at 2px, and have you tried using it just on the top border, or on the top and the left vs. on all sides?

I guess it just feels fuzzy against the crisp outlines of everything else.

[helenyhou]

Replying to lessbloat:

The only thing that stands out to me now is the box-shadow on the paragraph dropdown. Seems a tad heavy at 2px, and have you tried using it just on the top border, or on the top and the left vs. on all sides?

Didn't try it until now :) I think that works better. 18141.15.diff​

[lessbloat]

Replying to helenyhou:

I think that works better.

I'll second that. Looks good.

[fadingdust]

As the original reporter, this is the direction I was hoping for. Thanks all for taking this seriously.

[nacin]

Seeing dotted border outlines on the button active state in Chrome. helenyhou is on it.

[nacin]

In [22016]:

A calmer, less distracting style for the TinyMCE toolbar.

props helenyhou, lessbloat, trepmal, fadingdust.
fixes #18141.

[azaozz]

Ah, why all the !important in the css :( Don't think they are needed.

Also is the "split button" background supposed to be darker/different from the normal buttons?

Still thinking it looks better without any separators/spacers. When no borders they make the buttons around them look out of alignment or misplaced.

[helenyhou]

Replying to azaozz:

The answers are: bad CSS (too specific in color sheet and/or not specific enough in editor.css), and no, they're not supposed to be different. Fix away :) I think the lighter one (regular button) is preferable. Should probably check blue.

[azaozz]

In [22025]:

Fix background on split buttons, remove redundant !important, remove spacers, a little css cleanup, see #18141

[azaozz]

Replying to helenyhou:

Yes, thinking the lighter gradient looks better too. Also removed the spacers as per IRC chat.