REFACTOR: new 'show-avatar-select' app event to trigger the avatar se…

…lector modal

app/assets/javascripts/discourse/controllers/avatar-selector.js.es6

@@ -2,13 +2,14 @@ import computed from "ember-addons/ember-computed-decorators";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { ajax } from "discourse/lib/ajax";
 import { allowsImages } from "discourse/lib/utilities";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 
 export default Ember.Controller.extend(ModalFunctionality, {
   @computed(
     "selected",
-    "system_avatar_upload_id",
-    "gravatar_avatar_upload_id",
-    "custom_avatar_upload_id"
+    "user.system_avatar_upload_id",
+    "user.gravatar_avatar_upload_id",
+    "user.custom_avatar_upload_id"
   )
   selectedUploadId(selected, system, gravatar, custom) {
     switch (selected) {
@@ -23,9 +24,9 @@ export default Ember.Controller.extend(ModalFunctionality, {
 
   @computed(
     "selected",
-    "system_avatar_template",
-    "gravatar_avatar_template",
-    "custom_avatar_template"
+    "user.system_avatar_template",
+    "user.gravatar_avatar_template",
+    "user.custom_avatar_template"
   )
   selectedAvatarTemplate(selected, system, gravatar, custom) {
     switch (selected) {
@@ -50,22 +51,37 @@ export default Ember.Controller.extend(ModalFunctionality, {
 
     refreshGravatar() {
       this.set("gravatarRefreshDisabled", true);
+
       return ajax(
-        `/user_avatar/${this.get("username")}/refresh_gravatar.json`,
+        `/user_avatar/${this.get("user.username")}/refresh_gravatar.json`,
         { method: "POST" }
       )
         .then(result => {
           if (!result.gravatar_upload_id) {
             this.set("gravatarFailed", true);
           } else {
-            this.setProperties({
-              gravatarFailed: false,
-              gravatar_avatar_template: result.gravatar_avatar_template,
-              gravatar_avatar_upload_id: result.gravatar_upload_id
-            });
+            this.set("gravatarFailed", false);
+            this.get("user").setProperties(result);
           }
         })
         .finally(() => this.set("gravatarRefreshDisabled", false));
+    },
+
+    selectAvatar(url) {
+      this.get("user")
+        .selectAvatar(url)
+        .then(() => window.location.reload())
+        .catch(popupAjaxError);
+    },
+
+    saveAvatarSelection() {
+      const selectedUploadId = this.get("selectedUploadId");
+      const type = this.get("selected");
+
+      this.get("user")
+        .pickAvatar(selectedUploadId, type)
+        .then(() => window.location.reload())
+        .catch(popupAjaxError);
     }
   }
 });

app/assets/javascripts/discourse/initializers/avatar-select.js.es6

@@ -0,0 +1,31 @@
+import showModal from "discourse/lib/show-modal";
+import { ajax } from "discourse/lib/ajax";
+
+export default {
+  name: "avatar-select",
+
+  initialize(container) {
+    const siteSettings = container.lookup("site-settings:main");
+    const appEvents = container.lookup("app-events:main");
+
+    appEvents.on("show-avatar-select", user => {
+      const avatarTemplate = user.get("avatar_template");
+      let selected = "uploaded";
+
+      if (avatarTemplate === user.get("system_avatar_template")) {
+        selected = "system";
+      } else if (avatarTemplate === user.get("gravatar_avatar_template")) {
+        selected = "gravatar";
+      }
+
+      const modal = showModal("avatar-selector");
+      modal.setProperties({ user, selected });
+
+      if (siteSettings.selectable_avatars_enabled) {
+        ajax("/site/selectable-avatars.json").then(avatars =>
+          modal.set("selectableAvatars", avatars)
+        );
+      }
+    });
+  }
+};

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

@@ -510,23 +510,18 @@ const User = RestModel.extend({
     );
   },
 
-  pickAvatar(upload_id, type, avatar_template) {
+  pickAvatar(upload_id, type) {
     return ajax(
       userPath(`${this.get("username_lower")}/preferences/avatar/pick`),
-      {
-        type: "PUT",
-        data: { upload_id, type }
-      }
-    ).then(() =>
-      this.setProperties({ avatar_template, uploaded_avatar_id: upload_id })
+      { type: "PUT", data: { upload_id, type } }
     );
   },
 
   selectAvatar(avatarUrl) {
     return ajax(
       userPath(`${this.get("username_lower")}/preferences/avatar/select`),
       { type: "PUT", data: { url: avatarUrl } }
-    ).then(result => this.setProperties(result));
+    );
   },
 
   isAllowedToUploadAFile(type) {

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

@@ -9,7 +9,6 @@ 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() {
@@ -196,71 +195,6 @@ 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-account.js.es6

@@ -4,12 +4,10 @@ import RestrictedUserRoute from "discourse/routes/restricted-user";
 export default RestrictedUserRoute.extend({
   showFooter: true,
 
-  model: function() {
+  model() {
     const user = this.modelFor("user");
     if (this.siteSettings.enable_badges) {
-      return UserBadge.findByUsername(
-        this.modelFor("user").get("username")
-      ).then(userBadges => {
+      return UserBadge.findByUsername(user.get("username")).then(userBadges => {
         user.set("badges", userBadges.map(ub => ub.badge));
         return user;
       });
@@ -25,5 +23,11 @@ export default RestrictedUserRoute.extend({
       newNameInput: user.get("name"),
       newTitleInput: user.get("title")
     });
+  },
+
+  actions: {
+    showAvatarSelector(user) {
+      this.appEvents.trigger("show-avatar-select", user);
+    }
   }
 });

app/assets/javascripts/discourse/templates/components/user-profile-avatar.hbs

@@ -0,0 +1,11 @@
+<div class='user-profile-avatar'>
+  {{bound-avatar user "huge"}}
+  {{#if user.primary_group_name}}
+    {{avatar-flair
+      flairURL=user.primary_group_flair_url
+      flairBgColor=user.primary_group_flair_bg_color
+      flairColor=user.primary_group_flair_color
+      groupName=user.primary_group_name}}
+  {{/if}}
+  {{plugin-outlet name="user-profile-avatar-flair" args=(hash model=user) tagName='div'}}
+</div>

app/assets/javascripts/discourse/templates/modal/avatar-selector.hbs

@@ -10,11 +10,11 @@
   {{else}}
     <div class="avatar-choice">
       {{radio-button id="system-avatar" name="avatar" value="system" selection=selected}}
-      <label class="radio" for="system-avatar">{{bound-avatar-template system_avatar_template "large"}} {{{i18n 'user.change_avatar.letter_based'}}}</label>
+      <label class="radio" for="system-avatar">{{bound-avatar-template user.system_avatar_template "large"}} {{{i18n 'user.change_avatar.letter_based'}}}</label>
     </div>
     <div class="avatar-choice">
       {{radio-button id="gravatar" name="avatar" value="gravatar" selection=selected}}
-      <label class="radio" for="gravatar">{{bound-avatar-template gravatar_avatar_template "large"}} {{{i18n 'user.change_avatar.gravatar'}}} {{email}}</label>
+      <label class="radio" for="gravatar">{{bound-avatar-template user.gravatar_avatar_template "large"}} {{{i18n 'user.change_avatar.gravatar'}}} {{user.email}}</label>
       {{d-button action="refreshGravatar" title="user.change_avatar.refresh_gravatar_title" disabled=gravatarRefreshDisabled icon="refresh"}}
       {{#if gravatarFailed}}
         <p class="error">{{I18n 'user.change_avatar.gravatar_failed'}}</p>
@@ -24,16 +24,16 @@
       <div class="avatar-choice">
         {{radio-button id="uploaded-avatar" name="avatar" value="uploaded" selection=selected}}
         <label class="radio" for="uploaded-avatar">
-          {{#if custom_avatar_template}}
-            {{bound-avatar-template custom_avatar_template "large"}}
+          {{#if user.custom_avatar_template}}
+            {{bound-avatar-template user.custom_avatar_template "large"}}
             {{i18n 'user.change_avatar.uploaded_avatar'}}
           {{else}}
             {{i18n 'user.change_avatar.uploaded_avatar_empty'}}
           {{/if}}
         </label>
-        {{avatar-uploader user_id=id
-                          uploadedAvatarTemplate=custom_avatar_template
-                          uploadedAvatarId=custom_avatar_upload_id
+        {{avatar-uploader user_id=user.id
+                          uploadedAvatarTemplate=user.custom_avatar_template
+                          uploadedAvatarId=user.custom_avatar_upload_id
                           uploading=uploading
                           done="uploadComplete"}}
       </div>

app/assets/javascripts/discourse/templates/preferences/account.hbs

@@ -107,10 +107,10 @@
       {{#each authProviders as |authProvider|}}
         <tr>
           <td>{{authProvider.method.prettyName}}</td>
-          
+
           {{#if authProvider.account}}
             <td>{{authProvider.account.description}}</td>
-            <td> 
+            <td>
               {{#if authProvider.account.can_revoke}}
                 {{#conditional-loading-spinner condition=revoking size='small'}}
                   {{d-button action="revokeAccount" actionParam=authProvider.account title="user.associated_accounts.revoke" icon="times-circle" }}
@@ -126,7 +126,7 @@
               {{/if}}
               </td>
           {{/if}}
-         
+
         </tr>
       {{/each}}
       </table>
@@ -144,7 +144,7 @@
     <div class="controls">
       {{! we want the "huge" version even though we're downsizing it in CSS }}
       {{bound-avatar model "huge"}}
-      {{d-button action="showAvatarSelector" class="pad-left" icon="pencil"}}
+      {{d-button action="showAvatarSelector" actionParam=model class="pad-left" icon="pencil"}}
     </div>
   </div>
 {{/unless}}

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

@@ -39,17 +39,7 @@
       <div class='profile-image'></div>
       <div class='details'>
         <div class='primary'>
-          <div class='user-profile-avatar' {{action "showAvatarSelector"}} title="{{i18n 'user.change_avatar.label'}}">
-            {{bound-avatar model "huge"}}
-            {{#if model.primary_group_name}}
-              {{avatar-flair
-                flairURL=model.primary_group_flair_url
-                flairBgColor=model.primary_group_flair_bg_color
-                flairColor=model.primary_group_flair_color
-                groupName=model.primary_group_name}}
-            {{/if}}
-            {{plugin-outlet name="user-profile-avatar-flair" args=(hash model=model) tagName='div'}}
-          </div>
+          {{user-profile-avatar user=model}}
           <section class='controls'>
             <ul>
               {{#if model.can_send_private_message_to_user}}

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

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

config/locales/client.en.yml

@@ -785,7 +785,6 @@ 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?"
@@ -3996,7 +3995,7 @@ en:
           admin: "Admin"
           moderator: "Moderator"
           regular: "Regular User"
-      
+
       previews:
         topic_title: "Discussion topic"
         share_button: "Share"

test/javascripts/controllers/avatar-selector-test.js.es6

@@ -12,9 +12,11 @@ QUnit.test("avatarTemplate", function(assert) {
 
   avatarSelectorController.setProperties({
     selected: "system",
-    system_avatar_upload_id: 1,
-    gravatar_avatar_upload_id: 2,
-    custom_avatar_upload_id: 3
+    user: {
+      system_avatar_upload_id: 1,
+      gravatar_avatar_upload_id: 2,
+      custom_avatar_upload_id: 3
+    }
   });
 
   assert.equal(