MCE view controls:

* Move controls back over to the left, as they were before. Wide images and muscle memory have been causing frustration.
* Improve the experience and unify the UI of media view controls. Audio and video views now require an initial click to select before further interaction.
* CSS clean up and organization.

fixes #27320, #27542.

Built from https://develop.svn.wordpress.org/trunk@27777


git-svn-id: http://core.svn.wordpress.org/trunk@27614 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -369,7 +369,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 
 		dom.setStyles( toolbar, {
 			top: rectangle.y,
-			left: rectangle.x + rectangle.w - toolbarSize.w
+			left: rectangle.x
 		});
 	}
 

wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -212,41 +212,37 @@ audio {
 	border: 1px solid transparent;
 }
 
-.wpview-type-audio {
+.wpview-wrap.selected {
-	padding: 24px 0 0;
+	background-color: #f2f8ff; /* fallback to old blue */
+	background-color: rgba(0,0,0,0.1);
+	border-color: #777;
+	border-color: rgba(0,0,0,0.3);
 }
 
-.wpview-type-video {
+.wpview-overlay {
-	padding: 0;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
 }
 
-.wont-play {
+.wpview-wrap.selected .wpview-overlay {
-	padding: 4px 0;
+	display: none;
-}
-
-.wont-play p {
-	font-size: 13px;
-	line-height: 1.3;
-	display: block;
-	width: 70%;
-	margin: 0 15%;
-	text-align: center;
-}
-
-.wpview-type-gallery:after {
-    content: '';
-	display: table;
-    clear: both;
 }
 
 .wpview-wrap .toolbar {
 	position: absolute;
 	top: 0;
-	right: 0;
+	left: 0;
 	display: none;
 	z-index: 100;
 }
 
+.wpview-wrap.selected .toolbar {
+	display: block;
+}
+
 #wp-image-toolbar {
 	position: absolute;
 }
@@ -254,7 +250,7 @@ audio {
 .wpview-wrap .toolbar div,
 #wp-image-toolbar div {
 	margin-top: 7px;
-	margin-right: 7px;
+	margin-left: 7px;
 	padding: 2px;
 	width: 30px;
 	height: 30px;
@@ -273,30 +269,26 @@ audio {
 	color: #2ea2cc;
 }
 
-/* temporary overrides; still pending styling */
+/* Audio player is short; therefore let's put the toolbar above */
-.wpview-type-audio .toolbar div,
+.wpview-type-audio .toolbar {
-.wont-play .toolbar div {
+	top: -41px;
-	margin: 0;
-	padding: 3px;
-	width: 20px;
-	height: 20px;
-	box-shadow: none;
-	font-size: 20px;
 }
 
-.wpview-wrap.selected .toolbar,
+.wpview-type-audio .toolbar div:first-child {
-.wpview-type-audio .toolbar,
+	margin-left: 0;
-.wpview-type-video .toolbar {
+}
+
+.wont-play {
+	padding: 4px 0;
+}
+
+.wont-play p {
+	font-size: 13px;
+	line-height: 1.3;
 	display: block;
-}
+	width: 70%;
-
+	margin: 0 15%;
-.wpview-type-gallery.selected,
+	text-align: center;
-.wpview-type-audio,
-.wpview-type-video {
-	background-color: #f2f8ff; /* fallback to old blue */
-	background-color: rgba(0,0,0,0.1);
-	border-color: #777;
-	border-color: rgba(0,0,0,0.3);
 }
 
 .wpview-type-video .track-details,
@@ -310,6 +302,12 @@ audio {
 	text-overflow: ellipsis;
 }
 
+.wpview-type-gallery:after {
+    content: '';
+	display: table;
+    clear: both;
+}
+
 .gallery img[data-mce-selected]:focus {
 	outline: none;
 }

wp-includes/media-template.php

@@ -997,6 +997,7 @@ function wp_print_media_templates() {
 		<div class="track-details">{{{ data.model.caption }}}</div>
 		<# } #>
 		<?php wp_underscore_audio_template() ?>
+		<div class="wpview-overlay"></div>
 	</script>
 
 	<script type="text/html" id="tmpl-editor-video">
@@ -1008,6 +1009,7 @@ function wp_print_media_templates() {
 		<div class="track-details">{{{ data.model.caption }}}</div>
 		<# } #>
 		<?php wp_underscore_video_template() ?>
+		<div class="wpview-overlay"></div>
 	</script>
 
 	<?php wp_underscore_playlist_templates() ?>
@@ -1027,6 +1029,7 @@ function wp_print_media_templates() {
 			<div class="wp-playlist-next"></div>
 			<div class="wp-playlist-prev"></div>
 		</div>
+		<div class="wpview-overlay"></div>
 	</script>
 
 	<?php