Rework managing emojis

src/lang/en.js

@@ -339,7 +339,20 @@ export default {
     customFilenameDesc: 'Custom file name (optional)',
     url: 'URL',
     required: 'required',
-    clickToUpload: 'Click to upload'
+    clickToUpload: 'Click to upload',
+    showPackContents: 'Show pack contents',
+    manageEmoji: 'Manage existing emoji',
+    file: 'File',
+    update: 'Update',
+    remove: 'Remove',
+    selectLocalPack: 'Select the local pack to copy to',
+    localPack: 'Local pack',
+    specifyShortcode: 'Specify a custom shortcode',
+    specifyFilename: 'Specify a custom filename',
+    leaveEmptyShortcode: 'leave empty to use the same shortcode',
+    leaveEmptyFilename: 'leave empty to use the same filename',
+    copy: 'Copy',
+    copyToLocalPack: 'Copy to local pack'
   },
   invites: {
     inviteTokens: 'Invite tokens',

src/views/emojiPacks/components/EmojiPack.vue

@@ -30,9 +30,19 @@
       </el-form-item>
     </el-form>
     <el-collapse v-model="showPackContent" class="contents-collapse">
-      <el-collapse-item :name="name" title="Show pack contents">
+      <el-collapse-item :title="$t('settings.addNewEmoji')" name="addEmoji">
         <new-emoji-uploader v-if="isLocal" :pack-name="name"/>
       </el-collapse-item>
+      <el-collapse-item :title="$t('settings.manageEmoji')" name="manageEmoji">
+        <single-emoji-editor
+          v-for="(file, ename) in pack.files"
+          :key="ename"
+          :host="host"
+          :pack-name="name"
+          :name="ename"
+          :file="file"
+          :is-local="isLocal" />
+      </el-collapse-item>
     </el-collapse>
   </el-collapse-item>
 </template>

src/views/emojiPacks/components/NewEmojiUploader.vue

@@ -1,6 +1,5 @@
 <template>
   <el-form label-width="130px" label-position="left" size="small">
-    <div class="add-new-emoji">{{ $t('settings.addNewEmoji') }}</div>
     <el-form-item :label="$t('settings.shortcode')">
       <el-input v-model="shortcode" :placeholder="$t('settings.required')"/>
     </el-form-item>

src/views/emojiPacks/components/SingleEmojiEditor.vue

@@ -1,71 +1,50 @@
 <template>
-  <el-row :gutter="20">
+  <div>
-    <el-col :span="4">
+    <div v-if="isLocal" class="emoji-container">
-      <el-input v-if="isLocal" v-model="modifyingName" placeholder="Name/Shortcode" />
+      <img
-      <el-input v-else :value="modifyingName" placeholder="Name/Shortcode" />
+        :src="addressOfEmojiInPack(host, packName, file)"
-    </el-col>
+        class="emoji-preview-img">
-    <el-col :span="6">
+      <el-input v-model="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/>
-      <el-input v-if="isLocal" v-model="modifyingFile" placeholder="File"/>
+      <el-input v-model="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/>
-      <el-input v-else :value="modifyingFile" placeholder="File"/>
+      <div class="emoji-buttons">
-    </el-col>
+        <el-button type="primary" class="emoji-button" @click="update">{{ $t('settings.update') }}</el-button>
+        <el-button class="emoji-button" @click="remove">{{ $t('settings.remove') }}</el-button>
+      </div>
+    </div>
 
-    <el-col v-if="isLocal" :span="2">
+    <div v-if="!isLocal" class="emoji-container">
-      <el-button type="primary" @click="update">Update</el-button>
+      <img
-    </el-col>
+        :src="addressOfEmojiInPack(host, packName, file)"
-    <el-col v-if="isLocal" :span="2">
+        class="emoji-preview-img">
-      <el-button type="danger" @click="remove">Remove</el-button>
+      <el-input :value="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/>
-    </el-col>
+      <el-input :value="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/>
-
+      <el-popover v-model="copyPopoverVisible" placement="left-start" popper-class="copy-popover">
-    <el-col v-if="!isLocal" :span="4">
+        <p>{{ $t('settings.selectLocalPack') }}</p>
-      <el-popover v-model="copyToLocalVisible" placement="bottom">
+        <el-select v-model="copyToLocalPackName" :placeholder="$t('settings.localPack')">
-        <p>Select the local pack to copy to</p>
-        <el-select v-model="copyToLocalPackName" placeholder="Local pack">
           <el-option
-            v-for="(_pack, name) in $store.state.emojiPacks.localPacks"
+            v-for="(_pack, name) in localPacks"
             :key="name"
             :label="name"
             :value="name" />
         </el-select>
-
+        <p>{{ $t('settings.specifyShortcode') }}</p>
-        <p>Specify a custom shortcode (leave empty to use the same shortcode)</p>
+        <el-input v-model="copyToShortcode" :placeholder="$t('settings.leaveEmptyShortcode')"/>
-        <el-input v-model="copyToShortcode" placeholder="Shortcode (optional)" />
+        <p>{{ $t('settings.specifyFilename') }}</p>
-
+        <el-input v-model="copyToFilename" :placeholder="$t('settings.leaveEmptyFilename')"/>
-        <p>Specify a custom filename (leavy empty to use the same filename)</p>
-        <el-input v-model="copyToFilename" placeholder="Filename (optional)" />
-
         <el-button
           :disabled="!copyToLocalPackName"
-          type="success"
+          type="primary"
           class="copy-to-local-button"
-          @click="copyToLocal">Copy</el-button>
+          @click="copyToLocal">{{ $t('settings.copy') }}</el-button>
-
+        <el-button slot="reference" type="primary" class="emoji-button">{{ $t('settings.copyToLocalPack') }}</el-button>
-        <el-button slot="reference" type="primary">Copy to local pack...</el-button>
       </el-popover>
-    </el-col>
+    </div>
-
+  </div>
-    <el-col :span="2">
-      <img
-        :src="addressOfEmojiInPack(host, packName, file)"
-        class="emoji-preview-img">
-    </el-col>
-  </el-row>
 </template>
 
-<style>
-  .emoji-preview-img {
-    max-width: 5em;
-  }
-
-  .copy-to-local-button {
-    margin-top: 2em;
-    float: right;
-  }
-</style>
-
 <script>
 
 import { addressOfEmojiInPack } from '@/api/emojiPacks'
-
 export default {
   props: {
     host: {
@@ -89,33 +68,33 @@ export default {
       required: true
     }
   },
-
   data() {
     return {
       newName: null,
       newFile: null,
-
       copyToLocalPackName: null,
-      copyToLocalVisible: false,
+      copyPopoverVisible: false,
       copyToShortcode: '',
       copyToFilename: ''
     }
   },
-
   computed: {
-    modifyingName: {
+    emojiName: {
       get() {
-        // Return a modified name if it was actually modified, otherwise return the old name
+        // Return a modified name if it was modified, otherwise return the old name
         return this.newName !== null ? this.newName : this.name
       },
       set(val) { this.newName = val }
     },
-    modifyingFile: {
+    emojiFile: {
       get() {
-        // Return a modified name if it was actually modified, otherwise return the old name
+        // Return a modified name if it was modified, otherwise return the old name
         return this.newFile !== null ? this.newFile : this.file
       },
       set(val) { this.newFile = val }
+    },
+    localPacks() {
+      return this.$store.state.emojiPacks.localPacks
     }
   },
   methods: {
@@ -124,8 +103,8 @@ export default {
         action: 'update',
         packName: this.packName,
         oldName: this.name,
-        newName: this.modifyingName,
+        newName: this.emojiName,
-        newFilename: this.modifyingFile
+        newFilename: this.emojiFile
       }).then(() => {
         this.newName = null
         this.newFile = null
@@ -151,7 +130,6 @@ export default {
         })
       })
     },
-
     copyToLocal() {
       this.$store.dispatch('UpdateAndSavePackFile', {
         action: 'add',
@@ -168,8 +146,35 @@ export default {
         this.$store.dispatch('ReloadEmoji')
       })
     },
-
     addressOfEmojiInPack
   }
 }
 </script>
+
+<style>
+.copy-popover {
+  width: 330px
+}
+.emoji-button {
+  margin-left: 10px
+}
+.emoji-buttons {
+  min-width: 210px
+}
+.emoji-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.emoji-preview-img {
+  max-width: 5em;
+}
+.emoji-info {
+  margin-left: 10px
+}
+.copy-to-local-button {
+  margin-top: 12px;
+  float: right;
+}
+</style>