From 31ffa5f64e9f551d224c0f4166144e923f78febf Mon Sep 17 00:00:00 2001 From: Guo Xiang Tan Date: Wed, 20 Feb 2019 13:55:55 +0800 Subject: [PATCH] UX: Allow users to see filename in image-uploader component. (#7022) https://meta.discourse.org/t/downsides-of-the-new-logo-ui-in-site-settings/102247/23?u=tgxworld --- .../components/image-uploader.js.es6 | 16 +++++++ .../templates/components/image-uploader.hbs | 14 ++++++ .../stylesheets/common/base/upload.scss | 47 +++++++++++++++++++ app/assets/stylesheets/desktop/user.scss | 3 -- config/locales/client.en.yml | 1 + .../components/image-uploader-test.js.es6 | 22 ++++++++- 6 files changed, 99 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/discourse/components/image-uploader.js.es6 b/app/assets/javascripts/discourse/components/image-uploader.js.es6 index db580fb71fb..9ebb3f92906 100644 --- a/app/assets/javascripts/discourse/components/image-uploader.js.es6 +++ b/app/assets/javascripts/discourse/components/image-uploader.js.es6 @@ -3,6 +3,7 @@ import UploadMixin from "discourse/mixins/upload"; export default Ember.Component.extend(UploadMixin, { classNames: ["image-uploader"], + infoHidden: true, @computed("imageUrl") backgroundStyle(imageUrl) { @@ -13,6 +14,17 @@ export default Ember.Component.extend(UploadMixin, { return `background-image: url(${imageUrl})`.htmlSafe(); }, + @computed("imageUrl") + imageBaseName(imageUrl) { + if (Ember.isEmpty(imageUrl)) return; + return imageUrl.split("/").slice(-1)[0]; + }, + + @computed("infoHidden", "imageBaseName") + showInfo(infoHidden, imageBaseName) { + return !infoHidden && imageBaseName; + }, + @computed("backgroundStyle") hasBackgroundStyle(backgroundStyle) { return !Ember.isEmpty(backgroundStyle.string); @@ -31,6 +43,10 @@ export default Ember.Component.extend(UploadMixin, { }, actions: { + toggleInfo() { + this.toggleProperty("infoHidden"); + }, + trash() { this.setProperties({ imageUrl: null, imageId: null }); diff --git a/app/assets/javascripts/discourse/templates/components/image-uploader.hbs b/app/assets/javascripts/discourse/templates/components/image-uploader.hbs index 13db8aa1001..0014d71a4ee 100644 --- a/app/assets/javascripts/discourse/templates/components/image-uploader.hbs +++ b/app/assets/javascripts/discourse/templates/components/image-uploader.hbs @@ -4,9 +4,23 @@ {{d-icon "far-image"}} + {{#if hasBackgroundStyle}} {{/if}} + + {{#if imageBaseName}} + {{d-button icon="info-circle" class="btn image-uploader-info-btn no-text" + title="upload_selector.filename" + action=(action "toggleInfo")}} + {{/if}} + {{i18n 'upload_selector.uploading'}} {{uploadProgress}}% + + {{#if showInfo}} +
+ {{imageBaseName}} +
+ {{/if}} diff --git a/app/assets/stylesheets/common/base/upload.scss b/app/assets/stylesheets/common/base/upload.scss index ddaf0d1d4ed..f7f3d8c64c6 100644 --- a/app/assets/stylesheets/common/base/upload.scss +++ b/app/assets/stylesheets/common/base/upload.scss @@ -1,6 +1,53 @@ .uploaded-image-preview { background: $primary center; background-size: cover; + position: relative; + + .image-uploader-info { + position: absolute; + bottom: 0; + width: 100%; + background: $primary; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + opacity: 0.6; + + a { + color: $secondary; + + &:hover { + text-decoration: underline; + } + } + } + + .image-upload-controls { + display: flex; + + .btn { + margin-right: 5px; + } + + .image-uploader-info-btn { + background: none; + margin-right: 0; + margin-left: auto; + + .d-icon { + color: $primary-low; + } + + &:hover { + background: none; + + .d-icon { + color: $primary; + } + } + } + } } .image-uploader.no-repeat { diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index 3ef8bc3ee6f..f871661a235 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -332,8 +332,5 @@ .image-upload-controls { display: flex; align-items: center; - .btn { - margin-right: 5px; - } } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index dcd490ad2c7..ee951efbbe7 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1569,6 +1569,7 @@ en: select_file: "Select File" image_link: "link your image will point to" default_image_alt_text: image + filename: "Filename" search: sort_by: "Sort by" diff --git a/test/javascripts/components/image-uploader-test.js.es6 b/test/javascripts/components/image-uploader-test.js.es6 index da30f733b5b..a2003094a89 100644 --- a/test/javascripts/components/image-uploader-test.js.es6 +++ b/test/javascripts/components/image-uploader-test.js.es6 @@ -4,7 +4,7 @@ moduleForComponent("image-uploader", { integration: true }); componentTest("with image", { template: "{{image-uploader imageUrl='/some/upload.png'}}", - test(assert) { + async test(assert) { assert.equal( this.$(".d-icon-far-image").length, 1, @@ -16,6 +16,20 @@ componentTest("with image", { 1, "it displays the trash icon" ); + + assert.equal( + this.$(".image-uploader-info").length, + 0, + "it does not display the image info" + ); + + await click(".image-uploader-info-btn"); + + assert.equal( + this.$(".image-uploader-info").length, + 1, + "it displays the image info" + ); } }); @@ -34,5 +48,11 @@ componentTest("without image", { 0, "it does not display trash icon" ); + + assert.equal( + this.$(".image-uploader-info-btn").length, + 0, + "it does not display the image info button toggle" + ); } });