Changeset 27578

Timestamp:

03/18/2014 12:19:17 AM (11 years ago)

Author:

azaozz

Message:

TinyMCE:

• Update the styling of the image caption and gallery toolbars.
• Fix issue where the hidden clipboard div in wpView.
• Switch to using the pencil dashicon for Edit.
• Add max-width: 100%; to images in the gallery preview and adjust column widths.

Props cramdesign, mattheu, gcorne, melchoyce, see #27320, fixes #27376, fixes #27354

Location:

trunk/src/wp-includes

Files:

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

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

@@ -349 +349 @@
         position = dom.getPos( node, editor.getBody() );
 
-        toolbarHtml = '<div class="wrapper" data-mce-bogus="1">' +
-            '<div class="dashicons dashicons-format-image edit" data-mce-bogus="1"></div> ' +
-            '<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div></div>';
+        toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div> ' +
+            '<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>';
 
         toolbar = dom.create( 'div', {
@@ -363 +362 @@
         dom.setStyles( toolbar, {
             top: position.y,
-            left: position.x,
-            width: node.width
+            left: position.x
         });
     }

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

@@ -161 +161 @@
 #wp-image-toolbar {
     position: absolute;
-}
-
-#wp-image-toolbar .wrapper {
-    position: relative;
-    height: 33px;
-    background-color: #333; /* old IE */
-    background-color: rgba(0,0,0,0.3);
+    background-color: #333;
 }
 
 #wp-image-toolbar .dashicons {
-    position: absolute;
     color: white;
-    width: 36px;
-    height: 32px;
-    line-height: 32px;
     cursor: pointer;
-}
-
-#wp-image-toolbar div.dashicons-no-alt {
-    top: 0;
-    right: 0;
-}
-
-#wp-image-toolbar div.dashicons-format-image {
-    top: 0;
-    left: 0;
 }
 
@@ -240 +220 @@
     overflow: hidden;
     outline: 0;
+    width: 100%;
 }
 
@@ -247 +228 @@
 .wpview-type-gallery {
     position: relative;
-    padding: 0 0 12px;
     margin-bottom: 16px;
     cursor: pointer;
@@ -254 +234 @@
  .wpview-type-gallery:after {
     content: '';
-    display: block;
-    height: 0;
+    display: table;
     clear: both;
-    visibility: hidden;
 }
 
  .wpview-type-gallery.selected {
-    background-color: #efefef;
+    background-color: #f2f8ff;
+    outline: 1px solid #777;
 }
 
@@ -270 +249 @@
     background-color: #333;
     color: white;
-    padding: 4px;
     display: none;
+}
+
+.wpview-type-gallery .toolbar div,
+#wp-image-toolbar div {
+    margin: 5px;
 }
 
@@ -292 +275 @@
 .gallery {
     margin: auto;
-    line-height: 1;
+    padding: 0.5em 0;
+    line-height: 1;
+    margin-left: -0.5em;
+    margin-right: -0.5em;
+    overflow-x: hidden;
 }
 
 .gallery .gallery-item {
     float: left;
-    margin: 10px 0 0 0;
+    margin: 0;
     text-align: center;
+    padding: 0.5em;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
@@ -306 +297 @@
 }
 
+.gallery .gallery-caption {
+    font-size: 13px;
+    margin: 4px 0;
+}
+
 .gallery-columns-1 .gallery-item {
-    width: 99%;
+    width: 100%;
 }
 
 .gallery-columns-2 .gallery-item {
-    width: 49.5%;
+    width: 50%;
 }
 
 .gallery-columns-3 .gallery-item {
-    width: 33%;
+    width: 33.333%;
 }
 
 .gallery-columns-4 .gallery-item {
-    width: 24.75%;
+    width: 25%;
 }
 
 .gallery-columns-5 .gallery-item {
-    width: 19.825%;
+    width: 20%;
 }
 
 .gallery-columns-6 .gallery-item {
-    width: 16%;
+    width: 16.667%;
 }
 
 .gallery-columns-7 .gallery-item {
-    width: 14%;
+    width: 14.285%;
 }
 
 .gallery-columns-8 .gallery-item {
-    width: 12%;
+    width: 12.5%;
 }
 
 .gallery-columns-9 .gallery-item {
-    width: 11%;
+    width: 11.111%;
 }
 
 .gallery img {
     border: 1px solid #cfcfcf;
+    max-width: 100%;
+    height: auto;
 }
 

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

@@ -906 +906 @@
     <script type="text/html" id="tmpl-editor-gallery">
         <div class="toolbar">
-            <div class="dashicons dashicons-format-gallery edit"></div>
+            <div class="dashicons dashicons-edit edit"></div>
             <div class="dashicons dashicons-no-alt remove"></div>
         </div>