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;
+
+    .header-text {
+      flex: 1 0 auto;
     }
 
-  .pack-info-wrapper {
+    .button-default {
-    margin-top: 1em;
+      flex: 0 0 auto;
+      padding: 0.33em;
+      font-size: 1rem;
+    }
   }
 
   .emoji-info-input {

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -1,48 +1,39 @@
 <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
-            class="button button-default btn"
-            type="button"
-            @click="importFromFS"
-          >
-            {{ $t('admin_dash.emoji.importFS') }}
-          </button>
-        </li>
-
-        <li class="btn-group setting-item">
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="$refs.remotePackPopover.showPopover"
-          >
-            {{ $t('admin_dash.emoji.remote_packs') }}
-
           <Popover
-              ref="remotePackPopover"
             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 #trigger>
+              <button
+                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>
@@ -61,24 +52,24 @@
               </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 #trigger>
+              <button
+                class="button button-default emoji-panel-additional-actions"
+                @click="$refs.additionalRemotePopover.showPopover"
+                :title="$t('admin_dash.emoji.import_pack')"
+              >
+                <FAIcon icon="folder-open" />
+                {{ $t('admin_dash.emoji.import_pack_short') }}
+              </button>
+            </template>
+
             <template #content>
               <div class="emoji-tab-popover-input">
                 <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
@@ -119,13 +110,13 @@
               </div>
             </template>
           </Popover>
-          </button>
+        </span>
-        </li>
+      </h3>
-
+      <ul class="setting-list">
-        <h3>{{ $t('admin_dash.emoji.emoji_packs') }}</h3>
-
         <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",