Changeset 27806

Timestamp:

03/28/2014 04:39:04 AM (11 years ago)

Author:

azaozz

Message:

Make DFW usable on touch devices: change the toolbar to two rows and keep it and borders visible. See #26907

Location:

trunk/src

Files:

• wp-admin/js/wp-fullscreen.js (modified) (5 diffs)
• wp-includes/css/editor.css (modified) (2 diffs)
• wp-includes/version.php (modified) (1 diff)

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

@@ -93 +93 @@
      * Toggle the CSS class to show/hide the toolbar, borders and statusbar.
      */
-    toggleUI = api.toggleUI = function( hide ) {
+    toggleUI = api.toggleUI = function( show ) {
         clearTimeout( uiTimer );
 
-        if ( ! $body.hasClass('wp-dfw-show-ui') ) {
+        if ( ! $body.hasClass('wp-dfw-show-ui') || show === 'show' ) {
             $body.addClass('wp-dfw-show-ui');
-        }
-
-        if ( hide === 'hide' ) {
+        } else if ( show !== 'autohide' ) {
+            $body.removeClass('wp-dfw-show-ui');
+        }
+
+        if ( show === 'autohide' ) {
             uiTimer = setTimeout( _hideUI, 2000 );
         }
@@ -306 +308 @@
         var width;
 
+        if ( pixels && pixels.toString().indexOf('%') !== -1 ) {
+            s.$editorContainer.css( 'width', pixels );
+
+            if ( s.$dfwTitle ) {
+                s.$dfwTitle.css( 'width', pixels );
+            }
+            return;
+        }
+
         if ( ! pixels ) {
-            // reset to theme width
+            // Reset to theme width
             width = $('#wp-fullscreen-body').data('theme-width') || 800;
             s.$editorContainer.width( width );
@@ -366 +377 @@
 
         // Show the UI for 2 sec. when opening
-        toggleUI('hide');
+        toggleUI('autohide');
 
         api.bind_resize();
@@ -374 +385 @@
         }
 
-        api.dfwWidth( $( '#wp-fullscreen-body' ).data('dfw-width') || 800, true );
+        if ( 'ontouchstart' in window ) {
+            api.dfwWidth( '90%' );
+        } else {
+            api.dfwWidth( $( '#wp-fullscreen-body' ).data('dfw-width') || 800, true );
+        }
 
         // scroll to top so the user is not disoriented
@@ -499 +514 @@
             });
 
+            if ( 'ontouchstart' in window ) {
+                $body.addClass('wp-dfw-touch');
+            }
+
             toolbar.on( 'mouseenter', function() {
                 toggleUI('show');
             }).on( 'mouseleave', function() {
-                toggleUI('hide');
+                toggleUI('autohide');
             });
 

trunk/src/wp-includes/css/editor.css

@@ -1233 +1233 @@
         top: 235px;
     }
-    
+
     #link-selector {
         padding: 0 16px 60px;
     }
-    
+
     #wp-link-wrap.search-panel-visible #link-selector {
         bottom: 52px;
@@ -1724 +1724 @@
 }
 
+/* DFW on touch screen devices */
+.wp-dfw-touch #fullscreen-topbar {
+    position: absolute;
+    opacity: 1;
+}
+
+.wp-dfw-touch .wp-fullscreen-wrap .wp-editor-container,
+.wp-dfw-touch .wp-fullscreen-title {
+    max-width: 700px;
+}
+
+.wp-fullscreen-active.wp-dfw-touch  .wp-fullscreen-title,
+.wp-fullscreen-active.wp-dfw-touch .wp-editor-container {
+    border-color: #ccc;
+}
+
+.wp-dfw-touch #wp-fullscreen-status {
+    opacity: 1;
+}
+
+@media screen and ( max-width: 782px ) {
+    #wp-fullscreen-close,
+    #wp-fullscreen-central-toolbar,
+    #wp-fullscreen-mode-bar,
+    #wp-fullscreen-button-bar,
+    #wp-fullscreen-save {
+        float: none;
+        display: inline-block;
+    }
+
+    #fullscreen-topbar {
+        height: 85px;
+    }
+
+    #wp-fullscreen-central-toolbar {
+        width: auto !important;
+    }
+
+    #wp-fullscreen-close {
+        line-height: 30px;
+        vertical-align: top;
+        padding: 0 12px;
+    }
+
+    #wp-fullscreen-button-bar {
+        position: absolute;
+        top: 45px;
+        left: 0;
+    }
+
+    .wp-fullscreen-wrap {
+        top: 95px;
+    }
+
+    .wp-fullscreen-wrap .wp-editor-container,
+    .wp-fullscreen-title {
+        max-width: 700px;
+    }
+
+    .wp-fullscreen-saved-message {
+        display: none !important;
+    }
+}
+
 /* =Localization
 -------------------------------------------------------------- */

trunk/src/wp-includes/version.php

@@ -5 +5 @@
  * @global string $wp_version
  */
-$wp_version = '3.9-beta2-27714-src';
+$wp_version = '3.9-beta2-27806-src';
 
 /**