From 338740c3855fc9c8e597956bbeb058edb8caa09a Mon Sep 17 00:00:00 2001 From: Andrei Prigorshnev Date: Tue, 4 May 2021 15:16:00 +0400 Subject: [PATCH] UX: hide the list of file extensions on the upload dialog (#12836) --- .../app/components/hidden-details.js | 9 +++++ .../app/controllers/upload-selector.js | 37 ++++++++++--------- .../templates/components/hidden-details.hbs | 9 +++++ .../app/templates/modal/upload-selector.hbs | 6 +++ .../components/hidden-details-test.js | 31 ++++++++++++++++ app/assets/stylesheets/desktop/upload.scss | 3 ++ config/locales/client.en.yml | 5 ++- 7 files changed, 80 insertions(+), 20 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/hidden-details.js create mode 100644 app/assets/javascripts/discourse/app/templates/components/hidden-details.hbs create mode 100644 app/assets/javascripts/discourse/tests/integration/components/hidden-details-test.js diff --git a/app/assets/javascripts/discourse/app/components/hidden-details.js b/app/assets/javascripts/discourse/app/components/hidden-details.js new file mode 100644 index 00000000000..a06ed1ee91c --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/hidden-details.js @@ -0,0 +1,9 @@ +import Component from "@ember/component"; +import { action } from "@ember/object"; + +export default Component.extend({ + @action + expand() { + this.set("expanded", true); + }, +}); diff --git a/app/assets/javascripts/discourse/app/controllers/upload-selector.js b/app/assets/javascripts/discourse/app/controllers/upload-selector.js index 92672343a7a..6ccf7f4fbbb 100644 --- a/app/assets/javascripts/discourse/app/controllers/upload-selector.js +++ b/app/assets/javascripts/discourse/app/controllers/upload-selector.js @@ -1,7 +1,6 @@ import { allowsAttachments, authorizedExtensions, - authorizesAllExtensions, uploadIcon, } from "discourse/lib/uploads"; import Controller from "@ember/controller"; @@ -16,11 +15,9 @@ export default Controller.extend(ModalFunctionality, { remote: equal("selection", "remote"), selection: "local", - uploadTranslate(key) { - if (allowsAttachments(this.currentUser.staff, this.siteSettings)) { - key += "_with_attachments"; - } - return `upload_selector.${key}`; + @discourseComputed() + allowAdditionalFormats() { + return allowsAttachments(this.currentUser.staff, this.siteSettings); }, @discourseComputed() @@ -28,22 +25,26 @@ export default Controller.extend(ModalFunctionality, { return uploadIcon(this.currentUser.staff, this.siteSettings); }, - @discourseComputed() - title() { - return this.uploadTranslate("title"); + @discourseComputed("allowAdditionalFormats") + title(allowAdditionalFormats) { + const suffix = allowAdditionalFormats ? "_with_attachments" : ""; + return `upload_selector.title${suffix}`; }, - @discourseComputed("selection") - tip(selection) { - const authorized_extensions = authorizesAllExtensions( + @discourseComputed("selection", "allowAdditionalFormats") + tip(selection, allowAdditionalFormats) { + const suffix = allowAdditionalFormats ? "_with_attachments" : ""; + return I18n.t(`upload_selector.${selection}_tip${suffix}`); + }, + + @discourseComputed() + supportedFormats() { + const extensions = authorizedExtensions( this.currentUser.staff, this.siteSettings - ) - ? "" - : `(${authorizedExtensions(this.currentUser.staff, this.siteSettings)})`; - return I18n.t(this.uploadTranslate(`${selection}_tip`), { - authorized_extensions, - }); + ); + + return `(${extensions})`; }, actions: { diff --git a/app/assets/javascripts/discourse/app/templates/components/hidden-details.hbs b/app/assets/javascripts/discourse/app/templates/components/hidden-details.hbs new file mode 100644 index 00000000000..b7dc645453a --- /dev/null +++ b/app/assets/javascripts/discourse/app/templates/components/hidden-details.hbs @@ -0,0 +1,9 @@ +{{#unless expanded}} + {{d-button + action=(action "expand") + class="btn-link" + label=label}} +{{/unless}} +{{#if expanded}} + {{details}} +{{/if}} diff --git a/app/assets/javascripts/discourse/app/templates/modal/upload-selector.hbs b/app/assets/javascripts/discourse/app/templates/modal/upload-selector.hbs index 51dbfba2f2e..4e90b908837 100644 --- a/app/assets/javascripts/discourse/app/templates/modal/upload-selector.hbs +++ b/app/assets/javascripts/discourse/app/templates/modal/upload-selector.hbs @@ -6,6 +6,9 @@

{{tip}} + {{#if allowAdditionalFormats}} + {{hidden-details label="upload_selector.supported_formats" details=supportedFormats}} + {{/if}}
{{/if}} @@ -16,6 +19,9 @@
{{input value=imageUrl placeholder="http://example.com/image.png"}} {{tip}} + {{#if allowAdditionalFormats}} + {{hidden-details label="upload_selector.supported_formats" details=supportedFormats}} + {{/if}}
{{/if}} diff --git a/app/assets/javascripts/discourse/tests/integration/components/hidden-details-test.js b/app/assets/javascripts/discourse/tests/integration/components/hidden-details-test.js new file mode 100644 index 00000000000..59e866ad548 --- /dev/null +++ b/app/assets/javascripts/discourse/tests/integration/components/hidden-details-test.js @@ -0,0 +1,31 @@ +import componentTest, { + setupRenderingTest, +} from "discourse/tests/helpers/component-test"; +import { discourseModule, query } from "discourse/tests/helpers/qunit-helpers"; +import hbs from "htmlbars-inline-precompile"; +import I18n from "I18n"; + +discourseModule("Integration | Component | hidden-details", function (hooks) { + setupRenderingTest(hooks); + + componentTest("Shows a link and turns link into details on click", { + template: hbs`{{hidden-details label=label details=details}}`, + + beforeEach() { + this.set("label", "label"); + this.set("details", "details"); + }, + + async test(assert) { + assert.ok(exists(".btn-link")); + assert.ok(query(".btn-link span").innerText === I18n.t("label")); + assert.notOk(exists(".description")); + + await click(".btn-link"); + + assert.notOk(exists(".btn-link")); + assert.ok(exists(".description")); + assert.ok(query(".description").innerText === "details"); + }, + }); +}); diff --git a/app/assets/stylesheets/desktop/upload.scss b/app/assets/stylesheets/desktop/upload.scss index 6e13c6b8897..5b7b349b429 100644 --- a/app/assets/stylesheets/desktop/upload.scss +++ b/app/assets/stylesheets/desktop/upload.scss @@ -3,6 +3,9 @@ display: inline-block; padding-left: 10px; } + &.modal-body { + width: 460px; + } .radios { min-height: 60px; display: flex; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 30febe1340e..bab33ef056a 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -2209,14 +2209,15 @@ en: from_my_computer: "From my device" from_the_web: "From the web" remote_tip: "link to image" - remote_tip_with_attachments: "link to image or file %{authorized_extensions}" + remote_tip_with_attachments: "link to image or file" local_tip: "select images from your device" - local_tip_with_attachments: "select images or files from your device %{authorized_extensions}" + local_tip_with_attachments: "select images or files from your device" hint: "(you can also drag & drop into the editor to upload)" hint_for_supported_browsers: "you can also drag and drop or paste images into the editor" uploading: "Uploading" select_file: "Select File" default_image_alt_text: image + supported_formats: "supported formats" search: sort_by: "Sort by"