Merge pull request #205 from WordPress/update/prototype-design

jasmussen · web-flow · commit 5f809c923152 · 2017-03-08T12:59:59.000+01:00
Visual polish on the prototypes.
diff --git a/blocks.js b/blocks.js
@@ -357,7 +357,7 @@ function updateDockedControlsPosition( newClassName ) {
 	var alignedLeft = className.match( /align-left/ );
 	var fullBleed = className.match( /full-bleed/ );
 
-	var topPosition = position.top - 36 + window.scrollY;
+	var topPosition = position.top - 34 + window.scrollY;
 	var leftPosition = null;
 
 	if ( isImage && alignedRight ) {
@@ -710,7 +710,7 @@ function setElementState( className, event ) {
 	if ( className ) {
 		selectedBlock.classList.add( className );
 	}
-	updateBlockControlsPosition( className );
+	updateDockedControlsPosition( className );
 }
 
 function setCaret( element ) {
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 		<title>Editor Blocks</title>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel='stylesheet' id='h5-font-css' href='https://fonts.googleapis.com/css?family=Merriweather:700,300,700italic,300italic' />
+		<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i" rel="stylesheet">
 		<link href="style.css" rel="stylesheet" type="text/css" media="all">
 	</head>
 	<body>
diff --git a/shared/index.css b/shared/index.css
@@ -1,7 +1,7 @@
 body {
 	background: #f3f6f8;
 	color: #2f4452;
-	font-family: Merriweather, Georgia, "Times New Roman", Times, serif;
+	font-family: "Noto Serif", Georgia, "Times New Roman", Times, serif;
 	font-size: 1.25em;
 	line-height: 1.5;
 	margin: 1em;
diff --git a/style.css b/style.css
@@ -38,7 +38,7 @@ h4,
 h5,
 h6,
 img {
-	font-family: "Merriweather", serif;
+	font-family: "Noto Serif", serif;
 	margin: 15px 0;
 	/* Uses paddings instead */
 }
@@ -105,7 +105,7 @@ h6.is-selected,
 p.is-selected,
 blockquote.is-selected,
 img.is-selected {
-	box-shadow: inset 0px 0px 0px 2px #e0e5e9;
+	box-shadow: inset 0px 0px 0px 2px #e1e6ea;
 	position: relative;
 	z-index: 1;
 }
@@ -181,13 +181,12 @@ img.is-selected {
 .inline-controls,
 .block-controls {
 	background: #fff;
-	border: 1px solid #e1e6ea;
+	border: 1px solid #d8dbdf;
 	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;
-	margin-left: 20px;
+	margin-left: 14px;
 }
 
 .docked-controls.is-image .inline-controls {
@@ -204,6 +203,7 @@ img.is-selected {
 	cursor: pointer;
 	display: block;
 	float: left;
+	color: #6d7882;
 }
 
 .inline-controls button.do-not-work,
@@ -214,7 +214,9 @@ img.is-selected {
 
 .inline-controls button:hover,
 .block-controls button:hover {
-	background: #f0f2f4;
+	background: #f8f9f9;
+	outline: 1px solid #6d7882;
+	position: relative;
 }
 
 .inline-controls button:focus,
@@ -235,7 +237,10 @@ img.is-selected {
 
 .inline-controls button.is-active,
 .block-controls button.is-active {
-	background: #e0e5e9;
+	background: #eef0f0;
+	outline: 1px solid #6d7882;
+	position: relative;
+	color: #3e444c;
 }
 
 .heading-dropdown .heading {
@@ -287,18 +292,13 @@ img.is-selected {
 	border: none;
 	margin: 0;
 	padding: 0;
-}
-
-.insert-block svg,
-.switch-block__block svg,
-.switch-block__block label {
+	color: #87919d;
 	cursor: pointer;
-	fill: #87919d;
 }
 
-.insert-block__button:hover svg,
-.switch-block__button:hover svg {
-	fill: #12181e;
+.insert-block__button:hover,
+.switch-block__button:hover {
+	color: #19a2d4;
 }
 
 .insert-block__button:focus,
diff --git a/tinymce-per-block/index.html b/tinymce-per-block/index.html
@@ -6,7 +6,7 @@
 </head>
 <body>
 	<div class="editor"></div>
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i">
+	<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i" rel="stylesheet">
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script>
 	<script src="build/app.js"></script>
 	<script src="../shared/navigation.js"></script>
diff --git a/tinymce-per-block/src/assets/stylesheets/theme.scss b/tinymce-per-block/src/assets/stylesheets/theme.scss
@@ -1,5 +1,5 @@
 .my-theme {
-	font-family: "Merriweather", serif;
+	font-family: "Noto Serif", serif;
 	font-size: 16px;
 	color: inherit;
 	font-weight: 300;
diff --git a/tinymce-per-block/src/blocks/embed-block/_style.scss b/tinymce-per-block/src/blocks/embed-block/_style.scss
@@ -40,7 +40,7 @@
 	width: 100%;
 	border: none;
 	font: inherit;
-	font-family: "Merriweather", serif;
+	font-family: "Noto Serif", serif;
 	font-weight: 300;
 	font-size: 14px;
 	color: $gray-dark-300;
diff --git a/tinymce-per-block/src/blocks/heading-block/_style.scss b/tinymce-per-block/src/blocks/heading-block/_style.scss
@@ -1,7 +1,7 @@
 .heading-block__form {
 	width: 100%;
 	border: none;
-	font-family: Merriweather, Georgia, "Times New Roman", Times, serif;
+	font-family: "Noto Serif", Georgia, "Times New Roman", Times, serif;
 	color: inherit;
 	font-size: inherit;
 	font-weight: bold;
diff --git a/tinymce-per-block/src/blocks/html-block/_style.scss b/tinymce-per-block/src/blocks/html-block/_style.scss
@@ -2,7 +2,7 @@
 	margin: 0;
 	outline: none;
 	font: inherit;
-	font-family: "Merriweather", serif;
+	font-family: "Noto Serif", serif;
 	font-size: 16px;
 	color: inherit;
 	font-weight: 300;
diff --git a/tinymce-per-block/src/blocks/image-block/_style.scss b/tinymce-per-block/src/blocks/image-block/_style.scss
@@ -41,7 +41,7 @@
 		width: 100%;
 		border: none;
 		font: inherit;
-		font-family: "Merriweather", serif;
+		font-family: "Noto Serif", serif;
 		font-weight: 300;
 		font-size: 14px;
 		color: $gray-dark-300;
diff --git a/tinymce-per-block/src/blocks/quote-block/_style.scss b/tinymce-per-block/src/blocks/quote-block/_style.scss
@@ -2,7 +2,7 @@
 	width: 100%;
 	border: none;
 	font: inherit;
-	font-family: "Merriweather", serif;
+	font-family: "Noto Serif", serif;
 	color: inherit;
 	font-weight: 300;
 	font-size: 20px;
@@ -21,7 +21,7 @@
 	width: 100%;
 	border: none;
 	font: inherit;
-	font-family: "Merriweather", serif;
+	font-family: "Noto Serif", serif;
 	font-weight: 300;
 	font-size: 14px;
 	color: $gray-dark-300;
diff --git a/tinymce-per-block/src/blocks/text-block/_style.scss b/tinymce-per-block/src/blocks/text-block/_style.scss
@@ -3,7 +3,7 @@
 	width: 100%;
 	border: none;
 	font: inherit;
-	font-family: "Merriweather", serif;
+	font-family: "Noto Serif", serif;
 	font-size: 16px;
 	color: inherit;
 	font-weight: 300;
diff --git a/tinymce-single/index.html b/tinymce-single/index.html
@@ -5,7 +5,7 @@
 
 		<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 href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i" rel="stylesheet">
 
 		<link rel="stylesheet" type="text/css" href="../shared/index.css">
 

Original file line number	Diff line number	Diff line change
`@@ -357,7 +357,7 @@ function updateDockedControlsPosition( newClassName ) {`
`357`	`357`	`var alignedLeft = className.match( /align-left/ );`
`358`	`358`	`var fullBleed = className.match( /full-bleed/ );`
`359`	`359`
`360`		`- var topPosition = position.top - 36 + window.scrollY;`
	`360`	`+ var topPosition = position.top - 34 + window.scrollY;`
`361`	`361`	`var leftPosition = null;`
`362`	`362`
`363`	`363`	`if ( isImage && alignedRight ) {`
`@@ -710,7 +710,7 @@ function setElementState( className, event ) {`
`710`	`710`	`if ( className ) {`
`711`	`711`	`selectedBlock.classList.add( className );`
`712`	`712`	`}`
`713`		`- updateBlockControlsPosition( className );`
	`713`	`+ updateDockedControlsPosition( className );`
`714`	`714`	`}`
`715`	`715`
`716`	`716`	`function setCaret( element ) {`