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

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


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

wp-admin/js/wp-fullscreen.js

@@ -92,14 +92,16 @@
 	 *
 	 * 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');
+		} else if ( show !== 'autohide' ) {
+			$body.removeClass('wp-dfw-show-ui');
 		}
 
-		if ( hide === 'hide' ) {
+		if ( show === 'autohide' ) {
 			uiTimer = setTimeout( _hideUI, 2000 );
 		}
 	};
@@ -305,8 +307,17 @@
 	api.dfwWidth = function( pixels, total ) {
 		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 );
 
@@ -365,7 +376,7 @@
 		$('#wpadminbar').hide();
 
 		// Show the UI for 2 sec. when opening
-		toggleUI('hide');
+		toggleUI('autohide');
 
 		api.bind_resize();
 
@@ -373,7 +384,11 @@
 			s.editor.execCommand( 'wpFullScreenOn' );
 		}
 
-		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
 		scrollTo(0, 0);
@@ -498,10 +513,14 @@
 				}
 			});
 
+			if ( 'ontouchstart' in window ) {
+				$body.addClass('wp-dfw-touch');
+			}
+
 			toolbar.on( 'mouseenter', function() {
 				toggleUI('show');
 			}).on( 'mouseleave', function() {
-				toggleUI('hide');
+				toggleUI('autohide');
 			});
 
 			// Bind buttons

wp-includes/css/editor-rtl.css

@@ -1232,11 +1232,11 @@ i.mce-i-hr:before {
 	#wp-link-wrap.search-panel-visible .query-results {
 		top: 235px;
 	}
-	
+
 	#link-selector {
 		padding: 0 16px 60px;
 	}
-	
+
 	#wp-link-wrap.search-panel-visible #link-selector {
 		bottom: 52px;
 	}
@@ -1723,6 +1723,70 @@ i.mce-i-hr:before {
 	opacity: 1;
 }
 
+/* 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;
+		right: 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
 -------------------------------------------------------------- */
 .rtl .wp-switch-editor,

wp-includes/css/editor.css

@@ -1232,11 +1232,11 @@ i.mce-i-hr:before {
 	#wp-link-wrap.search-panel-visible .query-results {
 		top: 235px;
 	}
-	
+
 	#link-selector {
 		padding: 0 16px 60px;
 	}
-	
+
 	#wp-link-wrap.search-panel-visible #link-selector {
 		bottom: 52px;
 	}
@@ -1723,6 +1723,70 @@ i.mce-i-hr:before {
 	opacity: 1;
 }
 
+/* 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
 -------------------------------------------------------------- */
 .rtl .wp-switch-editor,

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '3.9-beta2-27714';
+$wp_version = '3.9-beta2-27806';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.