diff --git a/shared/tinymce/toolbar.js b/shared/tinymce/toolbar.js index eeb1369a314d39..558cf1a4746dc9 100644 --- a/shared/tinymce/toolbar.js +++ b/shared/tinymce/toolbar.js @@ -96,6 +96,34 @@ } } ) ); + tinymce.ui.Factory.add( 'menuitem', tinymce.ui.MenuItem.extend( { + renderHtml: function () { + var self = this, id = self._id, settings = self.settings, prefix = self.classPrefix; + + var icon = this.settings.icon; + var text = this.settings.text; + var html = ''; + + if ( icon ) { + html += ( + '' + + '' + + '' + ); + } + + if ( text ) { + html += '' + this.encode( text ) + ''; + } + + return ( + '
' + + html + + '
' + ); + } + } ) ); + tinymce.PluginManager.add( 'toolbar', function( editor ) { var each = tinymce.each; var DOM = tinymce.DOM; diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css index 88efecdce96de7..cd741530d416cb 100644 --- a/tinymce-single/tinymce/block.css +++ b/tinymce-single/tinymce/block.css @@ -322,6 +322,7 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { text-transform: uppercase; } +.mce-menu-item .mce-txt, .insert-menu .mce-txt { font-size: 16px; text-align: inherit; @@ -330,6 +331,7 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { line-height: 16px; width: 120px; padding: 4px; + display: inline-block; } .insert-menu .mce-btn-has-text svg.gridicons-heading { @@ -352,7 +354,8 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { background-color: #fff; border: 1px solid #e1e6ea; box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 ); - margin-top: 2px; + margin-top: 3px; + margin-left: -1px; } .mce-listbox .mce-txt { @@ -360,5 +363,8 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { } .mce-menu-item { - padding: 4px; + padding: 6px; + position: relative; + background: none; + color: #12181e; } diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index b85b52f9a393d1..04e0138bc01dba 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -54,6 +54,7 @@ values: textBlocks.map( function( settings ) { return { text: settings.displayName, + icon: settings.icon, value: settings._id } } ),