Changeset 29082

Timestamp:

07/10/2014 11:05:05 PM (12 years ago)

Author:

wonderboymusic

Message:

Media Grid: make the Uploader closable.

Props ericlewis.
See #24716.

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (1 diff)
• js/media-views.js (modified) (5 diffs)
• media-template.php (modified) (1 diff)

trunk/src/wp-includes/css/media-views.css

@@ -1019 +1019 @@
 .attachments-browser .uploader-inline-content {
         top: 0;
+}
+
+.uploader-inline .close {
+        background-color: transparent;
+        border: 0;
+        cursor: pointer;
+        height: 48px;
+        position: absolute;
+        right: 20px;
+        text-align: center;
+        top: 20px;
+        width: 50px;
+        z-index: 1;
+}
+
+.uploader-inline .close:before {
+        font: normal 30px/50px 'dashicons' !important;
+        color: #777;
+        display: inline-block;
+        content: '\f335';
+        font-weight: 300;
 }
 

trunk/src/wp-includes/js/media-views.js

@@ -3655 +3655 @@
                 template:  media.template('uploader-inline'),
 
+                events: {
+                        'click .close': 'hide'
+                },
+
                 initialize: function() {
                         _.defaults( this.options, {
                                 message: '',
-                                status:  true
+                                status:  true,
+                                canClose: false
                         });
 
@@ -3678 +3683 @@
                 prepare: function() {
                         var suggestedWidth = this.controller.state().get('suggestedWidth'),
-                                suggestedHeight = this.controller.state().get('suggestedHeight');
+                                suggestedHeight = this.controller.state().get('suggestedHeight'),
+                                data = {};
+
+                        data.canClose = this.options.canClose;
 
                         if ( suggestedWidth && suggestedHeight ) {
-                                return {
-                                        suggestedWidth: suggestedWidth,
-                                        suggestedHeight: suggestedHeight
-                                };
-                        }
+                                data.suggestedWidth = suggestedWidth;
+                                data.suggestedHeight = suggestedHeight;
+                        }
+                        return data;
                 },
                 /**
@@ -3746 +3753 @@
                         this.refresh();
                         return this;
+                },
+                show: function() {
+                        this.$el.removeClass( 'hidden' );
+                },
+                hide: function() {
+                        this.$el.addClass( 'hidden' );
                 }
+
         });
 
@@ -5723 +5737 @@
                                 controller: this.controller,
                                 status:     false,
-                                message:    l10n.noItemsFound
+                                message:    l10n.noItemsFound,
+                                canClose:   this.controller.isModeActive( 'grid' )
                         });
 
@@ -5731 +5746 @@
 
                 showUploader: function() {
-                        this.uploader.$el.removeClass( 'hidden' );
+                        this.uploader.show();
                 },
 

trunk/src/wp-includes/media-template.php

@@ -161 +161 @@
         <script type="text/html" id="tmpl-uploader-inline">
                 <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
+                <# if ( data.canClose ) { #>
+                <button class="close dashicons dashicons-no"><span class="screen-reader-text">Close overlay</span></button>
+                <# } #>
                 <div class="uploader-inline-content {{ messageClass }}">
                 <# if ( data.message ) { #>