- {{avatar model imageSize="large"}}
+ {{boundAvatar model imageSize="large"}}
+
{{#if Discourse.SiteSettings.allow_uploaded_avatars}}
@@ -53,7 +54,6 @@
{{else}}
{{{i18n user.avatar.instructions.gravatar}}} {{email}}
{{/if}}
- {{#linkTo "preferences.avatar" class="btn pad-left"}}{{i18n user.change}}{{/linkTo}}
{{else}}
{{{i18n user.avatar.instructions.gravatar}}} {{email}}
{{i18n user.change}}
diff --git a/app/assets/javascripts/discourse/views/modal/avatar_selector_view.js b/app/assets/javascripts/discourse/views/modal/avatar_selector_view.js
new file mode 100644
index 00000000000..dde8c1c0df0
--- /dev/null
+++ b/app/assets/javascripts/discourse/views/modal/avatar_selector_view.js
@@ -0,0 +1,89 @@
+/**
+ This view handles the avatar selection interface
+
+ @class AvatarSelectorView
+ @extends Discourse.ModalBodyView
+ @namespace Discourse
+ @module Discourse
+**/
+Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
+ templateName: 'modal/avatar_selector',
+ classNames: ['avatar-selector'],
+ title: I18n.t('user.change_avatar.title'),
+ uploading: false,
+ uploadProgress: 0,
+ uploadedAvatarDisabled: Em.computed.not("controller.has_uploaded_avatar"),
+
+ didInsertElement: function() {
+ var view = this;
+ var $upload = $("#avatar-input");
+
+ this._super();
+
+ // simulate a click on the hidden file input when clicking on our fake file input
+ $("#fake-avatar-input").on("click", function(e) {
+ // do *NOT* use the cached `$upload` variable, because fileupload is cloning & replacing the input
+ // cf. https://github.com/blueimp/jQuery-File-Upload/wiki/Frequently-Asked-Questions#why-is-the-file-input-field-cloned-and-replaced-after-each-selection
+ $("#avatar-input").click();
+ e.preventDefault();
+ });
+
+ // define the upload endpoint
+ $upload.fileupload({
+ url: Discourse.getURL("/users/" + this.get("controller.username") + "/preferences/avatar"),
+ dataType: "json",
+ timeout: 20000,
+ fileInput: $upload
+ });
+
+ // when a file has been selected
+ $upload.on("fileuploadadd", function (e, data) {
+ view.set("uploading", true);
+ });
+
+ // when there is a progression for the upload
+ $upload.on("fileuploadprogressall", function (e, data) {
+ var progress = parseInt(data.loaded / data.total * 100, 10);
+ view.set("uploadProgress", progress);
+ });
+
+ // when the upload is successful
+ $upload.on("fileuploaddone", function (e, data) {
+ // set some properties
+ view.get("controller").setProperties({
+ has_uploaded_avatar: true,
+ use_uploaded_avatar: true,
+ uploaded_avatar_template: data.result.url
+ });
+ });
+
+ // when there has been an error with the upload
+ $upload.on("fileuploadfail", function (e, data) {
+ Discourse.Utilities.displayErrorForUpload(data);
+ });
+
+ // when the upload is done
+ $upload.on("fileuploadalways", function (e, data) {
+ view.setProperties({ uploading: false, uploadProgress: 0 });
+ });
+ },
+
+ willDestroyElement: function() {
+ $("#fake-avatar-input").off("click");
+ $("#avatar-input").fileupload("destroy");
+ },
+
+ // *HACK* used to select the proper radio button
+ selectedChanged: function() {
+ var view = this;
+ Em.run.next(function() {
+ var value = view.get('controller.use_uploaded_avatar') ? 'uploaded_avatar' : 'gravatar';
+ view.$('input:radio[name="avatar"]').val([value]);
+ });
+ }.observes('controller.use_uploaded_avatar'),
+
+ uploadButtonText: function() {
+ return this.get("uploading") ? I18n.t("uploading") : I18n.t("upload");
+ }.property("uploading")
+
+});
diff --git a/app/assets/javascripts/discourse/views/user/preferences_avatar_view.js b/app/assets/javascripts/discourse/views/user/preferences_avatar_view.js
deleted file mode 100644
index 4eb5d6eff6c..00000000000
--- a/app/assets/javascripts/discourse/views/user/preferences_avatar_view.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- This view handles rendering of a user's avatar uploader
-
- @class PreferencesAvatarView
- @extends Discourse.View
- @namespace Discourse
- @module Discourse
-**/
-Discourse.PreferencesAvatarView = Discourse.View.extend({
- templateName: "user/avatar",
- classNames: ["user-preferences"],
-
- selectedChanged: function() {
- var view = this;
- Em.run.next(function() {
- var value = view.get("controller.use_uploaded_avatar") ? "uploaded_avatar" : "gravatar";
- view.$('input:radio[name="avatar"]').val([value]);
- });
- }.observes('controller.use_uploaded_avatar')
-
-});
diff --git a/app/assets/stylesheets/application/upload.scss b/app/assets/stylesheets/application/upload.css.scss
similarity index 100%
rename from app/assets/stylesheets/application/upload.scss
rename to app/assets/stylesheets/application/upload.css.scss
diff --git a/app/assets/stylesheets/application/user.css.scss b/app/assets/stylesheets/application/user.css.scss
index a79ea581470..2fadb72b905 100644
--- a/app/assets/stylesheets/application/user.css.scss
+++ b/app/assets/stylesheets/application/user.css.scss
@@ -323,3 +323,18 @@
width: 680px;
}
}
+
+.avatar-selector {
+ label {
+ display: inline-block;
+ margin-right: 10px;
+ }
+ #avatar-input {
+ width: 0;
+ height: 0;
+ overflow: hidden;
+ }
+ .avatar {
+ margin: 5px 10px 5px 0;
+ }
+}
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 4137f24b311..681b4e9fef3 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -376,7 +376,7 @@ class UsersController < ApplicationController
user.use_uploaded_avatar = params[:use_uploaded_avatar]
user.save!
- render json: { avatar_template: user.avatar_template }
+ render nothing: true
end
private
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 68a7acc2209..ccf8f58ea6b 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -218,12 +218,11 @@ en:
change_avatar:
title: "Change your avatar"
- upload_instructions: "Or you could upload an image"
- upload: "Upload a picture"
- uploading: "Uploading the picture..."
- gravatar: "Gravatar"
+ gravatar: "
Gravatar, based on"
gravatar_title: "Change your avatar on Gravatar's website"
- uploaded_avatar: "Uploaded picture"
+ uploaded_avatar: "Custom picture"
+ uploaded_avatar_empty: "Add a custom picture"
+ upload_title: "Upload your picture"
email:
title: "Email"