WordPress.org

Make WordPress Core

Changeset 22332


Ignore:
Timestamp:
10/30/2012 09:09:45 PM (7 years ago)
Author:
koopersmith
Message:

Improve selection UI/behavior in the media modal.

  • Moves handling which models are in the selection into the Library state.
  • Adds highlight for the last-selected view in a multi-view state.
  • A view must be the last-selected view before it can be deselected.

see #21390.

Location:
trunk/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/css/media-views.css

    r22325 r22332  
    217217}
    218218
     219.selected.attachment {
     220    box-shadow:
     221        0 0 0 1px #fff,
     222        0 0 0 4px #777;
     223}
     224
     225.details.attachment {
     226    box-shadow:
     227        0 0 0 1px #fff,
     228        0 0 0 4px #1e8cbe;
     229}
     230
     231
    219232.attachment.library.selected:after {
    220233    content: '\2713';
     
    223236    width: 24px;
    224237    position: absolute;
    225     top: 0;
    226     left: 0;
     238    top: -1px;
     239    right: -1px;
    227240    line-height: 24px;
    228241    font-size: 18px;
    229242    text-align: center;
    230243    color: #fff;
    231     background: #21759b;
     244    text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.5 );
     245    background: #777;
     246    border: 1px solid #fff;
     247    /*border-width: 0 1px 1px 0;*/
     248    border-width: 0 0 1px 1px;
     249    box-shadow: -1px 1px 0 rgba( 0, 0, 0, 0.1 );
     250}
     251
     252.attachment.library.details:after {
     253    background: #1e8cbe;
    232254}
    233255
     
    277299    box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
    278300    overflow: hidden;
     301}
     302
     303.attachment.selected .attachment-preview:after {
     304    box-shadow:
     305        inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ),
     306        inset 0 0 10px 5px rgba( 0, 0, 0, 0.2 );
    279307}
    280308
  • trunk/wp-includes/js/media-views.js

    r22324 r22332  
    132132
    133133            if ( ! this.get('gutter') )
    134                 this.set( 'gutter', 6 );
     134                this.set( 'gutter', 8 );
    135135
    136136            this.on( 'activate', this.activate, this );
     
    148148            if ( this.get('multiple') )
    149149                wp.Uploader.queue.on( 'add', this.selectUpload, this );
    150 
    151             this.get('selection').on( 'add remove', this.toggleDetails, this );
    152150        },
    153151
     
    158156
    159157            wp.Uploader.queue.off( 'add', this.selectUpload, this );
    160             this.get('selection').off( 'add remove', this.toggleDetails, this );
    161158        },
    162159
     
    235232        },
    236233
    237         toggleDetails: function( model ) {
     234        toggleSelection: function( model ) {
    238235            var details = this.get('details'),
    239                 selection = this.get('selection');
    240 
    241             if ( selection.has( model ) )
     236                selection = this.get('selection'),
     237                selected = selection.has( model );
     238
     239            if ( ! selection )
     240                return;
     241
     242            if ( ! selected )
     243                selection.add( model );
     244
     245            // If the model is not the same as the details model,
     246            // it now becomes the details model. If the model is
     247            // in the selection, it is not removed.
     248            if ( details !== model ) {
    242249                this.set( 'details', model );
    243             else if ( selection.length )
     250                return;
     251            }
     252
     253            // The model is the details model.
     254            // Removed it from the selection.
     255            selection.remove( model );
     256
     257            // Show the last selected item, or clear the details view.
     258            if ( selection.length )
    244259                this.set( 'details', selection.last() );
    245260            else
    246261                this.unset('details');
     262
    247263        }
    248264    });
     
    10731089                this.select();
    10741090
    1075             return this;
     1091            // Update the model's details view.
     1092            this.controller.state().on( 'change:details', this.details, this );
     1093            this.details();
     1094
     1095            return this;
     1096        },
     1097
     1098        destroy: function() {
     1099            this.controller.state().off( 'change:details', this.details, this );
    10761100        },
    10771101
     
    10821106
    10831107        toggleSelection: function( event ) {
    1084             var selection = this.controller.state().get('selection');
    1085 
    1086             if ( ! selection )
    1087                 return;
    1088 
    1089             selection[ selection.has( this.model ) ? 'remove' : 'add' ]( this.model );
     1108            this.controller.state().toggleSelection( this.model );
    10901109        },
    10911110
     
    11181137
    11191138            this.$el.removeClass('selected');
     1139        },
     1140
     1141        details: function() {
     1142            var details = this.controller.state().get('details');
     1143            this.$el.toggleClass( 'details', details === this.model );
    11201144        },
    11211145
Note: See TracChangeset for help on using the changeset viewer.