From e5556666cc7fac276ef8dc3dc52b4a3bef7cb765 Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Sat, 5 Mar 2016 22:06:57 +0000
Subject: [PATCH] Themes: Bring the device preview from [31195] to the theme
 install previewer.

Props celloexpressions.
Fixes #36017.

git-svn-id: https://develop.svn.wordpress.org/trunk@36858 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css | 123 ------------------------
 src/wp-admin/css/themes.css             | 117 +++++++++++++++++++++-
 src/wp-admin/js/theme.js                |  31 +++++-
 src/wp-admin/theme-install.php          |   5 +
 4 files changed, 151 insertions(+), 125 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index c3b6e0123a..3f92fa22b5 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -1308,129 +1308,6 @@ body.cheatin p {
 	color: #00a0d2;
 }
 
-/* Device/preview size toggles */
-
-.wp-full-overlay {
-	background: #191e23;
-}
-
-#customize-preview.wp-full-overlay-main {
-	background-color: #f1f1f1;
-}
-
-.expanded #customize-footer-actions {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	width: 300px;
-	height: 45px;
-	border-top: 1px solid #ddd;
-}
-
-#customize-footer-actions .devices {
-	float: right;
-}
-
-#customize-footer-actions .devices button {
-	cursor: pointer;
-	background: transparent;
-	border: none;
-	height: 45px;
-	padding: 0 3px;
-	margin: 0 0 0 -4px;
-	-webkit-box-shadow: none;
-	box-shadow: none;
-	border-top: 1px solid transparent;
-	border-bottom: 4px solid transparent;
-	-webkit-transition: background .1s ease-in-out;
-	transition: background .1s ease-in-out;
-}
-
-#customize-footer-actions .devices button:focus {
-	-webkit-box-shadow: none;
-	box-shadow: none;
-	outline: none;
-}
-
-#customize-footer-actions .devices button:before {
-	display: inline-block;
-	-webkit-font-smoothing: antialiased;
-	font: normal 20px/30px "dashicons";
-	vertical-align: top;
-	margin: 3px 0;
-	padding: 4px 8px;
-	color: #656a6f;
-}
-
-#customize-footer-actions .devices button.active {
-	border-bottom-color: #191e23;
-}
-
-#customize-footer-actions .devices button:hover,
-#customize-footer-actions .devices button:focus {
-	background-color: #fff;
-}
-
-#customize-footer-actions .devices button:focus {
-	background-color: #fff;
-	border-bottom-color: #0073aa;
-}
-
-#customize-footer-actions .devices button.active:before,
-#customize-footer-actions .devices button:hover:before,
-#customize-footer-actions .devices button:focus:before {
-	color: #191e23;
-}
-
-.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
-.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
-	color: #191e23;
-}
-
-#customize-footer-actions .devices .preview-desktop:before {
-	content: "\f472";
-}
-
-#customize-footer-actions .devices .preview-tablet:before {
-	content: "\f471";
-}
-
-#customize-footer-actions .devices .preview-mobile:before {
-	content: "\f470";
-}
-
-@media screen and (max-width:1024px) {
-	#customize-footer-actions .devices {
-		display: none;
-	}
-}
-
-.collapsed #customize-footer-actions .devices button:before {
-	display: none;
-}
-
-.collapsed #customize-footer-actions .devices .preview-full {
-	left: 0;
-}
-
-.preview-mobile #customize-preview {
-	margin: auto 0 auto -160px;
-	width: 320px;
-	height: 480px;
-	max-height: 100%;
-	max-width: 100%;
-	left: 50%;
-}
-
-.preview-tablet #customize-preview {
-	margin: auto 0 auto -3in;
-	width: 6in;
-	height: 9in;
-	max-height: 100%;
-	max-width: 100%;
-	left: 50%;
-}
-
 .widget-reorder-nav span,
 .menu-item-reorder-nav button {
 	position: relative;
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 4e15e3ed32..1c7c0961a7 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1480,6 +1480,121 @@ body.full-overlay-active {
 	transition-duration: 0.2s;
 }
 
+/* Device/preview size toggles */
+
+.wp-full-overlay {
+	background: #191e23;
+}
+
+.wp-full-overlay-main {
+	background-color: #f1f1f1;
+}
+
+.expanded .wp-full-overlay-footer {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 300px;
+	height: 45px;
+	border-top: 1px solid #ddd;
+}
+
+.wp-full-overlay-footer .devices {
+	float: right;
+}
+
+.wp-full-overlay-footer .devices button {
+	cursor: pointer;
+	background: transparent;
+	border: none;
+	height: 45px;
+	padding: 0 3px;
+	margin: 0 0 0 -4px;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+	border-top: 1px solid transparent;
+	border-bottom: 4px solid transparent;
+	-webkit-transition: background .1s ease-in-out;
+	transition: background .1s ease-in-out;
+}
+
+.wp-full-overlay-footer .devices button:focus {
+	-webkit-box-shadow: none;
+	box-shadow: none;
+	outline: none;
+}
+
+.wp-full-overlay-footer .devices button:before {
+	display: inline-block;
+	-webkit-font-smoothing: antialiased;
+	font: normal 20px/30px "dashicons";
+	vertical-align: top;
+	margin: 3px 0;
+	padding: 4px 8px;
+	color: #656a6f;
+}
+
+.wp-full-overlay-footer .devices button.active {
+	border-bottom-color: #191e23;
+}
+
+.wp-full-overlay-footer .devices button:hover,
+.wp-full-overlay-footer .devices button:focus {
+	background-color: #fff;
+}
+
+.wp-full-overlay-footer .devices button:focus {
+	background-color: #fff;
+	border-bottom-color: #0073aa;
+}
+
+.wp-full-overlay-footer .devices button.active:before,
+.wp-full-overlay-footer .devices button:hover:before,
+.wp-full-overlay-footer .devices button:focus:before {
+	color: #191e23;
+}
+
+.wp-full-overlay-footer .devices .preview-desktop:before {
+	content: "\f472";
+}
+
+.wp-full-overlay-footer .devices .preview-tablet:before {
+	content: "\f471";
+}
+
+.wp-full-overlay-footer .devices .preview-mobile:before {
+	content: "\f470";
+}
+
+@media screen and (max-width:1024px) {
+	.wp-full-overlay-footer .devices {
+		display: none;
+	}
+}
+
+.collapsed .wp-full-overlay-footer .devices button:before {
+	display: none;
+}
+
+.preview-mobile .wp-full-overlay-main {
+	margin: auto 0 auto -160px;
+	width: 320px;
+	height: 480px;
+	max-height: 100%;
+	max-width: 100%;
+	left: 50%;
+}
+
+.preview-tablet .wp-full-overlay-main {
+	margin: auto 0 auto -3in;
+	width: 6in; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
+	height: 9in;
+	max-height: 100%;
+	max-width: 100%;
+	left: 50%;
+}
+
+
 /*------------------------------------------------------------------------------
   24.0 - Customize Loader
 ------------------------------------------------------------------------------*/
@@ -1600,7 +1715,7 @@ body.full-overlay-active {
 }
 
 .theme-install-overlay .wp-full-overlay-main {
-	position: relative;
+	position: absolute;
 	z-index: 0;
 	background-color: #f1f1f1;
 }
diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js
index d3803df225..c4f855e678 100644
--- a/src/wp-admin/js/theme.js
+++ b/src/wp-admin/js/theme.js
@@ -756,6 +756,7 @@ themes.view.Preview = themes.view.Details.extend({
 	events: {
 		'click .close-full-overlay': 'close',
 		'click .collapse-sidebar': 'collapse',
+		'click .devices button': 'previewDevice',
 		'click .previous-theme': 'previousTheme',
 		'click .next-theme': 'nextTheme',
 		'keyup': 'keyEvent'
@@ -765,11 +766,16 @@ themes.view.Preview = themes.view.Details.extend({
 	html: themes.template( 'theme-preview' ),
 
 	render: function() {
-		var self = this,
+		var self = this, currentPreviewDevice,
 			data = this.model.toJSON();
 
 		this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );
 
+		currentPreviewDevice = this.$el.data( 'current-preview-device' );
+		if ( currentPreviewDevice ) {
+			self.tooglePreviewDeviceButtons( currentPreviewDevice );
+		}
+
 		themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
 
 		this.$el.fadeIn( 200, function() {
@@ -815,6 +821,29 @@ themes.view.Preview = themes.view.Details.extend({
 		return false;
 	},
 
+	previewDevice: function( event ) {
+		var device = $( event.currentTarget ).data( 'device' );
+
+		this.$el
+			.removeClass( 'preview-desktop preview-tablet preview-mobile' )
+			.addClass( 'preview-' + device )
+			.data( 'current-preview-device', device );
+
+		this.tooglePreviewDeviceButtons( device );
+	},
+
+	tooglePreviewDeviceButtons: function( newDevice ) {
+		var $devices = $( '.wp-full-overlay-footer .devices' );
+
+		$devices.find( 'button' )
+			.removeClass( 'active' )
+			.attr( 'aria-pressed', false );
+
+		$devices.find( 'button.preview-' + newDevice )
+			.addClass( 'active' )
+			.attr( 'aria-pressed', true );
+	},
+
 	keyEvent: function( event ) {
 		// The escape key closes the preview
 		if ( event.keyCode === 27 ) {
diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index 0a52412566..4933519b3a 100644
--- a/src/wp-admin/theme-install.php
+++ b/src/wp-admin/theme-install.php
@@ -277,6 +277,11 @@ if ( $tab ) {
 			</div>
 		</div>
 		<div class="wp-full-overlay-footer">
+			<div class="devices">
+				<button type="button" class="preview-desktop active" aria-pressed="true" data-device="desktop"><span class="screen-reader-text"><?php _e( 'Enter desktop preview mode' ); ?></span></button>
+				<button type="button" class="preview-tablet" aria-pressed="false" data-device="tablet"><span class="screen-reader-text"><?php _e( 'Enter tablet preview mode' ); ?></span></button>
+				<button type="button" class="preview-mobile" aria-pressed="false" data-device="mobile"><span class="screen-reader-text"><?php _e( 'Enter mobile preview mode' ); ?></span></button>
+			</div>
 			<button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
 				<span class="collapse-sidebar-arrow"></span>
 				<span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>