diff --git a/blocks.js b/blocks.js index a703714f9ae0c4..09a378a1c8c683 100644 --- a/blocks.js +++ b/blocks.js @@ -7,11 +7,12 @@ var getNextSibling = siblingGetter( 'next' ); var getPreviousSibling = siblingGetter( 'previous' ); /** - * Globals + * Globals */ var editor = document.getElementsByClassName( 'editor' )[0]; var controls = document.getElementsByClassName( 'block-controls' )[0]; +var inlineControls = document.getElementsByClassName( 'inline-controls' )[0]; var selectedBlock = null; /** @@ -21,6 +22,7 @@ var selectedBlock = null; window.addEventListener( 'click', clearBlocks, false ); editor.addEventListener( 'input', attachBlockHandlers, false ); editor.addEventListener( 'input', clearBlocks, false ); +window.addEventListener( 'mouseup', onSelectText, false ); attachBlockHandlers(); attachControlActions(); @@ -70,6 +72,31 @@ function hideControls() { controls.style.opacity = 0; } +/* 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(); + inlineControls.style.left = pos.left + 'px'; + inlineControls.style.top = ( pos.top - 48 ) + 'px'; + } else { + inlineControls.style.display = 'none'; + } +} + function attachControlActions() { Array.from( controls.childNodes ).forEach( function( node ) { if ( 'svg' !== node.nodeName ) { @@ -135,4 +162,4 @@ function siblingGetter( direction ) { function l( data ) { console.log( data ); return data; -} \ No newline at end of file +} diff --git a/index.html b/index.html index 111fdabbd6cc10..4c1ce1de7d7032 100644 --- a/index.html +++ b/index.html @@ -12,15 +12,30 @@ +
+ + + + + + + + + +

1.0 Is The Loneliest Number

Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!

+

I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.

- -

-
+
diff --git a/style.css b/style.css index 8aeb40ac93d017..c6b52ee392186c 100644 --- a/style.css +++ b/style.css @@ -1,21 +1,32 @@ /** * Basic */ + html, body { - margin: 0; - padding: 0; - height: 100%; + margin: 0; + padding: 0; + height: 100%; } * { - box-sizing: border-box; + box-sizing: border-box; } body { - font: 13px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; - max-width: 720px; - margin: 60px auto; + font: 13px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; + max-width: 720px; + margin: 60px auto; + color: #12181e; +} + +img { + max-width: 100%; + height: auto; +} + +svg { + fill: currentColor; } p, @@ -26,27 +37,29 @@ h4, h5, h6, img { - font-family: "Merriweather", serif; - margin: 15px 0; - /* Uses paddings instead */ + font-family: "Merriweather", serif; + margin: 15px 0; + /* Uses paddings instead */ } h2 { - font-weight: 900; - font-size: 28px; + font-weight: 900; + font-size: 28px; } p { - font-size: 16px; + font-size: 16px; } section:focus { - outline: none; + outline: none; } + /** * Hover controls */ + h1, h2, h3, @@ -55,12 +68,13 @@ h5, h6, p, img { - position: relative; - box-shadow: inset 0px 0px 0px 0px #e0e5e9; - transition: all .2s ease; - padding: 15px; - /* replaces some block margins */ + position: relative; + box-shadow: inset 0px 0px 0px 0px #e0e5e9; + transition: all .2s ease; + padding: 15px; + /* replaces some block margins */ } + h1:hover, h2:hover, h3:hover, @@ -69,8 +83,9 @@ h5:hover, h6:hover, p:hover, img:hover { - box-shadow: inset 0px 0px 0px 2px #e0e5e9; + box-shadow: inset 0px 0px 0px 2px #e0e5e9; } + h1.is-selected, h2.is-selected, h3.is-selected, @@ -79,8 +94,9 @@ h5.is-selected, h6.is-selected, p.is-selected, img.is-selected { - box-shadow: inset 0px 0px 0px 2px #191e23; + box-shadow: inset 0px 0px 0px 2px #191e23; } + h1:before, h2:before, h3:before, @@ -89,17 +105,18 @@ 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); + 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, @@ -108,45 +125,145 @@ h5.is-selected:before, h6.is-selected:before, p.is-selected:before, img.is-selected:before { - height: 36px; - top: -36px; + height: 36px; + top: -36px; } p { - min-height: 3.4em; + min-height: 3.4em; } + +/** + * Block controls + */ + .block-controls { - opacity: 0; - margin-left: -54px; - height: 36px; - width: 54px; - position: absolute; - transition: opacity .075s ease; - transform: translateZ(0); + opacity: 0; + margin-left: -54px; + height: 36px; + width: 54px; + position: absolute; + transition: opacity .075s ease; + transform: translateZ(0); } + .block-controls svg { - fill: #86909c; - position: absolute; - cursor: pointer; + fill: #86909c; + position: absolute; + cursor: pointer; } + .block-controls svg:hover { - fill: #191e23; + fill: #191e23; +} + +.block-controls svg.up, +.block-controls svg.down { + padding: 3px; + width: 24px; + height: 24px; + left: -3px; } + .block-controls svg.up { - left: 0; - top: 0; + top: -6px; } + .block-controls svg.down { - left: 0; - bottom: 0; + bottom: -6px; } + .block-controls svg.type { - right: 6px; - top: 6px; + right: 6px; + top: 6px; } -img { - max-width: 100%; - height: auto; + +/** + * Inline controls + */ + +.inline-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; + display: none; +} + +.inline-controls button { + background: #fff; + border: none; + width: 36px; + height: 36px; + padding: 6px; + cursor: pointer; + display: block; + float: left; +} + +.inline-controls button:hover { + background: #f0f2f4; +} + +.inline-controls button:focus { + outline: none; +} + +.control-group { + display: inline-block; + margin-left: 20px; +} + +.inline-controls button.heading-dropdown { + width: 54px; + position: relative; +} + +.heading-dropdown .heading { + position: absolute; + left: 0; + top: 0; + width: 36px; + height: 36px; + padding: 6px; +} + +.heading-dropdown .dropdown { + width: 24px; + height: 36px; + padding: 6px 0; + position: absolute; + top: 0; + right: 0; +} + +.heading-dropdown sub { + font-weight: 900; + position: absolute; + bottom: 8px; +} + + +/** + * Inserter + */ + +.insert-block { + padding: 14px 0 0 14px; +} + +.insert-block svg { + cursor: pointer; + fill: #87919d; +} + +.insert-block:hover svg { + fill: #12181e; }