Changeset 22322

Timestamp:

10/29/2012 07:38:13 AM (12 years ago)

Author:

koopersmith

Message:

Add inline uploader UI to media modal sidebar. see #21390.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (3 diffs)
• js/media-views.js (modified) (4 diffs)
• media.php (modified) (1 diff)

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

@@ -134 +134 @@
 .media-sidebar .sidebar-content {
     padding: 0 10px;
+    margin-bottom: 130px;
 }
 
@@ -486 +487 @@
     background: transparent;
     border-color: #fff;
-    /*display: none;*/
+    display: none;
 }
 
@@ -495 +496 @@
 .uploading .uploader-window .media-progress-bar {
     display: block;
+}
+
+.uploader-inline {
+    display: none;
+}
+
+.uploader-inline .media-progress-bar {
+    display: none;
+}
+
+.uploading.uploader-inline .media-progress-bar {
+    display: block;
+}
+
+.media-sidebar .uploader-inline {
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100px;
+    margin: 10px;
+    padding-top: 10px;
+    text-align: center;
+    border: 1px dashed #aaa;
+}
+
+.media-sidebar .uploader-inline h3 {
+    font-weight: 200;
+    font-size: 16px;
+    margin: 10px 0;
 }
 

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

@@ -500 +500 @@
 
             this.controller = this.options.controller;
+            this.inline = new media.view.UploaderInline({
+                controller:     this.controller,
+                uploaderWindow: this
+            }).render();
+
+            this.inline.$el.appendTo('body');
 
             uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
-                container: this.$el,
+                container: this.inline.$el,
                 dropzone:  this.$el,
-                browser:   this.$('.upload-attachments a'),
+                browser:   this.inline.$('.browser'),
                 params:    {}
             });
-
-            // Track uploading attachments.
-            wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
 
             if ( uploader.dropzone ) {
@@ -523 +526 @@
         render: function() {
             this.maybeInitUploader();
-            this.renderUploadProgress();
             this.$el.html( this.template( this.options ) );
-            this.$bar = this.$('.upload-attachments .media-progress-bar div');
-            return this;
+            return this;
+        },
+
+        refresh: function() {
+            if ( this.uploader )
+                this.uploader.refresh();
         },
 
@@ -566 +572 @@
                     $el.hide();
             });
+        }
+    });
+
+    media.view.UploaderInline = Backbone.View.extend({
+        tagName:   'div',
+        className: 'uploader-inline',
+        template:  media.template('uploader-inline'),
+
+        initialize: function() {
+            this.controller = this.options.controller;
+
+            // Track uploading attachments.
+            wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
+        },
+
+        destroy: function() {
+            wp.Uploader.queue.off( 'add remove reset change:percent', this.renderUploadProgress, this );
+        },
+
+        render: function() {
+            this.renderUploadProgress();
+            this.$el.html( this.template( this.options ) );
+            this.$bar = this.$('.media-progress-bar div');
+            return this;
         },
 
@@ -910 +940 @@
 
             this.$('.sidebar-content').html( els );
+
+            if ( this.controller.uploader ) {
+                this.$el.append( this.controller.uploader.inline.$el );
+                this.controller.uploader.refresh();
+            }
 
             return this;

trunk/wp-includes/media.php

@@ -1310 +1310 @@
     </script>
 
+    <script type="text/html" id="tmpl-uploader-inline">
+        <h3><?php _e( 'Drop files here' ); ?></h3>
+        <!--<span><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></span>-->
+        <a href="#" class="browser button-secondary"><?php _e( 'Select Files' ); ?></a>
+        <div class="media-progress-bar"><div></div></div>
+    </script>
+
     <script type="text/html" id="tmpl-sidebar">
         <h2 class="sidebar-title"><%- title %></h2>