From 0ad9f19a74b00fa86c39aad39c31641685b78f49 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 8 Sep 2020 12:12:04 +0200 Subject: [PATCH 01/11] Add layout class is-nav-unification --- client/layout/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/layout/index.jsx b/client/layout/index.jsx index c89cfdcd1aec7..6fdcf28f2d2f3 100644 --- a/client/layout/index.jsx +++ b/client/layout/index.jsx @@ -152,6 +152,7 @@ class Layout extends Component { config.isEnabled( 'woocommerce/onboarding-oauth' ) && isWooOAuth2Client( this.props.oauth2Client ) && this.props.wccomFrom, + 'is-nav-unification': config.isEnabled( 'nav-unification' ), } ); From d9fbe3199c33fb258d2df7d44d74e0dd6a540195 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 8 Sep 2020 15:28:45 +0200 Subject: [PATCH 02/11] Adjust colors --- .../assets/stylesheets/_nav-unification.scss | 63 +++++++++++++++++++ client/assets/stylesheets/style.scss | 4 ++ 2 files changed, 67 insertions(+) create mode 100644 client/assets/stylesheets/_nav-unification.scss diff --git a/client/assets/stylesheets/_nav-unification.scss b/client/assets/stylesheets/_nav-unification.scss new file mode 100644 index 0000000000000..ab3582ba24742 --- /dev/null +++ b/client/assets/stylesheets/_nav-unification.scss @@ -0,0 +1,63 @@ + +/** + * Nav unification styles + * + * This file contains all relevant styles for the nav unification prototype (see pbAPfg-O2). + * Using a single place to store these styles will allow us to easily (re)move them later. + * Depending on the outcome they'll either be deleted or moved to the relevant places. + * + * IMPORTANT: When adding to this file please also add the source file in a comment. + */ + +.is-nav-unification { + $nav-unification-primary: #23282d; + + // packages/calypso-color-schemes/src/shared/color-schemes/_default.scss + --color-masterbar-background: #23282d; + --color-masterbar-border: #333; + --color-masterbar-item-hover-background: #333; + --color-masterbar-item-active-background: #fff; + --color-masterbar-unread-dot-background: #f0821e; + + // client/layout/masterbar/style.scss + .masterbar__item { + &.is-active { + .masterbar__item-content { + color: $nav-unification-primary; + } + + .gridicon { + fill: $nav-unification-primary; + } + } + } + + // client/layout/masterbar/style.scss + .masterbar__item-new { + &:hover { + background: #e9e9ea; + color: $nav-unification-primary; + } + + .masterbar__item-content { + color: $nav-unification-primary; + } + .gridicon { + fill: $nav-unification-primary; + } + } + + // client/layout/masterbar/style.scss + .masterbar__toggle-drafts.button.is-borderless { + &:hover { + background-color: #e9e9ea; + + .count { + border-color: $nav-unification-primary; + color: $nav-unification-primary; + } + } + + } + +} \ No newline at end of file diff --git a/client/assets/stylesheets/style.scss b/client/assets/stylesheets/style.scss index e0a29c2f1e7d6..83efddd72eaff 100644 --- a/client/assets/stylesheets/style.scss +++ b/client/assets/stylesheets/style.scss @@ -14,3 +14,7 @@ @import 'main'; @import './_p2-vars.scss'; + +// Styles for the nav unification prototype (see pbAPfg-O2) +// TODO: depending on project outcome move or delete styles +@import 'nav-unification'; \ No newline at end of file From 7413df648bbb96b68d0972639d792556723c182c Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Tue, 8 Sep 2020 16:17:19 +0200 Subject: [PATCH 03/11] Update sizes --- .../assets/stylesheets/_nav-unification.scss | 46 ++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/client/assets/stylesheets/_nav-unification.scss b/client/assets/stylesheets/_nav-unification.scss index ab3582ba24742..43ae2bcf6c8f7 100644 --- a/client/assets/stylesheets/_nav-unification.scss +++ b/client/assets/stylesheets/_nav-unification.scss @@ -11,6 +11,8 @@ .is-nav-unification { $nav-unification-primary: #23282d; + $nav-unification-masterbar-height: 32px; + $nav-unification-masterbar-font-size: 13px; // packages/calypso-color-schemes/src/shared/color-schemes/_default.scss --color-masterbar-background: #23282d; @@ -19,8 +21,24 @@ --color-masterbar-item-active-background: #fff; --color-masterbar-unread-dot-background: #f0821e; + // client/layout/style.scss + .layout__secondary { + top: $nav-unification-masterbar-height; + } + + // client/layout/masterbar/style.scss + .masterbar { + height: $nav-unification-masterbar-height; + border-bottom: none; + font-size: $nav-unification-masterbar-font-size; + } + // client/layout/masterbar/style.scss .masterbar__item { + height: $nav-unification-masterbar-height; + font-size: $nav-unification-masterbar-font-size; + line-height: $nav-unification-masterbar-height; + &.is-active { .masterbar__item-content { color: $nav-unification-primary; @@ -33,7 +51,16 @@ } // client/layout/masterbar/style.scss + + .masterbar__item-new, + .masterbar__toggle-drafts.button.is-borderless { + height: 24px; + margin: 4px 8px; + border-radius: 5px; + } + .masterbar__item-new { + &:hover { background: #e9e9ea; color: $nav-unification-primary; @@ -47,8 +74,9 @@ } } - // client/layout/masterbar/style.scss .masterbar__toggle-drafts.button.is-borderless { + margin-left: -26px; + &:hover { background-color: #e9e9ea; @@ -60,4 +88,20 @@ } + // client/layout/masterbar/style.scss + .masterbar__item-me { + padding-right: 8px; + padding-left: 8px; + .gravatar { + top: 5px; + left: 9px; + } + } + + // client/layout/masterbar/style.scss + .masterbar__item-notifications { + padding-right: 5px; + padding-left: 5px; + } + } \ No newline at end of file From 91b1bdb491e0cec6dfd5fd6dade9ab299eeb25a5 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 9 Sep 2020 14:26:26 +0200 Subject: [PATCH 04/11] Update colors based on design; update spacing --- .../assets/stylesheets/_nav-unification.scss | 41 ++++++++++++------- 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/client/assets/stylesheets/_nav-unification.scss b/client/assets/stylesheets/_nav-unification.scss index 43ae2bcf6c8f7..fe02838ffb703 100644 --- a/client/assets/stylesheets/_nav-unification.scss +++ b/client/assets/stylesheets/_nav-unification.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-max-id */ /** * Nav unification styles @@ -11,14 +12,14 @@ .is-nav-unification { $nav-unification-primary: #23282d; + $nav-unification-secondary: #101517; $nav-unification-masterbar-height: 32px; $nav-unification-masterbar-font-size: 13px; // packages/calypso-color-schemes/src/shared/color-schemes/_default.scss - --color-masterbar-background: #23282d; - --color-masterbar-border: #333; + --color-masterbar-background: #101517; --color-masterbar-item-hover-background: #333; - --color-masterbar-item-active-background: #fff; + --color-masterbar-item-active-background: #23282d; --color-masterbar-unread-dot-background: #f0821e; // client/layout/style.scss @@ -36,18 +37,15 @@ // client/layout/masterbar/style.scss .masterbar__item { height: $nav-unification-masterbar-height; + padding: 0 8px; font-size: $nav-unification-masterbar-font-size; line-height: $nav-unification-masterbar-height; + } - &.is-active { - .masterbar__item-content { - color: $nav-unification-primary; - } - - .gridicon { - fill: $nav-unification-primary; - } - } + // client/layout/masterbar/style.scss + .masterbar__item-bubble { + top: 2px; + left: -7px; } // client/layout/masterbar/style.scss @@ -60,6 +58,7 @@ } .masterbar__item-new { + padding: 0 10px; &:hover { background: #e9e9ea; @@ -71,11 +70,16 @@ } .gridicon { fill: $nav-unification-primary; + transform: translateX( 1px ); + + + .masterbar__item-content { + padding: 0 1px 0 5px; + } } } .masterbar__toggle-drafts.button.is-borderless { - margin-left: -26px; + margin-left: -23px; &:hover { background-color: #e9e9ea; @@ -94,7 +98,7 @@ padding-left: 8px; .gravatar { top: 5px; - left: 9px; + left: 8px; } } @@ -102,6 +106,15 @@ .masterbar__item-notifications { padding-right: 5px; padding-left: 5px; + + .gridicon { + margin-top: 1px; + } + } + + // apps/notifications/style.scss + #wpnc-panel { + top: $nav-unification-masterbar-height; } } \ No newline at end of file From 8352721a981e13dc0f47510d892c29ec9891c530 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 9 Sep 2020 16:38:07 +0200 Subject: [PATCH 05/11] Update mobile styles --- .../assets/stylesheets/_nav-unification.scss | 60 ++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/client/assets/stylesheets/_nav-unification.scss b/client/assets/stylesheets/_nav-unification.scss index fe02838ffb703..1abc8c10d7309 100644 --- a/client/assets/stylesheets/_nav-unification.scss +++ b/client/assets/stylesheets/_nav-unification.scss @@ -14,6 +14,7 @@ $nav-unification-primary: #23282d; $nav-unification-secondary: #101517; $nav-unification-masterbar-height: 32px; + $nav-unification-masterbar-height-mobile: 46px; $nav-unification-masterbar-font-size: 13px; // packages/calypso-color-schemes/src/shared/color-schemes/_default.scss @@ -117,4 +118,61 @@ top: $nav-unification-masterbar-height; } -} \ No newline at end of file + // breakpoint used in wp-admin + @media only screen and ( max-width: 782px ) { + + // client/layout/style.scss + .layout__secondary { + top: $nav-unification-masterbar-height-mobile; + } + + // client/layout/masterbar/style.scss + .masterbar { + height: $nav-unification-masterbar-height-mobile; + } + + // client/layout/masterbar/style.scss + .masterbar__item { + height: $nav-unification-masterbar-height-mobile; + line-height: $nav-unification-masterbar-height-mobile; + } + + // client/layout/masterbar/style.scss + .masterbar__item-new, + .masterbar__toggle-drafts.button.is-borderless { + height: 36px; + margin-top: 5px; + } + + .masterbar__toggle-drafts.button.is-borderless { + margin-left: -20px; + } + + // client/layout/masterbar/style.scss + .masterbar__item-bubble { + top: 9px; + left: 2px; + } + + // client/layout/masterbar/style.scss + .masterbar__item-me { + + // fix for profile picture currently hidden in production + .masterbar__item-content { + display: block; + } + .gravatar { + top: 12px; + left: 20px; + } + } + + // apps/notifications/style.scss + #wpnc-panel { + top: $nav-unification-masterbar-height-mobile; + } + + } + +} + From a4d7a3824ffe0ce326b41012df21cb653b3fe04c Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 10 Sep 2020 11:40:04 +0200 Subject: [PATCH 06/11] Change notification dot color back and change in wp-calypso instead --- client/assets/stylesheets/_nav-unification.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/client/assets/stylesheets/_nav-unification.scss b/client/assets/stylesheets/_nav-unification.scss index 1abc8c10d7309..f3b5bd701f6bc 100644 --- a/client/assets/stylesheets/_nav-unification.scss +++ b/client/assets/stylesheets/_nav-unification.scss @@ -21,7 +21,6 @@ --color-masterbar-background: #101517; --color-masterbar-item-hover-background: #333; --color-masterbar-item-active-background: #23282d; - --color-masterbar-unread-dot-background: #f0821e; // client/layout/style.scss .layout__secondary { From 4ae59cd22286d613bdbd0a07641206f07023cfd8 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 10 Sep 2020 16:09:41 +0200 Subject: [PATCH 07/11] Fix prod issue with reader bubble positioning; adjust for all viewports --- .../assets/stylesheets/_nav-unification.scss | 51 ++++++++++++++----- 1 file changed, 37 insertions(+), 14 deletions(-) diff --git a/client/assets/stylesheets/_nav-unification.scss b/client/assets/stylesheets/_nav-unification.scss index f3b5bd701f6bc..eb0b49ae9a730 100644 --- a/client/assets/stylesheets/_nav-unification.scss +++ b/client/assets/stylesheets/_nav-unification.scss @@ -79,7 +79,7 @@ } .masterbar__toggle-drafts.button.is-borderless { - margin-left: -23px; + margin-left: -20px; &:hover { background-color: #e9e9ea; @@ -96,13 +96,15 @@ .masterbar__item-me { padding-right: 8px; padding-left: 8px; + .gravatar { - top: 5px; - left: 8px; + top: 50%; + left: 50%; + transform: translate( -50%, -50% ); } } - // client/layout/masterbar/style.scss + .masterbar__item-notifications { padding-right: 5px; padding-left: 5px; @@ -117,6 +119,20 @@ top: $nav-unification-masterbar-height; } + // client/layout/masterbar/style.scss + .masterbar__item-notifications .masterbar__notifications-bubble { + top: 3px; + transform: translateX( 1px ); + } + + // client/layout/masterbar/style.scss + @include breakpoint-deprecated( '>960px' ) { + + .masterbar__toggle-drafts.button.is-borderless { + margin-left: -23px; + } + } + // breakpoint used in wp-admin @media only screen and ( max-width: 782px ) { @@ -143,14 +159,12 @@ margin-top: 5px; } - .masterbar__toggle-drafts.button.is-borderless { - margin-left: -20px; - } - // client/layout/masterbar/style.scss .masterbar__item-bubble { - top: 9px; - left: 2px; + top: 50%; + left: 50%; + margin: 0; + transform: translate( -39px, -14px ); } // client/layout/masterbar/style.scss @@ -160,10 +174,6 @@ .masterbar__item-content { display: block; } - .gravatar { - top: 12px; - left: 20px; - } } // apps/notifications/style.scss @@ -171,6 +181,19 @@ top: $nav-unification-masterbar-height-mobile; } + // client/layout/masterbar/style.scss + .masterbar__item-notifications .masterbar__notifications-bubble { + top: 10px; + } + + } + + // client/layout/masterbar/style.scss + @include breakpoint-deprecated( '<480px' ) { + + .masterbar__item-bubble { + transform: translate( -14px, -14px ); + } } } From 90588c8e8304fbead6b2da2aa50cb9e859c243c1 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Thu, 10 Sep 2020 17:44:07 +0200 Subject: [PATCH 08/11] Hide feature in dev environment --- config/development.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/development.json b/config/development.json index 380426bf5bec3..31ca95c89057d 100644 --- a/config/development.json +++ b/config/development.json @@ -138,7 +138,7 @@ "me/notifications": true, "my-sites/checkout/web-payment/apple-pay": true, "my-sites/checkout/web-payment/basic-card": false, - "nav-unification": true, + "nav-unification": false, "nps-survey/devdocs": true, "nps-survey/dev-trigger": true, "network-connection": true, From 840d5edfd81d2bff31fff9124928954e8c66bb61 Mon Sep 17 00:00:00 2001 From: cpap Date: Fri, 11 Sep 2020 12:38:05 +0300 Subject: [PATCH 09/11] Nav Unification: adds box-shadow in masterbar --- client/assets/stylesheets/_nav-unification.scss | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/client/assets/stylesheets/_nav-unification.scss b/client/assets/stylesheets/_nav-unification.scss index eb0b49ae9a730..a8a410d4a0151 100644 --- a/client/assets/stylesheets/_nav-unification.scss +++ b/client/assets/stylesheets/_nav-unification.scss @@ -32,6 +32,9 @@ height: $nav-unification-masterbar-height; border-bottom: none; font-size: $nav-unification-masterbar-font-size; + -webkit-box-shadow: inset 0 -1px 0 #333; + -moz-box-shadow: inset 0 -1px 0 #333; + box-shadow: inset 0 -1px 0 #333; } // client/layout/masterbar/style.scss @@ -89,7 +92,6 @@ color: $nav-unification-primary; } } - } // client/layout/masterbar/style.scss @@ -104,7 +106,6 @@ } } - .masterbar__item-notifications { padding-right: 5px; padding-left: 5px; @@ -127,7 +128,6 @@ // client/layout/masterbar/style.scss @include breakpoint-deprecated( '>960px' ) { - .masterbar__toggle-drafts.button.is-borderless { margin-left: -23px; } @@ -135,7 +135,6 @@ // breakpoint used in wp-admin @media only screen and ( max-width: 782px ) { - // client/layout/style.scss .layout__secondary { top: $nav-unification-masterbar-height-mobile; @@ -169,7 +168,6 @@ // client/layout/masterbar/style.scss .masterbar__item-me { - // fix for profile picture currently hidden in production .masterbar__item-content { display: block; @@ -185,16 +183,12 @@ .masterbar__item-notifications .masterbar__notifications-bubble { top: 10px; } - } // client/layout/masterbar/style.scss @include breakpoint-deprecated( '<480px' ) { - .masterbar__item-bubble { transform: translate( -14px, -14px ); } } - } - From b03fb41212953519ec8bacacf21e188939140c35 Mon Sep 17 00:00:00 2001 From: cpap Date: Fri, 11 Sep 2020 12:56:03 +0300 Subject: [PATCH 10/11] Nav Unification: upated import path to match the rest imports just for sanity --- client/assets/stylesheets/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/assets/stylesheets/style.scss b/client/assets/stylesheets/style.scss index 83efddd72eaff..aba6f05fca82b 100644 --- a/client/assets/stylesheets/style.scss +++ b/client/assets/stylesheets/style.scss @@ -17,4 +17,4 @@ // Styles for the nav unification prototype (see pbAPfg-O2) // TODO: depending on project outcome move or delete styles -@import 'nav-unification'; \ No newline at end of file +@import './_nav-unification'; From 5dab1d5004d551f31f593be2c834fa76c4583f92 Mon Sep 17 00:00:00 2001 From: cpap Date: Fri, 11 Sep 2020 13:07:19 +0300 Subject: [PATCH 11/11] Nav Unification: uses var for shadow color --- client/assets/stylesheets/_nav-unification.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/assets/stylesheets/_nav-unification.scss b/client/assets/stylesheets/_nav-unification.scss index a8a410d4a0151..d36362d6552ee 100644 --- a/client/assets/stylesheets/_nav-unification.scss +++ b/client/assets/stylesheets/_nav-unification.scss @@ -32,9 +32,9 @@ height: $nav-unification-masterbar-height; border-bottom: none; font-size: $nav-unification-masterbar-font-size; - -webkit-box-shadow: inset 0 -1px 0 #333; - -moz-box-shadow: inset 0 -1px 0 #333; - box-shadow: inset 0 -1px 0 #333; + -webkit-box-shadow: inset 0 -1px 0 var( --color-masterbar-item-hover-background ); + -moz-box-shadow: inset 0 -1px 0 var( --color-masterbar-item-hover-background ); + box-shadow: inset 0 -1px 0 var( --color-masterbar-item-hover-background ); } // client/layout/masterbar/style.scss