commit: 896cbf89f6431c0198eb2fb50fc7cef9cce05b3c
parent 513b81a23bd3d6aa308f538a2705d690fe90dc40
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Mon, 21 Nov 2022 19:35:49 +0000
Merge branch 'minor-fixes-batch' into 'develop'
Minor fixes batch
Closes #1192, #1193, and #1196
See merge request pleroma/pleroma-fe!1651
Diffstat:
6 files changed, 108 insertions(+), 63 deletions(-)
diff --git a/src/components/color_input/color_input.scss b/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
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/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>
diff --git a/src/components/navigation/navigation_pins.vue b/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,
diff --git a/src/components/react_button/react_button.js b/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()
diff --git a/src/components/react_button/react_button.vue b/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 }}
diff --git a/src/components/staff_panel/staff_panel.js b/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
