Ticket #32325: 32325.patch

src/wp-admin/css/media.css

@@ -566 +566 @@
         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 {
@@ -581 +581 @@
 }
 
 .media-frame.mode-grid .spinner {
-        margin-top: 15px;
+        margin-top: 16px;
 }
 
 .attachments-browser .media-toolbar-secondary > .media-button {

src/wp-includes/js/media-grid.js

@@ -279 +279 @@
 
 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 +315 @@
 
                 // TODO: the Frame should be doing all of this.
                 if ( this.controller.isModeActive( 'select' ) ) {
+                        this.model.set( 'size', 'large' );
                         this.model.set( 'text', l10n.cancelSelection );
                         children.not( '.media-button' ).hide();
                         this.$el.show();
                         toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
                 } else {
+                        this.model.set( 'size', '' );
                         this.model.set( 'text', l10n.bulkSelect );
                         this.controller.content.get().$el.removeClass( 'fixed' );
                         toolbar.$el.css( 'width', '' );

src/wp-includes/js/media/views/button/select-mode-toggle.js

@@ -15 +15 @@
 
 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 +51 @@
 
                 // TODO: the Frame should be doing all of this.
                 if ( this.controller.isModeActive( 'select' ) ) {
+                        this.model.set( 'size', 'large' );
                         this.model.set( 'text', l10n.cancelSelection );
                         children.not( '.media-button' ).hide();
                         this.$el.show();
                         toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
                 } else {
+                        this.model.set( 'size', '' );
                         this.model.set( 'text', l10n.bulkSelect );
                         this.controller.content.get().$el.removeClass( 'fixed' );
                         toolbar.$el.css( 'width', '' );