From d0efead2741aa6bb4bec19a8a19b030bd7920e7f Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 1 Feb 2019 12:24:39 +0100 Subject: [PATCH 1/4] Try: Add animation to sidebar. WIP --- packages/edit-post/src/components/layout/style.scss | 6 ------ packages/edit-post/src/components/sidebar/style.scss | 11 +++++++++++ packages/edit-post/src/style.scss | 6 ++++++ 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 963862b7105d73..14973f1c59a265 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -181,12 +181,6 @@ } } -@keyframes edit-post-layout__slide-in-animation { - 100% { - transform: translateX(0%); - } -} - .edit-post-layout .editor-post-publish-panel__header-publish-button { // Match the size of the Publish... button. .components-button.is-large { diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index cd8256823d4e75..a91b4c093d880f 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -11,6 +11,17 @@ height: 100vh; overflow: hidden; + + // Animate in the sidebar + transform: translateX(+100%); + + .is-sidebar-opened & { + @include break-medium() { + animation: edit-post-layout__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1); + animation-fill-mode: forwards; + } + } + @include break-small() { top: $admin-bar-height-big + $header-height; z-index: z-index(".edit-post-sidebar {greater than small}"); diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 83f2a777454585..e5a536b8bb2114 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -50,6 +50,12 @@ } } +@keyframes edit-post-layout__slide-in-animation { + 100% { + transform: translateX(0%); + } +} + // In order to use mix-blend-mode, this element needs to have an explicitly set background-color // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations html.wp-toolbar { From 8d0ce1c85139d75cab65cd9b377715e76edb2450 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 8 Feb 2019 11:05:46 +0100 Subject: [PATCH 2/4] Add slide-in animation to the Animate component --- packages/components/src/animate/index.js | 11 ++++++++ packages/components/src/animate/style.scss | 15 +++++++++++ .../src/components/layout/style.scss | 8 +++++- .../edit-post/src/components/sidebar/index.js | 27 ++++++++++++------- .../src/components/sidebar/style.scss | 11 -------- packages/edit-post/src/style.scss | 6 ----- 6 files changed, 51 insertions(+), 27 deletions(-) diff --git a/packages/components/src/animate/index.js b/packages/components/src/animate/index.js index a144e6ee8b27d9..03abc44eae0ed0 100644 --- a/packages/components/src/animate/index.js +++ b/packages/components/src/animate/index.js @@ -19,6 +19,17 @@ function Animate( { type, options = {}, children } ) { } ); } + if ( type === 'slide-in' ) { + const { origin = 'left' } = options; + + return children( { + className: classnames( + 'components-animate__slide-in', + 'is-from-' + origin, + ), + } ); + } + return children( {} ); } diff --git a/packages/components/src/animate/style.scss b/packages/components/src/animate/style.scss index 0a725ce0032d47..2d5dfcc9b5abdc 100644 --- a/packages/components/src/animate/style.scss +++ b/packages/components/src/animate/style.scss @@ -26,3 +26,18 @@ transform: translateY(0%) scaleY(1) scaleX(1); } } + +.components-animate__slide-in { + animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1); + animation-fill-mode: forwards; + + &.is-from-left { + transform: translateX(+100%); + } +} + +@keyframes components-animate__slide-in-animation { + 100% { + transform: translateX(0%); + } +} diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 14973f1c59a265..f848a8cfd7ccd5 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -173,7 +173,7 @@ width: $sidebar-width; border-left: $border-width solid $light-gray-500; transform: translateX(+100%); - animation: edit-post-layout__slide-in-animation 0.1s forwards; + animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards; body.is-fullscreen-mode & { top: 0; @@ -181,6 +181,12 @@ } } +@keyframes edit-post-post-publish-panel__slide-in-animation { + 100% { + transform: translateX(0%); + } +} + .edit-post-layout .editor-post-publish-panel__header-publish-button { // Match the size of the Publish... button. .components-button.is-large { diff --git a/packages/edit-post/src/components/sidebar/index.js b/packages/edit-post/src/components/sidebar/index.js index b043403d8bf32e..a9da35865e8755 100644 --- a/packages/edit-post/src/components/sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/index.js @@ -1,7 +1,12 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ -import { createSlotFill, withFocusReturn } from '@wordpress/components'; +import { createSlotFill, withFocusReturn, Animate } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { ifCondition, compose } from '@wordpress/compose'; @@ -15,14 +20,18 @@ const { Fill, Slot } = createSlotFill( 'Sidebar' ); const Sidebar = ( { children, label } ) => { return ( -
- { children } -
+ + { ( { className } ) => ( +
+ { children } +
+ ) } + ); }; diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index a91b4c093d880f..cd8256823d4e75 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -11,17 +11,6 @@ height: 100vh; overflow: hidden; - - // Animate in the sidebar - transform: translateX(+100%); - - .is-sidebar-opened & { - @include break-medium() { - animation: edit-post-layout__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1); - animation-fill-mode: forwards; - } - } - @include break-small() { top: $admin-bar-height-big + $header-height; z-index: z-index(".edit-post-sidebar {greater than small}"); diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index e5a536b8bb2114..83f2a777454585 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -50,12 +50,6 @@ } } -@keyframes edit-post-layout__slide-in-animation { - 100% { - transform: translateX(0%); - } -} - // In order to use mix-blend-mode, this element needs to have an explicitly set background-color // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations html.wp-toolbar { From 969fc7cd70e32b95c529f69d1ec981afedb1447a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 8 Feb 2019 11:08:20 +0100 Subject: [PATCH 3/4] Document the animation --- packages/components/src/animate/README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/components/src/animate/README.md b/packages/components/src/animate/README.md index 5ad580bac51e61..4d643698cf77e6 100644 --- a/packages/components/src/animate/README.md +++ b/packages/components/src/animate/README.md @@ -37,3 +37,13 @@ This animation is meant for popover/modal content, such as menus appearing. It s Name | Type | Default | Description --- | --- | --- | --- `origin` | `string` | `top center` | Point of origin (`top`, `bottom`,` middle right`, `left`, `center`). + +### slide-in + +This animation is meant for sidebars and sliding menus. It shows the height and width of the animated element moving from a hidden position to its normal one. + +#### Options + +Name | Type | Default | Description +--- | --- | --- | --- +`origin` | `string` | `left` | Point of origin (`left`). From 480b977848d264f387e7cd5556b1a03925626ed2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 11 Feb 2019 14:19:10 +0100 Subject: [PATCH 4/4] Fix e2e tests --- packages/e2e-test-utils/src/find-sidebar-panel-with-title.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js b/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js index fae3f33b53910a..bd257787126758 100644 --- a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js +++ b/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js @@ -11,5 +11,5 @@ import { first } from 'lodash'; * @return {?ElementHandle} Object that represents an in-page DOM element. */ export async function findSidebarPanelWithTitle( panelTitle ) { - return first( await page.$x( `//div[@class="edit-post-sidebar"]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]` ) ); + return first( await page.$x( `//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]` ) ); }