From 4e1ac254c37c890f21710c0022eb21fe2265bd2b Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 8 Feb 2017 14:11:12 +0100 Subject: [PATCH 1/4] Add icons for the block level controls. Alas, the sweet animation disappeared. Trying to bring it back, but focusing a bit first. Previous block-controls has been renamed block-switcher. --- blocks.js | 16 +++++++---- index.html | 13 ++++++++- style.css | 84 +++++++++++++++++++++++++++--------------------------- 3 files changed, 65 insertions(+), 48 deletions(-) diff --git a/blocks.js b/blocks.js index de1842d202ef0..50c09e0faae70 100644 --- a/blocks.js +++ b/blocks.js @@ -10,7 +10,8 @@ var getPreviousSibling = siblingGetter( 'previous' ); * Globals */ var editor = document.getElementsByClassName( 'editor' )[0]; -var controls = document.getElementsByClassName( 'block-controls' )[0]; +var switcher = document.getElementsByClassName( 'block-switcher' )[0]; +var blockControls = document.getElementsByClassName( 'block-controls' )[0]; var inlineControls = document.getElementsByClassName( 'inline-controls' )[0]; var selectedBlock = null; @@ -63,12 +64,17 @@ function clearBlocks() { function showControls( node ) { var position = node.getBoundingClientRect(); - controls.style.opacity = 1; - controls.style.top = ( position.top + 18 ) + 'px'; + switcher.style.opacity = 1; + switcher.style.top = ( position.top + 18 ) + 'px'; + blockControls.style.display = 'block'; + blockControls.style.top = ( position.top - 36 ) + 'px'; + blockControls.style.maxHeight = 'none'; } function hideControls() { - controls.style.opacity = 0; + switcher.style.opacity = 0; + blockControls.style.display = 'none'; + blockControls.style.maxHeight = 0; } // Show popup on text selection @@ -97,7 +103,7 @@ function onSelectText( event ) { } function attachControlActions() { - Array.from( controls.childNodes ).forEach( function( node ) { + Array.from( switcher.childNodes ).forEach( function( node ) { if ( 'svg' !== node.nodeName ) { return; } diff --git a/index.html b/index.html index 4c1ce1de7d703..e7853ca4e4926 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,22 @@ -
+
+
+ + + +
diff --git a/style.css b/style.css index c2c8971f6dcb1..fc46ed26e046c 100644 --- a/style.css +++ b/style.css @@ -94,39 +94,7 @@ h5.is-selected, h6.is-selected, p.is-selected, img.is-selected { - box-shadow: inset 0px 0px 0px 2px #191e23; -} - -h1:before, -h2:before, -h3:before, -h4:before, -h5:before, -h6:before, -p:before, -img:before { - content: ""; - position: absolute; - display: block; - top: 0; - left: 0; - height: 0; - width: 108px; - background: #191e23; - transition: all .075s ease; - transform: translateZ(0); -} - -h1.is-selected:before, -h2.is-selected:before, -h3.is-selected:before, -h4.is-selected:before, -h5.is-selected:before, -h6.is-selected:before, -p.is-selected:before, -img.is-selected:before { - height: 36px; - top: -36px; + box-shadow: inset 0px 0px 0px 2px #6d7882; } p { @@ -135,10 +103,10 @@ p { /** - * Block controls + * Block Switcher */ -.block-controls { +.block-switcher { opacity: 0; margin-left: -54px; height: 36px; @@ -148,33 +116,33 @@ p { transform: translateZ(0); } -.block-controls svg { +.block-switcher svg { fill: #86909c; position: absolute; cursor: pointer; } -.block-controls svg:hover { +.block-switcher svg:hover { fill: #191e23; } -.block-controls svg.up, -.block-controls svg.down { +.block-switcher svg.up, +.block-switcher svg.down { padding: 3px; width: 24px; height: 24px; left: -3px; } -.block-controls svg.up { +.block-switcher svg.up { top: -6px; } -.block-controls svg.down { +.block-switcher svg.down { bottom: -6px; } -.block-controls svg.type { +.block-switcher svg.type { right: 6px; top: 6px; } @@ -251,6 +219,38 @@ p { } +/** + * Block Controls + */ + + .block-controls { + background: #191e23; + display: inline-block; + max-height: 36px; + overflow: hidden; + position: absolute; + z-index: 10; + display: none; + transform: translateZ( 0 ); + } + + .block-controls button { + background: #191e23; + color: #fff; + border: none; + width: 36px; + height: 36px; + padding: 6px; + cursor: pointer; + display: block; + float: left; + } + +.block-controls button.is-selected { + background: #6d7882; +} + + /** * Inserter */ From b528c0a7a147259affa103e2a0e45ea75fa5216e Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 8 Feb 2017 14:26:25 +0100 Subject: [PATCH 2/4] Add node type icon. --- blocks.js | 14 ++++++++++++++ index.html | 6 +++++- style.css | 10 +++++++++- 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/blocks.js b/blocks.js index 50c09e0faae70..8a1a46890b143 100644 --- a/blocks.js +++ b/blocks.js @@ -63,9 +63,23 @@ function clearBlocks() { } function showControls( node ) { + // show element type + document.getElementsByClassName( 'type-icon-image' )[0].style.display = 'none'; + document.getElementsByClassName( 'type-icon-heading' )[0].style.display = 'none'; + document.getElementsByClassName( 'type-icon-paragraph' )[0].style.display = 'none'; + if ( node.nodeName == 'IMG' ) { + document.getElementsByClassName( 'type-icon-image' )[0].style.display = 'block'; + } else if ( node.nodeName == 'H1' || node.nodeName == 'H2' || node.nodeName == 'H3' || node.nodeName == 'H4' || node.nodeName == 'H5' || node.nodeName == 'H6' ) { + document.getElementsByClassName( 'type-icon-heading' )[0].style.display = 'block'; + } else { + document.getElementsByClassName( 'type-icon-paragraph' )[0].style.display = 'block'; + } + + // show controls var position = node.getBoundingClientRect(); switcher.style.opacity = 1; switcher.style.top = ( position.top + 18 ) + 'px'; + blockControls.style.display = 'block'; blockControls.style.top = ( position.top - 36 ) + 'px'; blockControls.style.maxHeight = 'none'; diff --git a/index.html b/index.html index e7853ca4e4926..6d66673c18f97 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,11 @@
- + + + Heading + Image +
-