Ticket #28533: 28533.2.patch

src/wp-admin/js/post.js

@@ -1080 +1080 @@
                                         body = editor.getBody();
                                         body.className = body.className.replace( /\bpost-format-[^ ]+/, '' );
                                         editor.dom.addClass( body, format == 'post-format-0' ? 'post-format-standard' : format );
+                                        editor.setUIColor();
                                 }
                         }
                 });

src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -7 +7 @@
         var DOM = tinymce.DOM, wpAdvButton, modKey, style,
                 last = 0;
 
+        editor.setUIColor = function( selector, property ) {
+                var dom = this.dom,
+                        fn = this.setUIColor,
+                        style = '';
+
+                fn.colors = fn.colors || [];
+
+                if ( selector ) {
+                        fn.colors.push( {
+                                selector: selector,
+                                property: property || 'color'
+                        } );
+                } else {
+                        dom.getStyle( this.getBody(), 'color', true )
+                        .replace( /rgb\s*\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)/gi, function( match, r, g, b ) {
+                                tinymce.each( fn.colors, function( color ) {
+                                        style += color.selector + '{' + color.property + ':rgb(' + r + ',' + g + ',' + b + ');}';
+                                } );
+                        } );
+        
+                        if ( fn.styleElement ) {
+                                dom.setHTML( fn.styleElement, style );
+                        } else {
+                                fn.styleElement = dom.create( 'style', { type: 'text/css' }, style );
+                                this.getDoc().head.appendChild( fn.styleElement );
+                        }
+                }
+        };
+
         function toggleToolbars( state ) {
                 var iframe, initial, toolbars,
                         pixels = 0;
@@ -328 +357 @@
                                 }
                         });
                 }
+
+                setTimeout( editor.setUIColor(), 250 );
         });
 
         // Word count

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

@@ -8 +8 @@
                 TreeWalker = tinymce.dom.TreeWalker,
                 toRemove = false;
 
+        editor.setUIColor( '.wpview-wrap[data-mce-selected]:before', 'border-color' );
+
         function getParentView( node ) {
                 while ( node && node.nodeName !== 'BODY' ) {
                         if ( isView( node ) ) {

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

@@ -1 +1 @@
 /* Additional default styles for the editor */
 
+html {
+        margin: 0 40px;
+}
+
 html.ios {
         height: 100%;
 }
@@ -14 +18 @@
         font-size: 13px;
         line-height: 19px;
         color: #333;
-        margin: 10px;
+        margin: 9px auto;
+        max-width: 100%;
+        overflow: visible !important;
+        padding-top: 1px 0; /* This ensure margins are contained in the body. */
+        
 }
 
 /* DFW mode */
@@ -188 +196 @@
  */
 
 .wpview-wrap {
-        width: 99.99%; /* All IE need hasLayout, incl. 11 (ugh, not again!!) */
-        position: relative;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
         clear: both;
+        margin-bottom: 16px;
+        position: relative;
+        width: 100%; /* All IE need hasLayout, incl. 11 (ugh, not again!!) */   
 }
 
 /* delegate the handling of the selection to the wpview tinymce plugin */
@@ -225 +237 @@
 /**
  * Media previews
  */
-.wpview-wrap {
-    position: relative;
-    margin-bottom: 16px;
-        border: 1px solid transparent;
-}
-
-.wpview-wrap[data-mce-selected] {
-        background-color: rgba(0,0,0,0.1);
-        border-color: rgba(0,0,0,0.3);
-}
 
-.ie8 .wpview-wrap[data-mce-selected],
-.ie7 .wpview-wrap[data-mce-selected] {
-        background-color: #e5e5e5;
-        border-color: #777;
+.wpview-wrap[data-mce-selected]:before {
+        border: 2px dashed #333;
+        content: '';
+        margin: 0;
+        opacity: 0.5;
+        padding: 0;
+        position: absolute;
+        top: -7px;
+        left: -7px;
+        right: -7px;
+        bottom: -7px;
+        z-index: -1;
 }
 
 .wpview-overlay {
@@ -256 +266 @@
 
 .wpview-wrap .toolbar {
         position: absolute;
-        top: 0;
-        left: 0;
+        left: -38px;
+        top: -5px;
         display: none;
         z-index: 100;
 }
@@ -271 +281 @@
         margin: 0;
 }
 
-.wpview-wrap .toolbar div,
 #wp-image-toolbar i {
         margin-top: 7px;
         margin-left: 7px;
@@ -286 +295 @@
         font-size: 30px;
 }
 
-.ie8 .wpview-wrap .toolbar div,
-.ie7 .wpview-wrap .toolbar div,
+.wpview-wrap .toolbar div {
+        cursor: pointer;
+        display: block;
+        font-size: 30px;
+        opacity: 0.5;
+        width: 30px;
+        height: 30px;
+        -webkit-transition: opacity 0.1s ease-in 0;
+        -moz-transition: opacity 0.1s ease-in 0;
+        transition: opacity 0.1s ease-in 0;
+}
+
+.wpview-wrap .toolbar div:hover {
+        opacity: 1;
+}
+
 .ie8 #wp-image-toolbar i,
 .ie7 #wp-image-toolbar i {
         display: inline;
@@ -328 +351 @@
         font-family: 'Open Sans', sans-serif;
 }
 
-.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-type-audio .toolbar {
-        top: auto;
-        bottom: -34px;
-}
-
-.wpview-type-audio .toolbar div {
-        margin-top: 0;
-}
-
-.wpview-type-audio .toolbar div:first-child {
-        margin-left: 0;
-}
-
 .wont-play {
         padding: 4px 0;
 }