user settings: Display avatar source.

This makes it easier for users to tell how Zulip ended up with an
avatar for them without them uploading one: through the Gravatar
service used across many Wordpress blogs.

Fixes #8225.

static/js/avatar.js

@@ -51,7 +51,11 @@ exports.build_user_avatar_widget = function (upload_function) {
 
     if (page_params.avatar_source === 'G') {
         $("#user_avatar_delete_button").hide();
+        $("#user-avatar-source").show();
+    } else {
+        $("#user-avatar-source").hide();
     }
+
     $("#user_avatar_delete_button").on('click', function (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -60,6 +64,7 @@ exports.build_user_avatar_widget = function (upload_function) {
             success: function (data) {
               $("#user-settings-avatar").expectOne().attr("src", data.avatar_url);
               $("#user_avatar_delete_button").hide();
+              $("#user-avatar-source").show();
               // Need to clear input because of a small edge case
               // where you try to upload the same image you just deleted.
               get_file_input().val('');

static/js/settings_account.js

@@ -311,6 +311,8 @@ exports.set_up = function () {
             form_data.append('file-'+i, file);
         });
 
+        $("#user-avatar-source").hide();
+
         var spinner = $("#upload_avatar_spinner").expectOne();
         loading.make_indicator(spinner, {text: 'Uploading avatar.'});
 
@@ -324,6 +326,12 @@ exports.set_up = function () {
                 loading.destroy_indicator($("#upload_avatar_spinner"));
                 $("#user-settings-avatar").expectOne().attr("src", data.avatar_url);
                 $("#user_avatar_delete_button").show();
+                $("#user-avatar-source").hide();
+            },
+            error: function () {
+                if (page_params.avatar_source === 'G') {
+                    $("#user-avatar-source").show();
+                }
             },
         });
 

static/styles/settings.css

@@ -864,8 +864,27 @@ input[type=checkbox].inline-block {
     transition: all 0.3s ease;
 }
 
-#user-settings-avatar:hover {
+#user-settings-avatar:hover #user-avatar-block {
-    -webkit-filter: brightness(0.5);
+    -webkit-filter: brightness(0.4);
+}
+
+#user-settings-avatar:hover #user-avatar-source {
+    visibility: visible;
+}
+
+#user-avatar-source {
+    margin-left: 10px;
+    width: 200px;
+    height: 20px;
+    position: absolute;
+    bottom: 19%;
+    left: 0%;
+    font-size: 0.9em;
+    visibility: hidden;
+}
+
+.white-color {
+    color: white;
 }
 
 #realm-settings-icon {

static/templates/settings/account-settings.handlebars

@@ -131,7 +131,12 @@
             <h3>{{t "User avatar" }}</h3>
 
             <div class="inline-block">
-                <img id="user-settings-avatar" src="{{ page_params.avatar_url_medium }}" />
+                <div id="user-settings-avatar">
+                    <img id="user-avatar-block" src="{{ page_params.avatar_url_medium }}" />
+                    <div id="user-avatar-source">
+                        <a href="https://en.gravatar.com/" target="_blank" class="white-color">{{t "Avatar from Gravatar" }}</a>
+                    </div>
+                </div>
                 <div id="user_avatar_file_input_error" class="text-error"></div>
                 <input type="file" name="user_avatar_file_input" class="notvisible" id="user_avatar_file_input" value="{{t 'Upload avatar' }}" />
                 <div id="upload_avatar_spinner"></div>