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. git-svn-id: http://core.svn.wordpress.org/trunk@22332 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith
parent
a24d651e0e
commit
097cb6117d
|
|
@ -216,19 +216,41 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.selected.attachment {
|
||||
box-shadow:
|
||||
0 0 0 1px #fff,
|
||||
0 0 0 4px #777;
|
||||
}
|
||||
|
||||
.details.attachment {
|
||||
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: 0;
|
||||
left: 0;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #21759b;
|
||||
text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.5 );
|
||||
background: #777;
|
||||
border: 1px solid #fff;
|
||||
/*border-width: 0 1px 1px 0;*/
|
||||
border-width: 0 0 1px 1px;
|
||||
box-shadow: -1px 1px 0 rgba( 0, 0, 0, 0.1 );
|
||||
}
|
||||
|
||||
.attachment.library.details:after {
|
||||
background: #1e8cbe;
|
||||
}
|
||||
|
||||
.attachment-preview {
|
||||
|
|
@ -278,6 +300,12 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.attachment.selected .attachment-preview:after {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ),
|
||||
inset 0 0 10px 5px rgba( 0, 0, 0, 0.2 );
|
||||
}
|
||||
|
||||
.attachment .thumbnail img {
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@
|
|||
this.set( 'edge', 120 );
|
||||
|
||||
if ( ! this.get('gutter') )
|
||||
this.set( 'gutter', 6 );
|
||||
this.set( 'gutter', 8 );
|
||||
|
||||
this.on( 'activate', this.activate, this );
|
||||
this.on( 'deactivate', this.deactivate, this );
|
||||
|
|
@ -147,8 +147,6 @@
|
|||
// automatically select any uploading attachments.
|
||||
if ( this.get('multiple') )
|
||||
wp.Uploader.queue.on( 'add', this.selectUpload, this );
|
||||
|
||||
this.get('selection').on( 'add remove', this.toggleDetails, this );
|
||||
},
|
||||
|
||||
deactivate: function() {
|
||||
|
|
@ -157,7 +155,6 @@
|
|||
this.get('selection').off( 'add remove', toolbar.visibility, toolbar );
|
||||
|
||||
wp.Uploader.queue.off( 'add', this.selectUpload, this );
|
||||
this.get('selection').off( 'add remove', this.toggleDetails, this );
|
||||
},
|
||||
|
||||
toolbar: function() {
|
||||
|
|
@ -234,16 +231,35 @@
|
|||
this.frame.sidebar().add( 'details', view, options );
|
||||
},
|
||||
|
||||
toggleDetails: function( model ) {
|
||||
toggleSelection: function( model ) {
|
||||
var details = this.get('details'),
|
||||
selection = this.get('selection');
|
||||
selection = this.get('selection'),
|
||||
selected = selection.has( model );
|
||||
|
||||
if ( selection.has( model ) )
|
||||
if ( ! selection )
|
||||
return;
|
||||
|
||||
if ( ! selected )
|
||||
selection.add( model );
|
||||
|
||||
// If the model is not the same as the details model,
|
||||
// it now becomes the details model. If the model is
|
||||
// in the selection, it is not removed.
|
||||
if ( details !== model ) {
|
||||
this.set( 'details', model );
|
||||
else if ( selection.length )
|
||||
return;
|
||||
}
|
||||
|
||||
// The model is the details model.
|
||||
// Removed it from the selection.
|
||||
selection.remove( model );
|
||||
|
||||
// Show the last selected item, or clear the details view.
|
||||
if ( selection.length )
|
||||
this.set( 'details', selection.last() );
|
||||
else
|
||||
this.unset('details');
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1072,21 +1088,24 @@
|
|||
if ( this.selected() )
|
||||
this.select();
|
||||
|
||||
// Update the model's details view.
|
||||
this.controller.state().on( 'change:details', this.details, this );
|
||||
this.details();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.controller.state().off( 'change:details', this.details, this );
|
||||
},
|
||||
|
||||
progress: function() {
|
||||
if ( this.$bar && this.$bar.length )
|
||||
this.$bar.width( this.model.get('percent') + '%' );
|
||||
},
|
||||
|
||||
toggleSelection: function( event ) {
|
||||
var selection = this.controller.state().get('selection');
|
||||
|
||||
if ( ! selection )
|
||||
return;
|
||||
|
||||
selection[ selection.has( this.model ) ? 'remove' : 'add' ]( this.model );
|
||||
this.controller.state().toggleSelection( this.model );
|
||||
},
|
||||
|
||||
selected: function() {
|
||||
|
|
@ -1119,6 +1138,11 @@
|
|||
this.$el.removeClass('selected');
|
||||
},
|
||||
|
||||
details: function() {
|
||||
var details = this.controller.state().get('details');
|
||||
this.$el.toggleClass( 'details', details === this.model );
|
||||
},
|
||||
|
||||
preventDefault: function( event ) {
|
||||
event.preventDefault();
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue