Skip to content

Commit

Permalink
Try new icons for movers
Browse files Browse the repository at this point in the history
These icons are smaller and less obtrusive, which makes them less heavy to look at.

This PR also employs a workaround to achieve the effect that `:focusring` would, were it implemented (see https://www.youtube.com/watch?v=ilj2P5-5CjI). This is applied only to the mover icons.

GIF: https://cldup.com/5lyhf0iSTp.gif
  • Loading branch information
Joen Asmussen committed Jan 19, 2018
1 parent aa5e157 commit 91cb16c
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 5 deletions.
4 changes: 2 additions & 2 deletions editor/components/block-mover/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, block
<IconButton
className="editor-block-mover__control"
onClick={ isFirst ? null : onMoveUp }
icon="arrow-up-alt2"
icon={ <svg tabIndex="-1" width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M12.293 12.207L9 8.914l-3.293 3.293-1.414-1.414L9 6.086l4.707 4.707z" /></svg> }
tooltip={ __( 'Move Up' ) }
label={ getBlockMoverLabel(
uids.length,
Expand All @@ -49,7 +49,7 @@ export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, block
<IconButton
className="editor-block-mover__control"
onClick={ isLast ? null : onMoveDown }
icon="arrow-down-alt2"
icon={ <svg tabIndex="-1" width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M12.293 6.086L9 9.379 5.707 6.086 4.293 7.5 9 12.207 13.707 7.5z" /></svg> }
tooltip={ __( 'Move Down' ) }
label={ getBlockMoverLabel(
uids.length,
Expand Down
21 changes: 18 additions & 3 deletions editor/components/block-mover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,30 @@
margin-bottom: 4px;
}

&:not(:disabled):hover {
// unstyle inherited icon button styles
&:not(:disabled):hover,
&:not(:disabled):active,
&:not(:disabled):focus {
box-shadow: none;
color: inherit;
}

// apply styles to SVG directly
svg {
display: block;
position: relative; // Fixing the Safari bug for `<button>`s overflow
border-radius: 50%;
}

&:not(:disabled):hover svg {
@include button-style__hover;
}

&:not(:disabled):active {
&:not(:disabled):active svg {
@include button-style__active;
}

&:not(:disabled):focus {
&:not(:disabled):focus svg {
@include button-style__focus-active;
}
}

0 comments on commit 91cb16c

Please sign in to comment.