diff --git a/app/assets/javascripts/discourse/templates/modal/avatar_selector.js.handlebars b/app/assets/javascripts/discourse/templates/modal/avatar_selector.js.handlebars index 0b8d41026f7..8242668af1e 100644 --- a/app/assets/javascripts/discourse/templates/modal/avatar_selector.js.handlebars +++ b/app/assets/javascripts/discourse/templates/modal/avatar_selector.js.handlebars @@ -21,6 +21,9 @@ {{#if view.uploading}} {{i18n upload_selector.uploading}} {{view.uploadProgress}}% {{/if}} + {{#if view.imageIsNotASquare}} +
{{i18n user.change_avatar.image_is_not_a_square}}
+ {{/if}} diff --git a/app/assets/javascripts/discourse/views/modal/avatar_selector_view.js b/app/assets/javascripts/discourse/views/modal/avatar_selector_view.js index 287a1697369..d1d323adb53 100644 --- a/app/assets/javascripts/discourse/views/modal/avatar_selector_view.js +++ b/app/assets/javascripts/discourse/views/modal/avatar_selector_view.js @@ -15,6 +15,7 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({ useGravatar: Em.computed.not("controller.use_uploaded_avatar"), canSaveAvatarSelection: Em.computed.or("useGravatar", "controller.has_uploaded_avatar"), saveDisabled: Em.computed.not("canSaveAvatarSelection"), + imageIsNotASquare : false, didInsertElement: function() { var view = this; @@ -40,7 +41,10 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({ // when a file has been selected $upload.on("fileuploadadd", function (e, data) { - view.set("uploading", true); + view.setProperties({ + uploading: true, + imageIsNotASquare: false + }); }); // when there is a progression for the upload @@ -56,6 +60,8 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({ has_uploaded_avatar: true, use_uploaded_avatar: true }); + // display a warning whenever the image is not a square + view.set("imageIsNotASquare", data.result.width !== data.result.height); // in order to be as much responsive as possible, we're cheating a bit here // indeed, the server gives us back the url to the file we've just uploaded // often, this file is not a square, so we need to crop it properly diff --git a/app/assets/stylesheets/application/modal.css.scss b/app/assets/stylesheets/application/modal.css.scss index 2e82fa84961..8cca44b6b17 100644 --- a/app/assets/stylesheets/application/modal.css.scss +++ b/app/assets/stylesheets/application/modal.css.scss @@ -178,8 +178,9 @@ .archetype-option { margin-bottom: 20px; } - - + .warning { + color: lighten($red, 10%) !important; + } } .password-confirmation { display: none; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 18060c8c2fe..29352c6838c 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -230,6 +230,7 @@ en: uploaded_avatar: "Custom picture" uploaded_avatar_empty: "Add a custom picture" upload_title: "Upload your picture" + image_is_not_a_square: "Warning: we've cropped your image as it's not a square." email: title: "Email" diff --git a/config/locales/client.fr.yml b/config/locales/client.fr.yml index 6c64eb6bf9b..36b2bf30592 100644 --- a/config/locales/client.fr.yml +++ b/config/locales/client.fr.yml @@ -226,6 +226,7 @@ fr: uploading: "Image en cours d'envois..." gravatar: "Gravatar" uploaded_avatar: "Image envoyée" + image_is_not_a_square: "Attention : nous avons coupé l'image pour en faire un carré." email: title: "Email"