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: https://develop.svn.wordpress.org/trunk@22332 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith
2012-10-30 21:09:45 +00:00
parent 499f18d2c2
commit 59c70a3061
2 changed files with 69 additions and 17 deletions
+31 -3
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;