teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat(status): add visibility indicator

Browse source 
closes #117
This commit is contained in:
三咲智子 2022-11-26 11:02:26 +08:00
parent b379322ce2
commit 714b8d2bb1
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
2 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/status/StatusCard.vue
View file

@ -21,7 +21,7 @@ const rebloggedBy = $computed(() => props.status.reblog ? props.status.account :
const el = ref<HTMLElement>() const el = ref<HTMLElement>()
const router = useRouter() const router = useRouter()
function onclick(e: MouseEvent) { function onclick(e: MouseEvent | KeyboardEvent) {
const path = e.composedPath() as HTMLElement[] const path = e.composedPath() as HTMLElement[]
const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase())) const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
if (!el) if (!el)

15
components/status/StatusDetails.vue
View file

@ -12,6 +12,8 @@ const status = $computed(() => {
}) })
const date = useFormattedDateTime(status.createdAt) const date = useFormattedDateTime(status.createdAt)
const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === status.visibility)!)
</script> </script>
<template> <template>
@ -28,10 +30,15 @@ const date = useFormattedDateTime(status.createdAt)
:status="status" :status="status"
/> />
</StatusSpoiler> </StatusSpoiler>
<div> <div flex="~ gap-1" items-center op50 text-sm>
<span op50 text-sm> <div>{{ date }}</div>
{{ date }} {{ status.application?.name ? `· ${status.application?.name}` : '' }} <div>·</div>
</span> <CommonTooltip :content="visibility.label" placement="bottom">
<div :class="visibility.icon" />
</CommonTooltip>
<div v-if="status.application?.name">
· {{ status.application?.name }}
</div>
</div> </div>
<StatusActions :status="status" border="t base" pt-2 /> <StatusActions :status="status" border="t base" pt-2 />
</div> </div>