mirror of
https://iceshrimp.dev/Crimekillz/jointrashposs.git
synced 2024-11-25 02:09:05 +01:00
82 lines
3.4 KiB
Vue
82 lines
3.4 KiB
Vue
<template>
|
|
<div class="rounded-xl h-auto w-full px-4 py-3.5 md:px-8 md:py-7 flex max-w-md border border-slate-300 dark:border-slate-800">
|
|
<div class="mr-3.5">
|
|
<div class="w-[46px] h-[46px] md:w-[58px] md:h-[58px] relative rounded-full bg-slate-50 dark:bg-slate-900">
|
|
<img class="w-full h-full object-cover rounded-full" :src="avatar" />
|
|
<img
|
|
v-for="decoration in decorations"
|
|
:src="decoration.url"
|
|
class="absolute block min-w-[200%] w-[200%] -top-1/2 -left-1/2 select-none pointer-events-none"
|
|
:style="getStyle(decoration)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="text-sm">
|
|
<div class="flex space-x-2">
|
|
<div class="font-bold">{{ $t('_avatarDecorationPreview._placeholder.username') }}</div>
|
|
<div class="opacity-70">@ai</div>
|
|
</div>
|
|
<div><slot>{{ $t('_avatarDecorationPreview._placeholder.noteText') }}</slot></div>
|
|
<div class="mt-1 flex flex-wrap gap-2">
|
|
<span v-for="reaction in reactions" class="inline-flex items-center space-x-1 px-1.5 py-1 rounded bg-gray-100 dark:bg-gray-800">
|
|
<MkCustomEmoji class="hover:!transform-none" v-if="reaction.name.startsWith(':')" :name="reaction.name" :url="reaction.url" :useOriginalSize="true" />
|
|
<div v-else class="text-xl leading-[1.35] select-none">{{ reaction.name }}</div>
|
|
<span class="text-sm">{{ reaction.count }}</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex space-x-3.5 md:space-x-7 opacity-60">
|
|
<div class="p-2"><ReplyIco class="w-3 h-3 md:h-4 md:w-4 block stroke-1 stroke-current reply" /></div>
|
|
<div class="p-2"><RenoteIco class="w-3 h-3 md:h-4 md:w-4 block stroke-1 stroke-current" /></div>
|
|
<div class="p-2"><ReactionIco class="w-3 h-3 md:h-4 md:w-4 block stroke-1 stroke-current" /></div>
|
|
<div class="p-2"><MoreIco class="w-3 h-3 md:h-4 md:w-4 block stroke-1 stroke-current" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type * as Misskey from 'misskey-js';
|
|
import ReplyIco from 'bi/arrow-return-left.svg';
|
|
import RenoteIco from 'bi/repeat.svg';
|
|
import ReactionIco from 'bi/plus-lg.svg';
|
|
import MoreIco from 'bi/three-dots.svg';
|
|
import type { HTMLAttributes } from 'nuxt/dist/app/compat/capi';
|
|
|
|
withDefaults(defineProps<{
|
|
avatar?: string;
|
|
decorations?: (Omit<Misskey.entities.User['avatarDecorations'][number], 'id'>)[];
|
|
reactions?: {
|
|
name: string;
|
|
url?: string;
|
|
count: number;
|
|
}[];
|
|
}>(), {
|
|
avatar: '/img/docs/fukidashi/doya_ai.webp',
|
|
});
|
|
|
|
function getStyle(decoration: Omit<Misskey.entities.User['avatarDecorations'][number], 'id'>): HTMLAttributes['style'] {
|
|
const angle = decoration.angle ?? 0;
|
|
const rotate = angle === 0 ? undefined : `${angle * 360}deg`;
|
|
const scaleX = decoration.flipH ? -1 : 1;
|
|
const scale = scaleX === 1 ? undefined : `${scaleX} 1`;
|
|
const offsetX = decoration.offsetX ?? 0;
|
|
const offsetY = decoration.offsetY ?? 0;
|
|
const translate = (offsetX === 0 && offsetY === 0) ? undefined : `${offsetX * 100}% ${offsetY * 100}%`;
|
|
|
|
return {
|
|
rotate,
|
|
scale,
|
|
translate,
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.reply {
|
|
transform: rotateX(180deg);
|
|
}
|
|
</style>
|
|
<!--
|
|
|
|
|
|
--> |