Skip to:
Content

BuddyPress.org

Changeset 9826


Ignore:
Timestamp:
04/30/2015 07:57:11 PM (4 years ago)
Author:
imath
Message:

Avatar UI : improve user feedback messages

  • Display a message informing the user can delete his current avatar using the "Delete" tab of the UI.
  • Eventually display a message informing the user the image uploaded have smaller dimensions than the avatar full dimensions.

Props r-a-y

See #6290

Location:
trunk/src/bp-core
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-core/bp-core-attachments.php

    r9819 r9826  
    9999            'crunching'                 => __( 'Crunching…', 'buddypress' ),
    100100            'unique_file_warning'       => __( 'Make sure to upload a unique file', 'buddypress' ),
    101             'error_uploading'           => __( '“%s” has failed to upload.', 'buddypress' )
     101            'error_uploading'           => __( '“%s” has failed to upload.', 'buddypress' ),
     102            'has_avatar_warning'        => __( 'If you'd like to delete the existing profile photo but not upload a new one, please use the delete tab.', 'buddypress' )
    102103    ) );
    103104}
  • trunk/src/bp-core/bp-core-avatars.php

    r9819 r9826  
    948948    }
    949949
     950    // Init the feedback message
     951    $feedback_message = false;
     952
     953    if ( ! empty( $bp->template_message ) ) {
     954        $feedback_message = $bp->template_message;
     955
     956        // Remove template message.
     957        $bp->template_message      = false;
     958        $bp->template_message_type = false;
     959        @setcookie( 'bp-message', false, time() - 1000, COOKIEPATH );
     960        @setcookie( 'bp-message-type', false, time() - 1000, COOKIEPATH );
     961    }
     962
    950963    if ( empty( $avatar ) ) {
    951964        // Default upload error
    952         $message = array();
    953 
    954         // Intercept the template message and remove it
    955         if ( ! empty( $bp->template_message ) ) {
    956             // Set the feedback message
    957             $message = array(
    958                 'type'    => 'upload_error',
    959                 'message' => $bp->template_message,
    960             );
    961 
    962             // Remove template message.
    963             $bp->template_message      = false;
    964             $bp->template_message_type = false;
    965             @setcookie( 'bp-message', false, time() - 1000, COOKIEPATH );
    966             @setcookie( 'bp-message-type', false, time() - 1000, COOKIEPATH );
    967         }
    968 
    969         bp_attachments_json_response( false, $is_html4, $message );
     965        $message = __( 'Upload failed.', 'buddypress' );
     966
     967        // Use the template message if set
     968        if ( ! empty( $feedback_message ) ) {
     969            $message = $feedback_message;
     970        }
     971
     972        // Upload error reply
     973        bp_attachments_json_response( false, $is_html4, array(
     974            'type'    => 'upload_error',
     975            'message' => $message,
     976        ) );
    970977    }
    971978
     
    991998        'width'     => $uploaded_image[0],
    992999        'height'    => $uploaded_image[1],
     1000        'feedback'  => $feedback_message,
    9931001    ) );
    9941002}
  • trunk/src/bp-core/css/avatar-rtl.css

    r9819 r9826  
    5151
    5252#bp-uploader-warning, #bp-webcam-message p.warning {
    53     background-color: #ffec8b;
    54     border: 1px solid #fc0;
     53    background-color: #ffd;
     54    border: 1px solid #cb2;
    5555    color: #440;
    5656    display: block;
     
    282282}
    283283
     284.bp-avatar .item {
     285    overflow:hidden;
     286}
     287
    284288.bp-avatar .avatar-crop-management.adjust {
    285289    float: right;
  • trunk/src/bp-core/css/avatar.css

    r9819 r9826  
    5151
    5252#bp-uploader-warning, #bp-webcam-message p.warning {
    53     background-color: #ffec8b;
    54     border: 1px solid #fc0;
     53    background-color: #ffd;
     54    border: 1px solid #cb2;
    5555    color: #440;
    5656    display: block;
     
    282282}
    283283
     284.bp-avatar .item {
     285    overflow:hidden;
     286}
     287
    284288.bp-avatar .avatar-crop-management.adjust {
    285289    float: left;
  • trunk/src/bp-core/js/avatar.js

    r9808 r9826  
    2727            this.views    = new Backbone.Collection();
    2828            this.jcropapi = {};
     29            this.warning = null;
    2930
    3031            // Set up nav
     
    350351                avatarStatus.inject( '.bp-avatar-status' );
    351352            } );
     353        },
     354
     355        removeWarning: function() {
     356            if ( ! _.isNull( this.warning ) ) {
     357                this.warning.remove();
     358            }
     359        },
     360
     361        displayWarning: function( message ) {
     362            this.removeWarning();
     363
     364            this.warning = new bp.Views.uploaderWarning( {
     365                value: message
     366            } );
     367
     368            this.warning.inject( '.bp-avatar-status' );
    352369        }
    353370    };
     
    363380
    364381        initialize: function() {
     382            var hasAvatar = _.findWhere( this.collection.models, { id: 'delete' } );
     383
     384            // Display a message to inform about the delete tab
     385            if ( 1 !== hasAvatar.get( 'hide' ) ) {
     386                bp.Avatar.displayWarning( BP_Uploader.strings.has_avatar_warning );
     387            }
     388
    365389            _.each( this.collection.models, this.addNavItem, this );
    366390            this.collection.on( 'change:hide', this.showHideNavItem, this );
     
    406430            event.preventDefault();
    407431
     432            // First make sure to remove all warnings
     433            bp.Avatar.removeWarning();
     434
    408435            var active = $( event.target ).data( 'nav' );
    409436
     
    488515                aspectRatio : 1
    489516            } );
     517
     518            // Display a warning if the image is smaller than minimum advised
     519            if ( false !== this.model.get( 'feedback' ) ) {
     520                bp.Avatar.displayWarning( this.model.get( 'feedback' ) );
     521            }
    490522
    491523            this.on( 'ready', this.initCropper );
Note: See TracChangeset for help on using the changeset viewer.