Skip to content

Commit

Permalink
UI Prototype: Try the dockerized controls prototype (#108)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Feb 21, 2017
1 parent 33db39f commit a416864
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 125 deletions.
58 changes: 12 additions & 46 deletions blocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,8 +222,7 @@ var editor = queryFirst( '.editor' );
var switcher = queryFirst( '.block-switcher' );
var switcherButtons = query( '.block-switcher .type svg' );
var switcherMenu = queryFirst( '.switch-block__menu' );
var blockControls = queryFirst( '.block-controls' );
var inlineControls = queryFirst( '.inline-controls' );
var dockedControls = queryFirst( '.docked-controls' );
var insertBlockButton = queryFirst( '.insert-block__button' );
var insertBlockMenu = queryFirst( '.insert-block__menu' );
var insertBlockMenuSearchInput = queryFirst( '.insert-block__search' );
Expand Down Expand Up @@ -275,7 +274,6 @@ insertBlockButton.addEventListener( 'click', openBlockMenu, false );
insertBlockMenu.addEventListener( 'click', function( event ) {
event.stopPropagation();
}, false );
window.addEventListener( 'mouseup', onSelectText, false );

attachBlockHandlers();
attachControlActions();
Expand Down Expand Up @@ -341,17 +339,17 @@ function showControls( node ) {
switcher.style.top = ( position.top + 18 + window.scrollY ) + 'px';

// show/hide block-specific block controls
blockControls.className = 'block-controls';
dockedControls.className = 'docked-controls';
getTypeKinds( blockType ).forEach( function( kind ) {
blockControls.classList.add( 'is-' + kind );
dockedControls.classList.add( 'is-' + kind );
} );
blockControls.style.display = 'block';
dockedControls.style.display = 'block';

// reposition block-specific block controls
updateBlockControlsPosition();
updateDockedControlsPosition();
}

function updateBlockControlsPosition( newClassName ) {
function updateDockedControlsPosition( newClassName ) {
var isImage = selectedBlock.tagName === 'IMG';
var className = selectedBlock.className;
var position = selectedBlock.getBoundingClientRect();
Expand All @@ -367,53 +365,22 @@ function updateBlockControlsPosition( newClassName ) {
topPosition = newClassName ? topPosition - 15 : topPosition;
} else if ( isImage && alignedLeft && newClassName ) {
topPosition = topPosition - 15;
} else if ( isImage && className === 'is-selected' && blockControls.style.left ) {
} else if ( isImage && className === 'is-selected' && dockedControls.style.left ) {
leftPosition = null;
topPosition = topPosition + 15;
} else if ( fullBleed ) {
leftPosition = ( window.innerWidth / 2 ) - ( blockControls.clientWidth / 2 );
leftPosition = ( window.innerWidth / 2 ) - ( dockedControls.clientWidth / 2 );
}

blockControls.style.maxHeight = 'none';
blockControls.style.top = topPosition + 'px';
blockControls.style.left = leftPosition ? leftPosition + 'px' : null;
dockedControls.style.maxHeight = 'none';
dockedControls.style.top = topPosition + 'px';
dockedControls.style.left = leftPosition ? leftPosition + 'px' : null;
}

function hideControls() {
switcher.style.opacity = 0;
switcherMenu.style.display = 'none';
blockControls.style.display = 'none';
}

function hideInlineControls() {
inlineControls.style.display = 'none';
}

// Show popup on text selection
function onSelectText( event ) {
event.stopPropagation();
var txt = "";

if ( window.getSelection ) {
txt = window.getSelection();
} else if ( document.getSelection ) {
txt = document.getSelection();
} else if ( document.selection ) {
txt = document.selection.createRange().text;
}

// Show formatting bar
if ( txt != '' ) {
inlineControls.style.display = 'block';
var range = txt.getRangeAt(0);
var pos = range.getBoundingClientRect();
var selectCenter = pos.width / 2;
var controlsCenter = inlineControls.offsetWidth / 2;
inlineControls.style.left = ( pos.left + selectCenter - controlsCenter ) + 'px';
inlineControls.style.top = ( pos.top - 48 + window.scrollY ) + 'px';
} else {
inlineControls.style.display = 'none';
}
dockedControls.style.display = 'none';
}

function attachControlActions() {
Expand Down Expand Up @@ -688,7 +655,6 @@ function siblingGetter( direction ) {
}

function openBlockMenu( event ) {
hideInlineControls();
clearBlocks();
event && event.stopPropagation();
insertBlockMenu.style.display = 'block';
Expand Down
62 changes: 32 additions & 30 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,36 +22,38 @@
<svg width="24" height="24" class="type-icon-quote" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Quote</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M11.192 15.757c0-.88-.23-1.618-.69-2.217-.326-.412-.768-.683-1.327-.812-.55-.128-1.07-.137-1.54-.028-.16-.95.1-1.956.76-3.022.66-1.065 1.515-1.867 2.558-2.403L9.373 5c-.8.396-1.56.898-2.26 1.505-.71.607-1.34 1.305-1.9 2.094s-.98 1.68-1.25 2.69-.346 2.04-.217 3.1c.168 1.4.62 2.52 1.356 3.35.735.84 1.652 1.26 2.748 1.26.965 0 1.766-.29 2.4-.878.628-.576.94-1.365.94-2.368l.002.003zm9.124 0c0-.88-.23-1.618-.69-2.217-.326-.42-.77-.692-1.327-.817-.56-.124-1.074-.13-1.54-.022-.16-.94.09-1.95.75-3.02.66-1.06 1.514-1.86 2.557-2.4L18.49 5c-.8.396-1.555.898-2.26 1.505-.708.607-1.34 1.305-1.894 2.094-.556.79-.97 1.68-1.24 2.69-.273 1-.345 2.04-.217 3.1.165 1.4.615 2.52 1.35 3.35.732.833 1.646 1.25 2.742 1.25.967 0 1.768-.29 2.402-.876.627-.576.942-1.365.942-2.368v.01z"/></g></svg>
</span>
</div>
<div class="block-controls">
<button class="block-text block-text__align-left 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 class="block-text block-text__align-center">
<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 class="block-text block-text__align-right">
<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>
<button class="block-image block-image__no-align">
<svg class="gridicon gridicons-align-image-center" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm5-4h8V9H8v6z"></path></g></svg>
</button>
<button class="block-image block-image__align-left">
<svg class="gridicon gridicons-align-image-left" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm0-4h8V9H3v6zm10 0h8v-2h-8v2zm0-4h8V9h-8v2z"></path></g></svg>
</button>
<button class="block-image block-image__align-right">
<svg class="gridicon gridicons-align-image-right" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M21 7H3V5h18v2zm0 10H3v2h18v-2zm0-8h-8v6h8V9zm-10 4H3v2h8v-2zm0-4H3v2h8V9z"></path></g></svg>
</button>
<button class="block-image block-image__full-width">
<svg class="gridicon gridicons-fullscreen" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><title>Full Bleed</title><path d="M21 3v6h-2V6.41l-3.29 3.3-1.42-1.42L17.59 5H15V3zM3 3v6h2V6.41l3.29 3.3 1.42-1.42L6.41 5H9V3zm18 18v-6h-2v2.59l-3.29-3.29-1.41 1.41L17.59 19H15v2zM9 21v-2H6.41l3.29-3.29-1.41-1.42L5 17.59V15H3v6z"></path></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>
<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Italic</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M10.536 5l-.427 2h1.5L9.262 18h-1.5l-.427 2h6.128l.426-2h-1.5l2.347-11h1.5l.427-2"/></g></svg></button>
<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Link</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M17 13H7v-2h10v2zm1-6h-1c-1.63 0-3.065.792-3.977 2H18c1.103 0 2 .897 2 2v2c0 1.103-.897 2-2 2h-4.977c.913 1.208 2.347 2 3.977 2h1c2.21 0 4-1.79 4-4v-2c0-2.21-1.79-4-4-4zM2 11v2c0 2.21 1.79 4 4 4h1c1.63 0 3.065-.792 3.977-2H6c-1.103 0-2-.897-2-2v-2c0-1.103.897-2 2-2h4.977C10.065 7.792 8.63 7 7 7H6c-2.21 0-4 1.79-4 4z"/></g></svg></button>
<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Strikethrough</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M14.348 12H21v2h-4.613c.24.515.368 1.094.368 1.748 0 1.317-.474 2.355-1.423 3.114-.947.76-2.266 1.138-3.956 1.138-1.557 0-2.934-.293-4.132-.878v-2.874c.985.44 1.818.75 2.5.928.682.18 1.306.27 1.872.27.68 0 1.2-.13 1.562-.39.363-.26.545-.644.545-1.158 0-.285-.08-.54-.24-.763-.16-.222-.394-.437-.704-.643-.18-.12-.483-.287-.88-.49H3v-2H14.347zm-3.528-2c-.073-.077-.143-.155-.193-.235-.126-.202-.19-.44-.19-.713 0-.44.157-.795.47-1.068.313-.273.762-.41 1.348-.41.492 0 .993.064 1.502.19.51.127 1.153.35 1.93.67l1-2.405c-.753-.327-1.473-.58-2.16-.76-.69-.18-1.414-.27-2.173-.27-1.544 0-2.753.37-3.628 1.108-.874.738-1.312 1.753-1.312 3.044 0 .302.036.58.088.848h3.318z"/></g></svg></button>
<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Text Color</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M3 19h18v3H3v-3zM15.82 17h3.424L14 3h-4L4.756 17H8.18l1.067-3.5h5.506L15.82 17zm-1.952-6h-3.73l1.868-5.725L13.868 11z"/></g></svg></button>
<button class="do-not-work">These don't work yet.</button>
<div class="docked-controls">
<div class="block-controls">
<button class="block-text block-text__align-left 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 class="block-text block-text__align-center">
<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 class="block-text block-text__align-right">
<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>
<button class="block-image block-image__no-align">
<svg class="gridicon gridicons-align-image-center" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm5-4h8V9H8v6z"></path></g></svg>
</button>
<button class="block-image block-image__align-left">
<svg class="gridicon gridicons-align-image-left" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm0-4h8V9H3v6zm10 0h8v-2h-8v2zm0-4h8V9h-8v2z"></path></g></svg>
</button>
<button class="block-image block-image__align-right">
<svg class="gridicon gridicons-align-image-right" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M21 7H3V5h18v2zm0 10H3v2h18v-2zm0-8h-8v6h8V9zm-10 4H3v2h8v-2zm0-4H3v2h8V9z"></path></g></svg>
</button>
<button class="block-image block-image__full-width">
<svg class="gridicon gridicons-fullscreen" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><title>Full Bleed</title><path d="M21 3v6h-2V6.41l-3.29 3.3-1.42-1.42L17.59 5H15V3zM3 3v6h2V6.41l3.29 3.3 1.42-1.42L6.41 5H9V3zm18 18v-6h-2v2.59l-3.29-3.29-1.41 1.41L17.59 19H15v2zM9 21v-2H6.41l3.29-3.29-1.41-1.42L5 17.59V15H3v6z"></path></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>
<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Italic</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M10.536 5l-.427 2h1.5L9.262 18h-1.5l-.427 2h6.128l.426-2h-1.5l2.347-11h1.5l.427-2"/></g></svg></button>
<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Link</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M17 13H7v-2h10v2zm1-6h-1c-1.63 0-3.065.792-3.977 2H18c1.103 0 2 .897 2 2v2c0 1.103-.897 2-2 2h-4.977c.913 1.208 2.347 2 3.977 2h1c2.21 0 4-1.79 4-4v-2c0-2.21-1.79-4-4-4zM2 11v2c0 2.21 1.79 4 4 4h1c1.63 0 3.065-.792 3.977-2H6c-1.103 0-2-.897-2-2v-2c0-1.103.897-2 2-2h4.977C10.065 7.792 8.63 7 7 7H6c-2.21 0-4 1.79-4 4z"/></g></svg></button>
<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Strikethrough</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M14.348 12H21v2h-4.613c.24.515.368 1.094.368 1.748 0 1.317-.474 2.355-1.423 3.114-.947.76-2.266 1.138-3.956 1.138-1.557 0-2.934-.293-4.132-.878v-2.874c.985.44 1.818.75 2.5.928.682.18 1.306.27 1.872.27.68 0 1.2-.13 1.562-.39.363-.26.545-.644.545-1.158 0-.285-.08-.54-.24-.763-.16-.222-.394-.437-.704-.643-.18-.12-.483-.287-.88-.49H3v-2H14.347zm-3.528-2c-.073-.077-.143-.155-.193-.235-.126-.202-.19-.44-.19-.713 0-.44.157-.795.47-1.068.313-.273.762-.41 1.348-.41.492 0 .993.064 1.502.19.51.127 1.153.35 1.93.67l1-2.405c-.753-.327-1.473-.58-2.16-.76-.69-.18-1.414-.27-2.173-.27-1.544 0-2.753.37-3.628 1.108-.874.738-1.312 1.753-1.312 3.044 0 .302.036.58.088.848h3.318z"/></g></svg></button>
<button><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Text Color</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M3 19h18v3H3v-3zM15.82 17h3.424L14 3h-4L4.756 17H8.18l1.067-3.5h5.506L15.82 17zm-1.952-6h-3.73l1.868-5.725L13.868 11z"/></g></svg></button>
<button class="do-not-work">These don't work yet.</button>
</div>
</div>
<div class="switch-block__menu popover is-bottom">
<div class="popover__arrow"></div>
Expand Down
84 changes: 35 additions & 49 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ h6.is-selected,
p.is-selected,
blockquote.is-selected,
img.is-selected {
box-shadow: inset 0px 0px 0px 2px #6d7882;
box-shadow: inset 0px 0px 0px 2px #e0e5e9;
position: relative;
z-index: 1;
}
Expand Down Expand Up @@ -163,25 +163,39 @@ img.is-selected {
display: none;
}


/**
* Inline controls
* Controls
*/
.docked-controls {
position: absolute;
display: none;
z-index: 10;
transform: translateZ( 0 );
}

.docked-controls.is-image .block-image,
.docked-controls.is-text .block-text {
display: block;
}

.inline-controls {
.inline-controls,
.block-controls {
background: #fff;
border: 1px solid #e1e6ea;
box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
color: #12181e;
display: inline-block;
height: 38px;
overflow: hidden;
position: absolute;
z-index: 10;
margin-left: 20px;
}

.docked-controls.is-image .inline-controls {
display: none;
}

.inline-controls button {
.inline-controls button,
.block-controls button {
background: #fff;
border: none;
width: 36px;
Expand All @@ -192,29 +206,38 @@ img.is-selected {
float: left;
}

.inline-controls button.do-not-work {
.inline-controls button.do-not-work,
.block-controls button.do-not-work {
margin: 0 8px;
width: auto;
}

.inline-controls button:hover {
.inline-controls button:hover,
.block-controls button:hover {
background: #f0f2f4;
}

.inline-controls button:focus {
.inline-controls button:focus,
.block-controls button:focus {
outline: none;
}

.control-group {
.control-group, {
display: inline-block;
margin-left: 20px;
}

.inline-controls button.heading-dropdown {
.inline-controls button.heading-dropdown,
.block-controls button.heading-dropdown {
width: 54px;
position: relative;
}

.inline-controls button.is-active,
.block-controls button.is-active {
background: #e0e5e9;
}

.heading-dropdown .heading {
position: absolute;
left: 0;
Expand All @@ -239,47 +262,10 @@ img.is-selected {
bottom: 8px;
}


/**
* 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;
}

.block-controls button {
display: none;
}

.block-controls.is-image .block-image,
.block-controls.is-text .block-text {
display: block;
}

/**
* Block inserter and switcher
*/
Expand Down

0 comments on commit a416864

Please sign in to comment.