From 6d7e7233541ad89268f2aea65ecff59acb6cca11 Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Mon, 18 Mar 2019 13:10:16 +0900 Subject: [PATCH 1/8] make invisible resize handles bigger --- .../components/src/resizable-box/style.scss | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index 5032d78dc1efbd..cfcfc2f912ef36 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -5,12 +5,6 @@ .components-resizable-box__container.is-selected & { display: block; } - - // The handle is a pseudo-element and will sit inside this larger - // container size. - width: $resize-handler-container-size; - height: $resize-handler-container-size; - padding: $grid-size-small; } // This is the "visible" resize handle. @@ -23,21 +17,30 @@ border-radius: 50%; background: theme(primary); cursor: inherit; + position: absolute; + top: calc(50% - #{$resize-handler-size / 2}); + right: calc(50% - #{$resize-handler-size / 2}); } /*!rtl:begin:ignore*/ -.components-resizable-box__handle-right { - top: calc(50% - #{$resize-handler-container-size / 2}); - right: calc(#{$resize-handler-container-size / 2} * -1); +.components-resizable-box__handle-right, +.components-resizable-box__handle-left { + top: 0; + height: 100%; + width: $resize-handler-container-size; } -.components-resizable-box__handle-bottom { - bottom: calc(#{$resize-handler-container-size / 2} * -1); - left: calc(50% - #{$resize-handler-container-size / 2}); +.components-resizable-box__handle-right { + right: calc(#{$resize-handler-container-size / 2} * -1); } .components-resizable-box__handle-left { - top: calc(50% - #{$resize-handler-container-size / 2}); left: calc(#{$resize-handler-container-size / 2} * -1); } + +.components-resizable-box__handle-bottom { + bottom: calc(#{$resize-handler-container-size / 2} * -1); + width: 100%; + height: $resize-handler-container-size; +} /*!rtl:end:ignore*/ From 63c06de1aa6eac98745973a914fd8a3ab4988a67 Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Tue, 19 Mar 2019 18:30:31 +0900 Subject: [PATCH 2/8] add support for all possible handles (even corners) --- assets/stylesheets/_z-index.scss | 6 +++- .../components/src/resizable-box/index.js | 34 +++++++++++++++++++ .../components/src/resizable-box/style.scss | 34 +++++++++++++++---- 3 files changed, 66 insertions(+), 8 deletions(-) diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 86ab07f3e28ab1..3c8b921b1fce0c 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -99,7 +99,11 @@ $z-layers: ( ".nux-dot-tip": 1000001, // Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar: - ".components-tooltip": 1000002 + ".components-tooltip": 1000002, + + // Make sure corner handles are above side handles for ResizableBox component + ".components-resizable-box__side-handle": 1, + ".components-resizable-box__corner-handle": 2 ); @function z-index( $key ) { diff --git a/packages/components/src/resizable-box/index.js b/packages/components/src/resizable-box/index.js index c13129207645c8..13e98a7f4da474 100644 --- a/packages/components/src/resizable-box/index.js +++ b/packages/components/src/resizable-box/index.js @@ -16,6 +16,8 @@ function ResizableBox( { className, ...props } ) { }; const handleClassName = 'components-resizable-box__handle'; + const sideHandleClassName = 'components-resizable-box__side-handle'; + const cornerHandleClassName = 'components-resizable-box__corner-handle'; return ( diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index cfcfc2f912ef36..f5e5dca14d4047 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -1,5 +1,7 @@ .components-resizable-box__handle { display: none; + width: $resize-handler-container-size; + height: $resize-handler-container-size; // Show the resize handle when selected. .components-resizable-box__container.is-selected & { @@ -22,14 +24,30 @@ right: calc(50% - #{$resize-handler-size / 2}); } -/*!rtl:begin:ignore*/ -.components-resizable-box__handle-right, -.components-resizable-box__handle-left { - top: 0; +// Show corner handles on top of side handles so they can be used +.components-resizable-box__side-handle { + z-index: z-index(".components-resizable-box__side-handle"); +} + +.components-resizable-box__corner-handle { + z-index: z-index(".components-resizable-box__corner-handle"); +} + +// Make horizontal side-handles full width +.components-resizable-box__side-handle.components-resizable-box__handle-top, +.components-resizable-box__side-handle.components-resizable-box__handle-bottom { + width: 100%; + left: 0; +} + +// Make vertical side-handles full height +.components-resizable-box__side-handle.components-resizable-box__handle-left, +.components-resizable-box__side-handle.components-resizable-box__handle-right { height: 100%; - width: $resize-handler-container-size; + top: 0; } +/*!rtl:begin:ignore*/ .components-resizable-box__handle-right { right: calc(#{$resize-handler-container-size / 2} * -1); } @@ -38,9 +56,11 @@ left: calc(#{$resize-handler-container-size / 2} * -1); } +.components-resizable-box__handle-top { + top: calc(#{$resize-handler-container-size / 2} * -1); +} + .components-resizable-box__handle-bottom { bottom: calc(#{$resize-handler-container-size / 2} * -1); - width: 100%; - height: $resize-handler-container-size; } /*!rtl:end:ignore*/ From d36adf7ce50b83bf6232d997989e2c9987b3ebf1 Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Wed, 20 Mar 2019 16:47:18 +0900 Subject: [PATCH 3/8] add comment about functional/visual parts --- packages/components/src/resizable-box/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index f5e5dca14d4047..433e169ea9dfdc 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -1,3 +1,5 @@ +// This is a wrapper of the actual visible handle (pseudo element). It is styled +// to be much bigger than the visual part so it's easier to click and use. .components-resizable-box__handle { display: none; width: $resize-handler-container-size; From 17b533a95eaefeb41777a68053538306b3c8bcc3 Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Thu, 21 Mar 2019 12:37:05 +0900 Subject: [PATCH 4/8] add visual side handle --- .../components/src/resizable-box/style.scss | 49 +++++++++++++++++-- 1 file changed, 45 insertions(+), 4 deletions(-) diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index 433e169ea9dfdc..7e2eddb9a6dca9 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -11,8 +11,8 @@ } } -// This is the "visible" resize handle. -.components-resizable-box__handle::before { +// This is the "visible" resize handle - the circle part +.components-resizable-box__handle::after { display: block; content: ""; width: $resize-handler-size; @@ -26,6 +26,21 @@ right: calc(50% - #{$resize-handler-size / 2}); } +// This is the "visible" resize handle for side handles - the line +.components-resizable-box__side-handle::before { + display: block; + content: ""; + width: 6px; + height: 6px; + border: 2px solid $white; + background: theme(primary); + cursor: inherit; + position: absolute; + top: calc(50% - 3px); + right: calc(50% - 3px); + transition: transform 0.1s ease-in; +} + // Show corner handles on top of side handles so they can be used .components-resizable-box__side-handle { z-index: z-index(".components-resizable-box__side-handle"); @@ -37,16 +52,42 @@ // Make horizontal side-handles full width .components-resizable-box__side-handle.components-resizable-box__handle-top, -.components-resizable-box__side-handle.components-resizable-box__handle-bottom { +.components-resizable-box__side-handle.components-resizable-box__handle-bottom, +.components-resizable-box__side-handle.components-resizable-box__handle-top::before, +.components-resizable-box__side-handle.components-resizable-box__handle-bottom::before { width: 100%; left: 0; + border-left: 0; + border-right: 0; } // Make vertical side-handles full height .components-resizable-box__side-handle.components-resizable-box__handle-left, -.components-resizable-box__side-handle.components-resizable-box__handle-right { +.components-resizable-box__side-handle.components-resizable-box__handle-right, +.components-resizable-box__side-handle.components-resizable-box__handle-left::before, +.components-resizable-box__side-handle.components-resizable-box__handle-right::before { height: 100%; top: 0; + border-top: 0; + border-bottom: 0; +} + +// Hide side handle line by default +.components-resizable-box__side-handle.components-resizable-box__handle-top::before, +.components-resizable-box__side-handle.components-resizable-box__handle-bottom::before { + transform: scaleX(0); +} + +.components-resizable-box__side-handle.components-resizable-box__handle-left::before, +.components-resizable-box__side-handle.components-resizable-box__handle-right::before { + transform: scaleY(0); +} + +// Reveal the side handle line when hovered or in use +.components-resizable-box__side-handle:active::before, +.components-resizable-box__side-handle:hover::before { + transform: none; + transition: transform 0.1s ease-out; } /*!rtl:begin:ignore*/ From affd6b8d5e50c7b4fd1beac1418b444e907a280f Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Mon, 8 Apr 2019 21:39:47 +0900 Subject: [PATCH 5/8] different thickness, gray border in dark themes --- assets/stylesheets/_variables.scss | 2 +- .../components/src/resizable-box/style.scss | 19 +++++++++++++------ 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/assets/stylesheets/_variables.scss b/assets/stylesheets/_variables.scss index 1c30d4f053d66a..28f133db4136d6 100644 --- a/assets/stylesheets/_variables.scss +++ b/assets/stylesheets/_variables.scss @@ -48,7 +48,7 @@ $icon-button-size: 36px; $icon-button-size-small: 24px; $inserter-tabs-height: 36px; $block-toolbar-height: $block-controls-height + $border-width; -$resize-handler-size: 16px; +$resize-handler-size: 15px; $resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area. // Blocks diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index 7e2eddb9a6dca9..6c6ba54315c27b 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -22,25 +22,32 @@ background: theme(primary); cursor: inherit; position: absolute; - top: calc(50% - #{$resize-handler-size / 2}); - right: calc(50% - #{$resize-handler-size / 2}); + top: calc(50% - #{ceil($resize-handler-size / 2)}); + right: calc(50% - #{ceil($resize-handler-size / 2)}); } // This is the "visible" resize handle for side handles - the line .components-resizable-box__side-handle::before { display: block; content: ""; - width: 6px; - height: 6px; + width: 7px; + height: 7px; border: 2px solid $white; background: theme(primary); cursor: inherit; position: absolute; - top: calc(50% - 3px); - right: calc(50% - 3px); + top: calc(50% - 4px); + right: calc(50% - 4px); transition: transform 0.1s ease-in; } +.is-dark-theme { + .components-resizable-box__side-handle::before, + .components-resizable-box__handle::after { + border-color: $light-gray-500; + } +} + // Show corner handles on top of side handles so they can be used .components-resizable-box__side-handle { z-index: z-index(".components-resizable-box__side-handle"); From a46f5290f118c9be74e765a233cc9743ad1e13f5 Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Mon, 8 Apr 2019 21:45:27 +0900 Subject: [PATCH 6/8] same border as block selection --- packages/components/src/resizable-box/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index 6c6ba54315c27b..40af940e1ac5c4 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -44,7 +44,7 @@ .is-dark-theme { .components-resizable-box__side-handle::before, .components-resizable-box__handle::after { - border-color: $light-gray-500; + border-color: $light-gray-600; } } From faf2ced33f72b4473564f332231b2f8553eb0e1c Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 10 Apr 2019 14:45:30 -0400 Subject: [PATCH 7/8] Move resize handle animations to an animation property --- .../components/src/resizable-box/style.scss | 46 ++++++++++++++----- 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index 40af940e1ac5c4..c89f5b1b262b09 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -39,6 +39,7 @@ top: calc(50% - 4px); right: calc(50% - 4px); transition: transform 0.1s ease-in; + opacity: 0; } .is-dark-theme { @@ -79,22 +80,43 @@ border-bottom: 0; } -// Hide side handle line by default -.components-resizable-box__side-handle.components-resizable-box__handle-top::before, -.components-resizable-box__side-handle.components-resizable-box__handle-bottom::before { - transform: scaleX(0); +// Reveal the side handle line when hovered or in use +.components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-top:active::before, +.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { + animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s; + animation-fill-mode: forwards; } -.components-resizable-box__side-handle.components-resizable-box__handle-left::before, -.components-resizable-box__side-handle.components-resizable-box__handle-right::before { - transform: scaleY(0); +.components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before, +.components-resizable-box__side-handle.components-resizable-box__handle-left:active::before, +.components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { + animation: components-resizable-box__left-right-animation 0.1s ease-out 0s; + animation-fill-mode: forwards; } -// Reveal the side handle line when hovered or in use -.components-resizable-box__side-handle:active::before, -.components-resizable-box__side-handle:hover::before { - transform: none; - transition: transform 0.1s ease-out; +@keyframes components-resizable-box__top-bottom-animation { + from { + transform: scaleX(0); + opacity: 0; + } + to { + transform: scaleX(1); + opacity: 1; + } +} + +@keyframes components-resizable-box__left-right-animation { + from { + transform: scaleY(0); + opacity: 0; + } + to { + transform: scaleY(1); + opacity: 1; + } } /*!rtl:begin:ignore*/ From f5d15cf6afc03bda969eec415221d1c318b821b8 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 10 Apr 2019 14:48:35 -0400 Subject: [PATCH 8/8] Add reduce motion mixin to the resize handles. --- packages/components/src/resizable-box/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss index c89f5b1b262b09..f8f2e40cdbde6e 100644 --- a/packages/components/src/resizable-box/style.scss +++ b/packages/components/src/resizable-box/style.scss @@ -87,6 +87,7 @@ .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before { animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s; animation-fill-mode: forwards; + @include reduce-motion; } .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before, @@ -95,6 +96,7 @@ .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before { animation: components-resizable-box__left-right-animation 0.1s ease-out 0s; animation-fill-mode: forwards; + @include reduce-motion; } @keyframes components-resizable-box__top-bottom-animation {