versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Improve note design

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-11-04 22:45:54 +01:00
parent c188d97dee
commit 4c3b637197
No known key found for this signature in database
2 changed files with 60 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
components/social-elements/notes/header.vue
View file

@ -9,8 +9,7 @@
<div class="flex flex-row text-sm items-center justify-between w-full"> <div class="flex flex-row text-sm items-center justify-between w-full">
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all"> <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
<Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect"> <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
{{ {{ note?.account.display_name }}
note?.account.display_name }}
</Skeleton> </Skeleton>
</NuxtLink> </NuxtLink>
<NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0"> <NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0">
@ -33,36 +32,43 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all"> <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
<Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect"> <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
{{ {{ note?.account.display_name }}
note?.account.display_name }}
</Skeleton> </Skeleton>
</NuxtLink> </NuxtLink>
<NuxtLink :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0" <NuxtLink v-if="note" :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
:alt="fullTime" :title="fullTime"> :title="visibilities[note.visibility].text">
<Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect"> <iconify-icon :icon="visibilities[note.visibility].icon" width="1.25rem" height="1.25rem"
{{ timeAgo }} class="text-gray-400" aria-hidden="true" />
</Skeleton> <span class="sr-only">{{ visibilities[note.visibility].text }}</span>
</NuxtLink> </NuxtLink>
</div> </div>
<span class="text-gray-300 text-sm line-clamp-1 break-all w-full group"> <div class="flex flex-row items-center justify-between w-full group">
<Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect"> <span class="text-gray-300 text-sm line-clamp-1 break-all w-full">
<span class="group-hover:hidden"> <Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
@{{ <div class="group-hover:hidden">
note?.account.acct <span class="font-bold bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">@{{ username }}</span><span class="text-gray-500">{{ instance && "@" }}{{ instance }}</span>
}}</span> &middot; <span
<span @click="copyAccount" v-if="!hasCopied" class="text-gray-400 cursor-help ml-auto" :alt="fullTime"
class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1"> :title="fullTime">
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200" <Skeleton :enabled="!note" :min-width="10" :max-width="50" shape="rect">
aria-hidden="true" /> {{ timeAgo }}
Click to copy </Skeleton>
</span> </span >
<span v-else class="hidden group-hover:flex select-none items-center gap-x-1"> </div>
<iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500" <span @click="copyAccount" v-if="!hasCopied"
aria-hidden="true" /> class="hidden select-none w-full group-hover:flex cursor-pointer items-center gap-x-1">
Copied! <iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
</span> aria-hidden="true" />
</Skeleton> Click to copy
</span> </span>
<span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
<iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
aria-hidden="true" />
Copied!
</span>
</Skeleton>
</span>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -78,9 +84,12 @@ const props = defineProps<{
small?: boolean; small?: boolean;
}>(); }>();
const username = props.note?.account.acct.split("@")[0];
const instance = props.note?.account.acct.split("@")[1];
const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`; const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
const accountUrl = props.note && `/@${props.note.account.acct}`; const accountUrl = props.note && `/@${props.note.account.acct}`;
const timeAgo = useTimeAgo(props.note?.created_at ?? 0); const timeAgo = useTimeAgo(props.note?.created_at ?? 0, {});
const fullTime = Intl.DateTimeFormat("default", { const fullTime = Intl.DateTimeFormat("default", {
dateStyle: "medium", dateStyle: "medium",
timeStyle: "short", timeStyle: "short",
@ -97,4 +106,23 @@ const copyAccount = () => {
}, 2000); }, 2000);
} }
}; };
const visibilities = {
public: {
icon: "tabler:world",
text: "This note is public: it can be seen by anyone.",
},
unlisted: {
icon: "tabler:lock-open",
text: "This note is unlisted: it can be seen by anyone with the link.",
},
private: {
icon: "tabler:lock",
text: "This note is private: it can only be seen by followers.",
},
direct: {
icon: "tabler:mail",
text: "This note is direct: it can only be seen by mentioned users.",
},
};
</script> </script>

7
components/social-elements/notes/interactions/row.vue
View file

@ -5,27 +5,26 @@
:disabled="!identity"> :disabled="!identity">
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up" <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" /> class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.replies_count) }}</span> <span class="text-gray-400 mt-0.5 ml-2" v-if="note.replies_count">{{ numberFormat(note.replies_count) }}</span>
</InteractionButton> </InteractionButton>
<InteractionButton @click="likeFn" :disabled="!identity"> <InteractionButton @click="likeFn" :disabled="!identity">
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!note.favourited" <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!note.favourited"
class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" /> class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" /> class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.favourites_count) }}</span> <span class="text-gray-400 mt-0.5 ml-2" v-if="note.favourites_count">{{ numberFormat(note.favourites_count) }}</span>
</InteractionButton> </InteractionButton>
<InteractionButton @click="reblogFn" :disabled="!identity"> <InteractionButton @click="reblogFn" :disabled="!identity">
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!note.reblogged" <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!note.reblogged"
class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" /> class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-else <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-else
class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" /> class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.reblogs_count) }}</span> <span class="text-gray-400 mt-0.5 ml-2" v-if="note.reblogs_count">{{ numberFormat(note.reblogs_count) }}</span>
</InteractionButton> </InteractionButton>
<InteractionButton @click="useEvent('note:quote', note)" <InteractionButton @click="useEvent('note:quote', note)"
:disabled="!identity"> :disabled="!identity">
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote" <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" /> class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
</InteractionButton> </InteractionButton>
<NoteMenu v-model:note="note" :url="url" :remove="remove" /> <NoteMenu v-model:note="note" :url="url" :remove="remove" />
</div> </div>