Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ResizableBox: Make invisible resize handles bigger #14481

Merged
merged 3 commits into from
Mar 27, 2019
Merged

ResizableBox: Make invisible resize handles bigger #14481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d7e723
make invisible resize handles bigger
marekhrabe Mar 18, 2019
63c06de
add support for all possible handles (even corners)
marekhrabe Mar 19, 2019
d36adf7
add comment about functional/visual parts
marekhrabe Mar 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand Down
34 changes: 34 additions & 0 deletions packages/components/src/resizable-box/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<ReResizableBox
Expand All @@ -26,18 +28,46 @@ function ResizableBox( { className, ...props } ) {
handleClasses={ {
top: classnames(
handleClassName,
sideHandleClassName,
'components-resizable-box__handle-top',
),
right: classnames(
handleClassName,
sideHandleClassName,
'components-resizable-box__handle-right',
),
bottom: classnames(
handleClassName,
sideHandleClassName,
'components-resizable-box__handle-bottom',
),
left: classnames(
handleClassName,
sideHandleClassName,
'components-resizable-box__handle-left',
),
topLeft: classnames(
handleClassName,
cornerHandleClassName,
'components-resizable-box__handle-top',
'components-resizable-box__handle-left',
),
topRight: classnames(
handleClassName,
cornerHandleClassName,
'components-resizable-box__handle-top',
'components-resizable-box__handle-right',
),
bottomRight: classnames(
handleClassName,
cornerHandleClassName,
'components-resizable-box__handle-bottom',
'components-resizable-box__handle-right',
),
bottomLeft: classnames(
handleClassName,
cornerHandleClassName,
'components-resizable-box__handle-bottom',
'components-resizable-box__handle-left',
),
} }
Expand All @@ -46,6 +76,10 @@ function ResizableBox( { className, ...props } ) {
right: handleStylesOverrides,
bottom: handleStylesOverrides,
left: handleStylesOverrides,
topLeft: handleStylesOverrides,
topRight: handleStylesOverrides,
bottomRight: handleStylesOverrides,
bottomLeft: handleStylesOverrides,
} }
{ ...props }
/>
Expand Down
51 changes: 38 additions & 13 deletions packages/components/src/resizable-box/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
// 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;
height: $resize-handler-container-size;

// Show the resize handle when selected.
.components-resizable-box__container.is-selected & {
display: block;
}

// The handle is a pseudo-element and will sit inside this larger
marekhrabe marked this conversation as resolved.
Show resolved Hide resolved
// container size.
width: $resize-handler-container-size;
height: $resize-handler-container-size;
padding: $grid-size-small;
marekhrabe marked this conversation as resolved.
Show resolved Hide resolved
}

// This is the "visible" resize handle.
Expand All @@ -23,21 +21,48 @@
border-radius: 50%;
background: theme(primary);
cursor: inherit;
position: absolute;
top: calc(50% - #{$resize-handler-size / 2});
right: calc(50% - #{$resize-handler-size / 2});
}

// Show corner handles on top of side handles so they can be used
marekhrabe marked this conversation as resolved.
Show resolved Hide resolved
.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%;
top: 0;
}

/*!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-bottom {
bottom: calc(#{$resize-handler-container-size / 2} * -1);
left: calc(50% - #{$resize-handler-container-size / 2});
}

.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-top {
top: calc(#{$resize-handler-container-size / 2} * -1);
}

.components-resizable-box__handle-bottom {
bottom: calc(#{$resize-handler-container-size / 2} * -1);
}
/*!rtl:end:ignore*/