From da826f59a5b16b9d496b12c2629c7439e1aa8a57 Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Fri, 19 Jun 2015 18:55:52 +0000
Subject: [PATCH] Media Library `Bulk Select` button size should be smaller.

Props afercia.
Fixes #32325.


git-svn-id: https://develop.svn.wordpress.org/trunk@32862 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/media.css                         | 12 ++++++------
 src/wp-includes/css/media-views.css                |  1 +
 src/wp-includes/js/media-grid.js                   | 14 ++++++++++++--
 .../js/media/views/button/select-mode-toggle.js    | 14 ++++++++++++--
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index 12fde47f5a..6ac62a5506 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -461,8 +461,8 @@ border color while dragging a file over the uploader drop area */
 	padding: 0 16px;
 	border-left: 4px solid #dd3d36;
  	-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- 	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); 
-	background-color: #fff; 
+ 	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+	background-color: #fff;
 }
 
 .upload-php .mode-grid .hide-sidebar .media-sidebar {
@@ -570,9 +570,9 @@ border color while dragging a file over the uploader drop area */
 	font-size: 14px;
 }
 
-.media-frame.mode-grid .media-toolbar-secondary > .media-button {
-	margin-top: 10px;
-	margin-bottom: 10px;
+.media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
+	margin: 0 8px 0 0;
+	vertical-align: middle;
 }
 
 .media-frame.mode-grid .attachments-browser .bulk-select {
@@ -585,7 +585,7 @@ border color while dragging a file over the uploader drop area */
 }
 
 .media-frame.mode-grid .spinner {
-	margin-top: 15px;
+	margin-top: 16px;
 }
 
 .attachments-browser .media-toolbar-secondary > .media-button {
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 712528cfbd..c531960730 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -1833,6 +1833,7 @@
 
 .mejs-container:focus {
 	outline: 1px solid #5b9dd9;
+	-webkit-box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8);
 	box-shadow: 0 0 2px 1px rgba(30, 140, 190, .8);
 }
 
diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js
index 622c0ae22a..691b1f090b 100644
--- a/src/wp-includes/js/media-grid.js
+++ b/src/wp-includes/js/media-grid.js
@@ -279,6 +279,10 @@ var Button = wp.media.view.Button,
 
 SelectModeToggle = Button.extend({
 	initialize: function() {
+		_.defaults( this.options, {
+			size : ''
+		} );
+
 		Button.prototype.initialize.apply( this, arguments );
 		this.listenTo( this.controller, 'select:activate select:deactivate', this.toggleBulkEditHandler );
 		this.listenTo( this.controller, 'selection:action:done', this.back );
@@ -310,12 +314,18 @@ SelectModeToggle = Button.extend({
 
 		// TODO: the Frame should be doing all of this.
 		if ( this.controller.isModeActive( 'select' ) ) {
-			this.model.set( 'text', l10n.cancelSelection );
+			this.model.set( {
+				size: 'large',
+				text: l10n.cancelSelection
+			} );
 			children.not( '.spinner, .media-button' ).hide();
 			this.$el.show();
 			toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
 		} else {
-			this.model.set( 'text', l10n.bulkSelect );
+			this.model.set( {
+				size: '',
+				text: l10n.bulkSelect
+			} );
 			this.controller.content.get().$el.removeClass( 'fixed' );
 			toolbar.$el.css( 'width', '' );
 			toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
diff --git a/src/wp-includes/js/media/views/button/select-mode-toggle.js b/src/wp-includes/js/media/views/button/select-mode-toggle.js
index 0ba8c817c3..419685e559 100644
--- a/src/wp-includes/js/media/views/button/select-mode-toggle.js
+++ b/src/wp-includes/js/media/views/button/select-mode-toggle.js
@@ -15,6 +15,10 @@ var Button = wp.media.view.Button,
 
 SelectModeToggle = Button.extend({
 	initialize: function() {
+		_.defaults( this.options, {
+			size : ''
+		} );
+
 		Button.prototype.initialize.apply( this, arguments );
 		this.listenTo( this.controller, 'select:activate select:deactivate', this.toggleBulkEditHandler );
 		this.listenTo( this.controller, 'selection:action:done', this.back );
@@ -46,12 +50,18 @@ SelectModeToggle = Button.extend({
 
 		// TODO: the Frame should be doing all of this.
 		if ( this.controller.isModeActive( 'select' ) ) {
-			this.model.set( 'text', l10n.cancelSelection );
+			this.model.set( {
+				size: 'large',
+				text: l10n.cancelSelection
+			} );
 			children.not( '.spinner, .media-button' ).hide();
 			this.$el.show();
 			toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
 		} else {
-			this.model.set( 'text', l10n.bulkSelect );
+			this.model.set( {
+				size: '',
+				text: l10n.bulkSelect
+			} );
 			this.controller.content.get().$el.removeClass( 'fixed' );
 			toolbar.$el.css( 'width', '' );
 			toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );