Skip to content

Commit

Permalink
feat: ✨ Improve note design
Browse files Browse the repository at this point in the history
  • Loading branch information
@CPlusPatch
CPlusPatch committed Nov 4, 2024
1 parent c188d97 commit 4c3b637
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 33 deletions.
86 changes: 57 additions & 29 deletions components/social-elements/notes/header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
<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">
<Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
{{
note?.account.display_name }}
{{ note?.account.display_name }}
</Skeleton>
</NuxtLink>
<NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0">
Expand All @@ -33,36 +32,43 @@
<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">
<Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
{{
note?.account.display_name }}
{{ note?.account.display_name }}
</Skeleton>
</NuxtLink>
<NuxtLink :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
:alt="fullTime" :title="fullTime">
<Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
{{ timeAgo }}
</Skeleton>
<NuxtLink v-if="note" :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
:title="visibilities[note.visibility].text">
<iconify-icon :icon="visibilities[note.visibility].icon" width="1.25rem" height="1.25rem"
class="text-gray-400" aria-hidden="true" />
<span class="sr-only">{{ visibilities[note.visibility].text }}</span>
</NuxtLink>
</div>
<span class="text-gray-300 text-sm line-clamp-1 break-all w-full group">
<Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
<span class="group-hover:hidden">
@{{
note?.account.acct
}}</span>
<span @click="copyAccount" v-if="!hasCopied"
class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
aria-hidden="true" />
Click to copy
</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 class="flex flex-row items-center justify-between w-full group">
<span class="text-gray-300 text-sm line-clamp-1 break-all w-full">
<Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
<div class="group-hover:hidden">
<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>
&middot; <span
class="text-gray-400 cursor-help ml-auto" :alt="fullTime"
:title="fullTime">
<Skeleton :enabled="!note" :min-width="10" :max-width="50" shape="rect">
{{ timeAgo }}
</Skeleton>
</span >
</div>
<span @click="copyAccount" v-if="!hasCopied"
class="hidden select-none w-full group-hover:flex cursor-pointer items-center gap-x-1">
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
aria-hidden="true" />
Click to copy
</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>
</template>
Expand All @@ -78,9 +84,12 @@ const props = defineProps<{
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 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", {
dateStyle: "medium",
timeStyle: "short",
Expand All @@ -97,4 +106,23 @@ const copyAccount = () => {
}, 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>
7 changes: 3 additions & 4 deletions components/social-elements/notes/interactions/row.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,26 @@
:disabled="!identity">
<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" />
<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 @click="likeFn" :disabled="!identity">
<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" />
<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" />
<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 @click="reblogFn" :disabled="!identity">
<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" />
<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" />
<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 @click="useEvent('note:quote', note)"
:disabled="!identity">
<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" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
</InteractionButton>
<NoteMenu v-model:note="note" :url="url" :remove="remove" />
</div>
Expand Down

0 comments on commit 4c3b637

Please sign in to comment.