Ticket #27709: 27709.patch

src/wp-admin/js/wp-fullscreen.js

@@ -362 +362 @@
         // 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( '<span id="wp-fullscreen-title-placeholder">' );
@@ -412 +410 @@
 
         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();

src/wp-includes/class-wp-editor.php

@@ -1263 +1263 @@
                 </div></div>
 
                 <div id="wp-fullscreen-save">
-                        <input type="button" class="button-primary right" value="<?php echo $save; ?>" onclick="wp.editor.fullscreen.save();" />
+                        <input type="button" class="button button-primary right" value="<?php echo $save; ?>" onclick="wp.editor.fullscreen.save();" />
                         <span class="spinner"></span>
                         <span class="wp-fullscreen-saved-message"><?php if ( $post->post_status == 'publish' ) _e('Updated.'); else _e('Saved.'); ?></span>
                         <span class="wp-fullscreen-error-message"><?php _e('Save failed.'); ?></span>
@@ -1272 +1272 @@
                 </div>
                 </div>
         </div>
-        <div id="wp-fullscreen-status">
-                <div id="wp-fullscreen-count"><?php printf( __( 'Word count: %s' ), '<span class="word-count">0</span>' ); ?></div>
-                <div id="wp-fullscreen-tagline"><?php _e('Just write.'); ?></div>
+        <div id="wp-fullscreen-statusbar">
+                <div id="wp-fullscreen-status">
+                        <div id="wp-fullscreen-count"><?php printf( __( 'Word count: %s' ), '<span class="word-count">0</span>' ); ?></div>
+                        <div id="wp-fullscreen-tagline"><?php _e('Just write.'); ?></div>
+                </div>
         </div>
         </div>
 

src/wp-includes/css/editor.css

@@ -1501 +1501 @@
         -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 +1511 @@
         display: none;
 }
 
+#wp-fullscreen-statusbar {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 25px;
+        z-index: 100020;
+        background: #f5f5f5;
+        border-top: 1px solid #dedede;
+        transition-property: height;
+        transition-duration: 0.2s;
+}
+
 #wp-fullscreen-status {
-        margin: auto;
-        -webkit-transition: opacity 0.4s;
-        transition: opacity 0.4s;
+        margin: 0 25px;
+        padding: 0;
 }
 
 .wp-fullscreen-active .wp-fullscreen-title,
@@ -1531 +1543 @@
 }
 
 .wp-fullscreen-active .wp-editor-container {
-        margin: auto;
+        margin: 0 auto 40px;
 }
 
 .wp-fullscreen-active .wp-fullscreen-title {
@@ -1544 +1556 @@
 }
 
 #wp-fullscreen-tagline {
-        color: #bbb;
+        color: #888;
         font-size: 18px;
         float: right;
-        padding-top: 5px;
+        padding: 2px 0 0;
 }
 
 /* =Top bar
@@ -1575 +1587 @@
 
 #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;
 }
@@ -1586 +1602 @@
 
 #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: 3px 0;
 }
 
 #wp-fullscreen-central-toolbar {
         margin: auto;
         padding: 0;
+        min-width: 550px;
 }
 
 #wp-fullscreen-buttons > div {
@@ -1645 +1663 @@
         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 +1687 @@
 /* =CSS 3 transitions
 -------------------------------------------------------------- */
 
-.wp-fullscreen-active #wp-fullscreen-status,
 .wp-fullscreen-active #fullscreen-topbar {
         -webkit-transition-duration: 0.8s;
         transition-duration: 0.8s;
@@ -1678 +1694 @@
         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 +1705 @@
         filter: alpha(opacity=100);
 }
 
+.wp-fullscreen-active.wp-dfw-show-ui #wp-fullscreen-statusbar {
+        height: 25px;
+}
+
 .wp-fullscreen-active .wp-fullscreen-title,
 .wp-fullscreen-active .wp-editor-container {
         -webkit-transition-duration: 0.8s;
@@ -1749 +1772 @@
         border-color: #ccc;
 }
 
-.wp-dfw-touch #wp-fullscreen-status {
-        opacity: 1;
+.wp-dfw-touch #wp-fullscreen-statusbar {
+        height: 25px;
 }
 
 @media screen and ( max-width: 782px ) {
@@ -1759 +1782 @@
         #wp-fullscreen-mode-bar,
         #wp-fullscreen-button-bar,
         #wp-fullscreen-save {
-                float: none;
                 display: inline-block;
         }
 
@@ -1769 +1791 @@
 
         #wp-fullscreen-central-toolbar {
                 width: auto !important;
+                min-width: 0;
         }
 
         #wp-fullscreen-close {
@@ -1787 +1810 @@
                 top: 95px;
         }
 
+        #wp-fullscreen-save {
+                position: absolute;
+                right: 10px;
+        }
+}
+
+@media screen and ( max-width: 480px ) {
+        #wp_fs_help {
+                display: none;
+        }
+
         .wp-fullscreen-wrap .wp-editor-container,
         .wp-fullscreen-title {
-                max-width: 700px;
+                width: 480px !important;
         }
 
-        .wp-fullscreen-saved-message {
-                display: none !important;
+        body.wp-fullscreen-active {
+                width: 480px;
+                overflow: auto;
         }
+
+        #fullscreen-topbar,
+        .wp-fullscreen-wrap .wp-editor-container,
+        .wp-fullscreen-title {
+                width: 480px;
+        }
 }
 
 /* =Localization