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

UI Prototype: Try the dockerized controls prototype #108

Merged
merged 2 commits into from
Feb 21, 2017
Merged

UI Prototype: Try the dockerized controls prototype #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a675681
UI Prototype: Try the dockerized controls prototype
youknowriad Feb 21, 2017
4b37271
Don't hide the inline controls anymore
youknowriad Feb 21, 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
58 changes: 12 additions & 46 deletions blocks.js
View file
Open in desktop
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 @@ -691,7 +658,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
Open in desktop
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
Open in desktop
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