From d6e6560980e27d5a29c7cf7a02a2cc62b29d1cf3 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Sat, 29 Mar 2014 23:57:13 +0000 Subject: [PATCH] Editor: - Use standard button styles for the Quicktags buttons. - Better style for the TinyMCE buttons (hover/focus/active/disabled). - Move the fullscreen (DFW) button to the right. - Better style for the Visual/Text buttons in DFW. Props avryl, see #27279 git-svn-id: https://develop.svn.wordpress.org/trunk@27857 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/js/wp-fullscreen.js | 6 +- src/wp-includes/class-wp-editor.php | 16 +- src/wp-includes/css/editor.css | 266 ++++++++---------- src/wp-includes/js/quicktags.js | 5 +- .../js/tinymce/plugins/wordpress/plugin.js | 1 + .../js/tinymce/plugins/wpfullscreen/plugin.js | 3 +- src/wp-includes/version.php | 2 +- 7 files changed, 143 insertions(+), 156 deletions(-) diff --git a/src/wp-admin/js/wp-fullscreen.js b/src/wp-admin/js/wp-fullscreen.js index 578e1d5a76..49fb88ae0d 100644 --- a/src/wp-admin/js/wp-fullscreen.js +++ b/src/wp-admin/js/wp-fullscreen.js @@ -439,7 +439,8 @@ api.refreshButtons = function( fade ) { if ( s.mode === 'html' ) { - $('#wp-fullscreen-mode-bar').removeClass('wp-tmce-mode').addClass('wp-html-mode'); + $('#wp-fullscreen-mode-bar').removeClass('wp-tmce-mode').addClass('wp-html-mode') + .find('a').removeClass( 'active' ).filter('.wp-fullscreen-mode-html').addClass( 'active' ); if ( fade ) { $('#wp-fullscreen-button-bar').fadeOut( 150, function(){ @@ -449,7 +450,8 @@ $('#wp-fullscreen-button-bar').addClass('wp-html-mode'); } } else if ( s.mode === 'tinymce' ) { - $('#wp-fullscreen-mode-bar').removeClass('wp-html-mode').addClass('wp-tmce-mode'); + $('#wp-fullscreen-mode-bar').removeClass('wp-html-mode').addClass('wp-tmce-mode') + .find('a').removeClass( 'active' ).filter('.wp-fullscreen-mode-tinymce').addClass( 'active' ); if ( fade ) { $('#wp-fullscreen-button-bar').fadeOut( 150, function(){ diff --git a/src/wp-includes/class-wp-editor.php b/src/wp-includes/class-wp-editor.php index 4459085feb..60c11fbf61 100644 --- a/src/wp-includes/class-wp-editor.php +++ b/src/wp-includes/class-wp-editor.php @@ -669,8 +669,10 @@ final class _WP_Editors { if ( self::$has_tinymce ) wp_enqueue_script('editor'); - if ( self::$has_quicktags ) - wp_enqueue_script('quicktags'); + if ( self::$has_quicktags ) { + wp_enqueue_script( 'quicktags' ); + wp_enqueue_style( 'buttons' ); + } if ( in_array('wplink', self::$plugins, true) || in_array('link', self::$qt_buttons, true) ) { wp_enqueue_script('wplink'); @@ -1115,10 +1117,12 @@ final class _WP_Editors {
-
- - -
+
+
+ + +
+
div { white-space: normal; } @@ -230,7 +243,7 @@ div.mce-path { } .mce-toolbar .mce-colorbutton .mce-preview { - margin-left: -17px; + margin-left: -16px; padding: 0; width: 18px; } @@ -430,25 +443,6 @@ div.mce-menu .mce-menu-item-sep, text-shadow: 0 -1px 0 rgba(0,0,0,0.1); } -@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: 2px 0; - } -} - /* Charmap modal */ .mce-charmap { margin: 3px; @@ -502,21 +496,25 @@ div.mce-menu .mce-menu-item-sep, padding: 0; } -.mce-toolbar .mce-btn:hover .mce-ico, -.mce-toolbar .mce-btn.mce-active .mce-ico, -.mce-toolbar .mce-btn:hover .mce-caret, -.mce-toolbar .mce-btn.mce-active .mce-caret { - color: #333; -} - -.mce-toolbar .mce-btn.mce-active .mce-open { - border-left-color: #bdbdbd; +.qt-fullscreen { + color: #777; + line-height: 20px; + width: 28px; + height: 26px; + text-align: center; + text-shadow: none; } .mce-toolbar .mce-btn .mce-open { line-height: 20px; } +.mce-toolbar .mce-btn:hover .mce-open, +.mce-toolbar .mce-btn:focus .mce-open, +.mce-toolbar .mce-btn.mce-active .mce-open { + border-left-color: #999; +} + i.mce-i-bold, i.mce-i-italic, i.mce-i-bullist, @@ -561,6 +559,14 @@ i.mce-i-hr, padding-right: 2px; } +.qt-fullscreen { + font: normal 20px/1 'dashicons'; + vertical-align: top; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + i.mce-i-bold:before { content: '\f200'; } @@ -614,7 +620,8 @@ i.mce-i-spellchecker:before { } i.mce-i-fullscreen:before, -i.mce-i-wp_fullscreen:before { +i.mce-i-wp_fullscreen:before, +.qt-fullscreen:before { content: '\f211'; } @@ -688,7 +695,7 @@ i.mce-i-hr:before { } .mce-i-wp_code:before { - content: "\e017"; + content: '\e017'; } /* Editors */ @@ -839,44 +846,12 @@ i.mce-i-hr:before { .quicktags-toolbar { border-bottom-style: solid; border-bottom-width: 1px; - padding: 2px 8px 0; - min-height: 29px; + padding: 3px 35px 3px 3px; + position: relative; } -.quicktags-toolbar > div { - padding: 2px 4px 0; -} - -.quicktags-toolbar input { - margin: 2px 1px 4px; - line-height: 18px; - display: inline-block; - min-width: 26px; - padding: 2px 4px; - font: 12px/18px "Open Sans", sans-serif; - color: #464646; - cursor: pointer; - border: 1px solid #c3c3c3; - -webkit-border-radius: 3px; - border-radius: 3px; - background: #eee; - background-image: -webkit-gradient(linear, left bottom, left top, from(#e3e3e3), to(#fff)); - background-image: -webkit-linear-gradient(bottom, #e3e3e3, #fff); - background-image: linear-gradient(to top, #e3e3e3, #fff); -} - -.quicktags-toolbar input:hover { - border-color: #aaa; - background: #ddd; -} - -.quicktags-toolbar input:focus { - border-color: #777; - outline: 0; -} - -.quicktags-toolbar input:active { - border-color: #aaa; +.wp-core-ui .quicktags-toolbar input.button.button-small { + margin: 2px; } .quicktags-toolbar input[value="link"] { @@ -895,6 +870,49 @@ i.mce-i-hr:before { font-weight: bold; } +.mce-toolbar .mce-btn-group .mce-btn.mce-wp-fullscreen, +.qt-fullscreen { + position: absolute; + top: 0; + right: 0; + margin-top: 5px; + margin-right: 5px; +} + +@media screen and ( max-width: 782px ) { + .mce-toolbar .mce-btn button, + .qt-fullscreen { + padding: 7px 8px; + } + + .qt-fullscreen { + width: 38px; + height: 34px; + } + + .mce-toolbar .mce-colorbutton .mce-preview { + margin-left: -21px; + } + + .mce-window .mce-btn { + padding: 2px 0; + } + + div.mce-toolbar-grp, + .quicktags-toolbar { + padding-right: 46px; + } +} + +@media screen and ( min-width: 782px ) { + .wp-core-ui .quicktags-toolbar input.button.button-small { + /* .button-small is normaly 11px, but a bit too small for these buttons. */ + font-size: 12px; + height: 26px; + line-height: 24px; + } +} + #wp_editbtns, #wp_gallerybtns { padding: 2px; @@ -1424,8 +1442,12 @@ i.mce-i-hr:before { /* =Overlay Body -------------------------------------------------------------- */ -#wp-fullscreen-body { +#wp-fullscreen-body, +.mce-fullscreen { z-index: 100010; +} + +#wp-fullscreen-body { display: none; } @@ -1438,7 +1460,6 @@ i.mce-i-hr:before { bottom: 30px; top: 60px; z-index: 100015; - } .wp-fullscreen-wrap .wp-editor-container, @@ -1500,7 +1521,7 @@ i.mce-i-hr:before { -------------------------------------------------------------- */ #fullscreen-topbar { background: #f5f5f5; - border-bottom: 1px solid #fff; + border-bottom: 1px solid #dedede; height: 45px; position: fixed; left: 0; @@ -1553,51 +1574,6 @@ i.mce-i-hr:before { padding: 3px 14px 0 0; } -#wp-fullscreen-modes a { - display: block; - font-size: 11px; - text-decoration: none; - float: left; - margin: 1px 0 0 0; - padding: 2px 6px 2px; - border-width: 1px 1px 1px 0; - border-style: solid; - border-color: #bbb; - color: #777; - text-shadow: 0 1px 0 #fff; - background-color: #f4f4f4; - background: #f4f4f4; - background-image: -webkit-gradient(linear, left bottom, left top, from(#e4e4e4), to(#f9f9f9)); - background-image: -webkit-linear-gradient(bottom, #e4e4e4, #f9f9f9); - background-image: linear-gradient(to top, #e4e4e4, #f9f9f9); -} - -#wp-fullscreen-modes a:hover, -.wp-html-mode #wp-fullscreen-modes a:last-child, -.wp-tmce-mode #wp-fullscreen-modes a:first-child { - color: #333; - border-color: #999; - background: #eee; - background-image: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#f9f9f9)); - background-image: -webkit-linear-gradient(top, #e4e4e4, #f9f9f9); - background-image: linear-gradient(to bottom, #e4e4e4, #f9f9f9); -} - -#wp-fullscreen-modes a:first-child { - border-width: 1px; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; -} - -#wp-fullscreen-modes a:last-child { - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; - -webkit-border-bottom-right-radius: 3px; - border-bottom-right-radius: 3px; -} - #wp-fullscreen-buttons .hidden { display: none; } diff --git a/src/wp-includes/js/quicktags.js b/src/wp-includes/js/quicktags.js index a013b94735..9fc9c69d4a 100644 --- a/src/wp-includes/js/quicktags.js +++ b/src/wp-includes/js/quicktags.js @@ -406,7 +406,10 @@ function edButton(id, display, tagStart, tagEnd, access) { }; qt.Button.prototype.html = function(idPrefix) { var access = this.access ? ' accesskey="' + this.access + '"' : ''; - return ''; + if ( this.id === 'fullscreen' ) { + return ''; + } + return ''; }; qt.Button.prototype.callback = function(){}; diff --git a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js index 8c5d543d73..e8429671bb 100644 --- a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js @@ -57,6 +57,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { cmd: 'WP_Adv', onPostRender: function() { wpAdvButton = this; + wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' ? true : false ); } }); diff --git a/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js b/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js index cd8fa15af1..ed60d3cd52 100644 --- a/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js @@ -91,7 +91,8 @@ tinymce.PluginManager.add( 'wpfullscreen', function( editor ) { editor.addButton( 'wp_fullscreen', { tooltip: 'Distraction Free Writing', shortcut: 'Alt+Shift+W', - onclick: toggleFullscreen + onclick: toggleFullscreen, + classes: 'wp-fullscreen btn widget' // This overwrites all classes on the container! }); editor.addMenuItem( 'wp_fullscreen', { diff --git a/src/wp-includes/version.php b/src/wp-includes/version.php index 6ee00a18b6..2684929d76 100644 --- a/src/wp-includes/version.php +++ b/src/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '3.9-beta3-27851-src'; +$wp_version = '3.9-beta3-27857-src'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.