IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-16 18:24:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

REFACTOR: new 'show-avatar-select' app event to trigger the avatar selector modal

Browse Source
This commit is contained in:
Régis Hanol 2018-07-25 12:38:15 +02:00
parent 84d14fd8a0
commit 637850d867
12 changed files with 99 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);
}
}
});

31
app/assets/javascripts/discourse/initializers/avatar-select.js.es6 Normal file
View File

@ -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)
);
}
});
}
};

11
app/assets/javascripts/discourse/models/user.js.es6
View File

@ -510,15 +510,10 @@ 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 } }
);
},
@ -526,7 +521,7 @@ const User = RestModel.extend({
return ajax(
userPath(`${this.get("username_lower")}/preferences/avatar/select`),
{ type: "PUT", data: { url: avatarUrl } }
).then(result => this.setProperties(result));
);
},
isAllowedToUploadAFile(type) {

66
app/assets/javascripts/discourse/routes/application.js.es6
View File

@ -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);
}
},

12
app/assets/javascripts/discourse/routes/preferences-account.js.es6
View File

@ -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);
}
}
});

11
app/assets/javascripts/discourse/templates/components/user-profile-avatar.hbs Normal file
View File

@ -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>

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

@ -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>

8
app/assets/javascripts/discourse/templates/preferences/account.hbs
View File

@ -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}}

12
app/assets/javascripts/discourse/templates/user.hbs
View File

@ -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}}

1
app/assets/stylesheets/common/base/user.scss
View File

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

3
config/locales/client.en.yml
View File

@ -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"

8
test/javascripts/controllers/avatar-selector-test.js.es6
View File

@ -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(