Changeset 22154

Timestamp:

10/10/2012 06:47:22 AM (12 years ago)

Author:

koopersmith

Message:

Improve styling and markup for gallery and attachment MCE views.

Attachment views can now inherit from the theme's editor-style.css — just have any rules that apply to the img tag apply to .editor-attachment as well.

Adds a non-functional edit button to gallery views.

see #21390, #21813, #21815.

Location:

trunk

Files:

• wp-content/themes/twentyeleven/editor-style.css (modified) (1 diff)
• wp-content/themes/twentytwelve/editor-style.css (modified) (1 diff)
• wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css (modified) (3 diffs)
• wp-includes/media.php (modified) (2 diffs)

trunk/wp-content/themes/twentyeleven/editor-style.css

@@ -255 +255 @@
     margin-top: 0.4em;
 }
-img {
+img,
+.editor-attachment {
     border: 1px solid #ddd;
     padding: 6px;

trunk/wp-content/themes/twentytwelve/editor-style.css

@@ -290 +290 @@
 -------------------------------------------------------------- */
 
-img {
+img,
+.editor-attachment {
     border: 0;
     border-radius: 3px;

trunk/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css

@@ -143 +143 @@
 
 /* WordPress TinyMCE Previews */
-div.wp-view-wrap,
-div.wp-view {
+.wp-view-wrap {
     position: relative;
     display: inline-block;
 }
 
-div.wp-view-wrap img {
+.wp-view-wrap * {
+    font-family: sans-serif;
+    font-weight: normal;
+}
+
+.wp-view-wrap img {
     display: block;
     border: 0;
     padding: 0;
     margin: 0;
-}
-
-.spinner {
-    background: #fff url("../../../../../../../wp-admin/images/wpspin_light.gif") no-repeat center center;
-}
-
-.close {
-    display: none;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.wp-view-wrap .overlay {
+    opacity: 0;
+    display: block;
+    content: '';
     position: absolute;
     top: 0;
+    left: 0;
     right: 0;
-    height: 26px;
-    width: 26px;
-    font-size: 26px;
+    bottom: 0;
+    box-shadow: inset 0 0 45px rgba( 0, 0, 0, 0.3 );
+    /*box-shadow:
+        inset 0 60px 30px -30px rgba( 0, 0, 0, 0.2 ),
+        inset 0 -60px 30px -30px rgba( 0, 0, 0, 0.2 );*/
+    overflow: hidden;
+
+    -webkit-transition: opacity 100ms ease-in-out;
+    -moz-transition:    opacity 100ms ease-in-out;
+    -ms-transition:     opacity 100ms ease-in-out;
+    -o-transition:      opacity 100ms ease-in-out;
+    transition:         opacity 100ms ease-in-out;
+}
+
+.wp-view-wrap:hover .overlay {
+    opacity: 1;
+}
+
+.wp-view-wrap .spinner {
+    background: #fff url("../../../../../../../wp-admin/images/wpspin_light.gif") no-repeat center center;
+}
+
+.wp-view-wrap .button {
+    position: absolute;
+    height: 22px;
     line-height: 22px;
+    font-size: 14px;
     text-align: center;
     cursor: pointer;
     color: #464646;
+
+    background: #f3f3f3;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
+    background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
+    background-image:    -moz-linear-gradient(top, #fefefe, #f4f4f4);
+    background-image:     -ms-linear-gradient(top, #fefefe, #f4f4f4);
+    background-image:      -o-linear-gradient(top, #fefefe, #f4f4f4);
+    background-image:   linear-gradient(to bottom, #fefefe, #f4f4f4);
+
+    box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
+    border-radius: 2px;
+}
+
+.wp-view-wrap .button:hover {
+    box-shadow:
+        0 0 0 1px rgba( 0, 0, 0, 0.6 ),
+        0 0 10px rgba( 255, 255, 255, 0.4 );
     background: #fff;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
+    background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
+    background-image:    -moz-linear-gradient(top, #fff, #f3f3f3);
+    background-image:     -ms-linear-gradient(top, #fff, #f3f3f3);
+    background-image:      -o-linear-gradient(top, #fff, #f3f3f3);
+    background-image:   linear-gradient(to bottom, #fff, #f3f3f3);
+    color: #333;
+}
+
+.wp-view-wrap .close,
+.wp-view-wrap .edit {
+    display: none;
+}
+
+.wp-view-wrap .close {
+    top: 5px;
+    right: 5px;
+    width: 22px;
+    font-size: 22px;
+    line-height: 20px;
+}
+
+.wp-view-wrap .edit {
+    bottom: 5px;
+    right: 5px;
+    padding: 0 10px;
 }
 
 .editor-attachment:hover .close,
-.editor-gallery:hover .close {
+.editor-gallery:hover .close,
+.editor-gallery:hover .edit {
     display: block;
 }
@@ -184 +256 @@
     margin-top: 10px;
     margin-right: 10px;
-    padding: 4px;
-    border: 1px solid #dfdfdf;
+    overflow: hidden;
 }
 
@@ -194 +265 @@
 }
 
+.editor-attachment img,
+.editor-attachment .overlay {
+    border-radius: inherit;
+}
+
+.editor-attachment-preview {
+    position: relative;
+}
+
 .editor-gallery {
+    position: relative;
     min-height: 150px;
     min-width: 150px;
-    margin: 1px;
-    border: 4px solid #fff;
+    margin: 5px 15px 15px 5px;
     box-shadow:
-        0 0 0 1px #ccc,
-        5px 5px 0 0 #fff,
-        5px 5px 0 1px #ccc,
-        10px 10px 0 0 #fff,
-        10px 10px 0 1px #ccc;
-}
-.editor-gallery .close {
-    top: 1px;
-    right: 1px;
-}
+        0 0 0 4px #fff,
+        0 0 0 5px #ccc,
+        5px 5px 0 4px #fff,
+        5px 5px 0 5px #ccc,
+        10px 10px 0 4px #fff,
+        10px 10px 0 5px #ccc;
+}

trunk/wp-includes/media.php

@@ -1363 +1363 @@
 
     <script type="text/html" id="tmpl-editor-attachment">
-        <% if ( url ) { %>
-            <img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false" />
-        <% } %>
-
-        <% if ( uploading ) { %>
-            <div class="media-progress-bar"><div></div></div>
-        <% } %>
-        <div class="close">&times;</div>
+        <div class="editor-attachment-preview">
+            <% if ( url ) { %>
+                <img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false" />
+            <% } %>
+
+            <% if ( uploading ) { %>
+                <div class="media-progress-bar"><div></div></div>
+            <% } %>
+            <div class="overlay">
+                <div class="button close">&times;</div>
+            </div>
+        </div>
         <div class="describe"></div>
     </script>
@@ -1378 +1382 @@
             <img src="<%- url %>" draggable="false" />
         <% } %>
-        <div class="close">&times;</div>
+
+        <div class="overlay">
+            <div class="button close">&times;</div>
+            <div class="button edit"><?php _e('Edit'); ?></div>
+        </div>
     </script>
     <?php