Merge pull request #202 from WordPress/try/tinymce-single/full-bleed

Move inserter on the block outline. See #72.
WordPress · Mar 7, 2017 · a0bc319 · a0bc319
2 parents 88f1177 + 35a75d2
commit a0bc319
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css
@@ -239,9 +239,14 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout {
 .block-outline:before {
 	content: '';
 	position: absolute;
-	top: -12px;
-	right: -12px;
-	bottom: -12px;
-	left: -12px;
+	top: -10px;
+	right: -10px;
+	bottom: -10px;
+	left: -10px;
 	border: 2px solid #e0e5e9;
 }
+
+.insert-toolbar svg {
+	background: #fff;
+	border-radius: 12px;
+}
diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
@@ -226,28 +226,28 @@
 
 					var toolbar = this.getEl();
 					var block = getSelectedBlock();
-					var isRightAligned = editor.$( block ).hasClass( 'alignright' );
+					var isFullBleed = editor.$( block ).hasClass( 'alignfull' );
 					var toolbarRect = toolbar.getBoundingClientRect();
 					var blockRect = block.getBoundingClientRect();
 					var contentRect = editor.getBody().getBoundingClientRect();
 
-					if ( isRightAligned ) {
-						var left = contentRect.right - toolbarRect.width - 50;
-					} else {
-						var left = contentRect.left + 50
-					}
-
 					if ( settings.isEmpty ) {
 						DOM.setStyles( toolbar, {
 							position: 'absolute',
-							left: left + 'px',
+							left: contentRect.left + 50 + 'px',
 							top: blockRect.top + 3 + window.pageYOffset + 'px'
 						} );
 					} else {
+						if ( isFullBleed ) {
+							var left = contentRect.left + 50;
+						} else {
+							var left = blockRect.left - 6;
+						}
+
 						DOM.setStyles( toolbar, {
 							position: 'absolute',
 							left: left + 'px',
-							top: blockRect.top + Math.max( blockRect.height, 48 ) - 1 + window.pageYOffset + 'px'
+							top: blockRect.bottom - 3 + window.pageYOffset + 'px'
 						} );
 					}