feat: hide actions in zen mode

zio/stable
Anthony Fu 2022-12-01 14:46:26 +08:00
parent 67ebc74321
commit 61311dbeaa
8 changed files with 306 additions and 193 deletions

View File

@ -1,115 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Status } from 'masto' import type { Status } from 'masto'
const { status: _status, details, command } = defineProps<{ const props = defineProps<{
status: Status status: Status
details?: boolean details?: boolean
command?: boolean command?: boolean
}>() }>()
let status = $ref<Status>({ ..._status })
watch(() => _status, (val) => { const { details, command } = $(props)
status = { ...val }
}, { deep: true, immediate: true })
const clipboard = useClipboard() const {
const router = useRouter() status,
const route = useRoute() isLoading,
toggleBookmark,
const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id) toggleFavourite,
toggleReblog,
// Use different states to let the user press different actions right after the other } = $(useStatusActions(props))
const isLoading = $ref({
reblogged: false,
favourited: false,
bookmarked: false,
pinned: false,
translation: false,
})
type Action = 'reblogged' | 'favourited' | 'bookmarked' | 'pinned'
type CountField = 'reblogsCount' | 'favouritesCount'
async function toggleStatusAction(action: Action, newStatus: Promise<Status>, countField?: CountField) {
// Optimistic update
status[action] = !status[action]
if (countField)
status[countField] += status[action] ? 1 : -1
try {
isLoading[action] = true
Object.assign(status, await newStatus)
}
finally {
isLoading[action] = false
}
}
const toggleReblog = () => toggleStatusAction(
'reblogged',
useMasto().statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
if (status.reblogged)
// returns the original status
return res.reblog!
return res
}),
'reblogsCount',
)
const toggleFavourite = () => toggleStatusAction(
'favourited',
useMasto().statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
'favouritesCount',
)
const toggleBookmark = () => toggleStatusAction(
'bookmarked',
useMasto().statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
)
const togglePin = async () => toggleStatusAction(
'pinned',
useMasto().statuses[status.pinned ? 'unpin' : 'pin'](status.id),
)
const { toggle: _toggleTranslation, translation, enabled: isTranslationEnabled } = useTranslation(_status)
const toggleTranslation = async () => {
isLoading.translation = true
await _toggleTranslation()
isLoading.translation = false
}
const copyLink = async (status: Status) => {
const url = getStatusPermalinkRoute(status)
if (url)
await clipboard.copy(`${location.origin}${url}`)
}
const deleteStatus = async () => {
// TODO confirm to delete
if (process.dev) {
// eslint-disable-next-line no-alert
const result = confirm('[DEV] Are you sure you want to delete this post?')
if (!result)
return
}
await useMasto().statuses.remove(status.id)
if (route.name === '@account-status')
router.back()
// TODO when timeline, remove this item
}
const deleteAndRedraft = async () => {
// TODO confirm to delete
if (process.dev) {
// eslint-disable-next-line no-alert
const result = confirm('[DEV] Are you sure you want to delete and re-draft this post?')
if (!result)
return
}
const { text } = await useMasto().statuses.remove(status.id)
openPublishDialog('dialog', getDraftFromStatus(status, text), true)
}
const reply = () => { const reply = () => {
if (details) { if (details) {
@ -120,13 +26,6 @@ const reply = () => {
openPublishDialog(key, draft()) openPublishDialog(key, draft())
} }
} }
function editStatus() {
openPublishDialog(`edit-${status.id}`, {
...getDraftFromStatus(status),
editingStatus: status,
})
}
</script> </script>
<template> <template>
@ -182,83 +81,5 @@ function editStatus() {
@click="toggleBookmark()" @click="toggleBookmark()"
/> />
</div> </div>
<CommonDropdown flex-none ml3 placement="bottom" :eager-mount="command">
<StatusActionButton
:content="$t('action.more')"
color="text-purple" hover="text-purple" group-hover="bg-purple/10"
icon="i-ri:more-line"
/>
<template #popper>
<div flex="~ col">
<CommonDropdownItem
:text="$t('menu.copy_link_to_post')"
icon="i-ri:link"
:command="command"
@click="copyLink(status)"
/>
<NuxtLink :to="status.url" target="_blank">
<CommonDropdownItem
v-if="status.url"
:text="$t('menu.open_in_original_site')"
icon="i-ri:arrow-right-up-line"
:command="command"
/>
</NuxtLink>
<CommonDropdownItem
v-if="isTranslationEnabled && status.language !== languageCode"
:text="translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post')"
icon="i-ri:translate"
:command="command"
@click="toggleTranslation"
/>
<template v-if="currentUser">
<template v-if="isAuthor">
<CommonDropdownItem
:text="status.pinned ? $t('menu.unpin_on_profile') : $t('menu.pin_on_profile')"
icon="i-ri:pushpin-line"
:command="command"
@click="togglePin"
/>
<CommonDropdownItem
:text="$t('menu.edit')"
icon="i-ri:edit-line"
:command="command"
@click="editStatus"
/>
<CommonDropdownItem
:text="$t('menu.delete')"
icon="i-ri:delete-bin-line"
text-red-600
:command="command"
@click="deleteStatus"
/>
<CommonDropdownItem
:text="$t('menu.delete_and_redraft')"
icon="i-ri:eraser-line"
text-red-600
:command="command"
@click="deleteAndRedraft"
/>
</template>
<template v-else>
<CommonDropdownItem
:text="$t('menu.mention_account', [`@${status.account.acct}`])"
icon="i-ri:at-line"
:command="command"
@click="mentionUser(status.account)"
/>
</template>
</template>
</div>
</template>
</CommonDropdown>
</div> </div>
</template> </template>

View File

@ -0,0 +1,206 @@
<script setup lang="ts">
import type { Status } from 'masto'
const props = defineProps<{
status: Status
details?: boolean
command?: boolean
}>()
const { details, command } = $(props)
const {
status,
isLoading,
toggleBookmark,
toggleFavourite,
togglePin,
toggleReblog,
} = $(useStatusActions(props))
const clipboard = useClipboard()
const router = useRouter()
const route = useRoute()
const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
const {
toggle: _toggleTranslation,
translation,
enabled: isTranslationEnabled,
} = useTranslation(props.status)
const toggleTranslation = async () => {
isLoading.translation = true
await _toggleTranslation()
isLoading.translation = false
}
const copyLink = async (status: Status) => {
const url = getStatusPermalinkRoute(status)
if (url)
await clipboard.copy(`${location.origin}${url}`)
}
const deleteStatus = async () => {
// TODO confirm to delete
if (process.dev) {
// eslint-disable-next-line no-alert
const result = confirm('[DEV] Are you sure you want to delete this post?')
if (!result)
return
}
await useMasto().statuses.remove(status.id)
if (route.name === '@account-status')
router.back()
// TODO when timeline, remove this item
}
const deleteAndRedraft = async () => {
// TODO confirm to delete
if (process.dev) {
// eslint-disable-next-line no-alert
const result = confirm('[DEV] Are you sure you want to delete and re-draft this post?')
if (!result)
return
}
const { text } = await useMasto().statuses.remove(status.id)
openPublishDialog('dialog', getDraftFromStatus(status, text), true)
}
const reply = () => {
if (details) {
// TODO focus to editor
}
else {
const { key, draft } = getReplyDraft(status)
openPublishDialog(key, draft())
}
}
function editStatus() {
openPublishDialog(`edit-${status.id}`, {
...getDraftFromStatus(status),
editingStatus: status,
})
}
</script>
<template>
<CommonDropdown flex-none ml3 placement="bottom" :eager-mount="command">
<StatusActionButton
:content="$t('action.more')"
color="text-purple" hover="text-purple" group-hover="bg-purple/10"
icon="i-ri:more-2-line"
/>
<template #popper>
<div flex="~ col">
<template v-if="isZenMode">
<CommonDropdownItem
:text="$t('action.reply')"
icon="i-ri:chat-3-line"
:command="command"
@click="reply()"
/>
<CommonDropdownItem
:text="status.reblogged ? $t('action.boosted') : $t('action.boost')"
icon="i-ri:repeat-fill"
:class="status.reblogged ? 'text-green' : ''"
:command="command"
:disabled="isLoading.reblogged"
@click="toggleReblog()"
/>
<CommonDropdownItem
:text="status.favourited ? $t('action.favourited') : $t('action.favourite')"
:icon="status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'"
:class="status.favourited ? 'text-rose' : ''"
:command="command"
:disabled="isLoading.favourited"
@click="toggleFavourite()"
/>
<CommonDropdownItem
:text="status.bookmarked ? $t('action.bookmarked') : $t('action.bookmark')"
:icon="status.bookmarked ? 'i-ri:bookmark-fill' : 'i-ri:bookmark-line'"
:class="status.bookmarked ? 'text-yellow' : ''"
:command="command"
:disabled="isLoading.bookmarked"
@click="toggleBookmark()"
/>
</template>
<CommonDropdownItem
:text="$t('menu.copy_link_to_post')"
icon="i-ri:link"
:command="command"
@click="copyLink(status)"
/>
<NuxtLink :to="status.url" target="_blank">
<CommonDropdownItem
v-if="status.url"
:text="$t('menu.open_in_original_site')"
icon="i-ri:arrow-right-up-line"
:command="command"
/>
</NuxtLink>
<CommonDropdownItem
v-if="isTranslationEnabled && status.language !== languageCode"
:text="translation.visible ? $t('menu.show_untranslated') : $t('menu.translate_post')"
icon="i-ri:translate"
:command="command"
@click="toggleTranslation"
/>
<template v-if="currentUser">
<template v-if="isAuthor">
<CommonDropdownItem
:text="status.pinned ? $t('menu.unpin_on_profile') : $t('menu.pin_on_profile')"
icon="i-ri:pushpin-line"
:command="command"
@click="togglePin"
/>
<CommonDropdownItem
:text="$t('menu.edit')"
icon="i-ri:edit-line"
:command="command"
@click="editStatus"
/>
<CommonDropdownItem
:text="$t('menu.delete')"
icon="i-ri:delete-bin-line"
text-red-600
:command="command"
@click="deleteStatus"
/>
<CommonDropdownItem
:text="$t('menu.delete_and_redraft')"
icon="i-ri:eraser-line"
text-red-600
:command="command"
@click="deleteAndRedraft"
/>
</template>
<template v-else>
<CommonDropdownItem
:text="$t('menu.mention_account', [`@${status.account.acct}`])"
icon="i-ri:at-line"
:command="command"
@click="mentionUser(status.account)"
/>
</template>
</template>
</div>
</template>
</CommonDropdown>
</template>

View File

@ -63,12 +63,12 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</AccountHoverWrapper> </AccountHoverWrapper>
</div> </div>
<div flex="~ col 1" min-w-0> <div flex="~ col 1" min-w-0>
<div flex> <div flex items-center>
<AccountHoverWrapper :account="status.account"> <AccountHoverWrapper :account="status.account">
<StatusAccountDetails :account="status.account" /> <StatusAccountDetails :account="status.account" />
</AccountHoverWrapper> </AccountHoverWrapper>
<div flex-auto /> <div flex-auto />
<div text-sm text-secondary flex="~ row nowrap" hover:underline> <div v-if="!isZenMode" text-sm text-secondary flex="~ row nowrap" hover:underline>
<CommonTooltip :content="createdAt"> <CommonTooltip :content="createdAt">
<a :title="status.createdAt" :href="getStatusRoute(status).href" @click.prevent="go($event)"> <a :title="status.createdAt" :href="getStatusRoute(status).href" @click.prevent="go($event)">
<time text-sm hover:underline :datetime="status.createdAt"> <time text-sm hover:underline :datetime="status.createdAt">
@ -78,6 +78,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</CommonTooltip> </CommonTooltip>
<StatusEditIndicator :status="status" inline /> <StatusEditIndicator :status="status" inline />
</div> </div>
<StatusActionsMore :status="status" mr--2 />
</div> </div>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 /> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
<div> <div>
@ -99,7 +100,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
:actions="false" :actions="false"
/> />
</div> </div>
<StatusActions v-if="actions !== false" pt2 :status="status" /> <StatusActions v-if="(actions !== false && !isZenMode)" pt2 :status="status" />
</div> </div>
</div> </div>
</div> </div>

View File

@ -18,7 +18,8 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
</script> </script>
<template> <template>
<div :id="`status-${status.id}`" flex flex-col gap-2 py3 px-4> <div :id="`status-${status.id}`" flex flex-col gap-2 py3 px-4 relative>
<StatusActionsMore :status="status" absolute right-2 top-2 />
<NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a> <NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
<AccountHoverWrapper :account="status.account"> <AccountHoverWrapper :account="status.account">
<AccountInfo :account="status.account" /> <AccountInfo :account="status.account" />

View File

@ -103,7 +103,7 @@ export function getStatusRoute(status: Status) {
}) })
} }
export function getStatusPermalinkRouteRoute(status: Status) { export function getStatusPermalinkRoute(status: Status) {
return status.url return status.url
? useRouter().resolve({ ? useRouter().resolve({
name: 'permalink', name: 'permalink',

View File

@ -0,0 +1,77 @@
import type { Status } from 'masto'
type Action = 'reblogged' | 'favourited' | 'bookmarked' | 'pinned'
type CountField = 'reblogsCount' | 'favouritesCount'
export interface StatusActionsProps {
status: Status
}
export function useStatusActions(props: StatusActionsProps) {
let status = $ref<Status>({ ...props.status })
watch(
() => props.status,
val => status = { ...val },
{ deep: true, immediate: true },
)
// Use different states to let the user press different actions right after the other
const isLoading = $ref({
reblogged: false,
favourited: false,
bookmarked: false,
pinned: false,
translation: false,
})
async function toggleStatusAction(action: Action, newStatus: Promise<Status>, countField?: CountField) {
// Optimistic update
status[action] = !status[action]
if (countField)
status[countField] += status[action] ? 1 : -1
try {
isLoading[action] = true
Object.assign(status, await newStatus)
}
finally {
isLoading[action] = false
}
}
const toggleReblog = () => toggleStatusAction(
'reblogged',
useMasto().statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
if (status.reblogged)
// returns the original status
return res.reblog!
return res
}),
'reblogsCount',
)
const toggleFavourite = () => toggleStatusAction(
'favourited',
useMasto().statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
'favouritesCount',
)
const toggleBookmark = () => toggleStatusAction(
'bookmarked',
useMasto().statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
)
const togglePin = async () => toggleStatusAction(
'pinned',
useMasto().statuses[status.pinned ? 'unpin' : 'pin'](status.id),
)
return {
status: $$(status),
isLoading: $$(isLoading),
toggleReblog,
toggleFavourite,
toggleBookmark,
togglePin,
}
}

View File

@ -18,10 +18,13 @@
}, },
"action": { "action": {
"bookmark": "Bookmark", "bookmark": "Bookmark",
"bookmarked": "Bookmarked",
"boost": "Boost", "boost": "Boost",
"boosted": "Boosted",
"compose": "Compose", "compose": "Compose",
"enter_app": "Enter App", "enter_app": "Enter App",
"favourite": "Favourite", "favourite": "Favourite",
"favourited": "Favourited",
"more": "More", "more": "More",
"publish": "Publish!", "publish": "Publish!",
"reply": "Reply", "reply": "Reply",

View File

@ -18,10 +18,13 @@
}, },
"action": { "action": {
"bookmark": "收藏", "bookmark": "收藏",
"bookmarked": "已收藏",
"boost": "转发", "boost": "转发",
"boosted": "已转发",
"compose": "撰写", "compose": "撰写",
"enter_app": "进入应用", "enter_app": "进入应用",
"favourite": "喜欢", "favourite": "喜欢",
"favourited": "已喜欢",
"more": "更多", "more": "更多",
"publish": "发布!", "publish": "发布!",
"reply": "回复", "reply": "回复",
@ -99,6 +102,7 @@
"placeholder": { "placeholder": {
"default_1": "在想些什么?", "default_1": "在想些什么?",
"reply_to_account": "回复 {0}", "reply_to_account": "回复 {0}",
"replying": "回复",
"the_thread": "这个帖子" "the_thread": "这个帖子"
}, },
"state": { "state": {