Changeset 22706

Timestamp:

11/20/2012 11:10:04 AM (12 years ago)

Author:

koopersmith

Message:

Media: Attachment checkboxes now function as such. fixes #22462, see #21390.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (7 diffs)
• js/media-models.js (modified) (1 diff)
• js/media-views.js (modified) (5 diffs)
• media.php (modified) (1 diff)

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

@@ -434 +434 @@
     box-shadow:
         0 0 0 1px #fff,
-        0 0 0 4px #777;
+        0 0 0 3px #ccc;
 }
 
@@ -440 +440 @@
     box-shadow:
         0 0 0 1px #fff,
-        0 0 0 4px #1e8cbe;
-}
-
-
-.attachment.library.selected:after {
-    content: '\2713';
-    display: block;
-    height: 24px;
-    width: 24px;
-    position: absolute;
-    top: -1px;
-    right: -1px;
-    line-height: 24px;
-    font-size: 18px;
-    text-align: center;
-    color: #fff;
-    text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.5 );
-    background: #777;
-    border: 1px solid #fff;
-    border-width: 0 0 1px 1px;
-    box-shadow: -1px 1px 0 rgba( 0, 0, 0, 0.1 );
-}
-
-.attachment.library.details:after {
-    background: #1e8cbe;
+        0 0 0 5px #1e8cbe;
 }
 
@@ -471 +447 @@
     width: 199px;
     height: 199px;
-    overflow: hidden;
     box-shadow:
         inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
@@ -486 +461 @@
     left: 0;
     margin: 0 auto;
+    overflow: hidden;
 }
 
@@ -555 +531 @@
 
 .attachment .close {
-    display: none;
     position: absolute;
     top: 5px;
@@ -572 +547 @@
 }
 
-.attachment .close:hover {
+.attachment .button:hover {
     box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
 }
 
+.attachment .close {
+    display: none;
+}
+
 .attachment:hover .close {
     display: block;
+}
+
+.attachment .check {
+    display: none;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    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 );
+
+    background: #f1f1f1;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1));
+    background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1);
+    background-image:    -moz-linear-gradient(top, #f1f1f1, #e1e1e1);
+    background-image:      -o-linear-gradient(top, #f1f1f1, #e1e1e1);
+    background-image:   linear-gradient(to bottom, #f1f1f1, #e1e1e1);
+}
+
+.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 {
+    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;
+
+    background: #1e8cbe;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#1e8cbe), to(#0074a2));
+    background-image: -webkit-linear-gradient(top, #1e8cbe, #0074a2);
+    background-image:    -moz-linear-gradient(top, #1e8cbe, #0074a2);
+    background-image:      -o-linear-gradient(top, #1e8cbe, #0074a2);
+    background-image:   linear-gradient(to bottom, #1e8cbe, #0074a2);
 }
 
@@ -859 +894 @@
     bottom: 0;
     width: 25px;
-    background-image: -webkit-gradient(linear, right top, right top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
+    background-image: -webkit-gradient(linear, right top, left top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
     background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
     background-image:    -moz-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );

trunk/wp-includes/js/media-models.js

@@ -713 +713 @@
             // Binds `single` instead of using the context argument to ensure
             // it receives no parameters.
-            this.on( 'add remove reset', _.bind( this.single, this ) );
+            this.on( 'add remove reset', _.bind( this.single, this, false ) );
         },
 

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

@@ -2310 +2310 @@
 
         events: {
-            'mousedown .attachment-preview':  'toggleSelection',
+            'click .attachment-preview':      'toggleSelection',
             'change [data-setting]':          'updateSetting',
             'change [data-setting] input':    'updateSetting',
@@ -2316 +2316 @@
             'change [data-setting] textarea': 'updateSetting',
             'click .close':                   'removeFromLibrary',
+            'click .check':                   'removeFromSelection',
             'click a':                        'preventDefault'
         },
@@ -2396 +2397 @@
                 selection[ selection.single() === model ? 'remove' : 'single' ]( model );
             } else {
-                selection.add( model ).single();
+                selection.add( model ).single( model );
             }
         },
@@ -2477 +2478 @@
 
             this.collection.remove( this.model );
+        },
+
+        removeFromSelection: function( event ) {
+            var selection = this.options.selection;
+            if ( ! selection )
+                return;
+
+            // Stop propagation so the model isn't selected.
+            event.stopPropagation();
+
+            selection.remove( this.model );
         }
     });
@@ -2484 +2496 @@
      */
     media.view.Attachment.Library = media.view.Attachment.extend({
-        className: 'attachment library'
+        buttons: {
+            check: true
+        }
     });
 

trunk/wp-includes/media.php

@@ -1453 +1453 @@
                 <a class="close button" href="#">&times;</a>
             <# } #>
+
+            <# if ( data.buttons.check ) { #>
+                <a class="check" href="#"><span>&#10003;</span><span class="dash">&ndash;</span></a>
+            <# } #>
         </div>
         <# if ( data.describe ) { #>