Make the rich content editor icons consistent with the new TinyMCE UI

  This idea has been developed and deployed to Canvas

 

I find it hard to believe no one has mentioned this--maybe I just couldn't find it.  TinyMCE has updated its UI so that the buttons to various features (insert link, text size, etc.) are bigger, and monochrome.  Canvas has adapted the new TinyMCE, but hasn't adjusted the buttons that are obviously customized by Instructure to match this new look and feel:

 

54712_Screen Shot 2015-06-04 at 4.31.55 pm.pngScreen Shot 2015-06-04 at 4.31.55 pm.png

 

The "add link," "insert graphic," and other buttons are much smaller and look amateurish, especially when these old and new UI designs are mingled like this.  Compare to a screen grab taken directly from http://www.tinymce.com :

 

54713_Screen Shot 2015-06-04 at 4.39.03 pm.pngScreen Shot 2015-06-04 at 4.39.03 pm.png

 

My idea is: fix this.  If a rationale for keeping the old icons is to keep documentation consistent (e.g., "click on the tree icon to insert a picture/movie"), then make the button look better.  These flyspeck images are simply bad.

 

I've attached some icons that I believe look better.  I've injected them into our Canvas test instance via custom CSS (though currently technically unreliable--working in it) so I'm fairly confident the pixel dimensions will work.  I hereby make them available for use via CC0 1.0 Universal (CC0 1.0) / Public Domain if anyone else would like to use them... though the "insert URL" icon is exactly what TinyMCE now uses.

8 Comments
James
Community Champion

They did mention it, it's open for voting now:

biray
Instructure Alumni
Instructure Alumni

As  @James ​ mentioned, this idea is currently open for voting ​. I encourage you to cast your vote there in addition to posting your comments to the idea thread, as well.

For now, I will archive this idea to avoid duplication, but will link to this idea from the other idea to close the loop.

Smiley Happy

Renee_Carney
Community Team
Community Team

Updates to the icons on the Rich Content Editor can now be found in your Canvas beta environment.​  Find more information at Canvas Beta Release Notes (2015-07-27)

Renee_Carney
Community Team
Community Team

Now available per Canvas Production Release Notes (2015-08-08)

Rich Content Editor

Default Icons

Renee_Carney
Community Team
Community Team

ROI.png

Thank you to hmcnally for submitting this idea, as well as,  @James  for your contributions. Your investment in this idea helped refine a feature which is now part of the Canvas! Smiley Happy

KristinL
Community Team
Community Team
Status changed to: New
 
KristinL
Community Team
Community Team
Status changed to: Added to Theme
 
KristinL
Community Team
Community Team
Status changed to: Completed