From 6d7e7233541ad89268f2aea65ecff59acb6cca11 Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Mon, 18 Mar 2019 13:10:16 +0900 Subject: [PATCH 1/3] 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/3] 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/3] 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;