From 30a83e48e2c7196a1847a7e204891de666e5e87a Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Tue, 18 Mar 2014 02:29:45 +0000
Subject: [PATCH] TinyMCE: move the caption and gallery toolbars to the right,
 fix selected gallery border/outline, see #27320

git-svn-id: https://develop.svn.wordpress.org/trunk@27579 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../js/tinymce/plugins/wpeditimage/plugin.js       |  9 +++++----
 .../js/tinymce/skins/wordpress/wp-content.css      | 14 ++++++--------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
index 8ef748fa37..8add98837c 100644
--- a/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
+++ b/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
@@ -335,7 +335,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 	}
 
 	function addToolbar( node ) {
-		var position, toolbarHtml, toolbar,
+		var rectangle, toolbarHtml, toolbar, toolbarSize,
 			dom = editor.dom;
 
 		removeToolbar();
@@ -346,7 +346,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		}
 
 		dom.setAttrib( node, 'data-wp-imgselect', 1 );
-		position = dom.getPos( node, editor.getBody() );
+		rectangle = dom.getRect( node );
 
 		toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div> ' +
 			'<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>';
@@ -358,10 +358,11 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 		}, toolbarHtml );
 
 		editor.getBody().appendChild( toolbar );
+		toolbarSize = dom.getSize( toolbar );
 
 		dom.setStyles( toolbar, {
-			top: position.y,
-			left: position.x
+			top: rectangle.y,
+			left: rectangle.x + rectangle.w - toolbarSize.w
 		});
 	}
 
diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
index cf7df4e462..5f53fc69c9 100644
--- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
+++ b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
@@ -229,6 +229,7 @@ embed {
     position: relative;
     margin-bottom: 16px;
 	cursor: pointer;
+	border: 1px solid transparent;
 }
 
  .wpview-type-gallery:after {
@@ -239,13 +240,13 @@ embed {
 
  .wpview-type-gallery.selected {
 	background-color: #f2f8ff;
-	outline: 1px solid #777;
+	border-color: #777;
 }
 
 .wpview-type-gallery .toolbar {
     position: absolute;
     top: 0;
-    left: 0;
+    right: 0;
     background-color: #333;
     color: white;
 	display: none;
@@ -273,11 +274,9 @@ embed {
 }
 
 .gallery {
-	margin: auto;
-	padding: 0.5em 0;
+	margin: auto -6px;
+	padding: 6px 0;
 	line-height: 1;
-	margin-left: -0.5em;
-	margin-right: -0.5em;
 	overflow-x: hidden;
 }
 
@@ -285,7 +284,7 @@ embed {
 	float: left;
 	margin: 0;
 	text-align: center;
-	padding: 0.5em;
+	padding: 6px;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
@@ -338,7 +337,6 @@ embed {
 }
 
 .gallery img {
-	border: 1px solid #cfcfcf;
 	max-width: 100%;
 	height: auto;
 }