From 4c788e75f0835ea3a77452f8ed1082027605c2a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Sun, 25 Aug 2013 00:25:47 +0200
Subject: [PATCH] add a warning whenever the uploaded image is not a square

---
 .../templates/modal/avatar_selector.js.handlebars         | 3 +++
 .../discourse/views/modal/avatar_selector_view.js         | 8 +++++++-
 app/assets/stylesheets/application/modal.css.scss         | 5 +++--
 config/locales/client.en.yml                              | 1 +
 config/locales/client.fr.yml                              | 1 +
 5 files changed, 15 insertions(+), 3 deletions(-)

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 0b8d41026..8242668af 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}}
         <span>{{i18n upload_selector.uploading}} {{view.uploadProgress}}%</span>
       {{/if}}
+      {{#if view.imageIsNotASquare}}
+        <div class="warning">{{i18n user.change_avatar.image_is_not_a_square}}</div>
+      {{/if}}
     </div>
   </div>
 </div>
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 287a16973..d1d323adb 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 2e82fa849..8cca44b6b 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 18060c8c2..29352c683 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 6c64eb6bf..36b2bf305 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"