Improve interface for Emoji packs

src/lang/en.js

@@ -313,7 +313,17 @@ export default {
     database: 'Database',
     other: 'Other',
     success: 'Settings changed successfully!',
-    emojiPacks: 'Emoji packs'
+    emojiPacks: 'Emoji packs',
+    reloadEmoji: 'Reload emoji',
+    importPacks: 'Import packs from the server filesystem',
+    importEmojiTooltip: 'Importing from the filesystem will scan the directories and import those without pack.json but with emoji.txt or without neither',
+    localPacks: 'Local packs',
+    refreshLocalPacks: 'Refresh local packs',
+    createLocalPack: 'Create a new local pack',
+    packs: 'Packs',
+    remotePacks: 'Remote packs',
+    remoteInstanceAddress: 'Remote instance address',
+    refreshRemote: 'Refresh remote packs'
   },
   invites: {
     inviteTokens: 'Invite tokens',

src/views/emojiPacks/index.vue

@@ -1,123 +1,89 @@
 <template>
-  <el-container class="emoji-packs-container">
+  <div>
-    <el-header>
+    <div class="button-container">
-      <h1>
+      <el-button type="primary" @click="reloadEmoji">{{ $t('settings.reloadEmoji') }}</el-button>
-        Emoji packs
+      <el-tooltip :content="$t('settings.importEmojiTooltip')" effects="dark" placement="bottom">
-      </h1>
+        <el-button type="primary" @click="importFromFS">
-    </el-header>
+          {{ $t('settings.importPacks') }}
-
-    <el-row class="local-packs-actions">
-      <el-button type="primary" @click="reloadEmoji">
-        Reload emoji
-      </el-button>
-
-      <el-tooltip effects="dark" content="Importing from the filesystem will scan the directories and import those without pack.json but with emoji.txt or without neither" placement="bottom">
-        <el-button type="success" @click="importFromFS">
-          Import packs from the server filesystem
         </el-button>
       </el-tooltip>
-    </el-row>
+    </div>
-
+    <div class="line"/>
-    <el-tabs v-model="activeName">
+    <el-form :label-width="labelWidth">
-      <el-tab-pane label="Local packs" name="local">
+      <el-form-item :label="$t('settings.localPacks')">
-        <div>
+        <el-button type="primary" @click="refreshLocalPacks">{{ $t('settings.refreshLocalPacks') }}</el-button>
-          Local packs can be viewed and downloaded for backup here.
+      </el-form-item>
-        </div>
+      <el-form-item :label="$t('settings.createLocalPack')">
-
+        <div class="create-pack">
-        <div class="local-packs-actions">
+          <el-input v-model="newPackName" :placeholder="$t('users.name')" />
-          <el-popover
+          <el-button
-            v-model="createNewPackVisible"
+            :disabled="newPackName.trim() === ''"
-            placement="bottom"
+            class="create-pack-button"
-            trigger="click">
+            @click="createLocalPack">
-
+            {{ $t('users.create') }}
-            <el-input v-model="newPackName" placeholder="Name" />
-            <el-button
-              :disabled="newPackName.trim() === ''"
-              class="create-pack-button"
-              type="success"
-              @click="createLocalPack" >
-              Create
-            </el-button>
-
-            <el-button slot="reference" type="success">
-              Create a new local pack
-            </el-button>
-          </el-popover>
-
-          <el-button type="primary" @click="refreshLocalPacks">
-            Refresh local packs
           </el-button>
         </div>
-
+      </el-form-item>
-        <div v-for="(pack, name) in $store.state.emojiPacks.localPacks" :key="name">
+      <el-form-item v-if="localPacks.length > 0" :label="$t('settings.packs')">
+        <div v-for="(pack, name) in localPacks" :key="name">
           <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
           <el-divider />
         </div>
-      </el-tab-pane>
+      </el-form-item>
-
+      <div class="line"/>
-      <el-tab-pane label="Remote packs" name="remote">
+      <el-form-item :label="$t('settings.remotePacks')">
-        <el-input
+        <div class="create-pack">
-          v-model="remoteInstanceAddress"
+          <el-input
-          class="remote-instance-input"
+            v-model="remoteInstanceAddress"
-          placeholder="Remote instance address" />
+            :placeholder="$t('settings.remoteInstanceAddress')" />
-        <el-button type="primary" @click="refreshRemotePacks">
+          <el-button
-          Refresh remote packs
+            :disabled="remoteInstanceAddress.trim() === ''"
-        </el-button>
+            class="create-pack-button"
-
+            @click="refreshRemotePacks">
-        <div v-for="(pack, name) in $store.state.emojiPacks.remotePacks" :key="name">
+            {{ $t('settings.refreshRemote') }}
-          <emoji-pack :name="name" :pack="pack" :host="remoteInstanceAddress" :is-local="false" />
+          </el-button>
+        </div>
+      </el-form-item>
+      <el-form-item v-if="remotePacks.length > 0" :label="$t('settings.packs')">
+        <div v-for="(pack, name) in remotePacks" :key="name">
+          <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
           <el-divider />
         </div>
-
+      </el-form-item>
-      </el-tab-pane>
+    </el-form>
-    </el-tabs>
+  </div>
-  </el-container>
 </template>
 
-<style>
-  .emoji-packs-container {
-    margin: 22px 0 0 15px;
-  }
-
-  .local-packs-actions {
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-
-  .remote-instance-input {
-    max-width: 10%;
-  }
-
-  .create-pack-button {
-    margin-top: 1em;
-  }
-</style>
-
 <script>
 import EmojiPack from './components/EmojiPack'
 
 export default {
   components: { EmojiPack },
-
   data() {
     return {
-      activeName: 'local',
       remoteInstanceAddress: '',
-      downloadFromState: null,
+      newPackName: ''
-
+    }
-      newPackName: '',
+  },
-      createNewPackVisible: false
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    labelWidth() {
+      return this.isMobile ? '100px' : '210px'
+    },
+    localPacks() {
+      return this.$store.state.emojiPacks.localPacks
+    },
+    remotePacks() {
+      return this.$store.state.emojiPacks.remotePacks
     }
   },
-
   mounted() {
     this.refreshLocalPacks()
   },
-
   methods: {
     createLocalPack() {
-      this.createNewPackVisible = false
-
       this.$store.dispatch('CreatePack', { name: this.newPackName })
         .then(() => {
           this.newPackName = ''
@@ -126,19 +92,15 @@ export default {
           this.$store.dispatch('ReloadEmoji')
         })
     },
-
     refreshLocalPacks() {
       this.$store.dispatch('SetLocalEmojiPacks')
     },
-
     refreshRemotePacks() {
       this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress })
     },
-
     reloadEmoji() {
       this.$store.dispatch('ReloadEmoji')
     },
-
     importFromFS() {
       this.$store.dispatch('ImportFromFS')
         .then(() => {
@@ -149,3 +111,22 @@ export default {
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss'>
+.button-container {
+  margin: 0 0 22px 20px;
+}
+.create-pack {
+  display: flex;
+  justify-content: space-between
+}
+.create-pack-button {
+  margin-left: 10px;
+}
+.line {
+    width: 100%;
+    height: 0;
+    border: 1px solid #eee;
+    margin-bottom: 22px;
+  }
+</style>