Merge branch 'minor-fixes-batch' into 'develop'

Minor fixes batch

Closes #1192, #1193, and #1196

See merge request pleroma/pleroma-fe!1651

src/components/color_input/color_input.scss

@@ -27,16 +27,16 @@
       &.nativeColor {
         flex: 0 0 2em;
         min-width: 2em;
-        align-self: center;
-        height: 100%;
+        align-self: stretch;
+        min-height: 100%;
       }
     }
     .computedIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
       min-width: 2em;
-      align-self: center;
-      height: 100%;
+      align-self: stretch;
+      min-height: 100%;
     }
     .transparentIndicator {
       // forgot to install counter-strike source, ooops

src/components/emoji_reactions/emoji_reactions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="emoji-reactions">
+  <div class="EmojiReactions">
     <UserListPopover
       v-for="(reaction) in emojiReactions"
       :key="reaction.name"
@@ -7,7 +7,7 @@
     >
       <button
         class="emoji-reaction btn button-default"
-        :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :class="{ '-picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
@@ -30,53 +30,55 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.emoji-reactions {
+.EmojiReactions {
   display: flex;
   margin-top: 0.25em;
   flex-wrap: wrap;
-}
 
-.emoji-reaction {
-  padding: 0 0.5em;
-  margin-right: 0.5em;
-  margin-top: 0.5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  .reaction-emoji {
-    width: 1.25em;
-    margin-right: 0.25em;
-  }
-  &:focus {
-    outline: none;
-  }
+  .emoji-reaction {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+    margin-top: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
 
-  &.not-clickable {
-    cursor: default;
-    &:hover {
-      box-shadow: $fallback--buttonShadow;
-      box-shadow: var(--buttonShadow);
+    .reaction-emoji {
+      width: 1.25em;
+      margin-right: 0.25em;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &.not-clickable {
+      cursor: default;
+      &:hover {
+        box-shadow: $fallback--buttonShadow;
+        box-shadow: var(--buttonShadow);
+      }
+    }
+
+    &.-picked-reaction {
+      border: 1px solid var(--accent, $fallback--link);
+      margin-left: -1px; // offset the border, can't use inset shadows either
+      margin-right: calc(0.5em - 1px);
     }
   }
-}
 
-.emoji-reaction-expand {
-  padding: 0 0.5em;
-  margin-right: 0.5em;
-  margin-top: 0.5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:hover {
-    text-decoration: underline;
+  .emoji-reaction-expand {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+    margin-top: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:hover {
+      text-decoration: underline;
+    }
   }
-}
 
-.picked-reaction {
-  border: 1px solid var(--accent, $fallback--link);
-  margin-left: -1px; // offset the border, can't use inset shadows either
-  margin-right: calc(0.5em - 1px);
 }
-
 </style>

src/components/navigation/navigation_pins.vue

@@ -61,7 +61,7 @@
 
     &.router-link-active {
       color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
+      color: var(--panelText, $fallback--text);
       border-bottom: 4px solid;
 
       & .svg-inline--fa,

src/components/react_button/react_button.js

@@ -1,4 +1,5 @@
 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'
@@ -43,31 +44,73 @@ const ReactButton = {
         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 = trim(this.filterWord.toLowerCase())
+        const keywordLowercase = trim(this.filterWord.toLowerCase())
+
         const orderedEmojiList = []
         for (const emoji of this.$store.getters.standardEmojiList) {
-          if (emoji.replacement === this.filterWord) return [emoji]
+          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()

src/components/react_button/react_button.vue

@@ -24,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 }}
@@ -34,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 }}

src/components/staff_panel/staff_panel.js

@@ -13,7 +13,7 @@ const StaffPanel = {
   },
   computed: {
     groupedStaffAccounts () {
-      const staffAccounts = map(this.staffAccounts, this.findUser).filter(_ => _)
+      const staffAccounts = map(this.staffAccounts, this.findUserByName).filter(_ => _)
       const groupedStaffAccounts = groupBy(staffAccounts, 'role')
 
       return [
@@ -22,7 +22,7 @@ const StaffPanel = {
       ].filter(group => group.users)
     },
     ...mapGetters([
-      'findUser'
+      'findUserByName'
     ]),
     ...mapState({
       staffAccounts: state => state.instance.staffAccounts