Changeset 22920

Timestamp:

11/29/2012 02:36:12 PM (12 years ago)

Author:

ryan

Message:

Icons for select, deselect, and window close in the media modal.

Props JerrySarcastic, helenyhou, ocean90, lessbloat
fixes #22610

Location:

trunk/wp-includes

Files:

• css/media-views-rtl.css (modified) (2 diffs)
• css/media-views.css (modified) (8 diffs)
• media.php (modified) (2 diffs)

trunk/wp-includes/css/media-views-rtl.css

@@ -5 +5 @@
     left: auto;
     right: 0;
-    float: right;
 }
 
@@ -11 +10 @@
     right: auto;
     left: 0;
-    float: left;
 }
 

trunk/wp-includes/css/media-views.css

@@ -107 +107 @@
 .media-modal-close {
     position: absolute;
+    height: 40px;
+}
+
+.media-modal-title {
     top: -40px;
-    height: 40px;
+    left: 0;
+    padding: 0;
+    margin: 0;
 
     line-height: 40px;
     color: #fff;
+    font-size: 16px;
     font-weight: 200;
     text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 );
 }
 
-a.media-modal-close {
-    color: #fff;
-}
-
-.media-modal-title {
-    left: 0;
-    float: left;
-    padding: 0;
-    margin: 0;
-    font-size: 16px;
-}
-
 .media-modal-close {
-    right: 0;
-    float: right;
-    text-decoration: none;
-    font-size: 1.8em;
-}
-
-.media-modal-close:hover,
-.media-modal-close:focus {
-    color: #fff;
-    text-shadow: 0 0 16px rgba( 255, 255, 255, 0.8 );
+    top: -27px;
+    right: 0;
+    width: 15px;
+    background-position: -80px 0;
 }
 
@@ -153 +142 @@
     overflow: auto;
     background: #fff;
+}
+
+.media-modal-icon {
+    background-image: url(../images/uploader-icons.png);
+    background-repeat: no-repeat;
 }
 
@@ -608 +602 @@
 
 .attachment .close {
+    display: none;
     position: absolute;
     top: 5px;
@@ -619 +614 @@
     text-decoration: none;
     color: #464646;
-    background: #fff;
+    background-color: #fff;
+    background-position: -96px 4px;
     border-width: 0;
+    border-radius: 3px;
     box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
 }
 
-.attachment .button:hover {
+.attachment .close:hover {
     box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
-}
-
-.attachment .close {
-    display: none;
 }
 
@@ -643 +636 @@
     top: -7px;
     right: -7px;
-    line-height: 24px;
-    font-size: 16px;
-    text-align: center;
-    text-decoration: none;
     outline: none;
 
-    color: #333;
     border: 1px solid #fff;
     border-radius: 3px;
-    text-shadow: 0 1px 0 #fff;
     box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 );
 
@@ -663 +650 @@
 }
 
-.attachment .check .dash {
-    font-weight: bold;
-    font-size: 18px;
-    line-height: 22px;
-}
-
-.attachment .check .dash,
-.attachment .check:hover span {
-    display: none;
-}
-
-.attachment.selected .check,
-.attachment .check:hover .dash {
+.attachment .check div {
+    background-position: -1px 0;
+    height: 15px;
+    width: 15px;
+    margin: 5px;
+}
+
+.attachment .check:hover div {
+    background-position: -40px 0;
+}
+
+.attachment.selected .check {
     display: block;
 }
 
 .attachment.details .check {
-    color: #fff;
-    text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.5 );
     box-shadow: 0 0 0 1px #1e8cbe;
 
@@ -692 +676 @@
 }
 
+.attachment.details .check div {
+    background-position: -21px 0;
+}
+
+.attachment.details .check:hover div {
+    background-position: -60px 0;
+}
+
 .media-frame .describe {
     position: relative;
@@ -701 +693 @@
     font-size: 12px;
     border-radius: 0;
+}
+
+/**
+ * HiDPI Displays
+ */
+@media print,
+  (-o-min-device-pixel-ratio: 5/4),
+  (-webkit-min-device-pixel-ratio: 1.25),
+  (min-resolution: 120dpi) {
+    .media-modal-icon {
+        background-image: url(../images/uploader-icons-2x.png);
+        background-size: 134px 15px;
+    }
 }
 

trunk/wp-includes/media.php

@@ -1508 +1508 @@
         <div class="media-modal">
             <h3 class="media-modal-title">{{ data.title }}</h3>
-            <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
+            <a class="media-modal-close media-modal-icon" href="#" title="<?php esc_attr_e('Close'); ?>"></a>
         </div>
         <div class="media-modal-backdrop">
@@ -1621 +1621 @@
 
             <# if ( data.buttons.close ) { #>
-                <a class="close button" href="#">&times;</a>
+                <a class="close media-modal-icon" href="#" title="<?php _e('Remove'); ?>"></a>
             <# } #>
 
             <# if ( data.buttons.check ) { #>
-                <a class="check" href="#"><span>&#10003;</span><span class="dash">&ndash;</span></a>
+                <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
             <# } #>
         </div>