Themes

 
 
Picture of Jason Fowler
Re: new wysiwyg editor for moodle
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQ

It's a work in progress, and still has a lot of rough edges, but this is what the new TinyMCE theme looks like at the present.

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: new wysiwyg editor for moodle
Group Particularly helpful Moodlers

Looks much better than yesterday (after the first shock) with some borders and grouping smiling

Are mobiles or small screen devices using the same scale or is this a zoomed screenshot?

 

 
Average of ratings: -
Picture of Jason Fowler
Re: new wysiwyg editor for moodle
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQ

That's it at full size, no zoom. We are using one size for all screen types, with the intent of making it consistent and touch screen friendly.

 
Average of ratings: -
Picture of Paul Nicholls
Re: new wysiwyg editor for moodle
Group DevelopersGroup Particularly helpful Moodlers

Although it's certainly better than the grey icons sitting on a grey background, the fact that the icons are still grey makes my brain see them all as being disabled.  If I look more closely, I then start to notice the even lighter grey icons and wonder whether they're all disabled or just the lighter ones, but there's not enough visual difference to immediately tell "that's disabled" vs "that's enabled".

If it's not already on the cards, I'd suggest making the "enabled" state substantially darker - and increasing the contrast in the "background colour" (at least, I assume that's what it is) button would also be helpful, as at a glance it looks like a box with feet.  The TinyMCE4 basic demo uses much darker icons (though still not black - but close enough that they stand out as being active).  In fact, the TinyMCE4 demo's "disabled" state is virtually indistinguishable from the "enabled" state in your screenshots!

 
Average of ratings: -
Picture of Jason Fowler
Re: new wysiwyg editor for moodle
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQ

Paul, that "box with feet" for the font highlight button is a background that changes colour along with the choices that the user makes. So if the font has a red highlight, the background will be red.

 
Average of ratings: -
Picture of Paul Nicholls
Re: new wysiwyg editor for moodle
Group DevelopersGroup Particularly helpful Moodlers

Ah.  The "A" should probably have a border, then, so it stands out against similar colours - otherwise somebody could choose the exact same colour and it'd actually become a box wit feet!  (Unless the "A" automatically changes colour if the BG colour gets close enough, in which case that "close enough" determination needs to be tweaked...)

 
Average of ratings: -
Picture of Jason Fowler
Re: new wysiwyg editor for moodle
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQ

Ah, great suggestion, I will talk to the designer about it, and get that sorted!

 
Average of ratings: -
Picture of Jason Fowler
Re: new wysiwyg editor for moodle
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQ

Paul, after your suggestion about the box with feet, we went back and had a look at it, and this is what we have now. Most of the rough edges have been smoothed over, and it is looking pretty consistent with the rest of the Toolbar UI.

 
Average of ratings:Useful (2)
Picture of Paul Nicholls
Re: new wysiwyg editor for moodle
Group DevelopersGroup Particularly helpful Moodlers

Hi Jason,

That looks better.  I still think that the icons are too light, though - even with some disabled icons in the mix (such as "redo" and the link-related icons), my brain initially sees all of the icons as being disabled (the ones which actually are disabled are so light that they almost disappear entirely).  Making them darker might also help prevent the coloured triangles in the font/bg colour icons from standing out so much - at the moment, being the only colour in a sea of grey makes them stick out (though if they still reflect the current colour choices, I imagine it wouldn't be quite so bad if you have it set for black text on a white background).

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: new wysiwyg editor for moodle
Group Particularly helpful Moodlers

I agree. I was testing today customised Moodle plugins (tinymce 3) in tinymce 4 with compat3x plugin and that tiny difference between icon fonts and gray png images is visible in attached toolbar

Tinys

TinyMCE 4 skins made with skin creator work ok in my test install but unfortunately all those custom moodle plugins must be converted to TinyMCE 4 API - none of them was fully functional with compatibility files for the old 3.x branch (compat3x).

charcoal

 
Average of ratings: -
Picture of Danny Wahl
Re: new wysiwyg editor for moodle
Group DevelopersGroup Particularly helpful Moodlers

I have to agree that in my mind (and in UX in general) gray = disabled.  That said, it does look a bit like the gmail signature editor, but that has increased contrast, and 'button' on hover.

guess which one I'm hovering ;)

 
Average of ratings: -
Picture of Jason Fowler
Re: new wysiwyg editor for moodle
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQ

We have a hover effect on all our toolbar buttons now, it's currently awaiting integration for atto https://tracker.moodle.org/browse/MDL-42091

 
Average of ratings: -