TinyMCE modals: re-enable the Close button in charmap, fix arrows in listboxes, add and position dashicons to the menu (when visible), see #26952

Built from https://develop.svn.wordpress.org/trunk@27513


git-svn-id: http://core.svn.wordpress.org/trunk@27356 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/editor-rtl.css

@@ -31,33 +31,33 @@
 	background: #fcfcfc;
 	border-bottom: 1px solid #dfdfdf;
 	padding: 0;
-	min-height: 40px;
+	min-height: 36px;
 }
 
 .mce-window .mce-window-head .mce-title {
-	font-size: 22px;
+	font-size: 20px;
 	font-weight: 600;
-	line-height: 40px;
+	line-height: 36px;
 	margin: 0;
-	padding: 0 16px 0 40px;
+	padding: 0 16px 0 36px;
 }
 
 .mce-window .mce-window-head .mce-close {
 	color: transparent;
 	top: 0;
 	left: 0;
-	width: 40px;
+	width: 36px;
-	height: 40px;
+	height: 36px;
-	line-height: 40px;
+	line-height: 36px;
 	text-align: center;
 }
 
 .mce-window .mce-window-head .mce-close:before {
-	font: normal 20px/2 'dashicons';
+	font: normal 20px/36px 'dashicons';
 	text-align: center;
 	color: #666;
-	width: 40px;
+	width: 36px;
-	height: 40px;
+	height: 36px;
 	display: block;
 }
 
@@ -66,8 +66,8 @@
 }
 
 .mce-window .mce-window-head .mce-dragh {
-	width: -webkit-calc( 100% - 40px );
+	width: -webkit-calc( 100% - 36px );
-	width: calc( 100% - 40px );
+	width: calc( 100% - 36px );
 }
 
 .mce-textbox {
@@ -214,7 +214,7 @@ div.mce-statusbar {
 }
 
 .mce-toolbar .mce-colorbutton .mce-preview {
-	margin-right: -18px;
+	margin-right: -17px;
 	padding: 0;
 	width: 18px;
 }
@@ -235,23 +235,22 @@ div.mce-statusbar {
     border-color: #bbb;
 }
 
-
+.mce-panel .mce-btn i.mce-caret {
-.mce-toolbar .mce-btn .mce-caret {
+	border-top: 6px solid #777;
-	border: none;
-	margin: 0 -5px 0 0;
-	width: 16px;
 }
 
-.mce-toolbar .mce-listbox .mce-caret {
+.mce-panel .mce-btn:hover i.mce-caret {
-	margin-top: 0;
+	border-top-color: #333;
-	padding: 2px 0 0;
-	left: 0;
-	top: 0;
-	width: 16px;
 }
 
-.mce-toolbar .mce-listbox .mce-caret:before {
+.mce-panel .mce-active i.mce-caret {
-	margin-right: -6px;
+	border-top: 0;
+	border-bottom: 6px solid #333;
+	margin-top: 7px;
+}
+
+.mce-listbox.mce-active i.mce-caret {
+	margin-top: -3px;
 }
 
 .mce-toolbar .mce-splitbtn:hover .mce-open {
@@ -307,6 +306,10 @@ div.mce-menu .mce-menu-item-sep,
 	padding-right: 3px;
 }
 
+.mce-menu-has-icons i.mce-ico:before {
+	margin-right: -2px;
+}
+
 /* Buttons in modals */
 .mce-primary button,
 .mce-primary button i {
@@ -412,13 +415,21 @@ div.mce-menu .mce-menu-item-sep,
 }
 
 @media screen and ( max-width: 782px ) {
+	.mce-toolbar .mce-btn button {
+		padding: 5px 6px;
+	}
+
+	#wp-fullscreen-buttons .mce-btn,
+	.mce-toolbar .mce-btn-group .mce-btn {
+		margin: 0 3px;
+	}
+
+	.mce-toolbar .mce-colorbutton .mce-preview {
+		margin-right: -20px;
+	}
+
 	.mce-window .mce-btn {
-		padding: 10px 14px;
+		padding: 2px 0;
-		line-height: 1;
-		font-size: 14px;
-		vertical-align: middle;
-		height: auto;
-		margin-bottom: 4px;
 	}
 }
 
@@ -456,14 +467,15 @@ div.mce-menu .mce-menu-item-sep,
 }
 
 /* TinyMCE icons */
-.mce-toolbar .mce-ico,
+.mce-toolbar .mce-ico {
-.mce-toolbar .mce-caret {
 	color: #777;
 	line-height: 20px;
 	width: 20px;
 	height: 20px;
 	text-align: center;
 	text-shadow: none;
+	margin: 0;
+	padding: 0;
 }
 
 .mce-toolbar .mce-btn:hover .mce-ico,
@@ -477,6 +489,10 @@ div.mce-menu .mce-menu-item-sep,
 	border-right-color: #bdbdbd;
 }
 
+.mce-toolbar .mce-btn .mce-open {
+	line-height: 20px;
+}
+
 i.mce-i-bold,
 i.mce-i-italic,
 i.mce-i-bullist,
@@ -509,7 +525,6 @@ i.mce-i-wp_help,
 i.mce-i-wp-media-library,
 i.mce-i-ltr,
 i.mce-i-wp_page,
-i.mce-caret,
 .mce-close {
 	font: normal 20px/1 'dashicons';
 	padding: 0;
@@ -517,6 +532,8 @@ i.mce-caret,
 	speak: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	margin-right: -2px;
+	padding-left: 2px;
 }
 
 i.mce-i-bold:before {
@@ -637,14 +654,6 @@ i.mce-i-wp_page:before {
 	content: '\f105';
 }
 
-i.mce-caret:before {
-	content: '\f140';
-}
-
-.mce-active i.mce-caret:before {
-	content: '\f142';
-}
-
 .mce-close:before {
 	content: '\f158';
 }

wp-includes/css/editor.css

@@ -31,33 +31,33 @@
 	background: #fcfcfc;
 	border-bottom: 1px solid #dfdfdf;
 	padding: 0;
-	min-height: 40px;
+	min-height: 36px;
 }
 
 .mce-window .mce-window-head .mce-title {
-	font-size: 22px;
+	font-size: 20px;
 	font-weight: 600;
-	line-height: 40px;
+	line-height: 36px;
 	margin: 0;
-	padding: 0 40px 0 16px;
+	padding: 0 36px 0 16px;
 }
 
 .mce-window .mce-window-head .mce-close {
 	color: transparent;
 	top: 0;
 	right: 0;
-	width: 40px;
+	width: 36px;
-	height: 40px;
+	height: 36px;
-	line-height: 40px;
+	line-height: 36px;
 	text-align: center;
 }
 
 .mce-window .mce-window-head .mce-close:before {
-	font: normal 20px/2 'dashicons';
+	font: normal 20px/36px 'dashicons';
 	text-align: center;
 	color: #666;
-	width: 40px;
+	width: 36px;
-	height: 40px;
+	height: 36px;
 	display: block;
 }
 
@@ -66,8 +66,8 @@
 }
 
 .mce-window .mce-window-head .mce-dragh {
-	width: -webkit-calc( 100% - 40px );
+	width: -webkit-calc( 100% - 36px );
-	width: calc( 100% - 40px );
+	width: calc( 100% - 36px );
 }
 
 .mce-textbox {
@@ -214,7 +214,7 @@ div.mce-statusbar {
 }
 
 .mce-toolbar .mce-colorbutton .mce-preview {
-	margin-left: -18px;
+	margin-left: -17px;
 	padding: 0;
 	width: 18px;
 }
@@ -235,23 +235,22 @@ div.mce-statusbar {
     border-color: #bbb;
 }
 
-
+.mce-panel .mce-btn i.mce-caret {
-.mce-toolbar .mce-btn .mce-caret {
+	border-top: 6px solid #777;
-	border: none;
-	margin: 0 0 0 -5px;
-	width: 16px;
 }
 
-.mce-toolbar .mce-listbox .mce-caret {
+.mce-panel .mce-btn:hover i.mce-caret {
-	margin-top: 0;
+	border-top-color: #333;
-	padding: 2px 0 0;
-	right: 0;
-	top: 0;
-	width: 16px;
 }
 
-.mce-toolbar .mce-listbox .mce-caret:before {
+.mce-panel .mce-active i.mce-caret {
-	margin-left: -6px;
+	border-top: 0;
+	border-bottom: 6px solid #333;
+	margin-top: 7px;
+}
+
+.mce-listbox.mce-active i.mce-caret {
+	margin-top: -3px;
 }
 
 .mce-toolbar .mce-splitbtn:hover .mce-open {
@@ -307,6 +306,10 @@ div.mce-menu .mce-menu-item-sep,
 	padding-left: 3px;
 }
 
+.mce-menu-has-icons i.mce-ico:before {
+	margin-left: -2px;
+}
+
 /* Buttons in modals */
 .mce-primary button,
 .mce-primary button i {
@@ -412,13 +415,21 @@ div.mce-menu .mce-menu-item-sep,
 }
 
 @media screen and ( max-width: 782px ) {
+	.mce-toolbar .mce-btn button {
+		padding: 5px 6px;
+	}
+
+	#wp-fullscreen-buttons .mce-btn,
+	.mce-toolbar .mce-btn-group .mce-btn {
+		margin: 0 3px;
+	}
+
+	.mce-toolbar .mce-colorbutton .mce-preview {
+		margin-left: -20px;
+	}
+
 	.mce-window .mce-btn {
-		padding: 10px 14px;
+		padding: 2px 0;
-		line-height: 1;
-		font-size: 14px;
-		vertical-align: middle;
-		height: auto;
-		margin-bottom: 4px;
 	}
 }
 
@@ -456,14 +467,15 @@ div.mce-menu .mce-menu-item-sep,
 }
 
 /* TinyMCE icons */
-.mce-toolbar .mce-ico,
+.mce-toolbar .mce-ico {
-.mce-toolbar .mce-caret {
 	color: #777;
 	line-height: 20px;
 	width: 20px;
 	height: 20px;
 	text-align: center;
 	text-shadow: none;
+	margin: 0;
+	padding: 0;
 }
 
 .mce-toolbar .mce-btn:hover .mce-ico,
@@ -477,6 +489,10 @@ div.mce-menu .mce-menu-item-sep,
 	border-left-color: #bdbdbd;
 }
 
+.mce-toolbar .mce-btn .mce-open {
+	line-height: 20px;
+}
+
 i.mce-i-bold,
 i.mce-i-italic,
 i.mce-i-bullist,
@@ -509,7 +525,6 @@ i.mce-i-wp_help,
 i.mce-i-wp-media-library,
 i.mce-i-ltr,
 i.mce-i-wp_page,
-i.mce-caret,
 .mce-close {
 	font: normal 20px/1 'dashicons';
 	padding: 0;
@@ -517,6 +532,8 @@ i.mce-caret,
 	speak: none;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	margin-left: -2px;
+	padding-right: 2px;
 }
 
 i.mce-i-bold:before {
@@ -637,14 +654,6 @@ i.mce-i-wp_page:before {
 	content: '\f105';
 }
 
-i.mce-caret:before {
-	content: '\f140';
-}
-
-.mce-active i.mce-caret:before {
-	content: '\f142';
-}
-
 .mce-close:before {
 	content: '\f158';
 }

wp-includes/js/tinymce/plugins/charmap/plugin.js

@@ -342,7 +342,11 @@ tinymce.PluginManager.add('charmap', function(editor) {
 					minHeight: 80
 				}
 			],
-			buttons: [] // WP, see #27107
+			buttons: [
+				{text: "Close", onclick: function() {
+					win.close();
+				}}
+			]
 		});
 	}
 

wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -237,6 +237,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 	if ( typeof wp !== 'undefined' && wp.media && wp.media.editor ) {
 		editor.addMenuItem( 'add_media', {
 			text: 'Add Media',
+			icon: 'wp-media-library',
 			context: 'insert',
 			cmd: 'WP_Medialib'
 		});
@@ -245,6 +246,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 	// Insert "Read More..."
 	editor.addMenuItem( 'wp_more', {
 		text: 'Insert Read More tag',
+		icon: 'wp_more',
 		context: 'insert',
 		onclick: function() {
 			editor.execCommand( 'WP_More', 'more' );
@@ -254,6 +256,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 	// Insert "Next Page"
 	editor.addMenuItem( 'wp_page', {
 		text: 'Page break',
+		icon: 'wp_page',
 		context: 'insert',
 		onclick: function() {
 			editor.execCommand( 'WP_More', 'nextpage' );

wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js

@@ -96,6 +96,7 @@ tinymce.PluginManager.add( 'wpfullscreen', function( editor ) {
 
 	editor.addMenuItem( 'wp_fullscreen', {
 		text: 'Distraction Free Writing',
+		icon: 'wp_fullscreen',
 		shortcut: 'Alt+Shift+W',
 		context: 'view',
 		onclick: toggleFullscreen

wp-includes/js/tinymce/plugins/wpfullscreen/plugin.min.js

@@ -1 +1 @@
-tinymce.PluginManager.add("wpfullscreen",function(a){function b(c){var d,e,f=a.getDoc(),h=f.body,i=tinymce.DOM,j=250;c&&"setcontent"===c.type&&c.initial||a.settings.inline||(e=tinymce.Env.ie?h.scrollHeight:tinymce.Env.webkit&&0===h.clientHeight?0:h.offsetHeight,e>250&&(j=e),h.scrollTop=0,j!==g&&(d=j-g,i.setStyle(i.get(a.id+"_ifr"),"height",j+"px"),g=j,tinymce.isWebKit&&0>d&&b(c)))}function c(){f.wp_fullscreen=!0,a.dom.addClass(a.getDoc().documentElement,"wp-fullscreen"),a.on("change setcontent paste keyup",b)}function d(){f.wp_fullscreen=!1,a.dom.removeClass(a.getDoc().documentElement,"wp-fullscreen"),a.off("change setcontent paste keyup",b),g=0}function e(){"undefined"!=typeof wp&&wp.editor&&wp.editor.fullscreen&&(a.getParam("wp_fullscreen")?wp.editor.fullscreen.off():wp.editor.fullscreen.on())}var f=a.settings,g=0;a.addCommand("wpAutoResize",b),a.addCommand("wpFullScreenOn",c),a.addCommand("wpFullScreenOff",d),a.addCommand("wpFullScreen",e),a.on("init",function(){a.getParam("wp_fullscreen")&&c(),a.addShortcut("alt+shift+w","","wpFullScreen")}),a.addButton("wp_fullscreen",{tooltip:"Distraction Free Writing",shortcut:"Alt+Shift+W",onclick:e}),a.addMenuItem("wp_fullscreen",{text:"Distraction Free Writing",shortcut:"Alt+Shift+W",context:"view",onclick:e})});
+tinymce.PluginManager.add("wpfullscreen",function(a){function b(c){var d,e,f=a.getDoc(),h=f.body,i=tinymce.DOM,j=250;c&&"setcontent"===c.type&&c.initial||a.settings.inline||(e=tinymce.Env.ie?h.scrollHeight:tinymce.Env.webkit&&0===h.clientHeight?0:h.offsetHeight,e>250&&(j=e),h.scrollTop=0,j!==g&&(d=j-g,i.setStyle(i.get(a.id+"_ifr"),"height",j+"px"),g=j,tinymce.isWebKit&&0>d&&b(c)))}function c(){f.wp_fullscreen=!0,a.dom.addClass(a.getDoc().documentElement,"wp-fullscreen"),a.on("change setcontent paste keyup",b)}function d(){f.wp_fullscreen=!1,a.dom.removeClass(a.getDoc().documentElement,"wp-fullscreen"),a.off("change setcontent paste keyup",b),g=0}function e(){"undefined"!=typeof wp&&wp.editor&&wp.editor.fullscreen&&(a.getParam("wp_fullscreen")?wp.editor.fullscreen.off():wp.editor.fullscreen.on())}var f=a.settings,g=0;a.addCommand("wpAutoResize",b),a.addCommand("wpFullScreenOn",c),a.addCommand("wpFullScreenOff",d),a.addCommand("wpFullScreen",e),a.on("init",function(){a.getParam("wp_fullscreen")&&c(),a.addShortcut("alt+shift+w","","wpFullScreen")}),a.addButton("wp_fullscreen",{tooltip:"Distraction Free Writing",shortcut:"Alt+Shift+W",onclick:e}),a.addMenuItem("wp_fullscreen",{text:"Distraction Free Writing",icon:"wp_fullscreen",shortcut:"Alt+Shift+W",context:"view",onclick:e})});