Add a super basic keep reaction open button

Signed-off-by: Sam Therapy <sam@samtherapy.net>

src/components/react_button/react_button.js

@@ -1,3 +1,4 @@
+import Checkbox from '../checkbox/checkbox.vue'
 import Popover from '../popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
@@ -8,21 +9,26 @@ const ReactButton = {
   props: ['status'],
   data () {
     return {
-      filterWord: ''
+      filterWord: '',
+      keepReactOpen: false
     }
   },
   components: {
-    Popover
+    Popover,
+    Checkbox
   },
   methods: {
-    addReaction (event, emoji, close) {
+    addReaction (event, emoji, close, keepReactOpen) {
       const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
       if (existingReaction && existingReaction.me) {
         this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
       } else {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
-      close()
+      this.keepReactOpen = keepReactOpen
+      if (!keepReactOpen) {
+        close()
+      }
     },
     focusInput () {
       this.$nextTick(() => {

src/components/react_button/react_button.vue

@@ -16,13 +16,18 @@
           :placeholder="$t('emoji.search_emoji')"
         >
       </div>
+      <div class="keep-open">
+        <Checkbox v-model="keepReactOpen">
+          {{ $t('emoji.keep_open') }}
+        </Checkbox>
+      </div>
       <div class="reaction-picker">
         <span
           v-for="emoji in commonEmojis"
           :key="emoji.replacement"
           class="emoji-button"
           :title="emoji.displayText"
-          @click="addReaction($event, emoji.replacement, close)"
+          @click="addReaction($event, emoji.replacement, close, keepReactOpen)"
         >
           {{ emoji.replacement }}
         </span>
@@ -32,7 +37,7 @@
           :key="key"
           class="emoji-button"
           :title="emoji.displayText"
-          @click="addReaction($event, emoji.replacement, close)"
+          @click="addReaction($event, emoji.replacement, close, keepReactOpen)"
         >
           {{ emoji.replacement }}
         </span>
@@ -124,6 +129,15 @@
       color: var(--text, $fallback--text);
     }
   }
+  .keep-open,
+  .too-many-emoji {
+    padding: 7px;
+    line-height: normal;
+  }
+  .keep-open-label {
+    padding: 0 7px;
+    display: flex;
+  }
 }
 
 </style>