From e4a9d337216b0d67abf3d2e70bdc2e1a0ba88bc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1vid=20Szab=C3=B3?= Date: Tue, 20 Oct 2020 17:53:31 +0200 Subject: [PATCH] Site editor: Rework navigation panel animations (#26158) --- .../src/components/header/style.scss | 8 ++- .../components/navigation-sidebar/index.js | 2 +- .../navigation-panel/index.js | 55 ++++++++++++++----- .../navigation-panel/style.scss | 46 ++++++++++++---- .../navigation-toggle/index.js | 47 +++++++--------- .../navigation-toggle/style.scss | 33 +---------- 6 files changed, 106 insertions(+), 85 deletions(-) diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss index 320a597c39d4fd..07976094393db0 100644 --- a/packages/edit-site/src/components/header/style.scss +++ b/packages/edit-site/src/components/header/style.scss @@ -5,7 +5,11 @@ height: $header-height; box-sizing: border-box; width: 100%; - padding-left: $header-height; + + padding-left: 60px; + transition: padding-left 20ms linear; + transition-delay: 80ms; + @include reduce-motion("transition"); .edit-site-header_start, .edit-site-header_end { @@ -43,6 +47,8 @@ body.is-navigation-sidebar-open { .edit-site-header { padding-left: 0; + transition: padding-left 20ms linear; + transition-delay: 0ms; .edit-site-header_start { flex-basis: $header-toolbar-min-width; diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js index ea5b1e21a0e2c2..0cdac7126040b0 100644 --- a/packages/edit-site/src/components/navigation-sidebar/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/index.js @@ -17,7 +17,7 @@ const NavigationSidebar = () => { return ( <> - { isNavigationOpen && } + ); }; diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js index 7f79d0f1105fde..44049667fc8d9e 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -17,22 +22,46 @@ export const { Slot: NavigationPanelPreviewSlot, } = createSlotFill( 'EditSiteNavigationPanelPreview' ); -const NavigationPanel = () => { +const NavigationPanel = ( { isOpen } ) => { const [ contentActiveMenu, setContentActiveMenu ] = useState( MENU_ROOT ); - const templatesActiveMenu = useSelect( - ( select ) => select( 'core/edit-site' ).getNavigationPanelActiveMenu(), - [] - ); + const { templatesActiveMenu, siteTitle } = useSelect( ( select ) => { + const { getNavigationPanelActiveMenu } = select( 'core/edit-site' ); + const { getEntityRecord } = select( 'core' ); + + const siteData = + getEntityRecord( 'root', '__unstableBase', undefined ) || {}; + + return { + templatesActiveMenu: getNavigationPanelActiveMenu(), + siteTitle: siteData.name, + }; + }, [] ); return ( -
- { ( contentActiveMenu === MENU_ROOT || - templatesActiveMenu !== MENU_ROOT ) && } - - { ( templatesActiveMenu === MENU_ROOT || - contentActiveMenu !== MENU_ROOT ) && ( - - ) } +
+
+
+
+ { siteTitle } +
+
+ + { ( contentActiveMenu === MENU_ROOT || + templatesActiveMenu !== MENU_ROOT ) && ( + + ) } + + { ( templatesActiveMenu === MENU_ROOT || + contentActiveMenu !== MENU_ROOT ) && ( + + ) } +
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss index 916582a9de7c9a..599ea0334cf1e3 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss @@ -1,18 +1,42 @@ .edit-site-navigation-panel { - animation: edit-site-navigation-panel__slide-in 0.1s linear; height: 100%; - width: $nav-sidebar-width; + position: relative; + width: 0; + overflow: hidden; background: $gray-900; - @include reduce-motion("animation"); + transition: width 100ms linear; + @include reduce-motion("transition"); +} - @keyframes edit-site-navigation-panel__slide-in { - from { - transform: translateX(-100%); - } - to { - transform: translateX(0%); - } - } +.edit-site-navigation-panel.is-open { + width: $nav-sidebar-width; +} + +.edit-site-navigation-panel__inner { + position: relative; + width: $nav-sidebar-width; + height: 100%; +} + +.edit-site-navigation-panel__site-title-container { + height: $header-height; + padding-left: $header-height; + margin: 0 $grid-unit-20 0 $grid-unit-10; + display: flex; + align-items: center; +} + +.edit-site-navigation-panel__site-title { + font-style: normal; + font-weight: 600; + font-size: $default-font-size; + line-height: $default-line-height; + color: $gray-300; + + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary { diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js index 244c26b8ed785f..fc0a38f99fd1e6 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js @@ -7,29 +7,26 @@ import { __ } from '@wordpress/i18n'; import { wordpress } from '@wordpress/icons'; function NavigationToggle( { icon, isOpen } ) { - const { - isActive, - isRequestingSiteIcon, - siteIconUrl, - siteTitle, - } = useSelect( ( select ) => { - const { isFeatureActive } = select( 'core/edit-site' ); - const { getEntityRecord } = select( 'core' ); - const { isResolving } = select( 'core/data' ); - const siteData = - getEntityRecord( 'root', '__unstableBase', undefined ) || {}; + const { isActive, isRequestingSiteIcon, siteIconUrl } = useSelect( + ( select ) => { + const { isFeatureActive } = select( 'core/edit-site' ); + const { getEntityRecord } = select( 'core' ); + const { isResolving } = select( 'core/data' ); + const siteData = + getEntityRecord( 'root', '__unstableBase', undefined ) || {}; - return { - isActive: isFeatureActive( 'fullscreenMode' ), - isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [ - 'root', - '__unstableBase', - undefined, - ] ), - siteIconUrl: siteData.site_icon_url, - siteTitle: siteData.name, - }; - }, [] ); + return { + isActive: isFeatureActive( 'fullscreenMode' ), + isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [ + 'root', + '__unstableBase', + undefined, + ] ), + siteIconUrl: siteData.site_icon_url, + }; + }, + [] + ); const { setIsNavigationPanelOpened } = useDispatch( 'core/edit-site' ); @@ -67,12 +64,6 @@ function NavigationToggle( { icon, isOpen } ) { > { buttonIcon } - - { isOpen && ( -
- { siteTitle } -
- ) }
); } diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss index c35c49ef8bb3fd..0b51e8536a2f25 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss @@ -13,28 +13,13 @@ } } -.edit-site-navigation-toggle.is-open { - flex-shrink: 0; - height: $header-height + $border-width; // Cover header border - width: 300px; - position: static; - - // Delay to sync with `NavigationPanel` animation - transition: width 80ms linear; - transition-delay: 20ms; - @include reduce-motion("transition"); - - .edit-site-navigation-toggle__button { - background: $gray-900; - } -} - .edit-site-navigation-toggle__button { align-items: center; - background: #23282e; // WP-admin gray. + background: $gray-900; color: $white; height: $header-height + $border-width; // Cover header border width: $header-height; + z-index: 1; &.has-icon { min-width: $header-height; @@ -55,17 +40,3 @@ .edit-site-navigation-toggle__site-icon { width: 36px; } - -.edit-site-navigation-toggle__site-title { - font-style: normal; - font-weight: 600; - font-size: $default-font-size; - line-height: $default-line-height; - color: $gray-300; - margin: 0 $grid-unit-20 0 $grid-unit-10; - - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -}