Changeset 9826

Timestamp:

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