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

Minor fixes batch

Closes #1192, #1193, and #1196

See merge request pleroma/pleroma-fe!1651
This commit is contained in:
HJ 2022-11-21 19:35:49 +00:00
commit 896cbf89f6
6 changed files with 108 additions and 63 deletions

View File

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

View File

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

View File

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

View File

@ -1,4 +1,5 @@
import Popover from '../popover/popover.vue' import Popover from '../popover/popover.vue'
import { ensureFinalFallback } from '../../i18n/languages.js'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons' import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
import { faSmileBeam } from '@fortawesome/free-regular-svg-icons' import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
@ -43,31 +44,73 @@ const ReactButton = {
const input = this.$el.querySelector('input') const input = this.$el.querySelector('input')
if (input) input.focus() 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: { computed: {
commonEmojis () { commonEmojis () {
return [ const hardcodedSet = new Set(['👍', '😠', '👀', '😂', '🔥'])
{ displayText: 'thumbsup', replacement: '👍' }, return this.$store.getters.standardEmojiList.filter(emoji => hardcodedSet.has(emoji.replacement))
{ displayText: 'angry', replacement: '😠' }, },
{ displayText: 'eyes', replacement: '👀' }, languages () {
{ displayText: 'joy', replacement: '😂' }, return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
{ displayText: 'fire', replacement: '🔥' }
]
}, },
emojis () { emojis () {
if (this.filterWord !== '') { if (this.filterWord !== '') {
const filterWordLowercase = trim(this.filterWord.toLowerCase()) const keywordLowercase = trim(this.filterWord.toLowerCase())
const orderedEmojiList = [] const orderedEmojiList = []
for (const emoji of this.$store.getters.standardEmojiList) { 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 indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase) const indexOfKeyword = indices.length ? Math.min(...indices) : -1
if (indexOfFilterWord > -1) {
if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) { if (indexOfKeyword > -1) {
orderedEmojiList[indexOfFilterWord] = [] if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
orderedEmojiList[indexOfKeyword] = []
} }
orderedEmojiList[indexOfFilterWord].push(emoji) orderedEmojiList[indexOfKeyword].push(emoji)
} }
} }
return orderedEmojiList.flat() return orderedEmojiList.flat()

View File

@ -24,7 +24,7 @@
v-for="emoji in commonEmojis" v-for="emoji in commonEmojis"
:key="emoji.replacement" :key="emoji.replacement"
class="emoji-button" class="emoji-button"
:title="emoji.displayText" :title="maybeLocalizedEmojiName(emoji)"
@click="addReaction($event, emoji.replacement, close)" @click="addReaction($event, emoji.replacement, close)"
> >
{{ emoji.replacement }} {{ emoji.replacement }}
@ -34,7 +34,7 @@
v-for="(emoji, key) in emojis" v-for="(emoji, key) in emojis"
:key="key" :key="key"
class="emoji-button" class="emoji-button"
:title="emoji.displayText" :title="maybeLocalizedEmojiName(emoji)"
@click="addReaction($event, emoji.replacement, close)" @click="addReaction($event, emoji.replacement, close)"
> >
{{ emoji.replacement }} {{ emoji.replacement }}

View File

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