Customize: Fix positioning of device-previewed window when publish settings are open.

westonruter · westonruter · commit a626ef6c817f · 2017-10-13T21:20:42.000Z
* Update date control padding. * Collapse publish settings section when opening panes for available widgets or nav menus. * Remove save and cog buttons in mobile preview only mode. * Move definition of `wp.customize.previewedDevice` to `wp.customize.state('previewedDevice')` for centralization, maintaining old alias. * Remove unused CSS because the section is inside form now. Props sayedwp, westonruter. See #39896. Fixes #42027, #42199. git-svn-id: https://develop.svn.wordpress.org/trunk@41860 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
@@ -127,11 +127,20 @@ body:not(.ready) #customize-save-button-wrapper .save {
 	margin: 0;
 }
 
-.outer-section-open .wp-full-overlay.expanded #customize-preview {
+.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
 	left: 300px;
 	opacity: 0.4;
 }
 
+.outer-section-open .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
+.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
+.adding-menu-items .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
+.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
+.adding-widget .wp-full-overlay.expanded.preview-tablet .wp-full-overlay-main,
+.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
+	left: 64%;
+}
+
 #customize-outer-theme-controls li.notice {
 	padding-top: 8px;
 	padding-bottom: 8px;
@@ -379,7 +388,7 @@ body.trashing #publish-settings {
 	box-sizing: content-box;
 	width: 100%;
 	margin-left: -12px;
-	padding: 12px 12px 10px;
+	padding: 12px;
 	background: #ffffff;
 	border-bottom: 1px solid #ddd;
 	margin-bottom: 0;
@@ -506,8 +515,7 @@ body.trashing #publish-settings {
 	margin-bottom: 0;
 }
 
-#customize-controls .customize-info .customize-section-description,
-#customize-outer-theme-controls .customize-section-description {
+#customize-controls .customize-info .customize-section-description {
 	margin-bottom: 15px;
 }
 
@@ -562,9 +570,6 @@ body.trashing #publish-settings {
 #customize-controls .control-section:hover > .accordion-section-title,
 #customize-controls .control-section .accordion-section-title:hover,
 #customize-controls .control-section.open .accordion-section-title,
-#customize-outer-theme-controls .control-section .accordion-section-title:hover,
-#customize-outer-theme-controls .control-section.open .accordion-section-title,
-#customize-outer-theme-controls .control-section .accordion-section-title:focus,
 #customize-controls .control-section .accordion-section-title:focus {
 	color: #0073aa;
 	background: #f3f3f5;
@@ -1724,8 +1729,7 @@ p.customize-section-description {
 .control-panel-themes .accordion-section-title span.customize-action,
 #customize-controls .customize-section-title span.customize-action,
 #customize-controls .control-section-themes .accordion-section-title span.customize-action,
-#customize-controls .customize-section-title span.customize-action,
-#customize-outer-theme-controls .customize-section-title span.customize-action {
+#customize-controls .customize-section-title span.customize-action {
 	font-size: 13px;
 	display: block;
 	font-weight: 400;
@@ -2791,6 +2795,14 @@ body.adding-widget .add-new-widget:before,
 	}
 }
 
+@media screen and ( max-width: 1200px ) {
+	.outer-section-open .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
+	.adding-menu-items .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main,
+	.adding-widget .wp-full-overlay.expanded.preview-mobile .wp-full-overlay-main {
+		left: 67%;
+	}
+}
+
 @media screen and ( max-width: 640px ) {
 	#customize-controls {
 		width: 100%;
@@ -2837,6 +2849,10 @@ body.adding-widget .add-new-widget:before,
 		display: none;
 	}
 
+	.preview-only #customize-save-button-wrapper {
+		margin-top: -46px;
+	}
+
 	.customize-controls-preview-toggle .preview:before,
 	.customize-controls-preview-toggle .controls:before {
 		font: normal 20px/1 dashicons;
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
@@ -6788,7 +6788,8 @@
 		'remainingTimeToPublish',
 		'previewerAlive',
 		'editShortcutVisibility',
-		'changesetLocked'
+		'changesetLocked',
+		'previewedDevice'
 	], function( name ) {
 		api.state.create( name );
 	});
@@ -8317,8 +8318,8 @@
 			};
 		}());
 
-		// Previewed device bindings.
-		api.previewedDevice = new api.Value();
+		// Previewed device bindings. (The api.previewedDevice property is how this Value was first introduced, but since it has moved to api.state.)
+		api.previewedDevice = api.state( 'previewedDevice' );
 
 		// Set the default device.
 		api.bind( 'ready', function() {
diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
@@ -682,6 +682,10 @@
 
 			this.itemSectionHeight();
 
+			if ( api.section.has( 'publish_settings' ) ) {
+				api.section( 'publish_settings' ).collapse();
+			}
+
 			$( 'body' ).addClass( 'adding-menu-items' );
 
 			close = function() {
diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js
@@ -330,6 +330,10 @@
 				}
 			} );
 
+			if ( api.section.has( 'publish_settings' ) ) {
+				api.section( 'publish_settings' ).collapse();
+			}
+
 			$( 'body' ).addClass( 'adding-widget' );
 
 			this.$el.find( '.selected' ).removeClass( 'selected' );

Original file line number	Diff line number	Diff line change
`@@ -330,6 +330,10 @@`
`330`	`330`	`}`
`331`	`331`	`} );`
`332`	`332`
	`333`	`+ if ( api.section.has( 'publish_settings' ) ) {`
	`334`	`+ api.section( 'publish_settings' ).collapse();`
	`335`	`+ }`
	`336`	`+`
`333`	`337`	`$( 'body' ).addClass( 'adding-widget' );`
`334`	`338`
`335`	`339`	`this.$el.find( '.selected' ).removeClass( 'selected' );`