codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-24 08:09:13 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

add a warning whenever the uploaded image is not a square

Browse source
This commit is contained in:
Régis Hanol 2013-08-25 00:25:47 +02:00
parent 3b9e62e6b9
commit 4c788e75f0
5 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/javascripts/discourse/templates/modal/avatar_selector.js.handlebars
View file

@ -21,6 +21,9 @@
{{#if view.uploading}} {{#if view.uploading}}
<span>{{i18n upload_selector.uploading}} {{view.uploadProgress}}%</span> <span>{{i18n upload_selector.uploading}} {{view.uploadProgress}}%</span>
{{/if}} {{/if}}
{{#if view.imageIsNotASquare}}
<div class="warning">{{i18n user.change_avatar.image_is_not_a_square}}</div>
{{/if}}
</div> </div>
</div> </div>
</div> </div>

8
app/assets/javascripts/discourse/views/modal/avatar_selector_view.js
View file

@ -15,6 +15,7 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
useGravatar: Em.computed.not("controller.use_uploaded_avatar"), useGravatar: Em.computed.not("controller.use_uploaded_avatar"),
canSaveAvatarSelection: Em.computed.or("useGravatar", "controller.has_uploaded_avatar"), canSaveAvatarSelection: Em.computed.or("useGravatar", "controller.has_uploaded_avatar"),
saveDisabled: Em.computed.not("canSaveAvatarSelection"), saveDisabled: Em.computed.not("canSaveAvatarSelection"),
imageIsNotASquare : false,
didInsertElement: function() { didInsertElement: function() {
var view = this; var view = this;
@ -40,7 +41,10 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
// when a file has been selected // when a file has been selected
$upload.on("fileuploadadd", function (e, data) { $upload.on("fileuploadadd", function (e, data) {
view.set("uploading", true); view.setProperties({
uploading: true,
imageIsNotASquare: false
});
}); });
// when there is a progression for the upload // when there is a progression for the upload
@ -56,6 +60,8 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
has_uploaded_avatar: true, has_uploaded_avatar: true,
use_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 // 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 // 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 // often, this file is not a square, so we need to crop it properly

5
app/assets/stylesheets/application/modal.css.scss
View file

@ -178,8 +178,9 @@
.archetype-option { .archetype-option {
margin-bottom: 20px; margin-bottom: 20px;
} }
.warning {
color: lighten($red, 10%) !important;
}
} }
.password-confirmation { .password-confirmation {
display: none; display: none;

1
config/locales/client.en.yml
View file

@ -230,6 +230,7 @@ en:
uploaded_avatar: "Custom picture" uploaded_avatar: "Custom picture"
uploaded_avatar_empty: "Add a custom picture" uploaded_avatar_empty: "Add a custom picture"
upload_title: "Upload your picture" upload_title: "Upload your picture"
image_is_not_a_square: "Warning: we've cropped your image as it's not a square."
email: email:
title: "Email" title: "Email"

1
config/locales/client.fr.yml
View file

@ -226,6 +226,7 @@ fr:
uploading: "Image en cours d'envois..." uploading: "Image en cours d'envois..."
gravatar: "Gravatar" gravatar: "Gravatar"
uploaded_avatar: "Image envoyée" uploaded_avatar: "Image envoyée"
image_is_not_a_square: "Attention : nous avons coupé l'image pour en faire un carré."
email: email:
title: "Email" title: "Email"