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"