diff --git a/client/extensions/woocommerce/app/dashboard/style.scss b/client/extensions/woocommerce/app/dashboard/style.scss index b8ec8d0cbb9ae..e80efc07732f2 100644 --- 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 index 0932af947e3a2..76c1026733396 100644 --- 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 ( - - - - - ); + return [ + , + , + ]; }; render() { @@ -181,8 +179,10 @@ class OrderActionHeader extends Component { , ]; + const primaryLabel = isEditing ? translate( 'Update' ) : translate( 'Edit Order' ); + return ( - + { isEditing ? this.renderEditingButtons() : this.renderViewButtons() } ); diff --git a/client/extensions/woocommerce/app/order/style.scss b/client/extensions/woocommerce/app/order/style.scss index 152a227033550..2cb5b1a3676e2 100644 --- 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 index 357b2b0d94638..926cf939f119f 100644 --- 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 index f87d12b6f1ca4..1685038a49490 100644 --- 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 && ( ) ); } -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 && ( ) ); @@ -51,9 +48,9 @@ function renderSaveButton( onSave, isBusy, category, translate ) { 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 ( - + { deleteButton } { saveButton } diff --git a/client/extensions/woocommerce/app/product-categories/style.scss b/client/extensions/woocommerce/app/product-categories/style.scss index 676542961deb3..0d6ded95a9b62 100644 --- 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 index beb50dd1ca5b8..27b9d2ec21dff 100644 --- 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 (
- { translate( 'Products' ) } }> ); } -function renderTrashButton( onTrash, product, isBusy, translate ) { +function renderTrashButton( onTrash, isBusy, label ) { return ( onTrash && ( ) ); } -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 && ( ) ); @@ -68,10 +65,10 @@ function renderSaveButton( onSave, product, isBusy, translate ) { 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 ( - + { trashButton } { viewButton } { saveButton } diff --git a/client/extensions/woocommerce/app/products/product-update.js b/client/extensions/woocommerce/app/products/product-update.js index 18cfadd28c09c..ac2392b2fbd5d 100644 --- 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 (
- 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 index 55728c7d24ca9..ffebf2ed745f6 100644 --- 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 (
- { translate( 'Promotions' ) } }> ); } -function renderSaveButton( onSave, promotion, isBusy, translate ) { +function renderSaveButton( onSave, isBusy, label ) { if ( 'undefined' === typeof onSave ) { // 'Save' not allowed here. return null; @@ -31,25 +31,20 @@ function renderSaveButton( onSave, promotion, isBusy, translate ) { const saveDisabled = false === onSave; - const saveLabel = ( promotion && ! isObject( promotion.id ) - ? translate( 'Update' ) - : translate( 'Save & Publish' ) - ); - return ( ); } 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 ) - ? ( { translate( 'Edit Promotion' ) } ) - : ( { translate( 'Add Promotion' ) } ); + const currentCrumb = existing ? ( { translate( 'Edit Promotion' ) } ) : ( { translate( 'Add Promotion' ) } ); const breadcrumbs = [ ( { translate( 'Promotions' ) } ), @@ -57,7 +52,7 @@ const PromotionHeader = ( { promotion, onSave, onTrash, isBusy, translate, site ]; return ( - + { trashButton } { saveButton } @@ -82,4 +77,3 @@ PromotionHeader.propTypes = { }; export default localize( PromotionHeader ); - diff --git a/client/extensions/woocommerce/app/promotions/promotions-list.scss b/client/extensions/woocommerce/app/promotions/promotions-list.scss index c27d0f935634d..033fa4d1e1fcb 100644 --- a/client/extensions/woocommerce/app/promotions/promotions-list.scss +++ b/client/extensions/woocommerce/app/promotions/promotions-list.scss @@ -13,12 +13,6 @@ margin-top: 16px; } - .search { - @include breakpoint( ">660px" ) { - margin-top: 58px; - } - } - .promotions__list-placeholder { @include placeholder(); background: $white; @@ -105,4 +99,3 @@ } } - diff --git a/client/extensions/woocommerce/app/reviews/index.js b/client/extensions/woocommerce/app/reviews/index.js index ad59bd3206de5..9ad0c70501d7d 100644 --- a/client/extensions/woocommerce/app/reviews/index.js +++ b/client/extensions/woocommerce/app/reviews/index.js @@ -14,7 +14,6 @@ import PropTypes from 'prop-types'; */ import ActionHeader from 'woocommerce/components/action-header'; import Main from 'components/main'; -import SidebarNavigation from 'my-sites/sidebar-navigation'; import ReviewsList from './reviews-list'; class Reviews extends Component { @@ -32,7 +31,6 @@ class Reviews extends Component { return (
- { translate( 'Reviews' ) } } /> + { showDelete && ( +
+ +
+ { site &&

{ site.title }

} + { this.renderBreadcrumbs() } +
+
+ { children } + + ); + } +} -export default ActionHeader; +export default connect( + state => ( { + site: getSelectedSiteWithFallback( state ), + } ), + { setLayoutFocus } +)( ActionHeader ); diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss index 11bbf73fc4880..f947971702b0f 100644 --- a/client/extensions/woocommerce/components/action-header/style.scss +++ b/client/extensions/woocommerce/components/action-header/style.scss @@ -1,50 +1,123 @@ -.action-header__header { +.action-header { width: 100%; - min-height: 46px; - padding: 2px 16px 2px; + min-height: 47px; + margin: 0 0 8px; + padding: 8px 16px 8px 0; display: flex; + justify-content: flex-start; flex-direction: row; align-items: center; + box-sizing: border-box; + color: $gray-dark; + background: $white; + border-bottom: 1px solid $gray-lighten-20; @include breakpoint( ">480px" ) { - padding-left: 24px; - padding-right: 24px; + padding: 8px 24px 8px 0; } -} -.action-header__breadcrumbs { - width: 60%; - font-size: 13px; - @include breakpoint( "<660px" ) { - padding-left: 24px; + @include breakpoint( ">660px" ) { + padding: 5px 16px; + margin: 0; } - &.is-loading { - @include placeholder(); + @include breakpoint( ">960px" ) { + position: fixed; + z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); + width: calc(100% - 273px); + top: 47px; + left: 273px; + } + @include breakpoint( "660px-960px" ) { + position: fixed; + z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); + width: calc(100% - 229px); + top: 47px; + left: 229px; } } -.action-header__breadcrumbs-separator { - color: $gray; - margin: 0 2px; +.action-header__back-to-sidebar { + flex-grow: 0; + flex-shrink: 0; + min-width: 40px; + + @include breakpoint( ">660px" ) { + display: none; + } } -.action-header__actions { - width: 52%; +.action-header__content { + flex-grow: 2; + flex-shrink: 0; display: flex; - justify-content: flex-end; - align-items: center; + justify-content: flex-start; + + .site-icon { + margin-right: 8px; + } + + .action-header__site-title { + font-size: 10px; + color: $gray-darken-10; + margin: 2px 0 -3px; + } + + .action-header__breadcrumbs { + font-size: 13px; + + &.is-loading { + @include placeholder(); + } + + span { + display: inline-block; + } + + span + span::before { + content: ' / '; + color: $gray; + margin: 0 2px; + } + } +} - .button.is-borderless span { - @include breakpoint( "<660px" ) { - display: none; +.action-header__actions { + flex-grow: 1; + flex-shrink: 2; + // Triggers the width of the list, so ActionButtons correctly measures the space. + overflow: hidden; + text-align: right; + + .action-header__actions-list { + display: flex; + justify-content: flex-end; + align-items: center; + flex-wrap: nowrap; + + .button { + flex-basis: auto; + } + } + + &.is-dropdown .action-header__actions-list { + display: none; + } + + .action-header__split-button { + .button + .button { + margin-left: 0; } } .button { white-space: nowrap; + overflow: visible; padding: 5px 14px 7px; - margin-left: 12px; + + & + .button { + margin-left: 12px; + } &.is-borderless { padding: 0; @@ -60,31 +133,29 @@ } } } -.action-header__notice { - margin: 0; - width: 100%; -} -.sticky-panel { - @include breakpoint( ">960px" ) { - position: fixed; - z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); - width: calc(100% - 273px); - top: 47px; - left: 273px; - } - @include breakpoint( "660px-960px" ) { - position: fixed; - z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' ); - width: calc(100% - 229px); - top: 47px; - left: 229px; - } - @include breakpoint( ">660px" ) { - margin-bottom: 58px; +// & refers to .woocommerce base class +&.popover .popover__menu-item { + padding: 8px 16px; + + .gridicon { + top: 4px; } -} -& .sticky-panel.is-sticky .sticky-panel__content { - margin-top: 0; + &.is-scary { + .gridicon { + color: $alert-red; + } + + &.is-selected, + &:hover, + &:focus { + background: $alert-red; + color: $white; + + .gridicon { + color: $white; + } + } + } } diff --git a/client/extensions/woocommerce/style.scss b/client/extensions/woocommerce/style.scss index 7c3760983f768..564b02e16f750 100644 --- a/client/extensions/woocommerce/style.scss +++ b/client/extensions/woocommerce/style.scss @@ -55,9 +55,9 @@ @import 'woocommerce-services/style'; - .section-nav { + .main { @include breakpoint( ">660px" ) { - margin-top: 58px; + padding-top: 35px; } } @@ -88,10 +88,6 @@ margin: 0px; } } - - .layout__content { - padding-top: 67px; - } } .store-sidebar__sidebar { @@ -155,39 +151,8 @@ .is-section-woocommerce.focus-sidebar { @include breakpoint( "<660px" ) { - .sticky-panel, - .products__form, - .current-section { - display: none; - } - } -} - -.is-section-woocommerce.focus-content { - @include breakpoint( "<660px" ) { - .site-icon, - .current-section__site-title, - .current-section__section-title { + .products__form { display: none; } - - .current-section { - margin: 0; - - a { - position: fixed; - z-index: 1; - margin-top: 0; - background: transparent; - border: none; - padding-top: 11px; - padding-bottom: 11px; - } - - .gridicons-chevron-left { - margin-left: 11px; - margin-right: 11px; - } - } } }