sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Media grid bulk selection styling:

Browse Source 
* Fade content within each attachment item so that focus styling is still clear.
* Less jarring toolbar pinning.
* Tighten up the fade in/out transition.

see #28842.


git-svn-id: https://develop.svn.wordpress.org/trunk@29489 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2014-08-14 07:17:27 +00:00
parent bc582fc058
commit 1ab750d0d2
2 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/wp-includes/css/media-views.css
View File

@ -729,17 +729,6 @@
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
opacity: 1;
-webkit-transition: opacity 250ms;
transition: opacity 250ms;
}
.media-frame.mode-select .attachment {
opacity: 0.65;
}
.media-frame.mode-select .attachment.selected {
opacity: 1;
}
.attachment:focus {
@ -754,10 +743,10 @@
.media-frame.mode-grid .attachment:focus {
-webkit-box-shadow:
inset 0 0 0 6px #f1f1f1,
inset 0 0 0 5px #f1f1f1,
inset 0 0 1px 7px #5b9dd9;
box-shadow:
inset 0 0 0 6px #f1f1f1,
inset 0 0 0 5px #f1f1f1,
inset 0 0 1px 7px #5b9dd9;
}
@ -772,10 +761,10 @@
.media-frame.mode-grid .selected.attachment {
-webkit-box-shadow:
inset 0 0 0 6px #f1f1f1,
inset 0 0 0 5px #f1f1f1,
inset 0 0 0 7px #ccc;
box-shadow:
inset 0 0 0 6px #f1f1f1,
inset 0 0 0 5px #f1f1f1,
inset 0 0 0 7px #ccc;
}
@ -809,6 +798,17 @@
right: 0;
bottom: 0;
left: 0;
opacity: 1;
-webkit-transition: opacity .1s;
transition: opacity .1s;
}
.media-frame.mode-select .attachment .thumbnail {
opacity: 0.65;
}
.media-frame.mode-select .attachment.selected .thumbnail {
opacity: 1;
}
.attachment .portrait img {
@ -2520,6 +2520,12 @@
padding: 2px;
}
.media-frame.mode-select .attachments-browser.fixed .attachments {
position: relative;
top: 80px; /* prevent jumping up when the toolbar becomes fixed */
padding-bottom: 80px; /* offset for above so the bottom doesn't get cut off */
}
/**
* Copied styles from the Add theme toolbar.
*
@ -2543,12 +2549,11 @@
border: none;
}
.media-frame.mode-select .attachments-browser .media-toolbar.fixed {
.media-frame.mode-select .attachments-browser.fixed .media-toolbar {
position: fixed;
top: 28px;
left: 182px;
top: 12px;
left: auto;
right: 20px;
width: auto;
}
.media-frame.mode-grid input[type="search"] {

11
src/wp-includes/js/media-grid.js
View File

@ -151,17 +151,20 @@
},
fixPosition: function() {
var $browser;
var $browser, $toolbar;
if ( ! this.isModeActive( 'select' ) ) {
return;
}
$browser = this.$('.attachments-browser');
$toolbar = $browser.find('.media-toolbar')
if ( $browser.offset().top < this.$window.scrollTop() + this.$adminBar.height() ) {
$browser.find('.media-toolbar').addClass( 'fixed' );
$browser.addClass( 'fixed' );
$toolbar.css('width', $browser.width() + 'px');
} else {
$browser.find('.media-toolbar').removeClass( 'fixed' );
$browser.removeClass( 'fixed' );
$toolbar.css('width', '');
}
},
@ -594,6 +597,8 @@
toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
} else {
this.model.set( 'text', l10n.bulkSelect );
this.controller.content.get().$el.removeClass('fixed');
toolbar.$el.css('width', '');
toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
children.not( '.spinner, .delete-selected-button' ).show();
this.controller.state().get( 'selection' ).reset();