Changeset 22706

Timestamp:

11/20/2012 11:10:04 AM (14 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 ) { #>