Rearrange stuff in accordance with comments on the MR, mostly

Also, add support for a custom message to the modified indicator

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -58,6 +58,11 @@ const EmojiTab = {
       }
 
       return result
+    },
+    newEmojiUploadPreview () {
+      if (this.newEmojiUpload.upload.length > 0) {
+        return URL.createObjectURL(this.newEmojiUpload.upload[0])
+      }
     }
   },
 
@@ -135,7 +140,11 @@ const EmojiTab = {
     },
 
     metaEdited (prop) {
-      return this.pack && this.packMeta[prop] !== this.pack.pack[prop]
+      if (!this.pack) return
+
+      const def = this.pack.pack[prop] || ''
+      const edited = this.packMeta[prop] || ''
+      return edited !== def
     },
     savePackMetadata () {
       this.$store.state.api.backendInteractor.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta }).then(
@@ -153,6 +162,11 @@ const EmojiTab = {
       })
     },
 
+    revertEmoji (shortcode) {
+      // Delete current changes and overwrite them with defaults. If the window is closed, they'll get cleared anyway
+      delete this.editedParts[this.packName][shortcode]
+      this.editEmoji(shortcode)
+    },
     editEmoji (shortcode) {
       if (this.editedParts[this.packName] === undefined) { this.editedParts[this.packName] = {} }
 
@@ -179,14 +193,22 @@ const EmojiTab = {
         this.sortPackFiles(this.packName)
       })
     },
-    saveEditedEmoji (shortcode) {
+    closedEditedEmoji (shortcode) {
       const edited = this.editedParts[this.packName][shortcode]
 
       if (edited.shortcode === shortcode && edited.file === this.pack.files[shortcode]) {
         delete this.editedParts[this.packName][shortcode]
-        return
+
+        return true
       }
 
+      return false
+    },
+    saveEditedEmoji (shortcode) {
+      if (this.closedEditedEmoji(shortcode)) return
+
+      const edited = this.editedParts[this.packName][shortcode]
+
       this.$store.state.api.backendInteractor.updateEmojiFile(
         { packName: this.packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false }
       ).then(resp => {

src/components/settings_modal/admin_tabs/emoji_tab.scss

@@ -1,7 +1,7 @@
 @import "src/variables";
 
 .emoji-tab {
-  .btn-group .btn {
+  .btn-group .btn:not(:first-child) {
     margin-left: 0.5em;
   }
 
@@ -35,21 +35,34 @@
   }
 }
 
+.emoji-tab-popover-button:not(:first-child) {
+  margin-left: 0.5em;
+}
+
 .emoji-tab-edit-popover {
   padding-left: 0.5em;
   padding-right: 0.5em;
   padding-bottom: 0.5em;
-}
 
-.emoji-tab-popover-button {
-  margin-left: 0.5em;
+  .emoji {
+    width: 32px;
+    height: 32px;
+  }
 }
 
 .emoji-tab-popover-input {
-  width: 20em;
   margin-bottom: 0.5em;
 
-  &:not(:first-child) {
-    margin-left: 0.5em;
+  label {
+    display: block;
+    margin-bottom: 0.5em;
+  }
+
+  input {
+    width: 20em;
+  }
+
+  .emoji-tab-popover-file {
+    padding-top: 3px;
   }
 }

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -7,6 +7,8 @@
       <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
 
       <ul class="setting-list">
+        <h2>{{ $t('admin_dash.emoji.global_actions') }}</h2>
+
         <li class="btn-group setting-item">
           <button
             class="button button-default btn"
@@ -23,31 +25,6 @@
         </li>
 
         <li class="btn-group setting-item">
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="$refs.createPackPopover.showPopover">
-            {{ $t('admin_dash.emoji.create_pack') }}
-          </button>
-          <Popover
-            ref="createPackPopover"
-            trigger="click"
-            placement="bottom"
-            bound-to-selector=".emoji-tab"
-            :bound-to="{ x: 'container' }"
-            :offset="{ y: 5 }"
-          >
-            <template #content>
-              <input v-model="newPackName" :placeholder="$t('admin_dash.emoji.new_pack_name')">
-              <button
-                class="button button-default btn emoji-tab-popover-button"
-                type="button"
-                @click="createEmojiPack">
-                {{ $t('admin_dash.emoji.create') }}
-              </button>
-            </template>
-          </Popover>
-
           <button
             class="button button-default btn"
             type="button"
@@ -56,6 +33,7 @@
 
             <Popover
               ref="remotePackPopover"
+              popover-class="emoji-tab-edit-popover popover-default"
               trigger="click"
               placement="bottom"
               bound-to-selector=".emoji-tab"
@@ -63,18 +41,23 @@
               :offset="{ y: 5 }"
             >
               <template #content>
-                <input v-model="remotePackInstance" :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 class="emoji-tab-popover-input">
+                  <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
+                  <input v-model="remotePackInstance" :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>
         </li>
 
+        <h2>{{ $t('admin_dash.emoji.emoji_packs') }}</h2>
+
         <li>
           <Select class="form-control" v-model="packName">
             <option value="" disabled hidden>{{ $t('admin_dash.emoji.emoji_pack') }}</option>
@@ -82,6 +65,35 @@
               {{ listPackName }}
             </option>
           </Select>
+
+          <button
+            class="button button-default btn emoji-tab-popover-button"
+            type="button"
+            @click="$refs.createPackPopover.showPopover">
+            {{ $t('admin_dash.emoji.create_pack') }}
+          </button>
+          <Popover
+            ref="createPackPopover"
+            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')">
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                  @click="createEmojiPack">
+                  {{ $t('admin_dash.emoji.create') }}
+                </button>
+              </div>
+            </template>
+          </Popover>
         </li>
       </ul>
 
@@ -91,7 +103,7 @@
             <li>
               <div>
                 {{ $t('admin_dash.emoji.description') }}
-                <ModifiedIndicator :changed="metaEdited('description')" />
+                <ModifiedIndicator :changed="metaEdited('description')" message-key="admin_dash.emoji.metadata_changed" />
               </div>
               <textarea
                 v-model="packMeta.description"
@@ -101,7 +113,7 @@
             <li>
               <div>
                 {{ $t('admin_dash.emoji.homepage') }}
-                <ModifiedIndicator :changed="metaEdited('homepage')" />
+                <ModifiedIndicator :changed="metaEdited('homepage')" message-key="admin_dash.emoji.metadata_changed" />
               </div>
               <input
                 class="emoji-info-input" v-model="packMeta.homepage"
@@ -110,7 +122,7 @@
             <li>
               <div>
                 {{ $t('admin_dash.emoji.fallback_src') }}
-                <ModifiedIndicator :changed="metaEdited('fallback-src')" />
+                <ModifiedIndicator :changed="metaEdited('fallback-src')" message-key="admin_dash.emoji.metadata_changed" />
               </div>
               <input class="emoji-info-input" v-model="packMeta['fallback-src']" :disabled="pack.remote !== undefined">
             </li>
@@ -123,7 +135,7 @@
                 {{ $t('admin_dash.emoji.share') }}
               </Checkbox>
 
-              <ModifiedIndicator :changed="metaEdited('share-files')" />
+              <ModifiedIndicator :changed="metaEdited('share-files')" message-key="admin_dash.emoji.metadata_changed" />
             </li>
             <li class="btn-group">
               <button
@@ -131,54 +143,14 @@
                 type="button"
                 v-if="pack.remote === undefined"
                 @click="savePackMetadata">
-                {{ $t('admin_dash.emoji.save') }}
+                {{ $t('admin_dash.emoji.save_meta') }}
               </button>
-
               <button
                 class="button button-default btn"
                 type="button"
                 v-if="pack.remote === undefined"
-                @click="$refs.addEmojiPopover.showPopover">
-                {{ $t('admin_dash.emoji.add_file') }}
-
-                <Popover
-                  ref="addEmojiPopover"
-                  trigger="click"
-                  placement="bottom"
-                  bound-to-selector=".emoji-tab"
-                  popover-class="emoji-tab-edit-popover popover-default"
-                  :bound-to="{ x: 'container' }"
-                  :offset="{ y: 5 }"
-                >
-                  <template #content>
-                    <h3>{{ $t('admin_dash.emoji.adding_new') }}</h3>
-                    <div>
-                      <input
-                        type="file"
-                        class="emoji-tab-popover-input emoji-tab-popover-file"
-                        @change="newEmojiUpload.upload = $event.target.files"
-                      >
-                    </div>
-                    <div>
-                      <div>
-                        <input class="emoji-data-input emoji-tab-popover-input"
-                          v-model="newEmojiUpload.shortcode"
-                          :placeholder="$t('admin_dash.emoji.new_shortcode')">
-                        <input class="emoji-data-input emoji-tab-popover-input"
-                          v-model="newEmojiUpload.file"
-                          :placeholder="$t('admin_dash.emoji.new_filename')">
-
-                        <button
-                          class="button button-default btn emoji-tab-popover-button"
-                          type="button"
-                          :disabled="this.newEmojiUpload.upload.length == 0"
-                          @click="uploadEmoji">
-                          {{ $t('admin_dash.emoji.save') }}
-                        </button>
-                      </div>
-                    </div>
-                  </template>
-                </Popover>
+                @click="savePackMetadata">
+                {{ $t('admin_dash.emoji.revert_meta') }}
               </button>
 
               <button
@@ -219,12 +191,15 @@
                     <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
                     <div>
                       <div>
-                        <input class="emoji-data-input emoji-tab-popover-input"
-                          v-model="remotePackDownloadAs"
-                          :placeholder="$t('admin_dash.emoji.download_as_name')">
+                        <div class="emoji-tab-popover-input">
+                          <label for="remote-download-as-input">{{ $t('admin_dash.emoji.download_as_name') }}</label>
+                          <input id="remote-download-as-input" class="emoji-data-input"
+                            v-model="remotePackDownloadAs"
+                            :placeholder="$t('admin_dash.emoji.download_as_name_full')">
+                        </div>
 
                         <button
-                          class="button button-default btn emoji-tab-popover-button"
+                          class="button button-default btn"
                           type="button"
                           @click="downloadRemotePack">
                           {{ $t('admin_dash.emoji.download') }}
@@ -238,64 +213,148 @@
           </ul>
         </div>
 
-        <h2>{{ $t('admin_dash.emoji.files') }}</h2>
+        <ul class="setting-list">
+          <h3>
+            {{ $t('admin_dash.emoji.files') }}
 
-        <div class="emoji-list" v-if="pack">
-          <Popover
-            v-for="(file, shortcode) in pack.files" :key="shortcode"
-            trigger="click"
-            :disabled="pack.remote !== undefined"
-            placement="top"
-            :class="{'emoji-unsaved': editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined}"
-            popover-class="emoji-tab-edit-popover popover-default"
-            bound-to-selector=".emoji-list"
-            :bound-to="{ x: 'container' }"
-            :offset="{ y: 5 }"
-            @show="editEmoji(shortcode)"
-          >
-            <template #content>
-              <h3>
-                {{ $t('admin_dash.emoji.editing', [shortcode]) }}
-              </h3>
-              <div v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
-                <input class="emoji-data-input"
-                  v-model="editedParts[packName][shortcode].shortcode">
-                <input class="emoji-data-input"
-                  v-model="editedParts[packName][shortcode].file">
+            <ModifiedIndicator v-if="pack"
+              :changed="editedParts[packName] && Object.keys(editedParts[packName]).length > 0"
+              message-key="admin_dash.emoji.emoji_changed"/>
+          </h3>
 
-                <button
-                  class="button button-default btn emoji-tab-popover-button"
-                  type="button"
-                  @click="saveEditedEmoji(shortcode)">
-                  {{ $t('admin_dash.emoji.save') }}
-                </button>
-                <button
-                  class="button button-default btn emoji-tab-popover-button"
-                  type="button"
-                  @click="editedParts[packName][shortcode].deleteModalVisible = true">
-                  {{ $t('admin_dash.emoji.delete') }}
-                </button>
-                <ConfirmModal
-                  v-if="editedParts[packName][shortcode].deleteModalVisible"
-                  :title="$t('admin_dash.emoji.delete_title')"
-                  :cancel-text="$t('status.delete_confirm_cancel_button')"
-                  :confirm-text="$t('status.delete_confirm_accept_button')"
-                  @cancelled="editedParts[packName][shortcode].deleteModalVisible = false"
-                  @accepted="deleteEmoji(shortcode)" >
-                  {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
-                </ConfirmModal>
-              </div>
-            </template>
-            <template #trigger>
-              <StillImage
-                class="emoji"
-                :src="emojiAddr(file)"
-                :title="`:${shortcode}:`"
-                :alt="`:${shortcode}:`"
-              />
-            </template>
-          </Popover>
-        </div>
+          <div class="emoji-list" v-if="pack">
+            <Popover
+              v-if="pack.remote === undefined"
+              ref="addEmojiPopover"
+              trigger="click"
+              placement="bottom"
+              bound-to-selector=".emoji-tab"
+              popover-class="emoji-tab-edit-popover popover-default"
+              :bound-to="{ x: 'container' }"
+              :offset="{ y: 5 }"
+            >
+              <template #trigger>
+                <FAIcon icon="plus" size="2x" :title="$t('admin_dash.emoji.add_file')" />
+              </template>
+              <template #content>
+                <h3>
+                  {{ $t('admin_dash.emoji.adding_new') }}
+                </h3>
+
+                <StillImage
+                  class="emoji" v-if="newEmojiUploadPreview"
+                  :src="newEmojiUploadPreview"
+                />
+                <div v-else class="emoji"></div>
+
+                <div class="emoji-tab-popover-input">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    class="emoji-tab-popover-file"
+                    @change="newEmojiUpload.upload = $event.target.files"
+                  >
+                </div>
+                <div>
+                  <div class="emoji-tab-popover-input">
+                    <div>{{ $t('admin_dash.emoji.shortcode') }}</div>
+                    <input class="emoji-data-input"
+                      v-model="newEmojiUpload.shortcode"
+                      :placeholder="$t('admin_dash.emoji.new_shortcode')">
+                  </div>
+
+                  <div class="emoji-tab-popover-input">
+                    <div>{{ $t('admin_dash.emoji.filename') }}</div>
+                    <input class="emoji-data-input"
+                      v-model="newEmojiUpload.file"
+                      :placeholder="$t('admin_dash.emoji.new_filename')">
+                  </div>
+
+                  <button
+                    class="button button-default btn"
+                    type="button"
+                    :disabled="this.newEmojiUpload.upload.length == 0"
+                    @click="uploadEmoji">
+                    {{ $t('admin_dash.emoji.save') }}
+                  </button>
+                </div>
+              </template>
+            </Popover>
+
+            <Popover
+              v-for="(file, shortcode) in pack.files" :key="shortcode"
+              trigger="click"
+              :disabled="pack.remote !== undefined"
+              placement="top"
+              :class="{'emoji-unsaved': editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined}"
+              popover-class="emoji-tab-edit-popover popover-default"
+              bound-to-selector=".emoji-list"
+              :bound-to="{ x: 'container' }"
+              :offset="{ y: 5 }"
+              @show="editEmoji(shortcode)"
+              @close="closedEditedEmoji(shortcode)"
+            >
+              <template #content>
+                <h3>
+                  {{ $t('admin_dash.emoji.editing', [shortcode]) }}
+                </h3>
+
+                <StillImage class="emoji" :src="emojiAddr(file)" />
+
+                <div v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
+                  <div class="emoji-tab-popover-input">
+                    <label for="emoji-edit-shortcode">{{ $t('admin_dash.emoji.shortcode') }}</label>
+                    <input id="emoji-edit-shortcode" class="emoji-data-input"
+                      v-model="editedParts[packName][shortcode].shortcode">
+                  </div>
+                  <div class="emoji-tab-popover-input">
+                    <label for="emoji-edit-filename">{{ $t('admin_dash.emoji.filename') }}</label>
+                    <input id="emoji-edit-filename" class="emoji-data-input"
+                      v-model="editedParts[packName][shortcode].file">
+                  </div>
+
+                  <div>
+                    <button
+                      class="button button-default btn emoji-tab-popover-button"
+                      type="button"
+                      @click="saveEditedEmoji(shortcode)">
+                      {{ $t('admin_dash.emoji.save') }}
+                    </button>
+                    <button
+                      class="button button-default btn emoji-tab-popover-button"
+                      type="button"
+                      @click="editedParts[packName][shortcode].deleteModalVisible = true">
+                      {{ $t('admin_dash.emoji.delete') }}
+                    </button>
+                    <button
+                      class="button button-default btn emoji-tab-popover-button"
+                      type="button"
+                      @click="revertEmoji(shortcode)">
+                      {{ $t('admin_dash.emoji.revert') }}
+                    </button>
+                    <ConfirmModal
+                      v-if="editedParts[packName][shortcode].deleteModalVisible"
+                      :title="$t('admin_dash.emoji.delete_title')"
+                      :cancel-text="$t('status.delete_confirm_cancel_button')"
+                      :confirm-text="$t('status.delete_confirm_accept_button')"
+                      @cancelled="editedParts[packName][shortcode].deleteModalVisible = false"
+                      @accepted="deleteEmoji(shortcode)" >
+                      {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
+                    </ConfirmModal>
+                  </div>
+                </div>
+              </template>
+              <template #trigger>
+                <StillImage
+                  class="emoji"
+                  :src="emojiAddr(file)"
+                  :title="`:${shortcode}:`"
+                  :alt="`:${shortcode}:`"
+                />
+              </template>
+            </Popover>
+          </div>
+        </ul>
       </div>
     </div>
   </div>

src/components/settings_modal/helpers/modified_indicator.vue

@@ -15,7 +15,7 @@
       </template>
       <template #content>
         <div class="modified-tooltip">
-          {{ $t('settings.setting_changed') }}
+          {{ $t(messageKey) }}
         </div>
       </template>
     </Popover>
@@ -33,7 +33,13 @@ library.add(
 
 export default {
   components: { Popover },
-  props: ['changed']
+  props: {
+    changed: Boolean,
+    messageKey: {
+      type: String,
+      default: 'settings.setting_changed'
+    }
+  }
 }
 </script>
 

src/i18n/en.json

@@ -934,6 +934,7 @@
       "success_installing_frontend": "Frontend {version} successfully installed"
     },
     "emoji": {
+      "global_actions": "Global actions",
       "reload": "Reload emoji",
       "importFS": "Import emoji from filesystem",
       "error": "Error: {0}",
@@ -941,6 +942,7 @@
       "delete_pack": "Delete pack",
       "new_pack_name": "New pack name",
       "create": "Create",
+      "emoji_packs": "Emoji packs",
       "remote_packs": "Remote packs",
       "do_list": "List",
       "remote_pack_instance": "Remote pack instance",
@@ -951,19 +953,27 @@
       "fallback_sha256": "Fallback SHA256",
       "share": "Share",
       "save": "Save",
+      "save_meta": "Save metadata",
+      "revert_meta": "Revert metadata",
       "delete": "Delete",
+      "revert": "Revert",
       "add_file": "Add file",
       "adding_new": "Adding new emoji",
+      "shortcode": "Shortcode",
+      "filename": "Filename",
       "new_shortcode": "Shortcode, leave blank to infer",
       "new_filename": "Filename, leave blank to infer",
       "delete_confirm": "Are you sure you want to delete {0}?",
       "download_pack": "Download pack",
       "downloading_pack": "Downloading {0}",
       "download": "Download",
-      "download_as_name": "New name, leave blank to reuse",
+      "download_as_name": "New name",
+      "download_as_name_full": "New name, leave blank to reuse",
       "files": "Files",
       "editing": "Editing {0}",
-      "delete_title": "Delete?"
+      "delete_title": "Delete?",
+      "metadata_changed": "Metadata different from saved",
+      "emoji_changed": "Unsaved emoji file changes, check highlighted emoji"
     },
     "temp_overrides": {
       ":pleroma": {