Ticket #27546: 27546-02.patch

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

@@ -265 +265 @@
                 });
 
                 editor.dom.bind( editor.getBody(), 'mousedown mouseup click', function( event ) {
-                        var view = getParentView( event.target );
+                        var view = getParentView( event.target ),
+                                deselectEventType;
 
                         // Contain clicks inside the view wrapper
                         if ( view ) {
                                 event.stopPropagation();
 
+                                // Hack to try and keep the block resize handles from appearing. They will show on mousedown and then be removed on mouseup.
+                                if ( tinymce.Env.ie <= 10 ) {
+                                        deselect();
+                                }
+
+                                select( view );
+
                                 if ( event.type === 'click' && ! event.metaKey && ! event.ctrlKey ) {
                                         if ( editor.dom.hasClass( event.target, 'edit' ) ) {
                                                 wp.mce.views.edit( view );
@@ -278 +286 @@
                                                 editor.dom.remove( view );
                                         }
                                 }
-                                select( view );
                                 // Returning false stops the ugly bars from appearing in IE11 and stops the view being selected as a range in FF.
                                 // Unfortunately, it also inhibits the dragging of views to a new location.
                                 return false;
                         } else {
-                                if ( event.type === 'mousedown' ) {
+
+                                // Fix issue with deselecting a view in IE8. Without this hack, clicking content above the view wouldn't actually deselect it
+                                // and the caret wouldn't be placed at the mouse location
+                                if( tinymce.Env.ie <= 8 ) {
+                                        deselectEventType = 'mouseup';
+                                } else {
+                                        deselectEventType = 'mousedown';
+                                }
+
+                                if ( event.type === deselectEventType ) {
                                         deselect();
                                 }
                         }

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

@@ -204 +204 @@
         width: 100%;
 }
 
+.ie8 .wpview-wrap .wpview-clipboard,
+.ie7 .wpview-wrap .wpview-clipboard {
+        filter: alpha(opacity=0);
+}
+
 /**
  * Media previews
  */
@@ -214 +219 @@
 }
 
 .wpview-wrap.selected {
-        background-color: #f2f8ff; /* fallback to old blue */
+        background-color: #e5e5e5;
         background-color: rgba(0,0,0,0.1);
         border-color: #777;
         border-color: rgba(0,0,0,0.3);
 }
 
+.ie8 .wpview-wrap.selected,
+.ie7 .wpview-wrap.selected {
+        background-color: #e5e5e5;
+        border-color: #777;
+}
+
 .wpview-overlay {
         position: absolute;
         top: 0;
@@ -263 +274 @@
         font-size: 30px;
 }
 
+.ie8 .wpview-wrap .toolbar div,
+.ie7 .wpview-wrap .toolbar div,
+.ie8 #wp-image-toolbar div,
+.ie7 #wp-image-toolbar div {
+        display: inline;
+        padding: 0;
+}
+
+.ie8 .dashicons-edit,
+.ie7 .dashicons-edit {
+        background-image: url(images/dashicon-edit.png);
+}
+
+.ie8 .dashicons-no-alt,
+.ie7 .dashicons-no-alt {
+        background-image: url(images/dashicon-no-alt.png);
+}
+
+
 .wpview-wrap .toolbar div:hover,
 #wp-image-toolbar div:hover {
         box-shadow: 0 1px 3px rgba(0,0,0,0.8);
@@ -352 +382 @@
         box-sizing: border-box;
 }
 
+.ie7 .gallery .gallery-item,
+.ie8 .gallery .gallery-item {
+        padding: 6px 0;
+}
+
 .gallery .gallery-caption,
 .gallery .gallery-icon {
         margin: 0;
@@ -374 +409 @@
         width: 33.333%;
 }
 
+.ie8 .gallery-columns-3 .gallery-item,
+.ie7 .gallery-columns-3 .gallery-item {
+        width: 33%;
+}
+
 .gallery-columns-4 .gallery-item {
         width: 25%;
 }