first pass of reorganizing emoji tab

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -10,6 +10,22 @@ import ModifiedIndicator from '../helpers/modified_indicator.vue'
 import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
 import { useInterfaceStore } from 'src/stores/interface'
 
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faArrowsRotate,
+  faFolderOpen,
+  faServer,
+  faDownload
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faArrowsRotate,
+  faFolderOpen,
+  faDownload,
+  faServer
+)
+
 const EmojiTab = {
   components: {
     TabSwitcher,
@@ -44,6 +60,7 @@ const EmojiTab = {
   },
 
   computed: {
+    ...SharedComputedObject(),
     pack () {
       return this.packName !== '' ? this.knownPacks[this.packName] : undefined
     },

src/components/settings_modal/admin_tabs/emoji_tab.scss

@@ -1,10 +1,18 @@
-.emoji-tab {
+.EmojiTab {
-  .btn-group .btn:not(:first-child) {
+  .toolbar {
-    margin-left: 0.5em;
+    display: flex;
-  }
+    flex-wrap: wrap;
+    align-items: end;
 
-  .pack-info-wrapper {
+    .header-text {
-    margin-top: 1em;
+      flex: 1 0 auto;
+    }
+
+    .button-default {
+      flex: 0 0 auto;
+      padding: 0.33em;
+      font-size: 1rem;
+    }
   }
 
   .emoji-info-input {

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -1,131 +1,122 @@
 <template>
   <div
-    class="emoji-tab"
+    class="EmojiTab"
     :label="$t('admin_dash.tabs.emoji')"
   >
     <div class="setting-item">
-      <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
+      <h3 class="toolbar">
+        <span class="header-text">
+          {{ $t('admin_dash.emoji.emoji_packs') }}
+        </span>
 
-      <ul class="setting-list">
+        <span class="header-buttons btn-group">
-        <h3>{{ $t('admin_dash.emoji.global_actions') }}</h3>
-
-        <li class="btn-group setting-item">
           <button
-            class="button button-default btn"
+            class="button button-default"
             type="button"
             @click="reloadEmoji"
+            :title="$t('admin_dash.emoji.reload')"
           >
-            {{ $t('admin_dash.emoji.reload') }}
+            <FAIcon icon="arrows-rotate" />
+            {{ $t('admin_dash.emoji.reload_short') }}
           </button>
-          <button
+          <Popover
-            class="button button-default btn"
+            popover-class="emoji-tab-edit-popover popover-default"
-            type="button"
+            trigger="click"
-            @click="importFromFS"
+            placement="bottom"
           >
-            {{ $t('admin_dash.emoji.importFS') }}
+            <template #trigger>
-          </button>
+              <button
-        </li>
+                class="button button-default"
+                type="button"
+                :title="$t('admin_dash.emoji.remote_packs')"
+              >
+                <FAIcon icon="download" />
+                {{ $t('admin_dash.emoji.remote_packs_short') }}
+              </button>
+            </template>
+            <template #content>
+              <div class="emoji-tab-popover-input">
+                <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
+                <input
+                  v-model="remotePackInstance"
+                  class="input"
+                  :placeholder="$t('admin_dash.emoji.remote_pack_instance')"
+                >
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                  @click="listRemotePacks"
+                >
+                  {{ $t('admin_dash.emoji.do_list') }}
+                </button>
+              </div>
+            </template>
+          </Popover>
 
-        <li class="btn-group setting-item">
+          <Popover
-          <button
+            ref="additionalRemotePopover"
-            class="button button-default btn"
+            popover-class="emoji-tab-edit-popover popover-default"
-            type="button"
+            trigger="click"
-            @click="$refs.remotePackPopover.showPopover"
+            placement="bottom"
           >
-            {{ $t('admin_dash.emoji.remote_packs') }}
+            <template #trigger>
-
+              <button
-            <Popover
+                class="button button-default emoji-panel-additional-actions"
-              ref="remotePackPopover"
+                @click="$refs.additionalRemotePopover.showPopover"
-              popover-class="emoji-tab-edit-popover popover-default"
+                :title="$t('admin_dash.emoji.import_pack')"
-              trigger="click"
+              >
-              placement="bottom"
+                <FAIcon icon="folder-open" />
-              bound-to-selector=".emoji-tab"
+                {{ $t('admin_dash.emoji.import_pack_short') }}
-              :bound-to="{ x: 'container' }"
+              </button>
-              :offset="{ y: 5 }"
+            </template>
-            >
-              <template #content>
-                <div class="emoji-tab-popover-input">
-                  <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
-                  <input
-                    v-model="remotePackInstance"
-                    class="input"
-                    :placeholder="$t('admin_dash.emoji.remote_pack_instance')"
-                  >
-                  <button
-                    class="button button-default btn emoji-tab-popover-button"
-                    type="button"
-                    @click="listRemotePacks"
-                  >
-                    {{ $t('admin_dash.emoji.do_list') }}
-                  </button>
-                </div>
-              </template>
-            </Popover>
-          </button>
-          <button
-            class="button button-default emoji-panel-additional-actions"
-            @click="$refs.additionalRemotePopover.showPopover"
-          >
-            <FAIcon
-              icon="chevron-down"
-            />
-
-            <Popover
-              ref="additionalRemotePopover"
-              popover-class="emoji-tab-edit-popover popover-default"
-              trigger="click"
-              placement="bottom"
-              bound-to-selector=".emoji-tab"
-              :bound-to="{ x: 'container' }"
-              :offset="{ y: 5 }"
-            >
-              <template #content>
-                <div class="emoji-tab-popover-input">
-                  <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
-                  <input
-                    v-model="newPackName"
-                    :placeholder="$t('admin_dash.emoji.new_pack_name')"
-                    class="input"
-                  >
-                  <h3>Import pack from URL</h3>
-                  <input
-                    v-model="remotePackURL"
-                    class="input"
-                    placeholder="Pack .zip URL"
-                  >
-                  <button
-                    class="button button-default btn emoji-tab-popover-button"
-                    type="button"
-                    :disabled="newPackName.trim() === '' || remotePackURL.trim() === ''"
-                    @click="downloadRemoteURLPack"
-                  >
-                    Import
-                  </button>
-                  <h3>Import pack from a file</h3>
-                  <input
-                    type="file"
-                    accept="application/zip"
-                    class="emoji-tab-popover-file input"
-                    @change="remotePackFile = $event.target.files"
-                  >
-                  <button
-                    class="button button-default btn emoji-tab-popover-button"
-                    type="button"
-                    :disabled="newPackName.trim() === '' || remotePackFile === null || remotePackFile.length === 0"
-                    @click="downloadRemoteFilePack"
-                  >
-                    Import
-                  </button>
-                </div>
-              </template>
-            </Popover>
-          </button>
-        </li>
-
-        <h3>{{ $t('admin_dash.emoji.emoji_packs') }}</h3>
 
+            <template #content>
+              <div class="emoji-tab-popover-input">
+                <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
+                <input
+                  v-model="newPackName"
+                  :placeholder="$t('admin_dash.emoji.new_pack_name')"
+                  class="input"
+                >
+                <h3>Import pack from URL</h3>
+                <input
+                  v-model="remotePackURL"
+                  class="input"
+                  placeholder="Pack .zip URL"
+                >
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                  :disabled="newPackName.trim() === '' || remotePackURL.trim() === ''"
+                  @click="downloadRemoteURLPack"
+                >
+                  Import
+                </button>
+                <h3>Import pack from a file</h3>
+                <input
+                  type="file"
+                  accept="application/zip"
+                  class="emoji-tab-popover-file input"
+                  @change="remotePackFile = $event.target.files"
+                >
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                  :disabled="newPackName.trim() === '' || remotePackFile === null || remotePackFile.length === 0"
+                  @click="downloadRemoteFilePack"
+                >
+                  Import
+                </button>
+              </div>
+            </template>
+          </Popover>
+        </span>
+      </h3>
+      <ul class="setting-list">
         <li>
-          <h4>{{ $t('admin_dash.emoji.edit_pack') }}</h4>
+          <h4>
+            {{ $t('admin_dash.emoji.edit_pack') }}
+          </h4>
 
           <Select
             v-model="packName"
@@ -255,8 +246,6 @@
                 :changed="metaEdited('share-files')"
                 message-key="admin_dash.emoji.metadata_changed"
               />
-            </li>
-            <li class="btn-group">
               <button
                 v-if="pack.remote === undefined"
                 class="button button-default btn"
@@ -408,6 +397,20 @@
           </div>
         </ul>
       </div>
+      <h3>{{ $t('admin_dash.emoji.advanced') }}</h3>
+      <li
+        class="toolbar"
+      >
+        <button
+
+          class="button button-default btn"
+          type="button"
+          @click="importFromFS"
+        >
+          <FAIcon icon="server" />
+          {{ $t('admin_dash.emoji.importFS') }}
+        </button>
+      </li>
     </div>
   </div>
 </template>

src/i18n/en.json

@@ -1290,7 +1290,11 @@
     "emoji": {
       "global_actions": "Global actions",
       "reload": "Reload emoji",
+      "reload_short": "Refresh",
+      "advanced": "Advanced",
       "importFS": "Import emoji from filesystem",
+      "import_pack": "Upload emoji pack",
+      "import_pack_short": "Import",
       "error": "Error: {0}",
       "create_pack": "Create pack",
       "delete_pack": "Delete pack",
@@ -1298,6 +1302,7 @@
       "create": "Create",
       "emoji_packs": "Emoji packs",
       "remote_packs": "Remote packs",
+      "remote_packs_short": "Remote",
       "do_list": "List",
       "remote_pack_instance": "Remote pack instance",
       "emoji_pack": "Emoji pack",