Themes: Add live preview to sheet (#5482)

Add the Live Preview overlay to the Theme Sheet page.
Addresses #3162

client/components/web-preview/index.jsx

@@ -1,3 +1,5 @@
+/** @ssr-ready **/
+
 /**
  * External dependencies
  */

client/components/web-preview/toolbar.jsx

@@ -1,3 +1,5 @@
+/** @ssr-ready **/
+
 /**
  * External dependencies
  */

client/lib/touch-detect/index.js

@@ -1,3 +1,5 @@
+/** @ssr-ready **/
+
 /**
  * Module exports.
  */
@@ -15,6 +17,6 @@ module.exports = {
 	 */
 	hasTouch: function() {
 		/* global DocumentTouch:true */
-		return ( ( 'ontouchstart' in window ) || window.DocumentTouch && document instanceof DocumentTouch );
+		return window && ( ( 'ontouchstart' in window ) || window.DocumentTouch && document instanceof DocumentTouch );
 	}
 };

client/my-sites/theme/main.jsx

@@ -35,6 +35,7 @@ import ThemesSiteSelectorModal from 'my-sites/themes/themes-site-selector-modal'
 import actionLabels from 'my-sites/themes/action-labels';
 import { getBackPath } from 'state/themes/themes-ui/selectors';
 import EmptyContentComponent from 'components/empty-content';
+import ThemePreview from 'my-sites/themes/theme-preview';
 
 const ThemeSheet = React.createClass( {
 	displayName: 'ThemeSheet',
@@ -89,6 +90,14 @@ const ThemeSheet = React.createClass( {
 		}
 	},
 
+	onPreviewButtonClick() {
+		if ( ! this.props.isLoggedIn ) {
+			this.props.signup( this.props );
+		} else {
+			this.selectSiteAndDispatch( 'customize' );
+		}
+	},
+
 	selectSiteAndDispatch( action ) {
 		if ( this.props.selectedSite ) {
 			this.props[ action ]( this.props, this.props.selectedSite, 'showcase-sheet' );
@@ -112,6 +121,10 @@ const ThemeSheet = React.createClass( {
 		return section;
 	},
 
+	togglePreview() {
+		this.setState( { showPreview: ! this.state.showPreview } );
+	},
+
 	renderBar() {
 		const placeholder = <span className="themes__sheet-placeholder">loading.....</span>;
 		const title = this.props.name || placeholder;
@@ -129,6 +142,10 @@ const ThemeSheet = React.createClass( {
 		const img = <img className="themes__sheet-img" src={ this.props.screenshot + '?=w680' } />;
 		return (
 			<div className="themes__sheet-screenshot">
+				<a className="themes__sheet-preview-link" onClick={ this.togglePreview } >
+					<Gridicon icon="external" size={ 18 } />
+					<span className="themes__sheet-preview-link-text">{ i18n.translate( 'Live Preview' ) }</span>
+				</a>
 				{ this.props.screenshot && img }
 			</div>
 		);
@@ -241,6 +258,17 @@ const ThemeSheet = React.createClass( {
 		return <ThemeDownloadCard theme={ this.props.id } href={ this.props.download } />;
 	},
 
+	renderPreview() {
+		const buttonLabel = this.props.isLoggedIn ? i18n.translate( 'Try & Customize' ) : i18n.translate( 'Pick this design' );
+		return(
+			<ThemePreview showPreview={ this.state.showPreview }
+				theme={ this.props }
+				onClose={ this.togglePreview }
+				buttonLabel= { buttonLabel }
+				onButtonClick={ this.onPreviewButtonClick } />
+		);
+	},
+
 	renderError() {
 		const emptyContentTitle = i18n.translate( 'Looking for great WordPress designs?', {
 			comment: 'Message displayed when requested theme was not found',
@@ -291,6 +319,7 @@ const ThemeSheet = React.createClass( {
 					action={ this.props[ this.state.selectedAction ] }
 					sourcePath={ `/theme/${ this.props.id }/${ section }` }
 				/> }
+				{ this.state.showPreview && this.renderPreview() }
 				<HeaderCake className="themes__sheet-action-bar"
 							backHref={ this.props.backPath }
 							backText={ i18n.translate( 'All Themes' ) }>

client/my-sites/themes/style.scss

@@ -8,7 +8,6 @@
 		width: 100%;
 	}
 
-
 	h1 {
 		display: block;
 		font-weight: 300;
@@ -387,6 +386,48 @@
 	}
 }
 
+.themes__sheet-preview-link {
+	display: flex;
+	position: absolute;
+		top: -28px;
+	color: lighten( $gray, 30% );
+	cursor: pointer;
+	transition: all ease-in-out 100ms;
+
+	&:hover {
+		color: $white;
+	}
+
+	.gridicon {
+		margin: 0 8px 0 -4px;
+	}
+
+	.themes__sheet-preview-link-text {
+		font-size: 12px;
+		margin-top: 2px;
+		text-transform: uppercase;
+	}
+
+	@include breakpoint( "<660px" ) {
+		color: transparentize( $gray, 0.2 );
+		top: 90%;
+		margin-left: 30px;
+
+		&:hover {
+			color: $gray-dark;
+		}
+
+		.gridicon {
+			width: 24px;
+			height: 24px;
+		}
+
+		.themes__sheet-preview-link-text {
+			display: none;
+		}
+	}
+}
+
 .footer__line {
 	color: lighten( $gray, 20% );
 	border-top: 1px solid lighten( $gray, 20% );

client/my-sites/themes/theme-preview.jsx

@@ -1,3 +1,5 @@
+/** @ssr-ready **/
+
 /**
  * External dependencies
  */
@@ -38,4 +40,4 @@ export default React.createClass( {
 			</WebPreview>
 		);
 	}
-} )
+} );

client/state/themes/actions.js

@@ -133,6 +133,7 @@ export function receiveThemeDetails( theme ) {
 		themeDownload: theme.download_uri || undefined,
 		themeTaxonomies: theme.taxonomies,
 		themeStylesheet: theme.stylesheet,
+		themeDemoUri: theme.demo_uri,
 	};
 }
 

client/state/themes/theme-details/reducer.js

@@ -29,6 +29,7 @@ export default ( state = Map(), action ) => {
 					download: action.themeDownload,
 					taxonomies: action.themeTaxonomies,
 					stylesheet: action.themeStylesheet,
+					demo_uri: action.themeDemoUri,
 				} ) );
 		case THEME_DETAILS_RECEIVE_FAILURE:
 			return state.set( action.themeId, Map( { error: action.error } ) );

client/state/themes/theme-details/test/reducer.js

@@ -36,6 +36,7 @@ describe( 'reducer', () => {
 			themeSupportDocumentation: 'support comes from within',
 			themeStylesheet: 'premium/mood',
 			themeDownload: 'mood.zip',
+			themeDemoUri: 'https://mooddemo.wordpress.com/',
 			themeTaxonomies: {
 				features: [ {
 					term_id: null,
@@ -62,6 +63,7 @@ describe( 'reducer', () => {
 			supportDocumentation: 'support comes from within',
 			stylesheet: 'premium/mood',
 			download: 'mood.zip',
+			demo_uri: 'https://mooddemo.wordpress.com/',
 			taxonomies: {
 				features: [ {
 					term_id: null,