3 files changed, 43 insertions, 13 deletions
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 0a64f759..bce5026e 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -13,9 +13,11 @@ const EmojiPicker = {
   },
   data () {
     return {
+      labelKey: String(Math.random() * 100000),
       keyword: '',
       activeGroup: 'custom',
-      showingStickers: false
+      showingStickers: false,
+      spamMode: false
     }
   },
   components: {
@@ -24,8 +26,7 @@ const EmojiPicker = {
   methods: {
     onEmoji (emoji) {
       const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
-      this.$emit('emoji', ` ${value} `)
-      this.open = false
+      this.$emit('emoji', { insertion: ` ${value} `, spamMode: this.spamMode })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 6c13e82b..079eb362 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -10,29 +10,48 @@
   margin: 0 !important;
   z-index: 1;
 
-  .panel-body {
+  .spam-mode {
+    padding: 7px;
+    line-height: normal;
+  }
+  .spam-mode-label {
+    padding: 7px;
+  }
+
+  .heading {
+    display: flex;
+    height: 32px;
+    padding: 10px 7px 5px;
+  }
+
+  .content {
     display: flex;
     flex-direction: column;
     flex: 1 1 0;
     min-height: 0px;
   }
 
+  .emoji-tabs {
+    flex-grow: 1;
+  }
+
   .additional-tabs {
     border-left: 1px solid;
     border-left-color: $fallback--icon;
     border-left-color: var(--icon, $fallback--icon);
-    padding-left: 5px;
+    padding-left: 7px;
     flex: 0 0 0;
   }
 
-  .emoji-tabs {
-    flex: 1 1 0;
-  }
-
   .additional-tabs,
   .emoji-tabs {
+    display: block;
+    min-width: 0;
+    flex-basis: auto;
+    flex-shrink: 1;
+
     &-item {
-      padding: 0 5px;
+      padding: 0 7px;
       cursor: pointer;
       font-size: 24px;
 
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 12b1569e..901520aa 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="emoji-picker panel panel-default">
-    <div class="panel-heading">
+  <div class="emoji-picker panel panel-default panel-body">
+    <div class="heading">
       <span class="emoji-tabs">
         <span
           v-for="group in emojis"
@@ -30,7 +30,7 @@
         </span>
       </span>
     </div>
-    <div class="panel-body">
+    <div class="content">
       <div
         class="emoji-content"
         :class="{hidden: showingStickers}"
@@ -74,6 +74,16 @@
             </span>
           </div>
         </div>
+        <div
+          class="spam-mode"
+          >
+          <input
+            :id="labelKey + 'spam-mode'"
+            v-model="spamMode"
+            type="checkbox"
+            >
+          <label class="spam-mode-label" :for="labelKey + 'spam-mode'">{{ $t('emoji.spam') }}</label>
+        </div>
       </div>
       <div
         v-if="showingStickers"