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:
commit
896cbf89f6
@ -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
|
||||||
|
@ -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>
|
||||||
|
@ -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,
|
||||||
|
@ -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()
|
||||||
|
@ -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 }}
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user