From cd74fa18a29e961762b7e31aa0b8802143eb2a34 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 23 Sep 2020 20:52:56 +0300
Subject: [PATCH] Add warning about emoji packs names

---
 src/lang/en.js                 |  3 ++-
 src/views/emojiPacks/index.vue | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 385811ad..38562f38 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -524,6 +524,7 @@ export default {
     specifyFilename: 'Specify a custom filename',
     copy: 'Copy',
     copyToLocalPack: 'Copy to local pack',
-    emptyPack: 'This emoji pack is empty'
+    emptyPack: 'This emoji pack is empty',
+    emojiWarning: 'Pack names cannot include any of the following characters: # / < > & +'
   }
 }
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 18b16f26..6b8677de 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -30,6 +30,7 @@
                 {{ $t('users.create') }}
               </el-button>
             </div>
+            <span class="emoji-name-warning">{{ $t('emoji.emojiWarning') }}</span>
           </el-form-item>
           <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
             <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" accordion @change="setActiveTab">
@@ -206,6 +207,15 @@ export default {
   justify-content: space-between;
   margin: 0 15px 22px 15px;
 }
+.emoji-name-warning {
+  color: #666666;
+  font-size: 13px;
+  line-height: 22px;
+  margin: 5px 0 0 0;
+  overflow-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .emoji-packs-header-button-container {
   display: flex;
 }