WordPress.org

Make WordPress Core

Changeset 22818


Ignore:
Timestamp:
11/22/2012 10:56:10 AM (8 years ago)
Author:
koopersmith
Message:

Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390.

Location:
trunk/wp-includes
Files:
4 edited

Legend:

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

    r22816 r22818  
    739739
    740740.media-uploader-status .media-progress-bar {
    741     width: 100%;
     741    display: none;
     742    width: 100%;
     743}
     744
     745.uploading.media-uploader-status .media-progress-bar {
     746    display: block;
    742747}
    743748
     
    751756
    752757.media-uploader-status {
     758    position: relative;
    753759    padding-bottom: 10px;
    754760    border-bottom: 1px solid #dfdfdf;
     
    757763
    758764.media-uploader-status .upload-details {
     765    display: none;
    759766    font-size: 12px;
    760767    color: #666;
     
    762769}
    763770
     771.uploading.media-uploader-status .upload-details {
     772    display: block;
     773}
     774
    764775.media-uploader-status .upload-detail-separator {
    765776    padding: 0 4px;
     
    768779.media-uploader-status .upload-count {
    769780    color: #464646;
     781}
     782
     783.media-uploader-status .upload-dismiss-errors,
     784.media-uploader-status .upload-errors {
     785    display: none;
     786}
     787
     788.errors.media-uploader-status .upload-dismiss-errors,
     789.errors.media-uploader-status .upload-errors {
     790    display: block;
     791}
     792
     793.media-uploader-status .upload-dismiss-errors {
     794    position: absolute;
     795    top: 0;
     796    right: 0;
     797    text-decoration: none;
     798}
     799
     800.media-uploader-status .upload-error {
     801    margin: 8px 0 0 0;
     802    padding: 8px;
     803    border: 1px #c00 solid;
     804    background: #ffebe8;
     805    border-radius: 3px;
     806}
     807
     808.media-uploader-status .upload-error-label {
     809    padding: 2px 4px;
     810    margin-right: 8px;
     811    font-weight: bold;
     812    color: #fff;
     813    background: #f00;
     814    background: -webkit-linear-gradient( top, #e00, #a00 );
     815    border-radius: 3px;
     816}
     817
     818.media-uploader-status .upload-error-message {
     819    display: block;
     820    padding-top: 8px;
     821    color: #b44;
    770822}
    771823
  • trunk/wp-includes/js/media-views.js

    r22816 r22818  
    3333
    3434    // Makes it easier to bind events using transitions.
    35     media.transition = function( selector ) {
     35    media.transition = function( selector, sensitivity ) {
    3636        var deferred = $.Deferred();
     37
     38        sensitivity = sensitivity || 2000;
    3739
    3840        if ( $.support.transition ) {
     
    4244            // Resolve the deferred when the first element finishes animating.
    4345            selector.first().one( $.support.transition.end, deferred.resolve );
     46
     47            // Just in case the event doesn't trigger, fire a callback.
     48            _.delay( deferred.resolve, sensitivity );
    4449
    4550        // Otherwise, execute on the spot.
     
    18361841        template:  media.template('uploader-status'),
    18371842
     1843        events: {
     1844            'click .upload-dismiss-errors': 'dismiss'
     1845        },
     1846
    18381847        initialize: function() {
    18391848            this.controller = this.options.controller;
     
    18451854
    18461855            this.errors = wp.Uploader.errors;
     1856            this.errors.on( 'add remove reset', this.visibility, this );
     1857            this.errors.on( 'add', this.error, this );
    18471858        },
    18481859
     
    18551866        visibility: function() {
    18561867            this.$el.toggleClass( 'uploading', !! this.queue.length );
     1868            this.$el.toggleClass( 'errors', !! this.errors.length );
    18571869            this.$el.toggle( !! this.queue.length || !! this.errors.length );
    18581870        },
     
    19041916            this.$index.text( index + 1 );
    19051917            this.$total.text( queue.length );
    1906             this.$filename.html( active ? media.truncate( _.escape( active.get('filename') ), 24 ) : '' );
    1907         }
     1918            this.$filename.html( active ? this.filename( active.get('filename') ) : '' );
     1919        },
     1920
     1921        filename: function( filename ) {
     1922            return media.truncate( _.escape( filename ), 24 );
     1923        },
     1924
     1925        error: function( error ) {
     1926            this.views.add( '.upload-errors', new media.view.UploaderStatusError({
     1927                filename: this.filename( error.get('file').name ),
     1928                message:  error.get('message')
     1929            }), { at: 0 });
     1930        },
     1931
     1932        dismiss: function( event ) {
     1933            var errors = this.views.get('.upload-errors');
     1934
     1935            event.preventDefault();
     1936
     1937            if ( errors )
     1938                _.invoke( errors, 'remove' );
     1939            wp.Uploader.errors.reset();
     1940        }
     1941    });
     1942
     1943    media.view.UploaderStatusError = media.View.extend({
     1944        className: 'upload-error',
     1945        template:  media.template('uploader-status-error')
    19081946    });
    19091947
  • trunk/wp-includes/js/plupload/wp-plupload.js

    r22816 r22818  
    8989
    9090            Uploader.errors.unshift({
    91                 message: message,
     91                message: message || pluploadL10n.default_error,
    9292                data:    data,
    9393                file:    file
     
    200200                return error( pluploadL10n.default_error, null, file );
    201201            else if ( ! response.success )
    202                 return error( response.data.message, response.data, file );
     202                return error( response.data && response.data.message, response.data, file );
    203203
    204204            _.each(['file','loaded','size','percent'], function( key ) {
  • trunk/wp-includes/media.php

    r22817 r22818  
    15041504    <script type="text/html" id="tmpl-uploader-status">
    15051505        <h3><?php _e( 'Uploading' ); ?></h3>
     1506        <a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
     1507
    15061508        <div class="media-progress-bar"><div></div></div>
    15071509        <div class="upload-details">
     
    15141516        <div class="upload-errors">
    15151517        </div>
     1518    </script>
     1519
     1520    <script type="text/html" id="tmpl-uploader-status-error">
     1521        <span class="upload-error-label"><?php _e('Error'); ?></span>
     1522        <span class="upload-error-filename">{{{ data.filename }}}</span>
     1523        <span class="upload-error-message">{{ data.message }}</span>
    15161524    </script>
    15171525
Note: See TracChangeset for help on using the changeset viewer.