mirror of
https://github.com/versia-pub/frontend.git
synced 2026-01-26 04:16:02 +01:00
refactor: ♻️ Redesign note UI
This commit is contained in:
Jesse Wierzbinski
parent
3627ac0ef8
commit
35f72e6197
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Button variant="ghost" class="max-w-14 w-full" size="sm">
|
||||
<Button variant="ghost" size="sm">
|
||||
<component :is="icon" class="size-4"/>
|
||||
<slot/>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="flex flex-row w-full max-w-sm items-stretch justify-between">
|
||||
<div class="flex items-center gap-1">
|
||||
<ActionButton
|
||||
:icon="Reply"
|
||||
@click="emit('reply')"
|
||||
|
|
@ -39,21 +39,6 @@
|
|||
:disabled="!authStore.isSignedIn"
|
||||
/>
|
||||
</Picker>
|
||||
<Menu
|
||||
:api-note-string="apiNoteString"
|
||||
:url="url"
|
||||
:remote-url="remoteUrl"
|
||||
:is-remote="isRemote"
|
||||
:author-id="authorId"
|
||||
@edit="emit('edit')"
|
||||
:note-id="noteId"
|
||||
@delete="emit('delete')"
|
||||
>
|
||||
<ActionButton
|
||||
:icon="Ellipsis"
|
||||
:title="m.busy_merry_cowfish_absorb()"
|
||||
/>
|
||||
</Menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,64 +1,43 @@
|
|||
<template>
|
||||
<div class="rounded grid grid-cols-[auto_1fr_auto] items-center gap-3">
|
||||
<HoverCard
|
||||
v-model:open="popupOpen"
|
||||
@update:open="() => {
|
||||
if (!preferences.popup_avatar_hover) {
|
||||
popupOpen = false;
|
||||
}
|
||||
}"
|
||||
:open-delay="2000"
|
||||
>
|
||||
<HoverCardTrigger :as-child="true">
|
||||
<NuxtLink
|
||||
:href="urlAsPath"
|
||||
:class="cn('relative size-12', smallLayout && 'size-8')"
|
||||
>
|
||||
<Avatar
|
||||
:class="cn('size-12 border border-card', smallLayout && 'size-8')"
|
||||
:src="author.avatar"
|
||||
:name="author.display_name"
|
||||
/>
|
||||
<Avatar
|
||||
v-if="cornerAvatar"
|
||||
class="size-6 border absolute -bottom-1 -right-1"
|
||||
:src="cornerAvatar"
|
||||
/>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<NuxtLink :href="urlAsPath">
|
||||
<Avatar :src="author.avatar" :name="author.display_name"/>
|
||||
</NuxtLink>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent class="w-96">
|
||||
<SmallCard :account="author"/>
|
||||
</HoverCardContent>
|
||||
</HoverCard>
|
||||
<Column :class="smallLayout && 'text-sm'">
|
||||
<Text class="font-semibold" v-render-emojis="author.emojis">
|
||||
{{
|
||||
author.display_name
|
||||
}}
|
||||
</Text>
|
||||
<div class="-mt-1">
|
||||
<Address as="span" :username="username" :domain="instance"/>
|
||||
·
|
||||
<Text
|
||||
as="span"
|
||||
muted
|
||||
class="ml-auto tracking-normal"
|
||||
:title="fullTime"
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<span
|
||||
class="text-sm font-semibold"
|
||||
v-render-emojis="author.emojis"
|
||||
>{{ author.display_name }}</span
|
||||
>
|
||||
{{ timeAgo }}
|
||||
</Text>
|
||||
</div>
|
||||
</Column>
|
||||
<div v-if="!smallLayout">
|
||||
<NuxtLink
|
||||
:href="noteUrlAsPath"
|
||||
class="text-xs text-muted-foreground"
|
||||
:title="visibilities[visibility].text"
|
||||
<div
|
||||
class="flex items-center gap-1 text-muted-foreground text-xs"
|
||||
>
|
||||
<component :is="visibilities[visibility].icon" class="size-4"/>
|
||||
</NuxtLink>
|
||||
<span>
|
||||
@{{ `${username}${instance ? `@${instance}` : ""}` }}
|
||||
</span>
|
||||
<span>·</span>
|
||||
<span>{{ timeAgo }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Menu
|
||||
:api-note-string="apiNoteString"
|
||||
:url="noteUrl"
|
||||
:remote-url="remoteUrl"
|
||||
:is-remote="isRemote"
|
||||
:author-id="author.id"
|
||||
@edit="emit('edit')"
|
||||
:note-id="noteId"
|
||||
@delete="emit('delete')"
|
||||
>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Ellipsis/>
|
||||
</Button>
|
||||
</Menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -67,29 +46,24 @@ import type {
|
|||
UseTimeAgoMessages,
|
||||
UseTimeAgoUnitNamesDefault,
|
||||
} from "@vueuse/core";
|
||||
import { AtSign, Globe, Lock, LockOpen } from "lucide-vue-next";
|
||||
import { AtSign, Ellipsis, Globe, Lock, LockOpen } from "lucide-vue-next";
|
||||
import type { z } from "zod";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getLocale } from "~~/paraglide/runtime";
|
||||
import Address from "../profiles/address.vue";
|
||||
import Avatar from "../profiles/avatar.vue";
|
||||
import SmallCard from "../profiles/small-card.vue";
|
||||
import Column from "../typography/layout/col.vue";
|
||||
import Text from "../typography/text.vue";
|
||||
import {
|
||||
HoverCard,
|
||||
HoverCardContent,
|
||||
HoverCardTrigger,
|
||||
} from "../ui/hover-card";
|
||||
import { Button } from "../ui/button";
|
||||
import Menu from "./menu.vue";
|
||||
|
||||
const { createdAt, noteUrl, author, authorUrl } = defineProps<{
|
||||
cornerAvatar?: string;
|
||||
visibility: z.infer<typeof Status.shape.visibility>;
|
||||
noteUrl: string;
|
||||
createdAt: Date;
|
||||
smallLayout?: boolean;
|
||||
author: z.infer<typeof Account>;
|
||||
authorUrl: string;
|
||||
remoteUrl?: string;
|
||||
apiNoteString: string;
|
||||
isRemote: boolean;
|
||||
noteId: string;
|
||||
}>();
|
||||
|
||||
const [username, instance] = author.acct.split("@");
|
||||
|
|
@ -117,6 +91,11 @@ const fullTime = new Intl.DateTimeFormat(getLocale(), {
|
|||
}).format(createdAt);
|
||||
const popupOpen = ref(false);
|
||||
|
||||
const emit = defineEmits<{
|
||||
edit: [];
|
||||
delete: [];
|
||||
}>();
|
||||
|
||||
const visibilities = {
|
||||
public: {
|
||||
icon: Globe,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<template>
|
||||
<Card as="article" class="relative gap-3 items-stretch">
|
||||
<Card
|
||||
as="article"
|
||||
:class="['relative gap-1.5 items-stretch bg-background', replyBar && 'pl-6']"
|
||||
>
|
||||
<div
|
||||
v-if="replyBar"
|
||||
class="absolute left-0 top-0 bottom-0 w-2 bg-border rounded-tl-md"
|
||||
/>
|
||||
<CardHeader as="header" class="space-y-2">
|
||||
<ReblogHeader
|
||||
v-if="note.reblog"
|
||||
|
|
@ -13,34 +20,18 @@
|
|||
:author-url="accountUrl"
|
||||
:corner-avatar="note.reblog ? note.account.avatar : undefined"
|
||||
:note-url="url"
|
||||
:is-remote="isRemote"
|
||||
:remote-url="noteToUse.url ?? undefined"
|
||||
:api-note-string="JSON.stringify(noteToUse, null, 4)"
|
||||
:visibility="noteToUse.visibility"
|
||||
:created-at="new Date(noteToUse.created_at)"
|
||||
:small-layout="smallLayout"
|
||||
@edit="useEvent('composer:edit', noteToUse)"
|
||||
@delete="useEvent('note:delete', noteToUse)"
|
||||
:note-id="noteToUse.id"
|
||||
class="z-1"
|
||||
/>
|
||||
<div
|
||||
v-if="topAvatarBar"
|
||||
:class="
|
||||
cn(
|
||||
'shrink-0 bg-border w-0.5 absolute top-0 h-7 left-12'
|
||||
)
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-if="bottomAvatarBar"
|
||||
:class="
|
||||
cn(
|
||||
'shrink-0 bg-border w-0.5 absolute bottom-0 h-[calc(100%-1.5rem)] left-12'
|
||||
)
|
||||
"
|
||||
></div>
|
||||
</CardHeader>
|
||||
<!-- Simply offset by the size of avatar + 0.75rem (the gap) -->
|
||||
<CardContent
|
||||
:class="
|
||||
['space-y-4', contentUnderUsername && (smallLayout ? 'ml-11' : 'ml-17')]
|
||||
"
|
||||
>
|
||||
<CardContent class="space-y-2">
|
||||
<Content
|
||||
:content="noteToUse.content"
|
||||
:quote="note.quote ?? undefined"
|
||||
|
|
@ -82,7 +73,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { Status } from "@versia/client/schemas";
|
||||
import type { z } from "zod";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
|
||||
import Actions from "./actions.vue";
|
||||
import Content from "./content.vue";
|
||||
|
|
@ -92,13 +82,14 @@ import ReblogHeader from "./reblog-header.vue";
|
|||
|
||||
type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
|
||||
|
||||
const { note } = defineProps<{
|
||||
const {
|
||||
note,
|
||||
hideActions,
|
||||
replyBar = false,
|
||||
} = defineProps<{
|
||||
note: PartialBy<z.infer<typeof Status>, "reblog" | "quote">;
|
||||
hideActions?: boolean;
|
||||
smallLayout?: boolean;
|
||||
contentUnderUsername?: boolean;
|
||||
topAvatarBar?: boolean;
|
||||
bottomAvatarBar?: boolean;
|
||||
replyBar?: boolean;
|
||||
}>();
|
||||
|
||||
// Notes can be reblogs, in which case the actual thing to render is inside the reblog property
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 flex-wrap">
|
||||
<div class="flex flex-row gap-1 flex-wrap">
|
||||
<Reaction
|
||||
v-for="reaction in reactions"
|
||||
:key="reaction.name"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
v-if="emoji"
|
||||
:src="emoji.url"
|
||||
:alt="emoji.shortcode"
|
||||
class="h-[1lh] align-middle inline not-prose"
|
||||
class="h-lh align-middle inline not-prose"
|
||||
>
|
||||
<span v-else>{{ reaction.name }}</span>
|
||||
{{ formatNumber(reaction.count) }}
|
||||
|
|
|
|||
|
|
@ -4,15 +4,10 @@
|
|||
v-if="parent"
|
||||
:note="parent"
|
||||
:hide-actions="true"
|
||||
:content-under-username="true"
|
||||
:bottom-avatar-bar="true"
|
||||
class="border-b-0 rounded-b-none"
|
||||
/>
|
||||
<Note
|
||||
:note="note"
|
||||
:class="parent && 'border-t-0 rounded-t-none'"
|
||||
:top-avatar-bar="!!parent"
|
||||
:reply-bar="true"
|
||||
class="rounded-b-none"
|
||||
/>
|
||||
<Note :note="note" :class="parent && 'border-t-0 rounded-t-none'"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue