diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2024-10-03 15:12:07 +0900 |
|---|---|---|
| committer | syuilo <4439005+syuilo@users.noreply.github.com> | 2024-10-03 15:12:07 +0900 |
| commit | 87617dca39862fded4bd3751e8e2807dd42a32fb (patch) | |
| tree | c09c95f85dee422037e5e2e82005ef9b14c52507 /packages/frontend | |
| parent | fix(frontend): データセーバーを有効にしているときにメン... (diff) | |
| download | misskey-87617dca39862fded4bd3751e8e2807dd42a32fb.tar.gz misskey-87617dca39862fded4bd3751e8e2807dd42a32fb.tar.bz2 misskey-87617dca39862fded4bd3751e8e2807dd42a32fb.zip | |
refactor & performance improvements of MkMention
Diffstat (limited to 'packages/frontend')
| -rw-r--r-- | packages/frontend/src/components/MkMention.vue | 9 |
1 files changed, 3 insertions, 6 deletions
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue index e809aebe13..71bd5addfb 100644 --- a/packages/frontend/src/components/MkMention.vue +++ b/packages/frontend/src/components/MkMention.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <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=""> <span> <span>@{{ username }}</span> @@ -16,7 +16,6 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { toUnicode } from 'punycode'; import { computed } from 'vue'; -import tinycolor from 'tinycolor2'; import { host as localHost } from '@@/js/config.js'; import { $i } from '@/account.js'; import { defaultStore } from '@/store.js'; @@ -37,10 +36,6 @@ const isMe = $i && ( `@${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 ? getStaticImageUrl(`/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; border-radius: 999px; color: var(--mention); + background: color(from var(--mention) srgb r g b / 0.1); &.isMe { color: var(--mentionMe); + background: color(from var(--mentionMe) srgb r g b / 0.1); } } |