WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 19 months ago

#18141 closed task (blessed) (fixed)

TinyMCE Icons with borders are too busy/distracting

Reported by: fadingdust Owned by: azaozz
Milestone: 3.5 Priority: normal
Severity: trivial Version: 3.2.1
Component: Graphic Design Keywords: needs-patch
Focuses: Cc:

Description

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.

Attachments (31)

Picture 6.png (8.6 KB) - added by fadingdust 3 years ago.
TinyMCe mockup with no borders or background
wp-mce-flat.diff (93.0 KB) - added by fadingdust 3 years ago.
Edit of ui.css and colors-fresh.css
18141.diff (12.5 KB) - added by helenyhou 2 years ago.
tinymce-buttons-mockup.jpg (45.7 KB) - added by trepmal 2 years ago.
2 variations for HTML mode buttons (just some late-night brainstorming)
18141-quicktags1.diff (1.1 KB) - added by trepmal 2 years ago.
"slightly updated HTML mode buttons"
18141-quicktags2.diff (1.2 KB) - added by trepmal 2 years ago.
"more slightly updated HTML mode buttons"
18141.2.diff (12.7 KB) - added by helenyhou 2 years ago.
Focus outline, split button border
18141.3.diff (14.2 KB) - added by helenyhou 2 years ago.
18141.4.diff (19.6 KB) - added by helenyhou 2 years ago.
mce-menu-flat.jpg (16.3 KB) - added by azaozz 2 years ago.
18141.5.diff (6.2 KB) - added by helenyhou 2 years ago.
18141.6.diff (7.4 KB) - added by helenyhou 22 months ago.
Refresh, coding standards, better blue active state for buttons
18141.7.diff (10.3 KB) - added by lessbloat 20 months ago.
18141.8.diff (13.4 KB) - added by trepmal 20 months ago.
flattened buttons
18141.9.diff (14.1 KB) - added by trepmal 20 months ago.
18141.10.diff (18.4 KB) - added by trepmal 20 months ago.
18141.11.diff (27.1 KB) - added by lessbloat 19 months ago.
18141.12.diff (27.7 KB) - added by lessbloat 19 months ago.
remove-spacers.patch (2.6 KB) - added by azaozz 19 months ago.
mce-toolbar.png (8.4 KB) - added by azaozz 19 months ago.
editor-buttons-2.png (7.0 KB) - added by azaozz 19 months ago.
tinymce-flat.png (23.0 KB) - added by helenyhou 19 months ago.
18141.13.diff (29.0 KB) - added by helenyhou 19 months ago.
18141.14.diff (28.9 KB) - added by helenyhou 19 months ago.
18141.15.diff (29.0 KB) - added by helenyhou 19 months ago.
Screen Shot 2012-09-26 at 11.32.24 AM.png (20.9 KB) - added by helenyhou 19 months ago.
18141.16.diff (29.0 KB) - added by helenyhou 19 months ago.
18141.17.diff (29.1 KB) - added by helenyhou 19 months ago.
ed-1.png (5.1 KB) - added by azaozz 19 months ago.
ed-2.png (8.4 KB) - added by azaozz 19 months ago.
ed-3.png (8.3 KB) - added by azaozz 19 months ago.

Download all attachments as: .zip

Change History (74)

fadingdust3 years ago

TinyMCe mockup with no borders or background

comment:1 nacin3 years ago

I'm intrigued. Can you post a patch?

comment:2 azaozz3 years ago

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.

comment:3 fadingdust3 years ago

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

fadingdust3 years ago

Edit of ui.css and colors-fresh.css

comment:4 ocean903 years ago

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

comment:5 ocean903 years ago

  • Keywords needs-refresh added

comment:6 azaozz3 years ago

  • Owner set to azaozz
  • Status changed from new to reviewing

comment:7 jane2 years ago

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

helenyhou2 years ago

comment:8 helenyhou2 years ago

  • Keywords has-patch added; needs-refresh removed

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

Gray theme:

http://f.cl.ly/items/0I293D2D021h2q0G1q0F/tinymce-flat-buttons.png

Blue theme:

http://f.cl.ly/items/0A2j120638280F1W0r1Y/tinymce-flat-buttons-blue.png

comment:9 helenyhou2 years ago

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.

comment:10 trepmal2 years ago

I'm loving this.

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

comment:11 trepmal2 years ago

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.

http://cl.ly/CklG/tinymce-color-picker.png

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.

http://cl.ly/CkcT/tinymce-outline.png

trepmal2 years ago

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

trepmal2 years ago

"slightly updated HTML mode buttons"

trepmal2 years ago

"more slightly updated HTML mode buttons"

comment:12 helenyhou2 years ago

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.

helenyhou2 years ago

Focus outline, split button border

comment:13 helenyhou2 years ago

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:

http://f.cl.ly/items/2M2O0M1P2u1y0d102C1x/Screen%20Shot%202011-12-21%20at%2012.03.12%20AM.png

comment:14 helenyhou2 years ago

  • Keywords needs-refresh added

helenyhou2 years ago

comment:15 helenyhou2 years ago

  • Keywords needs-refresh removed

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.

helenyhou2 years ago

comment:16 follow-up: helenyhou2 years ago

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:

http://f.cl.ly/items/3I3a1o2g2S0d433b3928/tinymce-borders.png

azaozz2 years ago

comment:17 in reply to: ↑ 16 azaozz2 years ago

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.

comment:18 helenyhou2 years ago

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

http://f.cl.ly/items/3a0M2o1p0K3F3T0L1d23/tinymce-simplified.png

helenyhou2 years ago

helenyhou22 months ago

Refresh, coding standards, better blue active state for buttons

comment:19 helenyhou20 months ago

  • Keywords needs-refresh added
  • Milestone changed from Awaiting Review to 3.5

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.

lessbloat20 months ago

comment:20 lessbloat20 months ago

18141.7.diff is my first pass at this:

http://f.cl.ly/items/1T0h0B2N3R2z0p2Q2T1N/tinymce-icons.jpg

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

Thoughts?

comment:21 helenyhou20 months ago

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.

trepmal20 months ago

flattened buttons

comment:22 trepmal20 months ago

http://cl.ly/J710/flattened-buttons-18141.8.png

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.

trepmal20 months ago

comment:23 trepmal20 months ago

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.

http://cl.ly/JC9k/flattened-buttons-gap.png
http://cl.ly/JDDl/flattened-buttons-dropdowns.png

trepmal20 months ago

comment:24 trepmal20 months ago

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

comment:25 lessbloat20 months ago

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.

lessbloat19 months ago

comment:26 lessbloat19 months ago

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

lessbloat19 months ago

comment:27 lessbloat19 months ago

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?

comment:28 azaozz19 months ago

Yes, the spacers are part of the $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.

Version 0, edited 19 months ago by azaozz (next)

azaozz19 months ago

azaozz19 months ago

comment:29 azaozz19 months ago

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

comment:30 helenyhou19 months ago

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.

azaozz19 months ago

comment:31 nacin19 months ago

  • Type changed from enhancement to task (blessed)

helenyhou19 months ago

helenyhou19 months ago

comment:32 helenyhou19 months ago

  • Keywords needs-refresh removed

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.

http://core.trac.wordpress.org/raw-attachment/ticket/18141/tinymce-flat.png

comment:33 helenyhou19 months ago

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

helenyhou19 months ago

comment:34 follow-up: lessbloat19 months ago

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.

helenyhou19 months ago

comment:35 in reply to: ↑ 34 ; follow-up: helenyhou19 months ago

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

http://core.trac.wordpress.org/raw-attachment/ticket/18141/Screen%20Shot%202012-09-26%20at%2011.32.24%20AM.png

comment:36 in reply to: ↑ 35 lessbloat19 months ago

Replying to helenyhou:

I think that works better.

I'll second that. Looks good.

comment:37 fadingdust19 months ago

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

comment:38 nacin19 months ago

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

helenyhou19 months ago

helenyhou19 months ago

comment:39 nacin19 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In [22016]:

A calmer, less distracting style for the TinyMCE toolbar.

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

azaozz19 months ago

azaozz19 months ago

azaozz19 months ago

comment:40 follow-up: azaozz19 months ago

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.



comment:41 in reply to: ↑ 40 ; follow-up: helenyhou19 months ago

  • Keywords needs-patch added; has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

comment:42 azaozz19 months ago

In [22025]:

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

comment:43 in reply to: ↑ 41 azaozz19 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

Replying to helenyhou:

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

Note: See TracTickets for help on using tickets.