From dcfee0f5deb86c8c10af6499467c368272b4668e Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 9 Oct 2020 13:03:38 +0300
Subject: [PATCH] Add headers in table that manages emojis

---
 src/lang/en.js                                        |  4 +++-
 src/views/emojiPacks/components/LocalEmojiPack.vue    | 10 ++++++++++
 src/views/emojiPacks/components/SingleEmojiEditor.vue |  4 ++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 38562f38..656d06ed 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -525,6 +525,8 @@ export default {
     copy: 'Copy',
     copyToLocalPack: 'Copy to local pack',
     emptyPack: 'This emoji pack is empty',
-    emojiWarning: 'Pack names cannot include any of the following characters: # / < > & +'
+    emojiWarning: 'Pack names cannot include any of the following characters: # / < > & +',
+    image: 'Image'
+
   }
 }
diff --git a/src/views/emojiPacks/components/LocalEmojiPack.vue b/src/views/emojiPacks/components/LocalEmojiPack.vue
index 524685b9..17833eb3 100644
--- a/src/views/emojiPacks/components/LocalEmojiPack.vue
+++ b/src/views/emojiPacks/components/LocalEmojiPack.vue
@@ -44,6 +44,11 @@
       </el-collapse-item>
       <el-collapse-item :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
         <div v-if="pack.files && Object.keys(pack.files).length > 0">
+          <div :class="isMobile ? 'emoji-container-flex' : 'emoji-container-grid'">
+            <span class="emoji-preview-img emoji-table-head">{{ $t('emoji.image') }}</span>
+            <span class="emoji-table-head">{{ $t('emoji.shortcode') }}</span>
+            <span class="emoji-table-head">{{ $t('emoji.file') }}</span>
+          </div>
           <single-emoji-editor
             v-for="(file, shortcode) in pack.files"
             :key="shortcode"
@@ -252,6 +257,11 @@ export default {
   font-weight: 700;
   color: #606266;
 }
+.emoji-table-head {
+  color: #909399;
+  font-size: 14px;
+  font-weight: 700;
+}
 .emoji-pack-card {
   margin-top: 5px;
 }
diff --git a/src/views/emojiPacks/components/SingleEmojiEditor.vue b/src/views/emojiPacks/components/SingleEmojiEditor.vue
index 9a773f67..2daef28f 100644
--- a/src/views/emojiPacks/components/SingleEmojiEditor.vue
+++ b/src/views/emojiPacks/components/SingleEmojiEditor.vue
@@ -178,7 +178,7 @@ export default {
 }
 .emoji-container-grid {
   display: grid;
-  grid-template-columns: 75px auto auto 200px;
+  grid-template-columns: 75px 1fr 1fr 200px;
   grid-column-gap: 15px;
   margin-bottom: 10px;
 }
@@ -197,7 +197,7 @@ export default {
 }
 .remote-emoji-container-grid {
   display: grid;
-  grid-template-columns: 75px auto auto 160px;
+  grid-template-columns: 75px 1fr 1fr 160px;
   grid-column-gap: 15px;
   margin-bottom: 10px;
 }