From 35343e7f913b991076ab1d9b37a1bcb5ce6ac0af Mon Sep 17 00:00:00 2001 From: Martin Brennan Date: Mon, 17 Jan 2022 11:48:49 +1000 Subject: [PATCH] FIX: Improve emoji upload UI (#15603) This commit adds a hover effect for drag and drop in the admin emoji uploader. It also changes the "Add New Emoji" button to open the file selector; previously it was useless because it was disabled unless a name was entered (which is not even a requirement for the emoji) and also it didn't actually do anything on click even if it wasn't disabled. Now we have a way of adding files without having to drag and drop them, which is nice. Also in this PR, there was no indication before that the upload was complete apart from the button becoming enabled again. This commit adds the highlight class to the emoji list and removes it once the highlight fade animation is done, like we do for new posts. --- .../admin/addon/controllers/admin-emojis.js | 14 +++++++++ .../app/components/emoji-uploader.js | 29 +++++++++++++++---- .../templates/components/emoji-uploader.hbs | 22 +++++--------- .../common/admin/admin_emojis.scss | 11 +++++++ config/locales/client.en.yml | 3 +- 5 files changed, 58 insertions(+), 21 deletions(-) diff --git a/app/assets/javascripts/admin/addon/controllers/admin-emojis.js b/app/assets/javascripts/admin/addon/controllers/admin-emojis.js index 94e284c0c9c..7ab8590163e 100644 --- a/app/assets/javascripts/admin/addon/controllers/admin-emojis.js +++ b/app/assets/javascripts/admin/addon/controllers/admin-emojis.js @@ -44,6 +44,19 @@ export default Controller.extend({ }, }), + _highlightEmojiList() { + const customEmojiListEl = document.querySelector("#custom_emoji"); + if ( + customEmojiListEl && + !customEmojiListEl.classList.contains("highlighted") + ) { + customEmojiListEl.classList.add("highlighted"); + customEmojiListEl.addEventListener("animationend", () => { + customEmojiListEl.classList.remove("highlighted"); + }); + } + }, + @action filterGroups(value) { this.set("filter", value); @@ -54,6 +67,7 @@ export default Controller.extend({ emoji.url += "?t=" + new Date().getTime(); emoji.group = group; this.model.pushObject(EmberObject.create(emoji)); + this._highlightEmojiList(); }, @action diff --git a/app/assets/javascripts/discourse/app/components/emoji-uploader.js b/app/assets/javascripts/discourse/app/components/emoji-uploader.js index 2ee1448cee4..b5756953ef0 100644 --- a/app/assets/javascripts/discourse/app/components/emoji-uploader.js +++ b/app/assets/javascripts/discourse/app/components/emoji-uploader.js @@ -1,4 +1,5 @@ import Component from "@ember/component"; +import I18n from "I18n"; import { isEmpty } from "@ember/utils"; import UppyUploadMixin from "discourse/mixins/uppy-upload"; import { action } from "@ember/object"; @@ -23,11 +24,6 @@ export default Component.extend(UppyUploadMixin, { this.set("newEmojiGroups", this.emojiGroups); }, - @discourseComputed("hasName", "uploading") - addDisabled() { - return !this.hasName || this.uploading; - }, - @action createEmojiGroup(group) { let newEmojiGroups = this.newEmojiGroups; @@ -65,4 +61,27 @@ export default Component.extend(UppyUploadMixin, { this.done(upload, this.group); this.set("name", null); }, + + @action + chooseFiles() { + this.fileInputEl.click(); + }, + + @discourseComputed("uploading", "uploadProgress") + buttonLabel(uploading, uploadProgress) { + if (uploading) { + return `${I18n.t("admin.emoji.uploading")} ${uploadProgress}%`; + } else { + return I18n.t("admin.emoji.add"); + } + }, + + @discourseComputed("uploading") + buttonIcon(uploading) { + if (uploading) { + return "spinner"; + } else { + return "plus"; + } + }, }); diff --git a/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs b/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs index 5f52e1ffb82..32c118bc3f7 100644 --- a/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs @@ -34,21 +34,13 @@
- + + {{d-button class="btn-primary" computedLabel=buttonLabel icon="plus" action=(action "chooseFiles") disabled=uploading}}
diff --git a/app/assets/stylesheets/common/admin/admin_emojis.scss b/app/assets/stylesheets/common/admin/admin_emojis.scss index 9eeb1939a9f..adfc27f2955 100644 --- a/app/assets/stylesheets/common/admin/admin_emojis.scss +++ b/app/assets/stylesheets/common/admin/admin_emojis.scss @@ -6,4 +6,15 @@ #custom_emoji td.action { text-align: right; } + #emoji-uploader { + padding: 10px; + transition: box-shadow ease-in-out 0.25s; + } + .uppy-is-drag-over { + box-shadow: 0 0px 52px 0 #ffffff, 0px 7px 33px 0 var(--tertiary-low); + } + #custom_emoji.highlighted { + background: var(--tertiary-very-low); + animation: background-fade-highlight 2.5s ease-out; + } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 12fb9cd1603..2547c435d29 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -5481,8 +5481,9 @@ en: emoji: title: "Emoji" - help: "Add new emoji that will be available to everyone. Drag and drop multiple files at once without entering a name to create emojis using their file names." + help: "Add new emoji that will be available to everyone. Drag and drop multiple files at once without entering a name to create emojis using their file names. The selected group will be used for all files that are added at the same time. You can also click 'Add New Emoji' to open the file picker." add: "Add New Emoji" + choose_files: "Choose Files" uploading: "Uploading..." name: "Name" group: "Group"