Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migrate upload avatar view to components

This commit is contained in:
Robin Ward 2016-11-14 16:00:12 -05:00
parent 9fea9e00c3
commit dca26b43e4
3 changed files with 10 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,9 +28,9 @@ export default Ember.Controller.extend(ModalFunctionality, {
},
actions: {
useUploadedAvatar() { this.set("selected", "uploaded"); },
useGravatar() { this.set("selected", "gravatar"); },
useSystem() { this.set("selected", "system"); },
uploadComplete() {
this.set("selected", "uploaded");
},
refreshGravatar() {
this.set("gravatarRefreshDisabled", true);

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

@ -1,18 +1,18 @@
<div class="modal-body">
{{#d-modal-body title="user.change_avatar.title" class="avatar-selector"}}
<div>
<div>
<input type="radio" id="system-avatar" name="avatar" value="system" {{action "useSystem"}}>
{{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>
</div>
<div>
<input type="radio" id="gravatar" name="avatar" value="gravatar" {{action "useGravatar"}}>
{{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>
{{d-button action="refreshGravatar" title="user.change_avatar.refresh_gravatar_title" disabled=gravatarRefreshDisabled icon="refresh"}}
</div>
{{#if allowAvatarUpload}}
<div>
<input type="radio" id="uploaded_avatar" name="avatar" value="uploaded" {{action "useUploadedAvatar"}}>
<label class="radio" for="uploaded_avatar">
{{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"}}
{{i18n 'user.change_avatar.uploaded_avatar'}}
@ -24,11 +24,11 @@
uploadedAvatarTemplate=custom_avatar_template
uploadedAvatarId=custom_avatar_upload_id
uploading=uploading
done="useUploadedAvatar"}}
done="uploadComplete"}}
</div>
{{/if}}
</div>
</div>
{{/d-modal-body}}
<div class="modal-footer">
{{d-button action="saveAvatarSelection" class="btn-primary" disabled=uploading label="save"}}

20
app/assets/javascripts/discourse/views/avatar-selector.js.es6
View File

@ -1,20 +0,0 @@
import { on, observes } from "ember-addons/ember-computed-decorators";
import ModalBodyView from "discourse/views/modal-body";
export default ModalBodyView.extend({
templateName: 'modal/avatar_selector',
classNames: ['avatar-selector'],
title: I18n.t('user.change_avatar.title'),
// *HACK* used to select the proper radio button, because {{action}} stops the default behavior
@on("didInsertElement")
@observes("controller.selected")
selectedChanged() {
Em.run.next(() => $('input:radio[name="avatar"]').val([this.get('controller.selected')]));
},
@on("didInsertElement")
_focusSelectedButton() {
Em.run.next(() => $('input:radio[value="' + this.get('controller.selected') + '"]').focus());
}
});