From 3e9955fe2061abdab2bad63588c2e5a4b70306c6 Mon Sep 17 00:00:00 2001
From: Sam Therapy <sam@samtherapy.net>
Date: Sat, 19 Feb 2022 17:17:36 -0600
Subject: [PATCH] Add a super basic keep reaction open button

Signed-off-by: Sam Therapy <sam@samtherapy.net>
---
 src/components/react_button/react_button.js  | 14 ++++++++++----
 src/components/react_button/react_button.vue | 18 ++++++++++++++++--
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 11f36a46..9c9ca0a4 100644
--- a/src/components/react_button/react_button.js
+++ b/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(() => {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c69c315b..c23a1ab5 100644
--- a/src/components/react_button/react_button.vue
+++ b/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>