UX: open the change avatar modal when clicking the profile picture

app/assets/javascripts/discourse/routes/application.js.es6

@@ -9,6 +9,7 @@ import { findAll } from "discourse/models/login-method";
 import { getOwner } from "discourse-common/lib/get-owner";
 import { userPath } from "discourse/lib/url";
 import Composer from "discourse/models/composer";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 
 function unlessReadOnly(method, message) {
   return function() {
@@ -195,6 +196,71 @@ const ApplicationRoute = Discourse.Route.extend(OpenComposer, {
 
     createNewMessageViaParams(username, title, body) {
       this.openComposerWithMessageParams(username, title, body);
+    },
+
+    showAvatarSelector(user) {
+      user = user || this.modelFor("user");
+
+      const props = user.getProperties(
+        "id",
+        "email",
+        "username",
+        "avatar_template",
+        "system_avatar_template",
+        "gravatar_avatar_template",
+        "custom_avatar_template",
+        "system_avatar_upload_id",
+        "gravatar_avatar_upload_id",
+        "custom_avatar_upload_id"
+      );
+
+      switch (props.avatar_template) {
+        case props.system_avatar_template:
+          props.selected = "system";
+          break;
+        case props.gravatar_avatar_template:
+          props.selected = "gravatar";
+          break;
+        default:
+          props.selected = "uploaded";
+      }
+
+      props.user = user;
+
+      const modal = showModal("avatar-selector");
+      modal.setProperties(props);
+
+      if (this.siteSettings.selectable_avatars_enabled) {
+        ajax("/site/selectable-avatars.json").then(avatars =>
+          modal.set("selectableAvatars", avatars)
+        );
+      }
+    },
+
+    selectAvatar(url) {
+      const modal = this.controllerFor("avatar-selector");
+      modal.send("closeModal");
+
+      modal
+        .get("user")
+        .selectAvatar(url)
+        .then(() => window.location.reload())
+        .catch(popupAjaxError);
+    },
+
+    saveAvatarSelection() {
+      const modal = this.controllerFor("avatar-selector");
+      const selectedUploadId = modal.get("selectedUploadId");
+      const selectedAvatarTemplate = modal.get("selectedAvatarTemplate");
+      const type = modal.get("selected");
+
+      modal.send("closeModal");
+
+      modal
+        .get("user")
+        .pickAvatar(selectedUploadId, type, selectedAvatarTemplate)
+        .then(() => window.location.reload())
+        .catch(popupAjaxError);
     }
   },
 

app/assets/javascripts/discourse/routes/preferences.js.es6

@@ -1,77 +1,7 @@
 import RestrictedUserRoute from "discourse/routes/restricted-user";
-import showModal from "discourse/lib/show-modal";
-import { popupAjaxError } from "discourse/lib/ajax-error";
-import { ajax } from "discourse/lib/ajax";
 
 export default RestrictedUserRoute.extend({
   model() {
     return this.modelFor("user");
-  },
-
-  actions: {
-    showAvatarSelector(user) {
-      user = user || this.modelFor("user");
-
-      const props = user.getProperties(
-        "id",
-        "email",
-        "username",
-        "avatar_template",
-        "system_avatar_template",
-        "gravatar_avatar_template",
-        "custom_avatar_template",
-        "system_avatar_upload_id",
-        "gravatar_avatar_upload_id",
-        "custom_avatar_upload_id"
-      );
-
-      switch (props.avatar_template) {
-        case props.system_avatar_template:
-          props.selected = "system";
-          break;
-        case props.gravatar_avatar_template:
-          props.selected = "gravatar";
-          break;
-        default:
-          props.selected = "uploaded";
-      }
-
-      props.user = user;
-
-      const controller = showModal("avatar-selector");
-      controller.setProperties(props);
-
-      if (this.siteSettings.selectable_avatars_enabled) {
-        ajax("/site/selectable-avatars.json").then(avatars =>
-          controller.set("selectableAvatars", avatars)
-        );
-      }
-    },
-
-    selectAvatar(url) {
-      const controller = this.controllerFor("avatar-selector");
-      controller.send("closeModal");
-
-      controller
-        .get("user")
-        .selectAvatar(url)
-        .then(() => window.location.reload())
-        .catch(popupAjaxError);
-    },
-
-    saveAvatarSelection() {
-      const controller = this.controllerFor("avatar-selector");
-      const selectedUploadId = controller.get("selectedUploadId");
-      const selectedAvatarTemplate = controller.get("selectedAvatarTemplate");
-      const type = controller.get("selected");
-
-      controller.send("closeModal");
-
-      controller
-        .get("user")
-        .pickAvatar(selectedUploadId, type, selectedAvatarTemplate)
-        .then(() => window.location.reload())
-        .catch(popupAjaxError);
-    }
   }
 });

app/assets/javascripts/discourse/routes/user.js.es6

@@ -2,8 +2,7 @@ import Draft from "discourse/models/draft";
 
 export default Discourse.Route.extend({
   titleToken() {
-    const model = this.modelFor("user");
-    const username = model.get("username");
+    const username = this.modelFor("user").get("username");
     if (username) {
       return [I18n.t("user.profile"), username];
     }

app/assets/javascripts/discourse/templates/user.hbs

@@ -39,7 +39,7 @@
       <div class='profile-image'></div>
       <div class='details'>
         <div class='primary'>
-          <div class='user-profile-avatar'>
+          <div class='user-profile-avatar' {{action "showAvatarSelector"}} title="{{i18n 'user.change_avatar.label'}}">
             {{bound-avatar model "huge"}}
             {{#if model.primary_group_name}}
               {{avatar-flair

app/assets/stylesheets/common/base/user.scss

@@ -151,6 +151,7 @@
       }
 
       .user-profile-avatar {
+        cursor: pointer;
         position: relative;
         float: left;
         height: 100%;

config/locales/client.en.yml

@@ -785,6 +785,7 @@ en:
 
       change_avatar:
         title: "Change your profile picture"
+        label: "Change your profile picture"
         gravatar: "<a href='//gravatar.com/emails' target='_blank'>Gravatar</a>, based on"
         gravatar_title: "Change your avatar on Gravatar's website"
         gravatar_failed: "Could not fetch the Gravatar. Is there one associated to that email address?"