From ae7272464841fb8d64e51da38800182eb994215a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Thu, 10 Oct 2013 17:51:48 +0200
Subject: [PATCH] add educational hint in the upload selector dialog
---
.../templates/modal/upload_selector.js.handlebars | 5 +++++
.../discourse/views/modal/upload_selector_view.js | 10 ++++++++++
app/assets/stylesheets/desktop/upload.scss | 6 +++++-
config/locales/client.en.yml | 2 ++
4 files changed, 22 insertions(+), 1 deletion(-)
diff --git a/app/assets/javascripts/discourse/templates/modal/upload_selector.js.handlebars b/app/assets/javascripts/discourse/templates/modal/upload_selector.js.handlebars
index eb5576ad6..93f8f6bfb 100644
--- a/app/assets/javascripts/discourse/templates/modal/upload_selector.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/modal/upload_selector.js.handlebars
@@ -19,6 +19,11 @@
</div>
{{/if}}
</div>
+ <div class="radios">
+ <div class="inputs">
+ <p class="hint">{{unbound view.hint}}</p>
+ </div>
+ </div>
</div>
<div class="modal-footer">
diff --git a/app/assets/javascripts/discourse/views/modal/upload_selector_view.js b/app/assets/javascripts/discourse/views/modal/upload_selector_view.js
index 2cba30cd5..37a39a093 100644
--- a/app/assets/javascripts/discourse/views/modal/upload_selector_view.js
+++ b/app/assets/javascripts/discourse/views/modal/upload_selector_view.js
@@ -19,6 +19,16 @@ Discourse.UploadSelectorView = Discourse.ModalBodyView.extend({
return Discourse.UploadSelectorController.translate(source + "_tip", opts);
}.property("controller.local"),
+ hint: function() {
+ // chrome is the only browser that support copy & paste of images.
+ return I18n.t("upload_selector.hint" + (this.get("isChrome") ? "_for_chrome" : ""));
+ }.property(),
+
+ isChrome: function() {
+ // cf. http://stackoverflow.com/a/9851769/11983
+ return !!window.chrome && !(!!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0);
+ }.property(),
+
didInsertElement: function() {
this._super();
this.selectedChanged();
diff --git a/app/assets/stylesheets/desktop/upload.scss b/app/assets/stylesheets/desktop/upload.scss
index e045142fd..1251d1154 100644
--- a/app/assets/stylesheets/desktop/upload.scss
+++ b/app/assets/stylesheets/desktop/upload.scss
@@ -30,9 +30,13 @@
font-size: 14px;
line-height: 18px;
}
- .description {
+ .description, .hint {
color: #9a9ea0;
}
+ .hint {
+ font-style: italic;
+ margin: 5px 0 0 0;
+ }
}
}
}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 6b6cd7d77..73cadd019 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -526,6 +526,8 @@ en:
remote_tip_with_attachments: "enter address of an image or a file in the form http://example.com/file.ext (allowed extensions: {{authorized_extensions}})."
local_tip: "click to select an image from your device"
local_tip_with_attachments: "click to select an image or a file from your device (allowed extensions: {{authorized_extensions}})"
+ hint: "(you can also drag & drop into the editor to upload them)"
+ hint_for_chrome: "(you can also drag and drop or paste images into the editor to upload them)"
uploading: "Uploading"
search: