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.

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

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";
+    }
+  },
 });

app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs

@@ -34,21 +34,13 @@
   </div>
   <div class="control-group">
     <div class="input">
-      <label class="btn btn-default btn-primary {{if addDisabled "disabled"}}">
-        {{#if uploading}}
-          {{d-icon "spinner" class="loading-icon"}}
-          <span>{{i18n "admin.emoji.uploading"}} {{uploadProgress}}%</span>
-        {{else}}
-          {{d-icon "plus"}}
-          <span>{{i18n "admin.emoji.add"}}</span>
-        {{/if}}
-        <input
-          class="hidden-upload-field"
-          disabled={{addDisabled}}
-          type="file"
-          multiple="true"
-          accept=".png,.gif">
-      </label>
+      <input
+        class="hidden-upload-field"
+        disabled={{uploading}}
+        type="file"
+        multiple="true"
+        accept=".png,.gif">
+      {{d-button class="btn-primary" computedLabel=buttonLabel icon="plus" action=(action "chooseFiles") disabled=uploading}}
     </div>
   </div>
 </div>

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;
+  }
 }

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"