Consistent TinyMCE icons

[empireoflight]

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

[empireoflight]

Proposed new tinymce icons

[JohnONolan]

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.

[nacin]

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.

[empireoflight]

Good points; what if I add color:
​http://field2.com/newtinymceicons_color.png

[JohnONolan]

Oh wow, those look fantastic!

[ryan]

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

[jeremyclarke]

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.

[westi]

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

[ocean90]

WOW, great!

[saracannon]

+1 for the alt full screen.

[spocke]

@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.

[chexee]

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

[azaozz]

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.

[ocean90]

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

[chexee]

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.

[nacin]

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

[azaozz]

@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.

[ocean90]

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.

[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!

[nacin]

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.

[azaozz]

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).

[chexee]

Lighter icon CSS

[chexee]

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.

[ocean90]

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

[chexee]

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

[chexee]

Lighter Icon CSS, including Blue theme

[chexee]

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.

[azaozz]

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

[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. 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).

[chexee]

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?

[azaozz]

Replying to chexee:

I'm thinking across the board.

[chexee]

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

[ocean90]

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

[empireoflight]

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

[empireoflight]

Icons in gif format

[empireoflight]

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.

[empireoflight]

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

[azaozz]

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).

[empireoflight]

Here they are in png format with subtle glows

[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.

[empireoflight]

Icons in grey

[empireoflight]

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.

[chexee]

Updated to be compat. with latest trunk

[chexee]

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

[azaozz]

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.

[azaozz]

In [17842]:

Add the new grey TinyMCE icons, see #15986

[azaozz]

In [17843]:

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

[chexee]

spite with colored hover states

[chexee]

adds colored hover states to icons with colored versions

[chexee]

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.

[chexee]

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

[koopersmith]

In [17868]:

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

[koopersmith]

In [17890]:

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

[greuben]

Related #17469

[azaozz]

In [17961]:

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

[azaozz]

In [17972]:

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

[empireoflight]

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