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

git-svn-id: https://develop.svn.wordpress.org/trunk@22706 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith 2012-11-20 11:10:04 +00:00
parent 21598abfd3
commit ce06a037dd
4 changed files with 87 additions and 34 deletions

View File

@ -433,44 +433,19 @@
.selected.attachment {
box-shadow:
0 0 0 1px #fff,
0 0 0 4px #777;
0 0 0 3px #ccc;
}
.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: -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;
}
.attachment-preview {
position: relative;
width: 199px;
height: 199px;
overflow: hidden;
box-shadow:
inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
@ -485,6 +460,7 @@
top: 0;
left: 0;
margin: 0 auto;
overflow: hidden;
}
/* Vertically center the icons. */
@ -554,7 +530,6 @@
}
.attachment .close {
display: none;
position: absolute;
top: 5px;
right: 5px;
@ -571,14 +546,74 @@
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
}
.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);
}
.media-frame .describe {
position: relative;
display: block;
@ -858,7 +893,7 @@
right: 0;
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 ) );
background-image: -o-linear-gradient(right, rgba( 255, 255, 255, 1 ) , rgba( 255, 255, 255, 0 ) );

View File

@ -712,7 +712,7 @@ window.wp = window.wp || {};
// Refresh the `single` model whenever the selection changes.
// 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 ) );
},
// Override the selection's add method.

View File

@ -2309,12 +2309,13 @@
template: media.template('attachment'),
events: {
'mousedown .attachment-preview': 'toggleSelection',
'click .attachment-preview': 'toggleSelection',
'change [data-setting]': 'updateSetting',
'change [data-setting] input': 'updateSetting',
'change [data-setting] select': 'updateSetting',
'change [data-setting] textarea': 'updateSetting',
'click .close': 'removeFromLibrary',
'click .check': 'removeFromSelection',
'click a': 'preventDefault'
},
@ -2395,7 +2396,7 @@
// it now becomes the single model.
selection[ selection.single() === model ? 'remove' : 'single' ]( model );
} else {
selection.add( model ).single();
selection.add( model ).single( model );
}
},
@ -2476,6 +2477,17 @@
event.stopPropagation();
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 );
}
});
@ -2483,7 +2495,9 @@
* wp.media.view.Attachment.Library
*/
media.view.Attachment.Library = media.view.Attachment.extend({
className: 'attachment library'
buttons: {
check: true
}
});
/**

View File

@ -1452,6 +1452,10 @@ function wp_print_media_templates( $attachment ) {
<# if ( data.buttons.close ) { #>
<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 ) { #>
<# if ( 'image' === data.type ) { #>