WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#15986 closed enhancement (fixed)

Consistent TinyMCE icons

Reported by: empireoflight Owned by: empireoflight
Milestone: 3.2 Priority: normal
Severity: normal Version: 3.0.3
Component: UI Keywords: ui-feedback
Focuses: Cc:

Description

I think the existing tinymce icons make the design of the Wordpress admin area look inconsistent; here's an attempt to fix that. I tried to use the existing symbole, but one that I thought could use a rediesign is the toggle full screen mode one, so I added that above the existing one for feedback.
You can see the proposed icons, above the existing ones, at http://field2.com/newtinymceicons.png

Attachments (12)

newtinymceicons.png (125.5 KB) - added by empireoflight 3 years ago.
Proposed new tinymce icons
tinymce-icons.gif (9.8 KB) - added by chexee 3 years ago.
If this still wants to get into 3.2, I made a sprite for these from the image posted. Would this work? I can modify together some on-states soon if so.
15986.test.patch (5.7 KB) - added by ocean90 3 years ago.
15986.test3.patch (17.5 KB) - added by chexee 3 years ago.
Lighter icon CSS
15986.light.diff (24.6 KB) - added by chexee 3 years ago.
Lighter Icon CSS, including Blue theme
tinymceicons.gif (13.9 KB) - added by empireoflight 3 years ago.
Icons in gif format
tinymceicons.png (28.0 KB) - added by empireoflight 3 years ago.
Here they are in png format with subtle glows
tinymceicons_grey.png (27.3 KB) - added by empireoflight 3 years ago.
Icons in grey
15986.light.2.diff (9.5 KB) - added by chexee 3 years ago.
Updated to be compat. with latest trunk
wpicons.png (25.5 KB) - added by chexee 3 years ago.
spite with colored hover states
15986.colored-hover.diff (5.4 KB) - added by chexee 3 years ago.
adds colored hover states to icons with colored versions
15986.tinymce.css.cleanup.diff (7.2 KB) - added by chexee 3 years ago.
Removes unnecessary !importants and some lines with empty bracket statements. Makes Fallback colors more accurate.

Download all attachments as: .zip

Change History (59)

empireoflight3 years ago

Proposed new tinymce icons

comment:1 JohnONolan3 years ago

  • Component changed from Administration to UI
  • Keywords ui-feedback early-3.2 added; icons tinymce removed
  • Milestone changed from Awaiting Review to Future Release

Personally I'm unsure of this, the colour of the icons play a big part in quick recognition for me. I think no colour would slow me down.

comment:2 nacin3 years ago

  • Keywords 3.2-early added; early-3.2 removed

I like the new style in the sense that the icons are generally much clearer. I agree with John though that color can be desired here.

comment:4 JohnONolan3 years ago

Oh wow, those look fantastic!

comment:5 follow-up: ryan3 years ago

The readability of these is so much better. I like them with or without color.

comment:6 jeremyclarke3 years ago

  • Cc jer@… added

I love your new color versions of the icons. They match the sidebar icons much better than the old icons while remaining familiar for people used to the old style. The only thing that isn't perfect might be the "white shadow" effect. It feels kind of intense on buttons with lots of thin lines like justification and lists. Either way I think they are an improvement, good work!

I agree with the others about using the color versions. They are useful when scanning the rows of buttons. There are a lot of buttons close together in the visual editor, many with similar content, unlike in other parts of the UI like the sidebar where they are spread out. The default should still be to use color versions of icons. A filter-setting to use B&w versions might make sense, but maintaining two sets of images probably isn't worth it.

RE: Fullscreen: I definitely think the arrows-pointing-out icon makes much more sense than the current blue terminal one. The blue square never made sense to me as a fullscreen icon and I don't think I've ever remembered what it does without clicking it to see. Arrows-pointing-out is universal to many media applications and even people used to the blue one will probably understand the arrows one right away.

comment:7 in reply to: ↑ 5 westi3 years ago

Replying to ryan:

The readability of these is so much better. I like them with or without color.

Same here - they are so much more readable

I like the alternative for the full screen icon too

comment:8 ocean903 years ago

WOW, great!

comment:9 saracannon3 years ago

  • Cc sararcannon@… added

+1 for the alt full screen.

comment:10 spocke3 years ago

@empireoflight: I'm one of the main developers of TinyMCE. Could you get back to me regarding the icons and the possibility for us to possible make them royalty free and include them in future versions of our product and WP. Drop me a mail to spocke (at) moxiecode (dot) com.

comment:11 nacin3 years ago

  • Milestone changed from Future Release to 3.2

comment:12 follow-up: chexee3 years ago

These look great. empireoflight: are you writing the patch for this?

comment:13 in reply to: ↑ 12 azaozz3 years ago

Replying to chexee: There's no need for a patch. The new icons seem to be exactly the same size as the current, so we just need to replace the image.

comment:14 ocean903 years ago

  • Keywords 3.2-early removed

empireoflight, do you want to give us the image so that it could be replaced?

chexee3 years ago

If this still wants to get into 3.2, I made a sprite for these from the image posted. Would this work? I can modify together some on-states soon if so.

comment:15 nacin3 years ago

Hey chexee: Don't use attachment descriptions as comments; they don't get emailed or counted as a comment. Just post a new comment.

The sprite needs to match this one: http://core.trac.wordpress.org/browser/trunk/wp-includes/js/tinymce/themes/advanced/img/icons.gif?rev=15683

comment:16 azaozz3 years ago

@chexee the original icons don't include background and border. The on, off and disabled states are set by TinyMCE by adding/removing CSS classes.

We can make these work too but will need to change the styling (we probably can play with the opacity and background color). However some plugins add buttons there too so we will need to keep the current styles as well and change them only for buttons whose icons are in this sprite.

ocean903 years ago

comment:17 ocean903 years ago

In 15986.test.patch I have tried to adopt the background from empireoflight's mockup. Result: http://d.pr/kSWP

Maybe someone want to continue it.

comment:18 follow-ups: empireoflight3 years ago

Hey, sorry I got sidetracked from this. Looks like there are tons more to do according to nacin's link-I'll get to work!

comment:19 in reply to: ↑ 18 nacin3 years ago

Replying to empireoflight:

Hey, sorry I got sidetracked from this. Looks like there are tons more to do according to nacin's link-I'll get to work!

Ben, the TinyMCE guys will need those (as they're looking for these to be included in TinyMCE, see spocke's comment above) but if you can just overlay your icons over the ones in use first, we can get those into WordPress core now. Don't want to over-burden you with all those other icons just yet.

comment:20 in reply to: ↑ 18 azaozz3 years ago

Replying to empireoflight:

I second what @nacin said. No need to do all the TinyMCE icons at this point, just replace the icons that WordPress uses in the sprite http://core.trac.wordpress.org/browser/trunk/wp-includes/js/tinymce/themes/advanced/img/icons.gif (you can convert it to png if you need to).

I think the TinyMCE team has plans to replace all icons too but it would be best if you get in touch with @spocke (he is the lead developer of TinyMCE).

Last edited 3 years ago by azaozz (previous) (diff)

chexee3 years ago

Lighter icon CSS

comment:21 chexee3 years ago

Was writing up the CSS for Ben's icons and as I was looking at the post screen, I agree with @johnjamesjacoby that the dark borders bring a little bit too much attention to the buttons. It also makes it a bit more difficult to make on-states stand out.

These are lighter, a little more like keyboard keys.

Screenshot: http://cl.ly/0V3Y3E3C2z423Z1M0j1a

Wrote a patch incorporating normal, hover, and active states with darker borders and gradient alternates for each state.

comment:22 ocean903 years ago

chexee, screenshot looks nice, will test it later in more detail.
Some points to your patch:

  • Use tabs for indents, there are some whitespaces instead of tabs.
  • box-shadow and border-*-radius doesn't need the -o prefix for Opera
  • your changes in wp-admin.dev.css are wrong here, think they belong to #17184

comment:23 chexee3 years ago

gah, thanks for the critique. not used to doing a few patches at once. will revise.

chexee3 years ago

Lighter Icon CSS, including Blue theme

comment:24 chexee3 years ago

15986.light.diff implements the light icon CSS show here: http://cl.ly/270u1y0c2G2o1S022b0n

It also includes light icon CSS for the blue theme and moves all the declarations involving color to the color stylesheets and out of the TinyMCE theme stylesheet.

Tried to go in and fix any tab inconsistencies, but let me know if I missed any.

comment:25 azaozz3 years ago

(In [17768]) Updated styles for the Visual editor buttons, props chexee, see #15986

comment:26 follow-up: azaozz3 years ago

Added 15985.light.diff in anticipation of the new icons. Had to change the disabled button's icon opacity to 0.4 as they were almost invisible. Perhaps we can have a bit lighter buttons background. Keep in mind that slight color variations look differently on different LCD screens (the most common - TN vs all the rest that are the better quality).

Version 0, edited 3 years ago by azaozz (next)

comment:27 in reply to: ↑ 26 ; follow-up: chexee3 years ago

Replying to azaozz:

Added 15986.light.diff in anticipation of the new icons. Had to change the disabled button's icon opacity to 0.4 as they were almost invisible. Perhaps we can have a bit lighter buttons background.

Lighter only on the disabled buttons or across the board?

comment:28 in reply to: ↑ 27 azaozz3 years ago

Replying to chexee:

I'm thinking across the board.

comment:29 chexee3 years ago

15986.light.2.diff lightens the buttons more as discussed with azaozz. Also added darker border colors and more contrast to active and hover states.

Screenshot: http://cl.ly/3t0Y1W0b3i1x0T1E3k08

comment:30 ocean903 years ago

chexee, you should do a new patch fron trunk version. Parts of your patch are already committed.

comment:31 empireoflight3 years ago

Ill be posting an updated icon file today, hopefully that will resolve this issue

empireoflight3 years ago

Icons in gif format

comment:32 follow-up: empireoflight3 years ago

I had to get rid of the outer glows, which make them pop a little more, since the sprite is a gif. If it were a png, I could leave them in.
Also, I wasn't sure what to do with the kitchen sink icon; it's not in the original sprite. I stuck it in the upper left corner of the sprite.

comment:33 empireoflight3 years ago

Another weird thing is that the spellcheck abc icon appears twice...I jsut left it in.

comment:34 in reply to: ↑ 32 azaozz3 years ago

Replying to empireoflight:

You can convert the sprite to png (transparent gif to transparent png is a simple "Save file as..." conversion, right?). We are dropping support for IE6 and transparent PNGs would work well everywhere. We will edit the CSS to use the png file.

Sure, that's a good spot for the Kitchen Sink icon.

Yes, there are two TinyMCE plugins that add a spellchecker: one is using a server backend and the other is only for IE when the iespell plugin is installed there, so I guess they put two identical icons to use for the two different buttons (when both are enabled).

empireoflight3 years ago

Here they are in png format with subtle glows

comment:35 follow-up: jane3 years ago

@empireoflight: I thought we were going with the grayscale ones you did before at beginning of ticket, with color only used on hover/selection? Loved the gray ones. Made a big difference in the overall feel of a calm post editor.

empireoflight3 years ago

Icons in grey

comment:36 in reply to: ↑ 35 empireoflight3 years ago

Jane, it sounded like the color ones were favorable based on earlier comments...? I did them in grey (gray? I never know how to spell it) as well, so we can use either one.

Replying to jane:

@empireoflight: I thought we were going with the grayscale ones you did before at beginning of ticket, with color only used on hover/selection? Loved the gray ones. Made a big difference in the overall feel of a calm post editor.

chexee3 years ago

Updated to be compat. with latest trunk

comment:37 chexee3 years ago

Updated the patch to be compatible with the latest trunk. Updated the blue theme to be lighter as well. Switched from solid background on active to reversed gradients.

Screenshot: http://cl.ly/0J0F36193N2N1C0E3L23

comment:38 azaozz3 years ago

Tested with both tinymceicons.png and tinymceicons_grey.png, perhaps we can use the color icons on hover/active?

We can also define a different sprite for only the buttons we use, so it's possible to have only the new icons in a separate sprite (perhaps in two rows: top = grey, bottom = color) if we are going to use two icons per button.

Last edited 3 years ago by azaozz (previous) (diff)

comment:39 azaozz3 years ago

In [17842]:

Add the new grey TinyMCE icons, see #15986

comment:40 azaozz3 years ago

In [17843]:

Lighter background for the TinyMCE buttons, props chexee, see #15986

chexee3 years ago

spite with colored hover states

chexee3 years ago

adds colored hover states to icons with colored versions

comment:41 chexee3 years ago

wpicons.png incorporates the colored icons Ben made into the current sprite. Only includes one instance of icons with no colored version. Also ran it through Smushit to lose a few kb.

15986.colored-hover.diff adds hover states to icons that have colored versions.

chexee3 years ago

Removes unnecessary !importants and some lines with empty bracket statements. Makes Fallback colors more accurate.

comment:42 koopersmith3 years ago

In [17868]:

Editor toolbar/textarea styling. Props chexee. see #17324, #15986.

comment:43 koopersmith3 years ago

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

In [17890]:

Add colored hover/active state to tinymce icons. props chexee, empireoflight. fixes #15986.

comment:45 azaozz3 years ago

In [17961]:

New sprite for the TinyMCE buttons, props empireoflight, props saracannon, see #15986

comment:46 follow-up: azaozz3 years ago

In [17972]:

Add the missing icon to the TinyMCE buttons, props empireoflight, props saracannon, see #15986

comment:47 in reply to: ↑ 46 empireoflight3 years ago

Andrew, keep in mind the new icons are based on a 16x16 pixel size, not 20x20 as I believe the css in that ticket is using.

Replying to azaozz:

In [17972]:

Add the missing icon to the TinyMCE buttons, props empireoflight, props saracannon, see #15986

Note: See TracTickets for help on using tickets.