worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix(frontend): Profile icon not appearing in toast notification

Browse source
This commit is contained in:
NoriDev 2023-05-16 17:30:32 +09:00
parent c249405448
commit c90d27b194
3 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/frontend/src/components/MkToast.vue
View file

@ -21,6 +21,7 @@
import { onMounted } from 'vue';
import * as os from '@/os';
import { defaultStore } from '@/store';
import { $i } from "@/account";
import CPAvatar from '@/components/global/toast-avatar.vue';
defineProps<{

20
packages/frontend/src/components/global/CPAvatar-Friendly.vue
View file

@ -1,17 +1,14 @@
<template>
<span v-if="!link" v-user-preview="preview ? user.id : undefined" :class="$style.root" class="_noSelect" :style="{ color }" :title="acct(user)" @click="onClick">
<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="$style.root" :style="{ color }" :title="acct(user)" @click="onClick">
<img :class="[$style.inner, {[$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect}]" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
</span>
<MkA v-else v-user-preview="preview ? user.id : undefined" class="_noSelect" :class="$style.root" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
<img :class="[$style.inner, {[$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect}]" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
</MkA>
</component>
</template>
<script lang="ts" setup>
import { onMounted, watch } from 'vue';
import { watch } from 'vue';
import * as misskey from 'misskey-js';
import MkA from './MkA.vue';
import { getStaticImageUrl } from '@/scripts/media-proxy';
import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
import { acct, userPage } from '@/filters/user';
@ -35,15 +32,20 @@ const emit = defineEmits<{
(ev: 'click', v: MouseEvent): void;
}>();
const bound = $computed(() => props.link
? { to: userPage(props.user), target: props.target }
: {});
const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(props.user.avatarUrl)
: props.user.avatarUrl);
function onClick(ev: MouseEvent) {
function onClick(ev: MouseEvent): void {
if (props.link) return;
emit('click', ev);
}
let color = $ref();
let color = $ref<string | undefined>();
watch(() => props.user.avatarBlurhash, () => {
color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);

17
packages/frontend/src/components/global/toast-avatar.vue
View file

@ -1,15 +1,13 @@
<template>
<span v-if="!link" v-user-preview="preview ? user.id : undefined" :class="$style.root" class="_noSelect" :style="{ color }" :title="acct(user)" @click="onClick">
<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="$style.root" :style="{ color }" :title="acct(user)" @click="onClick">
<img :class="$style.inner" :src="url" decoding="async"/>
</span>
<MkA v-else v-user-preview="preview ? user.id : undefined" class="_noSelect" :class="$style.root" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
<img :class="$style.inner" :src="url" decoding="async"/>
</MkA>
</component>
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import * as misskey from 'misskey-js';
import MkA from './MkA.vue';
import { getStaticImageUrl } from '@/scripts/media-proxy';
import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
import { acct, userPage } from '@/filters/user';
@ -30,15 +28,20 @@ const emit = defineEmits<{
(ev: 'click', v: MouseEvent): void;
}>();
const bound = $computed(() => props.link
? { to: userPage(props.user), target: props.target }
: {});
const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(props.user.avatarUrl)
: props.user.avatarUrl);
function onClick(ev: MouseEvent) {
function onClick(ev: MouseEvent): void {
if (props.link) return;
emit('click', ev);
}
let color = $ref();
let color = $ref<string | undefined>();
watch(() => props.user.avatarBlurhash, () => {
color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);