#15986 closed enhancement (fixed)
Consistent TinyMCE icons
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (59)
#1
@
10 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.
#2
@
10 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.
#3
@
10 years ago
Good points; what if I add color:
http://field2.com/newtinymceicons_color.png
#5
follow-up:
↓ 7
@
10 years ago
The readability of these is so much better. I like them with or without color.
#6
@
10 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.
#7
in reply to:
↑ 5
@
10 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
#10
@
10 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.
#12
follow-up:
↓ 13
@
10 years ago
These look great. empireoflight: are you writing the patch for this?
#13
in reply to:
↑ 12
@
10 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.
#14
@
10 years ago
- Keywords 3.2-early removed
empireoflight, do you want to give us the image so that it could be replaced?
@
10 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.
#15
@
10 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
#16
@
10 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.
#17
@
10 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.
#18
follow-ups:
↓ 19
↓ 20
@
10 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!
#19
in reply to:
↑ 18
@
10 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.
#20
in reply to:
↑ 18
@
10 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).
#21
@
10 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.
#22
@
10 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
#23
@
10 years ago
gah, thanks for the critique. not used to doing a few patches at once. will revise.
#24
@
10 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.
#26
follow-up:
↓ 27
@
10 years ago
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).
#27
in reply to:
↑ 26
;
follow-up:
↓ 28
@
10 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?
#29
@
10 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
#30
@
10 years ago
chexee, you should do a new patch fron trunk version. Parts of your patch are already committed.
#31
@
10 years ago
Ill be posting an updated icon file today, hopefully that will resolve this issue
#32
follow-up:
↓ 34
@
10 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.
#33
@
10 years ago
Another weird thing is that the spellcheck abc icon appears twice...I jsut left it in.
#34
in reply to:
↑ 32
@
10 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).
#35
follow-up:
↓ 36
@
10 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.
#36
in reply to:
↑ 35
@
10 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.
#37
@
10 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
#38
@
10 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.
#41
@
10 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.
Proposed new tinymce icons