From dea6895afd10b45f6102e3d1e57b0dc2c375a79a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 24 Feb 2017 11:14:39 +0100 Subject: [PATCH] Update the TinyMCE single prototype to match the UI Prototype --- shared/index.css | 85 ++++++++++++++++++++++++++++---- tinymce-single/index.html | 4 +- tinymce-single/tinymce/block.css | 12 ++++- tinymce-single/tinymce/block.js | 6 +-- 4 files changed, 91 insertions(+), 16 deletions(-) diff --git a/shared/index.css b/shared/index.css index 39878443f94b2d..59805a7b784dec 100644 --- a/shared/index.css +++ b/shared/index.css @@ -1,18 +1,85 @@ +html, body { - background: #f3f6f8; - color: #2f4452; - font-family: Merriweather, Georgia, "Times New Roman", Times, serif; - font-size: 1.25em; - line-height: 1.5; - margin: 1em; + margin: 0; + padding: 0; + height: 100%; +} + +* { + box-sizing: border-box; +} + +body { + color: #12181e; + font: 13px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; + max-width: 720px; + margin: 60px auto; +} + +h2 { + font-weight: 900; + font-size: 28px; +} + +p { + font-size: 16px; + min-height: 3.4em; +} + +blockquote { + font-size: 20px; + border-left: 4px solid black; + font-style: italic; +} + +img { + max-width: 100%; + height: auto; +} + +p, +blockquote, +h1, +h2, +h3, +h4, +h5, +h6, +figure { + font-family: "Merriweather", serif; + margin: 15px 0; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +figure { + position: relative; + box-shadow: inset 0px 0px 0px 0px #e0e5e9; + transition: all .2s ease; + padding: 15px; +} + +h1:hover, +h2:hover, +h3:hover, +h4:hover, +h5:hover, +h6:hover, +p:hover, +blockquote:hover, +figure:hover { + box-shadow: inset 9px 0px 0px -7px #e0e5e9; } #editor { background: #fff; - margin: 5em auto; outline: none; - padding: 5em; - width: 37.5em; } #editor a { diff --git a/tinymce-single/index.html b/tinymce-single/index.html index 2ffca8682ef72b..35dd416d05450c 100644 --- a/tinymce-single/index.html +++ b/tinymce-single/index.html @@ -3,12 +3,12 @@ Editor Blocks Demo (Single TinyMCE Instance) - +
-

1.0 Is The Loneliest Number

+

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!

diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css index f356e25469d4a0..58f5d29403d4af 100644 --- a/tinymce-single/tinymce/block.css +++ b/tinymce-single/tinymce/block.css @@ -8,7 +8,6 @@ #editor *[data-mce-selected="block"] { outline: 2px solid #e0e5e9; - outline-offset: 11px; /*background-color: rgba( 135, 166, 188, 0.3 ); box-shadow: 0px 0px 0px 11px rgba( 135, 166, 188, 0.3 ); position: relative;*/ @@ -178,13 +177,13 @@ div.mce-inline-toolbar-grp { border: 1px solid #e1e6ea; box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 ); box-sizing: border-box; - margin-bottom: 8px; position: absolute; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; max-width: 98%; + margin-left: 20px; } div.mce-inline-toolbar-grp:not(.block-toolbar) { @@ -234,6 +233,15 @@ div.mce-inline-toolbar-grp.block-toolbar { box-shadow: none; } +.block-toolbar svg { + fill: #86909c; +} + +.block-toolbar svg:hover { + cursor: pointer; + fill: #191e23; +} + .mce-btn.mce-move-up { position: absolute; top: -10px; diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index b8d5941e2203d1..81d82de946719d 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -322,8 +322,8 @@ DOM.setStyles(toolbar, { position: 'absolute', - left: contentRect.left + 50 + 'px', - top: elementRect.top + window.pageYOffset + 'px' + left: contentRect.left - 60 + 'px', + top: elementRect.top + window.pageYOffset + 22 + 'px' } ); this.show() @@ -430,7 +430,7 @@ DOM.setStyles(toolbar, { position: 'absolute', left: elementRect.left + 'px', - top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px' + top: elementRect.top + window.pageYOffset - toolbarRect.height + 'px' }) setTimeout( function() {