Store: Clean up header on smaller screens (#22541)

* Merge our ActionHeader & calypso core’s SidebarNavigation to create a single nav header for large and small screens * Set the header’s offset on the parent component, to avoid needing to redo it in each screen * Hide the sidebar toggle when the sidebar is visible (on larger screens) * Clean up breadcrumb code * Switch to a split button when the action-buttons run out of room * Style the dropdown, use a real Button * Add `primaryLabel` when ActionHeader has multiple buttons * Remove duplicate Main component from tax section * Show just the button if this is a single button, or we don’t have a primaryLabel set
Automattic · Mar 15, 2018 · db309d2 · db309d2
1 parent 8e96b36
commit db309d2
Show file tree

Hide file tree

Showing 25 changed files with 387 additions and 256 deletions.
diff --git a/client/extensions/woocommerce/app/dashboard/style.scss b/client/extensions/woocommerce/app/dashboard/style.scss
@@ -1,12 +1,3 @@
-.dashboard__manage-has-orders,
-.dashboard__manage-no-orders,
-.dashboard__placeholder,
-.setup__wrapper {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-}
-
 .dashboard__placeholder .card {
 	@include placeholder();
 }

diff --git a/client/extensions/woocommerce/app/order/header.js b/client/extensions/woocommerce/app/order/header.js
@@ -8,7 +8,7 @@ import Gridicon from 'gridicons';
 import { isEmpty } from 'lodash';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 
 /**
  * Internal dependencies
@@ -153,22 +153,20 @@ class OrderActionHeader extends Component {
 
 	renderEditingButtons = () => {
 		const { hasOrderEdits, isSaving, translate } = this.props;
-		return (
-			<Fragment>
-				<Button key="cancel" onClick={ this.cancelEditing }>
-					{ translate( 'Cancel' ) }
-				</Button>
-				<Button
-					key="save"
-					primary
-					onClick={ this.saveOrder }
-					busy={ isSaving }
-					disabled={ ! hasOrderEdits || isSaving }
-				>
-					{ translate( 'Update' ) }
-				</Button>
-			</Fragment>
-		);
+		return [
+			<Button key="cancel" onClick={ this.cancelEditing }>
+				{ translate( 'Cancel' ) }
+			</Button>,
+			<Button
+				key="save"
+				primary
+				onClick={ this.saveOrder }
+				busy={ isSaving }
+				disabled={ ! hasOrderEdits || isSaving }
+			>
+				{ translate( 'Update' ) }
+			</Button>,
+		];
 	};
 
 	render() {
@@ -181,8 +179,10 @@ class OrderActionHeader extends Component {
 			</span>,
 		];
 
+		const primaryLabel = isEditing ? translate( 'Update' ) : translate( 'Edit Order' );
+
 		return (
-			<ActionHeader breadcrumbs={ breadcrumbs }>
+			<ActionHeader breadcrumbs={ breadcrumbs } primaryLabel={ primaryLabel }>
 				{ isEditing ? this.renderEditingButtons() : this.renderViewButtons() }
 			</ActionHeader>
 		);

diff --git a/client/extensions/woocommerce/app/order/style.scss b/client/extensions/woocommerce/app/order/style.scss
@@ -7,10 +7,6 @@
 		box-sizing: border-box;
 	}
 
-	@include breakpoint( '>660px' ) {
-		margin-top: 58px;
-	}
-
 	@include breakpoint( '>960px' ) {
 		display: flex;
 		flex-wrap: wrap;

diff --git a/client/extensions/woocommerce/app/orders/style.scss b/client/extensions/woocommerce/app/orders/style.scss
@@ -1,8 +1,4 @@
 .orders__container {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-
 	thead {
 		.table-row {
 			&:hover {

diff --git a/client/extensions/woocommerce/app/product-categories/header.js b/client/extensions/woocommerce/app/product-categories/header.js
@@ -17,24 +17,21 @@ import ActionHeader from 'woocommerce/components/action-header';
 import Button from 'components/button';
 import { getLink } from 'woocommerce/lib/nav-utils';
 
-function renderDeleteButton( onDelete, category, translate ) {
+function renderDeleteButton( onDelete, label ) {
 	return (
 		onDelete && (
 			<Button borderless scary onClick={ onDelete ? onDelete : undefined }>
 				<Gridicon icon="trash" />
-				<span>{ translate( 'Delete' ) } </span>
+				<span>{ label } </span>
 			</Button>
 		)
 	);
 }
 
-function renderSaveButton( onSave, isBusy, category, translate ) {
+function renderSaveButton( onSave, isBusy, label ) {
 	const saveExists = 'undefined' !== typeof onSave;
 	const saveDisabled = false === onSave;
 
-	const saveLabel =
-		category && ! isObject( category.id ) ? translate( 'Update' ) : translate( 'Save' );
-
 	return (
 		saveExists && (
 			<Button
@@ -43,17 +40,17 @@ function renderSaveButton( onSave, isBusy, category, translate ) {
 				disabled={ saveDisabled }
 				busy={ isBusy }
 			>
-				{ saveLabel }
+				{ label }
 			</Button>
 		)
 	);
 }
 
 const ProductCategoryHeader = ( { onDelete, onSave, translate, site, category, isBusy } ) => {
 	const existing = category && ! isObject( category.id );
-
-	const deleteButton = renderDeleteButton( onDelete, category, translate );
-	const saveButton = renderSaveButton( onSave, isBusy, category, translate );
+	const deleteButton = renderDeleteButton( onDelete, translate( 'Delete' ) );
+	const saveLabel = existing ? translate( 'Update' ) : translate( 'Save' );
+	const saveButton = renderSaveButton( onSave, isBusy, saveLabel );
 
 	const currentCrumb =
 		category && existing ? (
@@ -72,7 +69,7 @@ const ProductCategoryHeader = ( { onDelete, onSave, translate, site, category, i
 	];
 
 	return (
-		<ActionHeader breadcrumbs={ breadcrumbs }>
+		<ActionHeader breadcrumbs={ breadcrumbs } primaryLabel={ saveLabel }>
 			{ deleteButton }
 			{ saveButton }
 		</ActionHeader>

diff --git a/client/extensions/woocommerce/app/product-categories/style.scss b/client/extensions/woocommerce/app/product-categories/style.scss
@@ -59,10 +59,6 @@
 }
 
 .product-categories__form {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-
 	&.is-placeholder div {
 		@include placeholder();
 		background: $white;
@@ -198,4 +194,3 @@
 		}
 	}
 }
-
diff --git a/client/extensions/woocommerce/app/products/index.js b/client/extensions/woocommerce/app/products/index.js
@@ -30,7 +30,6 @@ import NavTabs from 'components/section-nav/tabs';
 import NavItem from 'components/section-nav/item';
 import ProductsList from './products-list';
 import ProductsListSearchResults from './products-list-search-results';
-import SidebarNavigation from 'my-sites/sidebar-navigation';
 import SectionNav from 'components/section-nav';
 import Search from 'components/search';
 
@@ -124,7 +123,6 @@ class Products extends Component {
 
 		return (
 			<Main className={ classes } wideLayout>
-				<SidebarNavigation />
 				<ActionHeader breadcrumbs={ <span>{ translate( 'Products' ) }</span> }>
 					<Button primary href={ getLink( '/store/product/:site/', site ) }>
 						{ translate( 'Add a product' ) }

diff --git a/client/extensions/woocommerce/app/products/product-form.scss b/client/extensions/woocommerce/app/products/product-form.scss
@@ -3,10 +3,6 @@
  */
 
 .products__form {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-
 	&.is-placeholder div {
 		@include placeholder();
 		background: $white;

diff --git a/client/extensions/woocommerce/app/products/product-header.js b/client/extensions/woocommerce/app/products/product-header.js
@@ -17,7 +17,7 @@ import ActionHeader from 'woocommerce/components/action-header';
 import Button from 'components/button';
 import { getLink } from 'woocommerce/lib/nav-utils';
 
-function renderViewButton( product, translate ) {
+function renderViewButton( product, label ) {
 	const url = product && product.permalink;
 	return (
 		// TODO: Do more to validate this URL?
@@ -29,29 +29,26 @@ function renderViewButton( product, translate ) {
 			rel="noopener noreferrer"
 		>
 			<Gridicon icon="visible" />
-			<span>{ translate( 'View' ) }</span>
+			<span>{ label }</span>
 		</Button>
 	);
 }
 
-function renderTrashButton( onTrash, product, isBusy, translate ) {
+function renderTrashButton( onTrash, isBusy, label ) {
 	return (
 		onTrash && (
 			<Button borderless scary onClick={ onTrash ? onTrash : undefined }>
 				<Gridicon icon="trash" />
-				<span>{ translate( 'Delete' ) } </span>
+				<span>{ label } </span>
 			</Button>
 		)
 	);
 }
 
-function renderSaveButton( onSave, product, isBusy, translate ) {
+function renderSaveButton( onSave, isBusy, label ) {
 	const saveExists = 'undefined' !== typeof onSave;
 	const saveDisabled = false === onSave;
 
-	const saveLabel =
-		product && ! isObject( product.id ) ? translate( 'Update' ) : translate( 'Save & Publish' );
-
 	return (
 		saveExists && (
 			<Button
@@ -60,18 +57,18 @@ function renderSaveButton( onSave, product, isBusy, translate ) {
 				disabled={ saveDisabled }
 				busy={ isBusy }
 			>
-				{ saveLabel }
+				{ label }
 			</Button>
 		)
 	);
 }
 
 const ProductHeader = ( { viewEnabled, onTrash, onSave, isBusy, translate, site, product } ) => {
 	const existing = product && ! isObject( product.id );
-
-	const viewButton = viewEnabled && renderViewButton( product, translate );
-	const trashButton = renderTrashButton( onTrash, product, isBusy, translate );
-	const saveButton = renderSaveButton( onSave, product, isBusy, translate );
+	const viewButton = viewEnabled && renderViewButton( product, translate( 'View' ) );
+	const trashButton = renderTrashButton( onTrash, isBusy, translate( 'Delete' ) );
+	const saveLabel = existing ? translate( 'Update' ) : translate( 'Save & Publish' );
+	const saveButton = renderSaveButton( onSave, isBusy, saveLabel );
 
 	const currentCrumb =
 		product && existing ? (
@@ -86,7 +83,7 @@ const ProductHeader = ( { viewEnabled, onTrash, onSave, isBusy, translate, site,
 	];
 
 	return (
-		<ActionHeader breadcrumbs={ breadcrumbs }>
+		<ActionHeader breadcrumbs={ breadcrumbs } primaryLabel={ saveLabel }>
 			{ trashButton }
 			{ viewButton }
 			{ saveButton }

diff --git a/client/extensions/woocommerce/app/products/product-update.js b/client/extensions/woocommerce/app/products/product-update.js
@@ -17,7 +17,6 @@ import { localize } from 'i18n-calypso';
 import Main from 'components/main';
 import accept from 'lib/accept';
 import { ProtectFormGuard } from 'lib/protect-form';
-import SidebarNavigation from 'my-sites/sidebar-navigation';
 import { getLink } from 'woocommerce/lib/nav-utils';
 import { successNotice, errorNotice } from 'state/notices/actions';
 import { getActionList } from 'woocommerce/state/action-list/selectors';
@@ -207,7 +206,6 @@ class ProductUpdate extends React.Component {
 
 		return (
 			<Main className={ className } wideLayout>
-				<SidebarNavigation />
 				<ProductHeader
 					site={ site }
 					product={ product }

diff --git a/client/extensions/woocommerce/app/products/products-list.scss b/client/extensions/woocommerce/app/products/products-list.scss
@@ -13,12 +13,6 @@
 		margin-top: 16px;
 	}
 
-	.search-card {
-		@include breakpoint( ">660px" ) {
-			margin-top: 58px;
-		}
-	}
-
 	.products__list-placeholder {
 		@include placeholder();
 		background: $white;
@@ -45,7 +39,7 @@
 	.is-requesting td div {
 		@include placeholder();
 		background: transparent;
-		
+
 		.image-thumb::after {
 			display: none;
 		}

diff --git a/client/extensions/woocommerce/app/promotions/index.js b/client/extensions/woocommerce/app/promotions/index.js
@@ -23,7 +23,6 @@ import { getLink } from 'woocommerce/lib/nav-utils';
 import { setPromotionSearch } from 'woocommerce/state/ui/promotions/actions';
 import { getSelectedSiteWithFallback } from 'woocommerce/state/sites/selectors';
 import Main from 'components/main';
-import SidebarNavigation from 'my-sites/sidebar-navigation';
 import PromotionsList from './promotions-list';
 import SearchCard from 'components/search-card';
 
@@ -106,7 +105,6 @@ class Promotions extends Component {
 
 		return (
 			<Main className={ classes } wideLayout>
-				<SidebarNavigation />
 				<ActionHeader breadcrumbs={ <span>{ translate( 'Promotions' ) }</span> }>
 					<Button primary href={ getLink( '/store/promotion/:site/', site ) }>
 						{ translate( 'Add promotion' ) }

diff --git a/client/extensions/woocommerce/app/promotions/promotion-form.scss b/client/extensions/woocommerce/app/promotions/promotion-form.scss
@@ -1,9 +1,5 @@
 
 .promotions__form {
-	@include breakpoint( ">660px" ) {
-		margin-top: 58px;
-	}
-
 	&.is-placeholder div {
 		@include placeholder();
 		background: $white;

diff --git a/client/extensions/woocommerce/app/promotions/promotion-header.js b/client/extensions/woocommerce/app/promotions/promotion-header.js
@@ -14,50 +14,45 @@ import ActionHeader from 'woocommerce/components/action-header';
 import Button from 'components/button';
 import { getLink } from 'woocommerce/lib/nav-utils';
 
-function renderTrashButton( onTrash, promotion, isBusy, translate ) {
+function renderTrashButton( onTrash, isBusy, label ) {
 	return onTrash && (
 		<Button borderless scary onClick={ onTrash }>
 			<Gridicon icon="trash" />
-			<span>{ translate( 'Delete' ) }</span>
+			<span>{ label }</span>
 		</Button>
 	);
 }
 
-function renderSaveButton( onSave, promotion, isBusy, translate ) {
+function renderSaveButton( onSave, isBusy, label ) {
 	if ( 'undefined' === typeof onSave ) {
 		// 'Save' not allowed here.
 		return null;
 	}
 
 	const saveDisabled = false === onSave;
 
-	const saveLabel = ( promotion && ! isObject( promotion.id )
-		? translate( 'Update' )
-		: translate( 'Save & Publish' )
-	);
-
 	return (
 		<Button primary onClick={ onSave || noop } disabled={ saveDisabled } busy={ isBusy }>
-			{ saveLabel }
+			{ label }
 		</Button>
 	);
 }
 
 const PromotionHeader = ( { promotion, onSave, onTrash, isBusy, translate, site } ) => {
-	const trashButton = renderTrashButton( onTrash, promotion, isBusy, translate );
-	const saveButton = renderSaveButton( onSave, promotion, isBusy, translate );
+	const existing = ( promotion && ! isObject( promotion.id ) );
+	const trashButton = renderTrashButton( onTrash, isBusy, translate( 'Delete' ) );
+	const saveLabel = existing ? translate( 'Update' ) : translate( 'Save & Publish' );
+	const saveButton = renderSaveButton( onSave, isBusy, saveLabel );
 
-	const currentCrumb = promotion && ! isObject( promotion.id )
-		? ( <span>{ translate( 'Edit Promotion' ) }</span> )
-		: ( <span>{ translate( 'Add Promotion' ) }</span> );
+	const currentCrumb = existing ? ( <span>{ translate( 'Edit Promotion' ) }</span> ) : ( <span>{ translate( 'Add Promotion' ) }</span> );
 
 	const breadcrumbs = [
 		( <a href={ getLink( '/store/promotions/:site/', site ) }>{ translate( 'Promotions' ) }</a> ),
 		currentCrumb,
 	];
 
 	return (
-		<ActionHeader breadcrumbs={ breadcrumbs }>
+		<ActionHeader breadcrumbs={ breadcrumbs } primaryLabel={ saveLabel }>
 			{ trashButton }
 			{ saveButton }
 		</ActionHeader>
@@ -82,4 +77,3 @@ PromotionHeader.propTypes = {
 };
 
 export default localize( PromotionHeader );
-