Add ability to hide custom emojis in picker

4 files changed, 20 insertions, 2 deletions

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 30c01aa5..eb665c40 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -114,6 +114,7 @@ const EmojiPicker = {
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
       customEmojiTimeout: null,
+      hideCustomEmojiInPicker: false,
       // Lazy-load only after the first time `showing` becomes true.
       contentLoaded: false,
       groupRefs: {},
@@ -286,7 +287,7 @@ const EmojiPicker = {
       return 0
     },
     allCustomGroups () {
-      if (this.hideCustomEmoji) {
+      if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
         return {}
       }
       const emojis = this.$store.getters.groupedCustomEmojis
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5bcff33b..aab9251d 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -39,11 +39,16 @@ $emoji-picker-emoji-size: 32px;
   }
 
   .keep-open,
-  .too-many-emoji {
+  .too-many-emoji,
+  .hide-custom-emoji {
     padding: 7px;
     line-height: normal;
   }
 
+  .hide-custom-emoji {
+    padding-top: 0;
+  }
+
   .too-many-emoji {
     display: flex;
     flex-direction: column;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 0788f34c..1231ce2b 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -142,6 +142,17 @@
               {{ $t('emoji.keep_open') }}
             </Checkbox>
           </div>
+          <div
+            v-if="!hideCustomEmoji"
+            class="hide-custom-emoji"
+          >
+            <Checkbox
+              v-model="hideCustomEmojiInPicker"
+              @change="onShowing"
+            >
+              {{ $t('emoji.hide_custom_emoji') }}
+            </Checkbox>
+          </div>
         </div>
         <div
           v-if="showingStickers"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f4c9de18..f98bbb26 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -237,6 +237,7 @@
     "search_emoji": "Search for an emoji",
     "add_emoji": "Insert emoji",
     "custom": "Custom emoji",
+    "hide_custom_emoji": "Hide custom emojis",
     "unpacked": "Unpacked emoji",
     "unicode": "Unicode emoji",
     "unicode_groups": {