Update the TinyMCE single prototype to match the UI Prototype

WordPress · Feb 24, 2017 · dea6895 · dea6895
1 parent 68c974f
commit dea6895
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 16 deletions.
diff --git 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
@@ -3,12 +3,12 @@
 	<head>
 		<meta charset="utf-8">
 		<title>Editor Blocks Demo (Single TinyMCE Instance)</title>
-		<link rel="stylesheet" type="text/css" href="https://s1.wp.com/i/fonts/merriweather/merriweather.css?v=20160210">
+		<link rel='stylesheet' id='h5-font-css' href='https://fonts.googleapis.com/css?family=Merriweather:700,300,700italic,300italic' />
 		<link rel="stylesheet" type="text/css" href="../shared/index.css">
 	</head>
 	<body>
 		<div id="editor">
-			<h1>1.0 Is The Loneliest Number</h1>
+			<h2>1.0 Is The Loneliest Number</h2>
 
 			<p>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!</p>
 

diff --git 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
@@ -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() {