Merge branch 'develop' into 'master'

Update stable - 2.5.0 release

See merge request pleroma/pleroma-fe!1711

2 files changed, 122 insertions, 32 deletions

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index ce82c90d..2a0dac85 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -1,14 +1,22 @@
 import Popover from '../popover/popover.vue'
+import { ensureFinalFallback } from '../../i18n/languages.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
+import { trim } from 'lodash'
 
-library.add(faSmileBeam)
+library.add(
+  faPlus,
+  faTimes,
+  faSmileBeam
+)
 
 const ReactButton = {
   props: ['status'],
   data () {
     return {
-      filterWord: ''
+      filterWord: '',
+      expanded: false
     }
   },
   components: {
@@ -24,41 +32,90 @@ const ReactButton = {
       }
       close()
     },
+    onShow () {
+      this.expanded = true
+      this.focusInput()
+    },
+    onClose () {
+      this.expanded = false
+    },
     focusInput () {
       this.$nextTick(() => {
         const input = this.$el.querySelector('input')
         if (input) input.focus()
       })
+    },
+    // Vaguely adjusted copypaste from emoji_input and emoji_picker!
+    maybeLocalizedEmojiNamesAndKeywords (emoji) {
+      const names = [emoji.displayText]
+      const keywords = []
+
+      if (emoji.displayTextI18n) {
+        names.push(this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args))
+      }
+
+      if (emoji.annotations) {
+        this.languages.forEach(lang => {
+          names.push(emoji.annotations[lang]?.name)
+
+          keywords.push(...(emoji.annotations[lang]?.keywords || []))
+        })
+      }
+
+      return {
+        names: names.filter(k => k),
+        keywords: keywords.filter(k => k)
+      }
+    },
+    maybeLocalizedEmojiName (emoji) {
+      if (!emoji.annotations) {
+        return emoji.displayText
+      }
+
+      if (emoji.displayTextI18n) {
+        return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
+      }
+
+      for (const lang of this.languages) {
+        if (emoji.annotations[lang]?.name) {
+          return emoji.annotations[lang].name
+        }
+      }
+
+      return emoji.displayText
     }
   },
   computed: {
     commonEmojis () {
-      return [
-        { displayText: 'thumbsup', replacement: '👍' },
-        { displayText: 'angry', replacement: '😠' },
-        { displayText: 'eyes', replacement: '👀' },
-        { displayText: 'joy', replacement: '😂' },
-        { displayText: 'fire', replacement: '🔥' }
-      ]
+      const hardcodedSet = new Set(['👍', '😠', '👀', '😂', '🔥'])
+      return this.$store.getters.standardEmojiList.filter(emoji => hardcodedSet.has(emoji.replacement))
+    },
+    languages () {
+      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
     },
     emojis () {
       if (this.filterWord !== '') {
-        const filterWordLowercase = this.filterWord.toLowerCase()
-        let orderedEmojiList = []
-        for (const emoji of this.$store.state.instance.emoji) {
-          if (emoji.replacement === this.filterWord) return [emoji]
+        const keywordLowercase = trim(this.filterWord.toLowerCase())
+
+        const orderedEmojiList = []
+        for (const emoji of this.$store.getters.standardEmojiList) {
+          const indices = this.maybeLocalizedEmojiNamesAndKeywords(emoji)
+            .keywords
+            .map(k => k.toLowerCase().indexOf(keywordLowercase))
+            .filter(k => k > -1)
+
+          const indexOfKeyword = indices.length ? Math.min(...indices) : -1
 
-          const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
-          if (indexOfFilterWord > -1) {
-            if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
-              orderedEmojiList[indexOfFilterWord] = []
+          if (indexOfKeyword > -1) {
+            if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
+              orderedEmojiList[indexOfKeyword] = []
             }
-            orderedEmojiList[indexOfFilterWord].push(emoji)
+            orderedEmojiList[indexOfKeyword].push(emoji)
           }
         }
         return orderedEmojiList.flat()
       }
-      return this.$store.state.instance.emoji || []
+      return this.$store.getters.standardEmojiList || []
     },
     mergedConfig () {
       return this.$store.getters.mergedConfig
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c69c315b..0c5fe321 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -6,14 +6,17 @@
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
     remove-padding
-    @show="focusInput"
+    popover-class="ReactButton popover-default"
+    @show="onShow"
+    @close="onClose"
   >
-    <template v-slot:content="{close}">
+    <template #content="{close}">
       <div class="reaction-picker-filter">
         <input
           v-model="filterWord"
           size="1"
           :placeholder="$t('emoji.search_emoji')"
+          @input="$event.target.composing = false"
         >
       </div>
       <div class="reaction-picker">
@@ -21,7 +24,7 @@
           v-for="emoji in commonEmojis"
           :key="emoji.replacement"
           class="emoji-button"
-          :title="emoji.displayText"
+          :title="maybeLocalizedEmojiName(emoji)"
           @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}
@@ -31,7 +34,7 @@
           v-for="(emoji, key) in emojis"
           :key="key"
           class="emoji-button"
-          :title="emoji.displayText"
+          :title="maybeLocalizedEmojiName(emoji)"
           @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}
@@ -39,24 +42,39 @@
         <div class="reaction-bottom-fader" />
       </div>
     </template>
-    <template v-slot:trigger>
-      <button
+    <template #trigger>
+      <span
         class="button-unstyled popover-trigger"
         :title="$t('tool_tip.add_reaction')"
       >
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          :icon="['far', 'smile-beam']"
-        />
-      </button>
+        <FALayers>
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            :icon="['far', 'smile-beam']"
+          />
+          <FAIcon
+            v-show="!expanded"
+            class="focus-marker"
+            transform="shrink-6 up-9 right-17"
+            icon="plus"
+          />
+          <FAIcon
+            v-show="expanded"
+            class="focus-marker"
+            transform="shrink-6 up-9 right-17"
+            icon="times"
+          />
+        </FALayers>
+      </span>
     </template>
   </Popover>
 </template>
 
-<script src="./react_button.js" ></script>
+<script src="./react_button.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ReactButton {
   .reaction-picker-filter {
@@ -101,7 +119,7 @@
       cursor: pointer;
 
       flex-basis: 20%;
-      line-height: 1.5em;
+      line-height: 1.5;
       align-content: center;
 
       &:hover {
@@ -123,6 +141,21 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
+
+  }
+
+  .popover-trigger-button {
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+    }
   }
 }