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

Try alternate style to indicate selected blocks #3068

Merged
merged 12 commits into from
Oct 27, 2017
Merged

Try alternate style to indicate selected blocks #3068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b5036a3
First pass at alternate block style.
Oct 18, 2017
728c2d4
Polish the hovered mover and settings.
Oct 19, 2017
ed0bf6a
Try a subtle "text focus" color for some blocks.
Oct 19, 2017
f47f3b9
Add normal color as fallback for Highlight.
Oct 19, 2017
f50e4ba
First pass at alternate block style.
Oct 18, 2017
e5b91ab
Polish the hovered mover and settings.
Oct 19, 2017
a42d5a6
Restore the boundary for a selected block.
Oct 23, 2017
b48efaa
Improve and polish the position of movers and settings.
Oct 23, 2017
fa3a1bf
Fix issues with prompt and full-wide ellipsis.
Oct 23, 2017
00366f7
Fix rebase issues.
Oct 24, 2017
3332ed8
Count arrow keys for isTyping.
mtias Oct 25, 2017
118f489
Block: Consolidate keydown event handling
aduth Oct 26, 2017
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
4 changes: 2 additions & 2 deletions editor/block-mover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.editor-block-mover {
position: absolute;
top: 0;
top: 2px;
left: 4px;
height: $text-editor-font-size * 4; // same height as an empty paragraph
padding: 6px 14px 6px 0; // handles hover area
padding: 4px 14px 6px 0; // handles hover area
z-index: z-index( '.editor-block-mover' );

// Mobile, to be revisited
Expand Down
5 changes: 3 additions & 2 deletions editor/block-settings-menu/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.editor-block-settings-menu {
position: absolute;
top: 0;
top: 2px;
right: 4px;
padding: 6px 0 6px 14px; // handles hover area
padding: 16px 0 20px 14px; // handles hover area

// Mobile
display: none;
Expand Down Expand Up @@ -31,6 +31,7 @@
}

.editor-block-settings-menu__toggle {
border-radius: 50%;
padding: 0;
transform: rotate( 90deg );
transition-duration: 0.3s;
Expand Down
78 changes: 41 additions & 37 deletions editor/modes/visual-editor/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import {
getBlockMode,
} from '../../selectors';

const { BACKSPACE, ESCAPE, DELETE, ENTER } = keycodes;
const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes;

class VisualEditorBlock extends Component {
constructor() {
Expand All @@ -65,7 +65,6 @@ class VisualEditorBlock extends Component {
this.maybeHover = this.maybeHover.bind( this );
this.maybeStartTyping = this.maybeStartTyping.bind( this );
this.stopTypingOnMouseMove = this.stopTypingOnMouseMove.bind( this );
this.removeOrDeselect = this.removeOrDeselect.bind( this );
this.mergeBlocks = this.mergeBlocks.bind( this );
this.onFocus = this.onFocus.bind( this );
this.onPointerDown = this.onPointerDown.bind( this );
Expand Down Expand Up @@ -198,35 +197,6 @@ class VisualEditorBlock extends Component {
this.lastClientY = clientY;
}

removeOrDeselect( event ) {
const { keyCode, target } = event;
const {
uid,
previousBlock,
onRemove,
onFocus,
onDeselect,
} = this.props;

// Remove block on backspace.
if (
target === this.node &&
( BACKSPACE === keyCode || DELETE === keyCode )
) {
event.preventDefault();
onRemove( [ uid ] );

if ( previousBlock ) {
onFocus( previousBlock.uid, { offset: -1 } );
}
}

// Deselect on escape.
if ( ESCAPE === keyCode ) {
onDeselect();
}
}

mergeBlocks( forward = false ) {
const { block, previousBlock, nextBlock, onMerge } = this.props;

Expand Down Expand Up @@ -275,14 +245,48 @@ class VisualEditorBlock extends Component {

onKeyDown( event ) {
const { keyCode, target } = event;
if ( ENTER === keyCode && target === this.node ) {
event.preventDefault();

this.props.onInsertBlocks( [
createBlock( 'core/paragraph' ),
], this.props.order + 1 );
switch ( keyCode ) {
case ENTER:
// Insert default block after current block if enter and event
// not already handled by descendant.
if ( target === this.node ) {
event.preventDefault();

this.props.onInsertBlocks( [
createBlock( 'core/paragraph' ),
], this.props.order + 1 );
}
break;

case UP:
case RIGHT:
case DOWN:
case LEFT:
// Arrow keys do not fire keypress event, but should still
// trigger typing mode.
this.maybeStartTyping();
break;

case BACKSPACE:
case DELETE:
// Remove block on backspace.
if ( target === this.node ) {
event.preventDefault();
const { uid, onRemove, previousBlock, onFocus } = this.props;
onRemove( uid );

if ( previousBlock ) {
onFocus( previousBlock.uid, { offset: -1 } );
}
}
break;

case ESCAPE:
// Deselect on escape.
this.props.onDeselect();
break;
}
this.removeOrDeselect( event );
}

onBlockError( error ) {
Expand Down
73 changes: 53 additions & 20 deletions editor/modes/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,11 @@
z-index: z-index( '.editor-visual-editor__block:before' );
content: '';
position: absolute;
outline: 1px solid transparent;
transition: 0.2s outline;
top: 0;
bottom: 0;

left: 0;
right: 0;
outline: 1px solid transparent;

@include break-small {
left: $block-mover-padding-visible;
Expand All @@ -67,7 +65,7 @@
}
}

&.has-warning .editor-visual-editor__block-edit::after {
&.has-warning .editor-visual-editor__block-edit:after {
content: '';
position: absolute;
top: 0;
Expand All @@ -77,24 +75,54 @@
background-color: rgba( $white, 0.6 );
}

&.is-hovered:before {
outline: 1px solid $light-gray-500;
transition: 0.2s outline;
// simpler style for a block that has cursor focus (but hasn't been selected)
&.is-selected .editor-block-mover:before,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may want to unify the className used for the hover and selected, maybe something like is-ui-visible

&.is-hovered .editor-block-mover:before,
&.is-selected .editor-block-settings-menu:before,
&.is-hovered .editor-block-settings-menu:before {
content: '';
position: absolute;
height: 36px;
top: 10px;
}

&.is-selected .editor-block-mover:before,
&.is-hovered .editor-block-mover:before {
border-right: 1px solid $light-gray-500;
right: 4px;
}

&.is-selected .editor-block-settings-menu:before,
&.is-hovered .editor-block-settings-menu:before {
border-left: 1px solid $light-gray-500;
left: 4px;
}

&.is-selected .editor-block-mover:before,
&.is-hovered .editor-block-mover:before {
border-right: 1px solid $light-gray-500;
right: 6px;
}

&.is-selected .editor-block-settings-menu:before,
&.is-hovered .editor-block-settings-menu:before {
border-left: 1px solid $light-gray-500;
left: 6px;
}

// focused block-style
&.is-selected:before {
outline: 2px solid $light-gray-500;
transition: 0.2s outline;
outline: 1px solid $light-gray-500;
}

// selection style for multiple blocks
&.is-multi-selected *::selection {
background: transparent;
}

&.is-multi-selected:before {
background: $blue-medium-100;
outline: 2px solid $blue-medium-200;
transition: 0s outline;
background: $blue-medium-200;
background: Highlight; // This variable is a CSS 2.1 variable that selects the operating system select color
}

.iframe-overlay {
Expand Down Expand Up @@ -220,12 +248,13 @@
@include break-wide() {
.editor-block-mover {
display: block;
}

.editor-block-mover {
top: -30px;
top: -29px;
left: 10px;
height: auto;

&:before {
content: none;
}
}

.editor-block-mover__control {
Expand All @@ -240,9 +269,13 @@
}

.editor-block-settings-menu {
top: -30px;
top: -41px;
right: 10px;
height: auto;

&:before {
content: none;
}
}
}

Expand Down Expand Up @@ -328,7 +361,7 @@
input[type=text] {
height: $text-editor-font-size * 4; // same height as an empty paragraph
margin-top: 0px;
margin-bottom: 5px;
margin-bottom: 4px;
outline: 1px solid transparent;
border: none;
background: none;
Expand Down Expand Up @@ -465,7 +498,7 @@
opacity: 1;
}

&::before {
&:before {
content: '';
position: absolute;
width: 100%;
Expand All @@ -474,7 +507,7 @@
transform: translateY( -50% );
}

&:hover::before {
&:hover:before {
height: 44px;
}

Expand Down