mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-24 02:06:12 +03:00
feat: adjust hide username emojis pref to only hide in timeline (#1631)
This commit is contained in:
parent
7dfe91bb9d
commit
a1b2da3d5e
9 changed files with 28 additions and 20 deletions
|
@ -1,18 +1,17 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { mastodon } from 'masto'
|
import type { mastodon } from 'masto'
|
||||||
|
|
||||||
defineProps<{
|
const { account, hideEmojis = false } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
|
hideEmojis?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const userSettings = useUserSettings()
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ContentRich
|
<ContentRich
|
||||||
:content="getDisplayName(account, { rich: true })"
|
:content="getDisplayName(account, { rich: true })"
|
||||||
:emojis="account.emojis"
|
:emojis="account.emojis"
|
||||||
:show-emojis="!getPreferences(userSettings, 'hideUsernameEmojis')"
|
:hide-emojis="hideEmojis"
|
||||||
:markdown="false"
|
:markdown="false"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -6,6 +6,8 @@ const { link = true, avatar = true } = defineProps<{
|
||||||
link?: boolean
|
link?: boolean
|
||||||
avatar?: boolean
|
avatar?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const userSettings = useUserSettings()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -16,7 +18,7 @@ const { link = true, avatar = true } = defineProps<{
|
||||||
min-w-0 flex gap-2 items-center
|
min-w-0 flex gap-2 items-center
|
||||||
>
|
>
|
||||||
<AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
|
<AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
|
||||||
<AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all />
|
<AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" line-clamp-1 ws-pre-wrap break-all />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</AccountHoverWrapper>
|
</AccountHoverWrapper>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -7,12 +7,12 @@ defineOptions({
|
||||||
const {
|
const {
|
||||||
content,
|
content,
|
||||||
emojis,
|
emojis,
|
||||||
showEmojis = true,
|
hideEmojis = false,
|
||||||
markdown = true,
|
markdown = true,
|
||||||
} = defineProps<{
|
} = defineProps<{
|
||||||
content: string
|
content: string
|
||||||
emojis?: mastodon.v1.CustomEmoji[]
|
emojis?: mastodon.v1.CustomEmoji[]
|
||||||
showEmojis?: boolean
|
hideEmojis?: boolean
|
||||||
markdown?: boolean
|
markdown?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@ export default () => h(
|
||||||
{ class: 'content-rich', dir: 'auto' },
|
{ class: 'content-rich', dir: 'auto' },
|
||||||
contentToVNode(content, {
|
contentToVNode(content, {
|
||||||
emojis: emojisObject.value,
|
emojis: emojisObject.value,
|
||||||
showEmojis,
|
hideEmojis,
|
||||||
markdown,
|
markdown,
|
||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|
|
@ -9,7 +9,7 @@ defineProps<{
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
exact-active-class="text-primary"
|
exact-active-class="text-primary"
|
||||||
block w-full group focus:outline-none
|
block w-full group focus:outline-none text-start
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
w-full flex w-fit px5 py3 md:gap2 gap4 items-center
|
w-full flex w-fit px5 py3 md:gap2 gap4 items-center
|
||||||
|
@ -18,7 +18,8 @@ defineProps<{
|
||||||
>
|
>
|
||||||
<div flex-1 flex items-center md:gap2 gap4>
|
<div flex-1 flex items-center md:gap2 gap4>
|
||||||
<div
|
<div
|
||||||
flex items-center justify-center flex-shrink-0
|
v-if="icon" flex items-center justify-center
|
||||||
|
flex-shrink-0
|
||||||
:class="$slots.description ? 'w-12 h-12' : ''"
|
:class="$slots.description ? 'w-12 h-12' : ''"
|
||||||
>
|
>
|
||||||
<slot name="icon">
|
<slot name="icon">
|
||||||
|
|
|
@ -5,6 +5,8 @@ const { account, link = true } = defineProps<{
|
||||||
account: mastodon.v1.Account
|
account: mastodon.v1.Account
|
||||||
link?: boolean
|
link?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const userSettings = useUserSettings()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -13,7 +15,7 @@ const { account, link = true } = defineProps<{
|
||||||
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
|
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
|
||||||
text-link-rounded
|
text-link-rounded
|
||||||
>
|
>
|
||||||
<AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all />
|
<AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" font-bold line-clamp-1 ws-pre-wrap break-all />
|
||||||
<AccountHandle :account="account" class="zen-none" />
|
<AccountHandle :account="account" class="zen-none" />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -8,7 +8,7 @@ import { emojiRegEx, getEmojiAttributes } from '../config/emojis'
|
||||||
|
|
||||||
export interface ContentParseOptions {
|
export interface ContentParseOptions {
|
||||||
emojis?: Record<string, mastodon.v1.CustomEmoji>
|
emojis?: Record<string, mastodon.v1.CustomEmoji>
|
||||||
showEmojis?: boolean
|
hideEmojis?: boolean
|
||||||
mentions?: mastodon.v1.StatusMention[]
|
mentions?: mastodon.v1.StatusMention[]
|
||||||
markdown?: boolean
|
markdown?: boolean
|
||||||
replaceUnicodeEmoji?: boolean
|
replaceUnicodeEmoji?: boolean
|
||||||
|
@ -82,7 +82,7 @@ export function parseMastodonHTML(
|
||||||
replaceUnicodeEmoji = true,
|
replaceUnicodeEmoji = true,
|
||||||
convertMentionLink = false,
|
convertMentionLink = false,
|
||||||
collapseMentionLink = false,
|
collapseMentionLink = false,
|
||||||
showEmojis = true,
|
hideEmojis = false,
|
||||||
mentions,
|
mentions,
|
||||||
status,
|
status,
|
||||||
inReplyToStatus,
|
inReplyToStatus,
|
||||||
|
@ -110,16 +110,16 @@ export function parseMastodonHTML(
|
||||||
...options.astTransforms || [],
|
...options.astTransforms || [],
|
||||||
]
|
]
|
||||||
|
|
||||||
if (showEmojis) {
|
if (hideEmojis) {
|
||||||
|
transforms.push(removeUnicodeEmoji)
|
||||||
|
transforms.push(removeCustomEmoji(options.emojis ?? {}))
|
||||||
|
}
|
||||||
|
else {
|
||||||
if (replaceUnicodeEmoji)
|
if (replaceUnicodeEmoji)
|
||||||
transforms.push(transformUnicodeEmoji)
|
transforms.push(transformUnicodeEmoji)
|
||||||
|
|
||||||
transforms.push(replaceCustomEmoji(options.emojis ?? {}))
|
transforms.push(replaceCustomEmoji(options.emojis ?? {}))
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
transforms.push(removeUnicodeEmoji)
|
|
||||||
transforms.push(removeCustomEmoji(options.emojis ?? {}))
|
|
||||||
}
|
|
||||||
|
|
||||||
if (markdown)
|
if (markdown)
|
||||||
transforms.push(transformMarkdown)
|
transforms.push(transformMarkdown)
|
||||||
|
|
|
@ -30,8 +30,8 @@ export function contentToVNode(
|
||||||
const textContents = getTexualAstComponents(tree.children)
|
const textContents = getTexualAstComponents(tree.children)
|
||||||
|
|
||||||
// if the username only contains emojis, we should probably show the emojis anyway to avoid a blank name
|
// if the username only contains emojis, we should probably show the emojis anyway to avoid a blank name
|
||||||
if (!options?.showEmojis && textContents.length === 0)
|
if (options?.hideEmojis && textContents.length === 0)
|
||||||
tree = parseMastodonHTML(content, { ...options, showEmojis: true })
|
tree = parseMastodonHTML(content, { ...options, hideEmojis: false })
|
||||||
|
|
||||||
return h(Fragment, (tree.children as Node[] || []).map(n => treeToVNode(n)))
|
return h(Fragment, (tree.children as Node[] || []).map(n => treeToVNode(n)))
|
||||||
}
|
}
|
||||||
|
|
|
@ -412,6 +412,7 @@
|
||||||
"hide_reply_count": "Hide reply count",
|
"hide_reply_count": "Hide reply count",
|
||||||
"hide_translation": "Hide translation",
|
"hide_translation": "Hide translation",
|
||||||
"hide_username_emojis": "Hide username emojis",
|
"hide_username_emojis": "Hide username emojis",
|
||||||
|
"hide_username_emojis_description": "Hides emojis from usernames in timelines. Emojis will still be visible in their profiles.",
|
||||||
"label": "Preferences",
|
"label": "Preferences",
|
||||||
"title": "Experimental Features",
|
"title": "Experimental Features",
|
||||||
"user_picker": "User Picker",
|
"user_picker": "User Picker",
|
||||||
|
|
|
@ -78,6 +78,9 @@ const userSettings = useUserSettings()
|
||||||
@click="togglePreferences('hideUsernameEmojis')"
|
@click="togglePreferences('hideUsernameEmojis')"
|
||||||
>
|
>
|
||||||
{{ $t("settings.preferences.hide_username_emojis") }}
|
{{ $t("settings.preferences.hide_username_emojis") }}
|
||||||
|
<template #description>
|
||||||
|
{{ $t('settings.preferences.hide_username_emojis_description') }}
|
||||||
|
</template>
|
||||||
</SettingsToggleItem>
|
</SettingsToggleItem>
|
||||||
<h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
|
<h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
|
||||||
<div i-ri-flask-line />
|
<div i-ri-flask-line />
|
||||||
|
|
Loading…
Reference in a new issue