WordPress.org

Make WordPress Core

Changeset 22322


Ignore:
Timestamp:
10/29/2012 07:38:13 AM (8 years ago)
Author:
koopersmith
Message:

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

Location:
trunk/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/css/media-views.css

    r22321 r22322  
    134134.media-sidebar .sidebar-content {
    135135    padding: 0 10px;
     136    margin-bottom: 130px;
    136137}
    137138
     
    486487    background: transparent;
    487488    border-color: #fff;
    488     /*display: none;*/
     489    display: none;
    489490}
    490491
     
    495496.uploading .uploader-window .media-progress-bar {
    496497    display: block;
     498}
     499
     500.uploader-inline {
     501    display: none;
     502}
     503
     504.uploader-inline .media-progress-bar {
     505    display: none;
     506}
     507
     508.uploading.uploader-inline .media-progress-bar {
     509    display: block;
     510}
     511
     512.media-sidebar .uploader-inline {
     513    display: block;
     514    position: absolute;
     515    left: 0;
     516    right: 0;
     517    bottom: 0;
     518    height: 100px;
     519    margin: 10px;
     520    padding-top: 10px;
     521    text-align: center;
     522    border: 1px dashed #aaa;
     523}
     524
     525.media-sidebar .uploader-inline h3 {
     526    font-weight: 200;
     527    font-size: 16px;
     528    margin: 10px 0;
    497529}
    498530
  • trunk/wp-includes/js/media-views.js

    r22321 r22322  
    500500
    501501            this.controller = this.options.controller;
     502            this.inline = new media.view.UploaderInline({
     503                controller:     this.controller,
     504                uploaderWindow: this
     505            }).render();
     506
     507            this.inline.$el.appendTo('body');
    502508
    503509            uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
    504                 container: this.$el,
     510                container: this.inline.$el,
    505511                dropzone:  this.$el,
    506                 browser:   this.$('.upload-attachments a'),
     512                browser:   this.inline.$('.browser'),
    507513                params:    {}
    508514            });
    509 
    510             // Track uploading attachments.
    511             wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
    512515
    513516            if ( uploader.dropzone ) {
     
    523526        render: function() {
    524527            this.maybeInitUploader();
    525             this.renderUploadProgress();
    526528            this.$el.html( this.template( this.options ) );
    527             this.$bar = this.$('.upload-attachments .media-progress-bar div');
    528             return this;
     529            return this;
     530        },
     531
     532        refresh: function() {
     533            if ( this.uploader )
     534                this.uploader.refresh();
    529535        },
    530536
     
    566572                    $el.hide();
    567573            });
     574        }
     575    });
     576
     577    media.view.UploaderInline = Backbone.View.extend({
     578        tagName:   'div',
     579        className: 'uploader-inline',
     580        template:  media.template('uploader-inline'),
     581
     582        initialize: function() {
     583            this.controller = this.options.controller;
     584
     585            // Track uploading attachments.
     586            wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
     587        },
     588
     589        destroy: function() {
     590            wp.Uploader.queue.off( 'add remove reset change:percent', this.renderUploadProgress, this );
     591        },
     592
     593        render: function() {
     594            this.renderUploadProgress();
     595            this.$el.html( this.template( this.options ) );
     596            this.$bar = this.$('.media-progress-bar div');
     597            return this;
    568598        },
    569599
     
    910940
    911941            this.$('.sidebar-content').html( els );
     942
     943            if ( this.controller.uploader ) {
     944                this.$el.append( this.controller.uploader.inline.$el );
     945                this.controller.uploader.refresh();
     946            }
    912947
    913948            return this;
  • trunk/wp-includes/media.php

    r22321 r22322  
    13101310    </script>
    13111311
     1312    <script type="text/html" id="tmpl-uploader-inline">
     1313        <h3><?php _e( 'Drop files here' ); ?></h3>
     1314        <!--<span><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></span>-->
     1315        <a href="#" class="browser button-secondary"><?php _e( 'Select Files' ); ?></a>
     1316        <div class="media-progress-bar"><div></div></div>
     1317    </script>
     1318
    13121319    <script type="text/html" id="tmpl-sidebar">
    13131320        <h2 class="sidebar-title"><%- title %></h2>
Note: See TracChangeset for help on using the changeset viewer.