Skip to content

Commit

Permalink
Merge pull request #11 from Automattic/add/polish
Browse files Browse the repository at this point in the history 
Block icons, centered inline controls, type icons
  • Loading branch information
@jasmussen
jasmussen authored Feb 8, 2017
2 parents addfc61 + 284fa09 commit 9e8e6af
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 50 deletions.
34 changes: 28 additions & 6 deletions blocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -62,13 +63,32 @@ 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();
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
Expand All @@ -89,15 +109,17 @@ function onSelectText( event ) {
inlineControls.style.display = 'block';
var range = txt.getRangeAt(0);
var pos = range.getBoundingClientRect();
inlineControls.style.left = pos.left + 'px';
var selectCenter = pos.width / 2;
var controlsCenter = inlineControls.offsetWidth / 2;
inlineControls.style.left = ( pos.left + selectCenter - controlsCenter ) + 'px';
inlineControls.style.top = ( pos.top - 48 ) + 'px';
} else {
inlineControls.style.display = 'none';
}
}

function attachControlActions() {
Array.from( controls.childNodes ).forEach( function( node ) {
Array.from( switcher.childNodes ).forEach( function( node ) {
if ( 'svg' !== node.nodeName ) {
return;
}
Expand Down
19 changes: 17 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,25 @@
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="block-controls">
<div class="block-switcher">
<svg width="18" height="18" class="up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2 11l7-7 7 7-1.4 1.4L9 6.8l-5.6 5.6"/></svg>
<svg width="18" height="18" class="down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16 6.414l-7 7-7-7 1.4-1.4 5.6 5.6 5.6-5.6"/></svg>
<svg width="24" height="24" class="type" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path id="path-1_2_" class="st0" d="M13 5h2v16h2V5h2V3h-6.7.2-3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2v-7h-.5.5V5z"/><path class="st1" d="M9.5 3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3H9.5z"/></svg>
<span class="type">
<svg width="24" height="24" class="type-icon-paragraph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path id="path-1_2_" class="st0" d="M13 5h2v16h2V5h2V3h-6.7.2-3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2v-7h-.5.5V5z"/><path class="st1" d="M9.5 3C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3H9.5z"/></svg>
<svg width="24" height="24" class="type-icon-heading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Heading</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M18 20h-3v-6H9v6H6V5.01h3V11h6V5.01h3V20z"/></g></svg>
<svg width="24" height="24" class="type-icon-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Image</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M13 9.5c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5zM22 6v12c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2V6c0-1.105.895-2 2-2h16c1.105 0 2 .895 2 2zm-2 0H4v7.444L8 9l5.895 6.55 1.587-1.85c.798-.932 2.24-.932 3.037 0L20 15.426V6z"/></g></svg>
</span>
</div>
<div class="block-controls">
<button class="is-active">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Left</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M4 19h16v-2H4v2zm10-6H4v2h10v-2zM4 9v2h16V9H4zm10-4H4v2h10V5z"/></g></svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Center</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M4 19h16v-2H4v2zm13-6H7v2h10v-2zM4 9v2h16V9H4zm13-4H7v2h10V5z"/></g></svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Right</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M20 17H4v2h16v-2zm-10-2h10v-2H10v2zM4 9v2h16V9H4zm6-2h10V5H10v2z"/></g></svg>
</button>
</div>
<div class="inline-controls">
<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Bold</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M7 5.01h4.547c2.126 0 3.67.302 4.632.906.96.605 1.44 1.567 1.44 2.887 0 .896-.21 1.63-.63 2.205-.42.574-.98.92-1.678 1.036v.103c.95.212 1.637.608 2.057 1.19.42.58.63 1.35.63 2.315 0 1.367-.494 2.434-1.482 3.2-.99.765-2.332 1.148-4.027 1.148H7V5.01zm3 5.936h2.027c.862 0 1.486-.133 1.872-.4.386-.267.578-.708.578-1.323 0-.574-.21-.986-.63-1.236-.42-.25-1.087-.374-1.996-.374H10v3.333zm0 2.523v3.905h2.253c.876 0 1.52-.167 1.94-.502.416-.335.625-.848.625-1.54 0-1.243-.89-1.864-2.668-1.864H10z"/></g></svg></button>
Expand Down
92 changes: 50 additions & 42 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -135,10 +103,10 @@ p {


/**
* Block controls
* Block Switcher
*/

.block-controls {
.block-switcher {
opacity: 0;
margin-left: -54px;
height: 36px;
Expand All @@ -148,37 +116,45 @@ 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 .type {
width: 24px;
height: 24px;
display: block;
position: absolute;
right: 6px;
top: 6px;
}

.block-switcher .type svg { /* node type js picks icon here */
display: none;
}


/**
* Inline controls
Expand Down Expand Up @@ -251,6 +227,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-active {
background: #6d7882;
}


/**
* Inserter
*/
Expand Down

0 comments on commit 9e8e6af

Please sign in to comment.