Merge pull request #3333 from Automattic/add/themes-sheet-action-bar

Themes: Sheet action bar

assets/stylesheets/layout/_main.scss

@@ -289,6 +289,11 @@ $sidebar-width-min: 228px;
 		.has-no-sidebar & {
 			padding-left: 24px;
 		}
+
+		.full-screen & {
+			padding: 0;
+			margin: 0;
+		}
 	}
 }
 

client/components/section-nav/index.jsx

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

client/components/section-nav/item.jsx

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

client/components/section-nav/tabs.jsx

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

client/my-sites/themes/controller.js

@@ -120,9 +120,11 @@ export function details( context, next ) {
 		: require( 'my-sites/themes/head' );
 	const props = {
 		themeSlug: context.params.slug,
+		contentSection: context.params.section,
 		title: buildTitle(
 			i18n.translate( 'Theme Details', { textOnly: true } )
-		)
+		),
+		isLoggedIn: !! user
 	};
 
 	context.store.dispatch( setSection( 'themes', {

client/my-sites/themes/index.js

@@ -36,7 +36,7 @@ export default function() {
 		page( '/design*', renderPrimary ); // Call explicitly here because client-specific
 	}
 	if ( config.isEnabled( 'manage/themes/details' ) ) {
-		page( '/themes/:slug/:site_id?', details );
+		page( '/themes/:slug/:section?/:site_id?', details );
 		page( '/themes*', renderPrimary ); // Call explicitly here because client-specific
 	}
 };

client/my-sites/themes/sheet.jsx

@@ -5,12 +5,24 @@
  */
 import React from 'react';
 import { connect } from 'react-redux';
+import page from 'page';
 
 /**
  * Internal dependencies
  */
 import Main from 'components/main';
+import Gridicon from 'components/gridicon';
+import HeaderCake from 'components/header-cake';
+import Button from 'components/button';
+import SectionNav from 'components/section-nav';
+import NavTabs from 'components/section-nav/tabs';
+import NavItem from 'components/section-nav/item';
+import Card from 'components/card';
+import { purchase, customize, activate, signup } from 'state/themes/actions';
 import { getThemeById } from 'state/themes/themes/selectors';
+import { getSelectedSite } from 'state/ui/selectors';
+import ThemeHelpers from 'my-sites/themes/helpers';
+import i18n from 'lib/mixins/i18n';
 
 export const ThemeSheet = React.createClass( {
 	displayName: 'ThemeSheet',
@@ -19,15 +31,89 @@ export const ThemeSheet = React.createClass( {
 		themeSlug: React.PropTypes.string,
 	},
 
+	getDefaultProps() {
+		return {
+			theme: {
+				price: '$125',
+				description_long: `
+Kitsch four loko deep v, tousled kombucha polaroid gentrify. Kitsch bushwick mixtape, ugh wayfarers artisan YOLO godard direct trade. Post-ironic YOLO helvetica, hammock small batch man bun gastropub ethical forage. Neutra retro swag, chambray polaroid deep v distillery microdosing messenger bag pabst narwhal bitters. Fingerstache retro banh mi mixtape pabst. Tote bag cred everyday carry meh ennui leggings. Austin truffaut marfa, deep v artisan kickstarter fingerstache gentrify typewriter aesthetic meditation pop-up.
+
+				Man braid meditation meggings art party occupy kale chips, raw denim aesthetic pop-up portland cred. Cold-pressed godard authentic beard offal, quinoa butcher photo booth. Literally messenger bag waistcoat cliche taxidermy, austin knausgaard freegan. Seitan master cleanse skateboard, pickled mixtape YOLO before they sold out ugh. Authentic actually ethical fanny pack squid, flannel kale chips YOLO humblebrag polaroid franzen. Pitchfork flannel mumblecore food truck. Craft beer fap 90's, heirloom shabby chic typewriter salvia listicle pabst beard tacos sustainable yuccie.`
+			}
+		};
+	},
+
+	onBackClick() {
+		page.back();
+	},
+
+	onPrimaryClick() {
+		let action;
+
+		if ( ThemeHelpers.isPremium( this.props.theme ) && ! this.props.theme.purchased && this.props.isLoggedIn ) {
+			action = purchase( this.props.theme, this.props.selectedSite, 'showcase-sheet' );
+		} else if ( this.props.theme.active ) {
+			action = customize( this.props.theme, this.props.selectedSite );
+		} else if ( this.props.isLoggedIn ) {
+			action = activate( this.props.theme, this.props.selectedSite, 'showcase-sheet' );
+		} else {
+			action = signup( this.props.theme );
+		}
+
+		this.props.dispatch( action );
+	},
+
 	render() {
+		let actionTitle;
+		if ( this.props.isLoggedIn && this.props.theme.active ) {
+			actionTitle = i18n.translate( 'Customize' );
+		} else if ( this.props.isLoggedIn ) {
+			actionTitle = ThemeHelpers.isPremium( this.props.theme ) && ! this.props.theme.purchased
+				? i18n.translate( 'Purchase & Activate' )
+				: i18n.translate( 'Activate' );
+		} else {
+			actionTitle = i18n.translate( 'Start with this design' );
+		}
+
+		const section = this.props.contentSection || 'details';
+		const filterStrings = {
+			details: i18n.translate( 'Details', { context: 'Filter label for theme content' } ),
+			documentation: i18n.translate( 'Documentation', { context: 'Filter label for theme content' } ),
+			support: i18n.translate( 'Support', { context: 'Filter label for theme content' } ),
+		};
+
 		return (
 			<Main className="themes__sheet">
 				<div className="themes__sheet-bar">
 					<span className="themes__sheet-bar-title">Pineapple Fifteen</span>
 					<span className="themes__sheet-bar-tag">by Alpha and Omega</span>
 				</div>
-				<div className="themes__sheet-screenshot">
-					<img className="themes__sheet-img" src="https://i2.wp.com/theme.wordpress.com/wp-content/themes/pub/orvis/screenshot.png?w=680" />
+				<div className="themes__sheet-columns">
+					<div className="themes__sheet-column-left">
+						<HeaderCake className="themes__sheet-action-bar" onClick={ this.onBackClick }>
+							<div className="themes__sheet-action-bar-container">
+								<span className="themes__sheet-action-bar-cost">{ this.props.theme.price }</span>
+								<Button secondary >{ i18n.translate( 'Download' ) }</Button>
+								<Button primary icon onClick={ this.onPrimaryClick }><Gridicon icon="checkmark"/>{ actionTitle }</Button>
+							</div>
+						</HeaderCake>
+						<div className="themes__sheet-content">
+							<SectionNav className="themes__sheet-section-nav" selectedText={ filterStrings[section] }>
+								<NavTabs label="Details" >
+									<NavItem path={ `/themes/${ this.props.themeSlug }/details` } selected={ section === 'details' } >{ i18n.translate( 'Details' ) }</NavItem>
+									<NavItem path={ `/themes/${ this.props.themeSlug }/documentation` } selected={ section === 'documentation' } >{ i18n.translate( 'Documentation' ) }</NavItem>
+									<NavItem path={ `/themes/${ this.props.themeSlug }/support` } selected={ section === 'support' } >{ i18n.translate( 'Support' ) }</NavItem>
+								</NavTabs>
+							</SectionNav>
+							<Card className="themes__sheet-content">{ this.props.theme.description_long }</Card>
+						</div>
+					</div>
+					<div className="themes__sheet-column-right">
+						<Card className="themes_sheet-action-bar-spacer"/>
+						<div className="themes__sheet-screenshot">
+							<img className="themes__sheet-img" src="https://i2.wp.com/theme.wordpress.com/wp-content/themes/pub/orvis/screenshot.png?w=680" />
+						</div>
+					</div>
 				</div>
 			</Main>
 		);
@@ -39,6 +125,7 @@ export default connect(
 		props,
 		{
 			theme: getThemeById( state, props.themeSlug ),
+			selectedSite: getSelectedSite( state ) || false,
 		}
 	)
 )( ThemeSheet );

client/my-sites/themes/style.scss

@@ -1,31 +1,31 @@
 .themes-thanks-modal  {
-		width: 300px;
-		padding: 1.5em;
-		min-height: 245px;
+	width: 300px;
+	padding: 1.5em;
+	min-height: 245px;
 
-		@include breakpoint( "<480px" ) {
-			box-sizing: border-box;
-			width: 100%;
-		}
+	@include breakpoint( "<480px" ) {
+		box-sizing: border-box;
+		width: 100%;
+	}
 
 
-		h1 {
-			display: block;
-			font-weight: 300;
-			line-height: 1.5em;
-			margin-bottom: 4rem;
-			text-align: center;
-			height: auto;
+	h1 {
+		display: block;
+		font-weight: 300;
+		line-height: 1.5em;
+		margin-bottom: 4rem;
+		text-align: center;
+		height: auto;
 
-			p {
-				margin: 0;
-			}
+		p {
+			margin: 0;
 		}
+	}
 
-		ul {
-			display: block;
-			margin-left: 10px;
-		}
+	ul {
+		display: block;
+		margin-left: 10px;
+	}
 }
 
 .themes__selection .themes-list {
@@ -64,12 +64,11 @@
 
 .sticky-panel.is-sticky .themes__search-card {
 	box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ),
-		0 2px 4px lighten( $gray, 20% );
+	0 2px 4px lighten( $gray, 20% );
 }
 
 .themes__sheet {
 	max-width: none;
-	height: 100vh;
 }
 
 .themes__sheet-bar
@@ -100,31 +99,99 @@
 	padding-left: 25px
 }
 
-.themes__sheet-screenshot {
-	position: absolute;
-	width: 500px;
-	top: 90px;
-	right: 20px;
+.themes__sheet-columns {
+	display: flex;
+	flex-direction: row;
+}
+
+.themes__sheet-column-left {
+	display: flex;
+	width: 50%;
+	flex-direction: column;
+
+}
+
+.themes__sheet-column-right {
+	display: flex;
+	width: 50%;
+	flex-direction: column;
+}
+
+
+.themes__sheet-action-bar {
+	height: 50px;
+	width: 100%;
+}
+
+.themes_sheet-action-bar-spacer {
+	height: 50px;
+	width: 100%;
+	background-color: white;
+}
+
+.themes__sheet-action-bar button {
+	margin: 2px;
+}
+
+.themes__sheet-action-bar-cost {
+	font-weight: 600;
+	color: #4AB866;
+	margin-right: 10px;
+	display: inline-block;
+	max-width: 50%;
+}
+
+.themes__sheet-action-bar-container {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+
+.themes__sheet-action-bar .header-cake__back {
+	padding: 16px 0px 16px 16px;
+}
+
+.themes__sheet-action-bar .is-spacer {
+	width: 0;
 }
 
 .themes__sheet-img {
 	display: block;
+	max-width: 49%;
+	position: absolute;
+	top: 90px;
 	height: auto;
 	width: auto;
 	border: 1px solid $gray;
 	box-shadow: 0px 2px 8px 0px rgba(46,68,83,0.45);
 }
 
+.themes__sheet-content {
+	padding: 20px;
+}
+
 @include breakpoint( "<660px" ) {
-	.themes__sheet-screenshot {
+	.themes__sheet-columns {
+		flex-direction: column-reverse;
+	}
+
+	.themes__sheet-column-left {
+		width: 100%;
+	}
+
+	.themes__sheet-column-right {
+		width: 100%;
+	}
+
+	.themes__sheet-img {
 		position: relative;
-		width: auto;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
 		top: 0;
-		right: 0;
-		margin-top: 20px;
+		max-width: 100%;
+
+	}
+
+	.themes_sheet-action-bar-spacer {
+		display: none;
 	}
 }

config/wpcalypso.json

@@ -51,6 +51,7 @@
 		"manage/stats": true,
 		"manage/themes": true,
 		"manage/themes-jetpack": true,
+		"manage/themes/details": true,
 		"manage/themes/logged-out": true,
 		"me/account": true,
 		"me/billing-history": true,

server/pages/index.js

@@ -17,6 +17,7 @@ var config = require( 'config' ),
 	sections = require( '../../client/sections' ),
 	LayoutLoggedOutDesign = require( 'layout/logged-out-design' ),
 	render = require( 'render' ).render,
+	i18n = require( 'lib/mixins/i18n' ),
 	createReduxStore = require( 'state' ).createReduxStore,
 	setSection = require( 'state/ui/actions' ).setSection;
 
@@ -372,10 +373,12 @@ module.exports = function() {
 	} );
 
 	if ( config.isEnabled( 'manage/themes/details' ) ) {
+
 		app.get( '/themes/:theme_slug', function( req, res ) {
 			const context = getDefaultContext( req );
 
 			if ( config.isEnabled( 'server-side-rendering' ) ) {
+				i18n.initialize();
 				const store = createReduxStore();
 
 				store.dispatch( setSection( 'themes', { hasSidebar: false, isFullScreen: true } ) );
@@ -404,6 +407,7 @@ module.exports = function() {
 
 			if ( config.isEnabled( 'server-side-rendering' ) ) {
 				const store = createReduxStore();
+				i18n.initialize();
 				store.dispatch( setSection( 'design', { hasSidebar: false } ) );
 				context.initialReduxState = pick( store.getState(), 'ui' );