yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

refactor & performance improvements of MkMention

Browse source
This commit is contained in:
syuilo 2024-10-03 15:12:07 +09:00
parent 9dc058189e
commit 87617dca39
1 changed files with 3 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/frontend/src/components/MkMention.vue
View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }" :behavior="navigationBehavior"> <MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :behavior="navigationBehavior">
<img :class="$style.icon" :src="avatarUrl" alt=""> <img :class="$style.icon" :src="avatarUrl" alt="">
<span> <span>
<span>@{{ username }}</span> <span>@{{ username }}</span>
@ -16,7 +16,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup> <script lang="ts" setup>
import { toUnicode } from 'punycode'; import { toUnicode } from 'punycode';
import { computed } from 'vue'; import { computed } from 'vue';
import tinycolor from 'tinycolor2';
import { host as localHost } from '@@/js/config.js'; import { host as localHost } from '@@/js/config.js';
import { $i } from '@/account.js'; import { $i } from '@/account.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
@ -37,10 +36,6 @@ const isMe = $i && (
`@${props.username}@${toUnicode(props.host)}` === `@${$i.username}@${toUnicode(localHost)}`.toLowerCase() `@${props.username}@${toUnicode(props.host)}` === `@${$i.username}@${toUnicode(localHost)}`.toLowerCase()
); );
const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
bg.setAlpha(0.1);
const bgCss = bg.toRgbString();
const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages || defaultStore.state.dataSaver.avatar const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages || defaultStore.state.dataSaver.avatar
? getStaticImageUrl(`/avatar/@${props.username}@${props.host}`) ? getStaticImageUrl(`/avatar/@${props.username}@${props.host}`)
: `/avatar/@${props.username}@${props.host}`, : `/avatar/@${props.username}@${props.host}`,
@ -53,9 +48,11 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
padding: 4px 8px 4px 4px; padding: 4px 8px 4px 4px;
border-radius: 999px; border-radius: 999px;
color: var(--mention); color: var(--mention);
background: color(from var(--mention) srgb r g b / 0.1);
&.isMe { &.isMe {
color: var(--mentionMe); color: var(--mentionMe);
background: color(from var(--mentionMe) srgb r g b / 0.1);
} }
} }