Changeset 30694

Timestamp:

12/02/2014 12:25:15 AM (10 years ago)

Author:

azaozz

Message:

TinyMCE: update the wpView toolbar to look the same as the new image toolbar.
Fixes #30561.

Location:

trunk/src/wp-includes/js

Files:

• mce-view.js (modified) (1 diff)
• tinymce/plugins/wpview/plugin.js (modified) (3 diffs)
• tinymce/skins/wordpress/images/dashicon-edit.png (modified) (previous)
• tinymce/skins/wordpress/images/dashicon-no-alt.png (deleted)
• tinymce/skins/wordpress/images/dashicon-no.png (added)
• tinymce/skins/wordpress/wp-content.css (modified) (6 diffs)

trunk/src/wp-includes/js/mce-view.js

@@ -57 +57 @@
                     '<p class="wpview-selection-before">\u00a0</p>' +
                     '<div class="wpview-body" contenteditable="false">' +
-                        '<div class="toolbar">' +
+                        '<div class="toolbar mce-arrow-down">' +
                             ( _.isFunction( views[ this.type ].edit ) ? '<div class="dashicons dashicons-edit edit"></div>' : '' ) +
-                            '<div class="dashicons dashicons-no-alt remove"></div>' +
+                            '<div class="dashicons dashicons-no remove"></div>' +
                         '</div>' +
                         '<div class="wpview-content wpview-type-' + this.type + '">' +

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

@@ -116 +116 @@
             dom = editor.dom;
 
-        // Bail if node is already selected.
-        if ( ! viewNode || viewNode === selected ) {
+        if ( ! viewNode ) {
+            return;
+        }
+
+        // Adjust the toolbar position and bail if node is already selected.
+        if ( viewNode === selected ) {
+            adjustToolbarPosition( viewNode );
             return;
         }
@@ -129 +134 @@
         selected = viewNode;
         dom.setAttrib( viewNode, 'data-mce-selected', 1 );
+        adjustToolbarPosition( viewNode );
 
         clipboard = dom.create( 'div', {
@@ -150 +156 @@
         editor.nodeChanged();
         editor.fire( 'wpview-selected', viewNode );
+    }
+
+    function adjustToolbarPosition( viewNode ) {
+        var delta = 0,
+            toolbar = editor.$( viewNode ).find( '.toolbar' ),
+            editorToolbar = tinymce.$( editor.editorContainer ).find( '.mce-toolbar-grp' )[0],
+            editorToolbarBottom = ( editorToolbar && editorToolbar.getBoundingClientRect().bottom ) || 0;
+        
+        if ( toolbar.length && editor.iframeElement ) {
+            // 48 = 43 for the toolbar + 5 buffer
+            delta = viewNode.getBoundingClientRect().top + editor.iframeElement.getBoundingClientRect().top - editorToolbarBottom - 48;
+        }
+
+        if ( delta < 0 ) {
+            toolbar.removeClass( 'mce-arrow-down' ).css({ top: ( -43 + delta * -1 ) });
+        } else if ( delta > 0 && ! toolbar.hasClass( 'mce-arrow-down' ) ) {
+            toolbar.addClass( 'mce-arrow-down' ).css({ top: '' });
+        }
     }
 

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

@@ -225 +225 @@
 /* delegate the handling of the selection to the wpview tinymce plugin */
 .wpview-wrap,
-.wpview-wrap *,
-#wp-image-toolbar,
-#wp-image-toolbar * {
+.wpview-wrap * {
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -324 +322 @@
 .wpview-wrap .toolbar {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: -43px;
+    left: 45%;
+    left: calc(50% - 32px);
     display: none;
     z-index: 100;
+    background-color: #f5f5f5;
+    border: 1px solid #aaa;
+    padding: 1px;
+    cursor: default;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
+    box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-bottom: 8px;
 }
 
 .wpview-wrap[data-mce-selected] .toolbar {
     display: block;
+}
+
+.wpview-wrap .toolbar:before,
+.wpview-wrap .toolbar:after {
+    position: absolute;
+    left: 50%;
+    display: block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-color: transparent;
+    border-width: 9px;
+    margin-left: -9px;
+    content: '';
+}
+
+.wpview-wrap .toolbar:after {
+    border-width: 8px;
+    margin-left: -8px;
+}
+
+.wpview-wrap .toolbar.mce-arrow-down:before {
+    bottom: -18px;
+    border-top-color: #aaa;
+}
+
+.wpview-wrap .toolbar.mce-arrow-down:after {
+    bottom: -16px;
+    border-top-color: #f5f5f5;
+}
+
+.wpview-wrap .toolbar.mce-arrow-up:before {
+    top: -18px;
+    border-bottom-color: #aaa;
+}
+
+.wpview-wrap .toolbar.mce-arrow-up:after {
+    top: -16px;
+    border-bottom-color: #f5f5f5;
+}
+
+.wpview-wrap .toolbar div {
+    margin: 2px;
+    padding: 2px 3px;
+    width: 20px;
+    height: 20px;
+    color: #777;
+    cursor: pointer;
+    font-size: 20px;
+    border: 1px solid transparent;
+    border-radius: 2px;
+}
+
+.wpview-wrap .toolbar div:hover {
+    background-color: #fafafa;
+    border-color: #999;
+    color: #222;
+    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
+    box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );
+    outline: none;
 }
 
@@ -385 +456 @@
 }
 
-#wp-image-toolbar {
-    position: absolute;
-    margin: 0;
-}
-
-.wpview-wrap .toolbar div,
-#wp-image-toolbar i {
-    margin-top: 7px;
-    margin-left: 7px;
-    padding: 2px;
-    width: 30px;
-    height: 30px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-    background-color: #000;
-    background-color: rgba(0,0,0,0.9);
-    cursor: pointer;
-    color: white;
-    font-size: 30px;
-}
-
 .ie8 .wpview-wrap .toolbar div,
-.ie7 .wpview-wrap .toolbar div,
-.ie8 #wp-image-toolbar i,
-.ie7 #wp-image-toolbar i {
+.ie7 .wpview-wrap .toolbar div {
     display: inline;
-    padding: 0;
+    padding: 4px;
 }
 
@@ -418 +467 @@
 }
 
-.ie8 .dashicons-no-alt,
-.ie7 .dashicons-no-alt {
-    background-image: url(images/dashicon-no-alt.png);
+.ie8 .dashicons-no,
+.ie7 .dashicons-no {
+    background-image: url(images/dashicon-no.png);
 }
 
@@ -449 +498 @@
 }
 
-.wpview-wrap .toolbar div:hover,
-#wp-image-toolbar i:hover {
-    box-shadow: 0 1px 3px rgba(0,0,0,0.8);
-    background-color: #000;
-    color: #2ea2cc;
-}
-
-/* Audio player is short; therefore let's put the toolbar above */
-.wpview-wrap[data-wpview-type="audio"] .toolbar {
-    top: auto;
-    bottom: -34px;
-}
-
-.wpview-wrap[data-wpview-type="audio"] .toolbar div {
-    margin-top: 0;
-}
-
-.wpview-wrap[data-wpview-type="audio"] .toolbar div:first-child {
-    margin-left: 0;
-}
-
 .wont-play {
     padding: 4px 0;
@@ -596 +624 @@
 }
 
-.rtl .wpview-wrap .toolbar {
-    left: auto;
-    right: 0;
-}
-
-.rtl .wpview-wrap .toolbar div,
-.rtl #wp-image-toolbar i {
-    margin-left: auto;
-    margin-right: 7px;
-}
-
 @media print,
     (-o-min-device-pixel-ratio: 5/4),