Changeset 27777

Timestamp:

03/27/2014 07:01:38 AM (10 years ago)

Author:

helen

Message:

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.

Location:

trunk/src/wp-includes

Files:

• js/tinymce/plugins/wpeditimage/plugin.js (modified) (1 diff)
• js/tinymce/skins/wordpress/wp-content.css (modified) (4 diffs)
• media-template.php (modified) (3 diffs)

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

@@ -370 +370 @@
         dom.setStyles( toolbar, {
             top: rectangle.y,
-            left: rectangle.x + rectangle.w - toolbarSize.w
+            left: rectangle.x
         });
     }

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

@@ -213 +213 @@
 }
 
-.wpview-type-audio {
-    padding: 24px 0 0;
-}
-
-.wpview-type-video {
-    padding: 0;
-}
-
-.wont-play {
-    padding: 4px 0;
-}
-
-.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 {
+.wpview-wrap.selected {
+    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-overlay {
     position: absolute;
     top: 0;
     right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.wpview-wrap.selected .wpview-overlay {
+    display: none;
+}
+
+.wpview-wrap .toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
     display: none;
     z-index: 100;
+}
+
+.wpview-wrap.selected .toolbar {
+    display: block;
 }
 
@@ -255 +251 @@
 #wp-image-toolbar div {
     margin-top: 7px;
-    margin-right: 7px;
+    margin-left: 7px;
     padding: 2px;
     width: 30px;
@@ -274 +270 @@
 }
 
-/* temporary overrides; still pending styling */
-.wpview-type-audio .toolbar div,
-.wont-play .toolbar div {
-    margin: 0;
-    padding: 3px;
-    width: 20px;
-    height: 20px;
-    box-shadow: none;
-    font-size: 20px;
-}
-
-.wpview-wrap.selected .toolbar,
-.wpview-type-audio .toolbar,
-.wpview-type-video .toolbar {
+/* Audio player is short; therefore let's put the toolbar above */
+.wpview-type-audio .toolbar {
+    top: -41px;
+}
+
+.wpview-type-audio .toolbar div:first-child {
+    margin-left: 0;
+}
+
+.wont-play {
+    padding: 4px 0;
+}
+
+.wont-play p {
+    font-size: 13px;
+    line-height: 1.3;
     display: block;
-}
-
-.wpview-type-gallery.selected,
-.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);
+    width: 70%;
+    margin: 0 15%;
+    text-align: center;
 }
 
@@ -309 +301 @@
     white-space: nowrap;
     text-overflow: ellipsis;
+}
+
+.wpview-type-gallery:after {
+    content: '';
+    display: table;
+    clear: both;
 }
 

trunk/src/wp-includes/media-template.php

@@ -998 +998 @@
         <# } #>
         <?php wp_underscore_audio_template() ?>
+        <div class="wpview-overlay"></div>
     </script>
 
@@ -1009 +1010 @@
         <# } #>
         <?php wp_underscore_video_template() ?>
+        <div class="wpview-overlay"></div>
     </script>
 
@@ -1028 +1030 @@
             <div class="wp-playlist-prev"></div>
         </div>
+        <div class="wpview-overlay"></div>
     </script>