From 61d17c2163c4f0392617a0e46b1aee5141c2dfb3 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Tue, 8 Apr 2014 07:48:55 +0000 Subject: [PATCH] DFW: - Move the word count and "Just Write" to a fixed bar at the bottom. - Fix responsive mode to 480px. Narrower screens will have a scroll bar. - Hide the Help button on screens < 480px, move the Save button to the right, make it bigger to match the others, and other responsive mode fixes. Fixes #26907, see #27709 git-svn-id: https://develop.svn.wordpress.org/trunk@28043 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/js/wp-fullscreen.js | 7 ++- src/wp-includes/class-wp-editor.php | 10 +-- src/wp-includes/css/editor.css | 95 +++++++++++++++++++++-------- 3 files changed, 81 insertions(+), 31 deletions(-) diff --git a/src/wp-admin/js/wp-fullscreen.js b/src/wp-admin/js/wp-fullscreen.js index 49fb88ae0d..56ba043dda 100644 --- a/src/wp-admin/js/wp-fullscreen.js +++ b/src/wp-admin/js/wp-fullscreen.js @@ -309,6 +309,7 @@ if ( pixels && pixels.toString().indexOf('%') !== -1 ) { s.$editorContainer.css( 'width', pixels ); + s.$statusbar.css( 'width', pixels ); if ( s.$dfwTitle ) { s.$dfwTitle.css( 'width', pixels ); @@ -320,6 +321,7 @@ // Reset to theme width width = $('#wp-fullscreen-body').data('theme-width') || 800; s.$editorContainer.width( width ); + s.$statusbar.width( width ); if ( s.$dfwTitle ) { s.$dfwTitle.width( width - 16 ); @@ -342,6 +344,7 @@ } s.$editorContainer.width( width ); + s.$statusbar.width( width ); if ( s.$dfwTitle ) { s.$dfwTitle.width( width - 16 ); @@ -362,9 +365,7 @@ // This event occurs while the overlay blocks the UI. ps.subscribe( 'showing', function() { $body.addClass( 'wp-fullscreen-active' ); - s.$dfwWrap.addClass( 'wp-fullscreen-wrap' ); - s.$editorContainer.append( $('#wp-fullscreen-status') ); if ( s.$dfwTitle ) { s.$dfwTitle.after( '' ); @@ -412,7 +413,6 @@ ps.subscribe( 'hiding', function() { // This event occurs while the overlay blocks the DFW UI. $body.removeClass( 'wp-fullscreen-active' ); - $( '#wp-fullscreen-body' ).append( $('#wp-fullscreen-status') ); if ( s.$dfwTitle ) { $( '#wp-fullscreen-title-placeholder' ).before( s.$dfwTitle.removeClass('wp-fullscreen-title').css( 'width', '' ) ).remove(); @@ -474,6 +474,7 @@ s.toolbar = toolbar = $('#fullscreen-topbar'); s.$fullscreenFader = $('#fullscreen-fader'); + s.$statusbar = $('#wp-fullscreen-status'); s.hasTinymce = typeof tinymce !== 'undefined'; if ( ! s.hasTinymce ) diff --git a/src/wp-includes/class-wp-editor.php b/src/wp-includes/class-wp-editor.php index 5efe1fee49..92fadccd00 100644 --- a/src/wp-includes/class-wp-editor.php +++ b/src/wp-includes/class-wp-editor.php @@ -1263,7 +1263,7 @@ final class _WP_Editors {
- + post_status == 'publish' ) _e('Updated.'); else _e('Saved.'); ?> @@ -1272,9 +1272,11 @@ final class _WP_Editors {
-
-
0' ); ?>
-
+
+
+
0' ); ?>
+
+
diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index 8ab84e7bc9..4a1c2d6204 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -1501,7 +1501,7 @@ i.mce-i-hr:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - max-width: 100% !important; + max-width: 100%; } .wp-fullscreen-active .wp-editor-tools, @@ -1511,10 +1511,22 @@ i.mce-i-hr:before { display: none; } +#wp-fullscreen-statusbar { + position: fixed; + left: 0; + right: 0; + bottom: 0; + height: 30px; + z-index: 100020; + background: #fff; + transition-property: height; + transition-duration: 0.2s; +} + #wp-fullscreen-status { - margin: auto; - -webkit-transition: opacity 0.4s; - transition: opacity 0.4s; + margin: 0 auto; + padding: 0; + border-top: 1px dashed #ccc; } .wp-fullscreen-active .wp-fullscreen-title, @@ -1531,7 +1543,8 @@ i.mce-i-hr:before { } .wp-fullscreen-active .wp-editor-container { - margin: auto; + margin: 0 auto 30px; + border-bottom: 0; } .wp-fullscreen-active .wp-fullscreen-title { @@ -1544,10 +1557,10 @@ i.mce-i-hr:before { } #wp-fullscreen-tagline { - color: #bbb; + color: #888; font-size: 18px; float: right; - padding-top: 5px; + padding: 4px 0 0; } /* =Top bar @@ -1575,28 +1588,34 @@ i.mce-i-hr:before { #wp-fullscreen-mode-bar, #wp-fullscreen-button-bar, -#wp-fullscreen-close, -#wp-fullscreen-count { +#wp-fullscreen-close { float: left; } +#wp-fullscreen-count, +#wp-fullscreen-tagline { + display: inline-block; +} + #wp-fullscreen-button-bar { margin-top: 2px; } #wp-fullscreen-save { float: right; - padding: 2px 2px 0 5px; + padding: 2px 0 0; + min-width: 95px; } #wp-fullscreen-count, #wp-fullscreen-close { - padding-top: 6px; + padding: 5px 0 0; } #wp-fullscreen-central-toolbar { margin: auto; padding: 0; + min-width: 550px; } #wp-fullscreen-buttons > div { @@ -1645,11 +1664,10 @@ i.mce-i-hr:before { vertical-align: middle; } -#wp-fullscreen-save img, #wp-fullscreen-save span { - padding-right: 4px; - line-height: 26px; display: none; + margin: 5px 6px 0; + float: left; } /* =Thickbox Adjustments @@ -1670,7 +1688,6 @@ i.mce-i-hr:before { /* =CSS 3 transitions -------------------------------------------------------------- */ -.wp-fullscreen-active #wp-fullscreen-status, .wp-fullscreen-active #fullscreen-topbar { -webkit-transition-duration: 0.8s; transition-duration: 0.8s; @@ -1678,7 +1695,10 @@ i.mce-i-hr:before { filter: alpha(opacity=0); } -.wp-fullscreen-active.wp-dfw-show-ui #wp-fullscreen-status, +.wp-fullscreen-active #wp-fullscreen-statusbar { + height: 0; +} + .wp-fullscreen-active.wp-dfw-show-ui #fullscreen-topbar { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; @@ -1686,6 +1706,10 @@ i.mce-i-hr:before { filter: alpha(opacity=100); } +.wp-fullscreen-active.wp-dfw-show-ui #wp-fullscreen-statusbar { + height: 30px; +} + .wp-fullscreen-active .wp-fullscreen-title, .wp-fullscreen-active .wp-editor-container { -webkit-transition-duration: 0.8s; @@ -1749,8 +1773,8 @@ i.mce-i-hr:before { border-color: #ccc; } -.wp-dfw-touch #wp-fullscreen-status { - opacity: 1; +.wp-dfw-touch #wp-fullscreen-statusbar { + height: 30px; } @media screen and ( max-width: 782px ) { @@ -1759,7 +1783,6 @@ i.mce-i-hr:before { #wp-fullscreen-mode-bar, #wp-fullscreen-button-bar, #wp-fullscreen-save { - float: none; display: inline-block; } @@ -1769,6 +1792,7 @@ i.mce-i-hr:before { #wp-fullscreen-central-toolbar { width: auto !important; + min-width: 0; } #wp-fullscreen-close { @@ -1787,13 +1811,36 @@ i.mce-i-hr:before { top: 95px; } - .wp-fullscreen-wrap .wp-editor-container, - .wp-fullscreen-title { - max-width: 700px; + #wp-fullscreen-save { + position: absolute; + right: 10px; + } +} + +@media screen and ( max-width: 480px ) { + #wp_fs_help { + display: none; } - .wp-fullscreen-saved-message { - display: none !important; + .wp-fullscreen-wrap .wp-editor-container, + .wp-fullscreen-title { + width: 480px !important; + } + + body.wp-fullscreen-active { + width: 480px; + overflow: auto; + } + + #fullscreen-topbar, + .wp-fullscreen-wrap { + width: 480px; + } + + #wp-fullscreen-status { + width: auto !important; + max-width: 100%; + padding: 0 10px; } }