Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-29 15:47:38 +02:00
Code Issues Projects Releases Wiki Activity

Improve selection UI/behavior in the media modal.

Browse Source 
* 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 2012-10-30 21:09:45 +00:00
parent a24d651e0e
commit 097cb6117d
2 changed files with 69 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
wp-includes/css/media-views.css
View File

@ -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;

52
wp-includes/js/media-views.js
View File

@ -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();
},