Changeset 9826

Timestamp:

04/30/2015 07:57:11 PM (11 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:

• bp-core-attachments.php (modified) (1 diff)
• bp-core-avatars.php (modified) (2 diffs)
• css/avatar-rtl.css (modified) (2 diffs)
• css/avatar.css (modified) (2 diffs)
• js/avatar.js (modified) (5 diffs)

trunk/src/bp-core/bp-core-attachments.php

@@ -99 +99 @@
                         'crunching'                 => __( 'Crunching…', 'buddypress' ),
                         'unique_file_warning'       => __( 'Make sure to upload a unique file', 'buddypress' ),
-                        'error_uploading'           => __( '“%s” has failed to upload.', 'buddypress' )
+                        'error_uploading'           => __( '“%s” has failed to upload.', 'buddypress' ),
+                        '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' )
         ) );
 }

trunk/src/bp-core/bp-core-avatars.php

@@ -948 +948 @@
         }
 
+        // Init the feedback message
+        $feedback_message = false;
+
+        if ( ! empty( $bp->template_message ) ) {
+                $feedback_message = $bp->template_message;
+
+                // Remove template message.
+                $bp->template_message      = false;
+                $bp->template_message_type = false;
+                @setcookie( 'bp-message', false, time() - 1000, COOKIEPATH );
+                @setcookie( 'bp-message-type', false, time() - 1000, COOKIEPATH );
+        }
+
         if ( empty( $avatar ) ) {
                 // Default upload error
-                $message = array();
-
-                // Intercept the template message and remove it
-                if ( ! empty( $bp->template_message ) ) {
-                        // Set the feedback message
-                        $message = array(
-                                'type'    => 'upload_error',
-                                'message' => $bp->template_message,
-                        );
-
-                        // Remove template message.
-                        $bp->template_message      = false;
-                        $bp->template_message_type = false;
-                        @setcookie( 'bp-message', false, time() - 1000, COOKIEPATH );
-                        @setcookie( 'bp-message-type', false, time() - 1000, COOKIEPATH );
-                }
-
-                bp_attachments_json_response( false, $is_html4, $message );
+                $message = __( 'Upload failed.', 'buddypress' );
+
+                // Use the template message if set
+                if ( ! empty( $feedback_message ) ) {
+                        $message = $feedback_message;
+                }
+
+                // Upload error reply
+                bp_attachments_json_response( false, $is_html4, array(
+                        'type'    => 'upload_error',
+                        'message' => $message,
+                ) );
         }
 
@@ -991 +998 @@
                 'width'     => $uploaded_image[0],
                 'height'    => $uploaded_image[1],
+                'feedback'  => $feedback_message,
         ) );
 }

trunk/src/bp-core/css/avatar-rtl.css

@@ -51 +51 @@
 
 #bp-uploader-warning, #bp-webcam-message p.warning {
-        background-color: #ffec8b;
-        border: 1px solid #fc0;
+        background-color: #ffd;
+        border: 1px solid #cb2;
         color: #440;
         display: block;
@@ -282 +282 @@
 }
 
+.bp-avatar .item {
+        overflow:hidden;
+}
+
 .bp-avatar .avatar-crop-management.adjust {
         float: right;

trunk/src/bp-core/css/avatar.css

@@ -51 +51 @@
 
 #bp-uploader-warning, #bp-webcam-message p.warning {
-        background-color: #ffec8b;
-        border: 1px solid #fc0;
+        background-color: #ffd;
+        border: 1px solid #cb2;
         color: #440;
         display: block;
@@ -282 +282 @@
 }
 
+.bp-avatar .item {
+        overflow:hidden;
+}
+
 .bp-avatar .avatar-crop-management.adjust {
         float: left;

trunk/src/bp-core/js/avatar.js

@@ -27 +27 @@
                         this.views    = new Backbone.Collection();
                         this.jcropapi = {};
+                        this.warning = null;
 
                         // Set up nav
@@ -350 +351 @@
                                 avatarStatus.inject( '.bp-avatar-status' );
                         } );
+                },
+
+                removeWarning: function() {
+                        if ( ! _.isNull( this.warning ) ) {
+                                this.warning.remove();
+                        }
+                },
+
+                displayWarning: function( message ) {
+                        this.removeWarning();
+
+                        this.warning = new bp.Views.uploaderWarning( {
+                                value: message
+                        } );
+
+                        this.warning.inject( '.bp-avatar-status' );
                 }
         };
@@ -363 +380 @@
 
                 initialize: function() {
+                        var hasAvatar = _.findWhere( this.collection.models, { id: 'delete' } );
+
+                        // Display a message to inform about the delete tab
+                        if ( 1 !== hasAvatar.get( 'hide' ) ) {
+                                bp.Avatar.displayWarning( BP_Uploader.strings.has_avatar_warning );
+                        }
+
                         _.each( this.collection.models, this.addNavItem, this );
                         this.collection.on( 'change:hide', this.showHideNavItem, this );
@@ -406 +430 @@
                         event.preventDefault();
 
+                        // First make sure to remove all warnings
+                        bp.Avatar.removeWarning();
+
                         var active = $( event.target ).data( 'nav' );
 
@@ -488 +515 @@
                                 aspectRatio : 1
                         } );
+
+                        // Display a warning if the image is smaller than minimum advised
+                        if ( false !== this.model.get( 'feedback' ) ) {
+                                bp.Avatar.displayWarning( this.model.get( 'feedback' ) );
+                        }
 
                         this.on( 'ready', this.initCropper );