forked from Mirrors/elk
feat: more actions in status card
This commit is contained in:
三咲智子
parent
2422c809e0
commit
e9c9ecefc8
7 changed files with 157 additions and 87 deletions
|
|
@ -1,26 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
const { modelValue } = defineModel<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const el = ref<HTMLDivElement>()
|
||||
|
||||
onClickOutside(el, () => {
|
||||
if (modelValue)
|
||||
modelValue.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-show="modelValue"
|
||||
ref="el"
|
||||
absolute
|
||||
bg-base
|
||||
rounded
|
||||
shadow-xl
|
||||
dark="border border-base"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
defineProps<{
|
||||
content?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -9,7 +11,9 @@
|
|||
<slot />
|
||||
<template #popper>
|
||||
<div text-3>
|
||||
<slot name="popper" />
|
||||
<slot name="popper">
|
||||
{{ content }}
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
</VTooltip>
|
||||
|
|
|
|||
18
components/common/dropdown/Dropdown.vue
Normal file
18
components/common/dropdown/Dropdown.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import { dropdownContextKey } from './ctx'
|
||||
|
||||
const dropdown = $ref<any>()
|
||||
|
||||
provide(dropdownContextKey, {
|
||||
hide: () => dropdown.hide(),
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDropdown v-bind="$attrs" ref="dropdown">
|
||||
<slot />
|
||||
<template #popper="scope">
|
||||
<slot name="popper" v-bind="scope" />
|
||||
</template>
|
||||
</VDropdown>
|
||||
</template>
|
||||
22
components/common/dropdown/DropdownItem.vue
Normal file
22
components/common/dropdown/DropdownItem.vue
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<script setup lang="ts">
|
||||
import { dropdownContextKey } from './ctx'
|
||||
|
||||
defineProps<{
|
||||
icon?: string
|
||||
}>()
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
const { hide } = inject(dropdownContextKey)!
|
||||
|
||||
const handleClick = (evt: MouseEvent) => {
|
||||
hide()
|
||||
emit('click', evt)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex gap-2 items-center cursor-pointer px4 py3 font-700 hover="bg-active" @click="handleClick">
|
||||
<div v-if="icon" :class="icon" />
|
||||
<span text-15px><slot /></span>
|
||||
</div>
|
||||
</template>
|
||||
5
components/common/dropdown/ctx.ts
Normal file
5
components/common/dropdown/ctx.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import type { InjectionKey } from 'vue'
|
||||
|
||||
export const dropdownContextKey: InjectionKey<{
|
||||
hide: () => void
|
||||
}> = Symbol('dropdownContextKey')
|
||||
|
|
@ -3,8 +3,7 @@ defineProps<{
|
|||
text?: string | number
|
||||
color: string
|
||||
icon: string
|
||||
activeIcon: string
|
||||
tooltip: string
|
||||
activeIcon?: string
|
||||
hover: string
|
||||
groupHover: string
|
||||
active?: boolean
|
||||
|
|
@ -17,21 +16,15 @@ defineOptions({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<CommonTooltip placement="bottom">
|
||||
<button
|
||||
flex gap-1 items-center rounded :hover="`op100 ${hover}`" group
|
||||
:class="active ? [color, 'op100'] : 'op50'"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<div rounded-full p2 :group-hover="groupHover">
|
||||
<div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
|
||||
</div>
|
||||
<button
|
||||
flex gap-1 items-center rounded :hover="`op100 ${hover}`" group
|
||||
:class="active ? [color, 'op100'] : 'op50'"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<div rounded-full p2 :group-hover="groupHover">
|
||||
<div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
|
||||
</div>
|
||||
|
||||
<span v-if="text">{{ text }}</span>
|
||||
</button>
|
||||
|
||||
<template #popper>
|
||||
{{ tooltip }}
|
||||
</template>
|
||||
</CommonTooltip>
|
||||
<span v-if="text">{{ text }}</span>
|
||||
</button>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@ const { status } = defineProps<{
|
|||
status: Status
|
||||
}>()
|
||||
|
||||
const isAuthor = $computed(() => status.account.id === currentUser.value?.account?.id)
|
||||
|
||||
const clipboard = useClipboard()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// Use different states to let the user press different actions right after the other
|
||||
const isLoading = $ref({ reblogged: false, favourited: false, bookmarked: false })
|
||||
async function toggleStatusAction(action: 'reblogged' | 'favourited' | 'bookmarked', newStatus: Promise<Status>) {
|
||||
|
|
@ -33,57 +39,105 @@ const toggleBookmark = () => toggleStatusAction(
|
|||
'bookmarked',
|
||||
masto.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
|
||||
)
|
||||
const copyLink = async () => {
|
||||
await clipboard.copy(location.href)
|
||||
}
|
||||
const openInOriginal = () => {
|
||||
window.open(status.url!, '_blank')
|
||||
}
|
||||
const deleteStatus = async () => {
|
||||
// TODO confirm to delete
|
||||
|
||||
await masto.statuses.remove(status.id)
|
||||
if (route.name === '@user-post')
|
||||
router.back()
|
||||
|
||||
// TODO when timeline, remove this item
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex justify-between gap-8>
|
||||
<RouterLink :to="getStatusPath(status)">
|
||||
<CommonTooltip placement="bottom" content="Replay">
|
||||
<RouterLink :to="getStatusPath(status)">
|
||||
<StatusActionButton
|
||||
:text="status.repliesCount"
|
||||
color="text-blue" hover="text-blue" group-hover="bg-blue/10"
|
||||
icon="i-ri:chat-3-line"
|
||||
/>
|
||||
</RouterLink>
|
||||
</CommonTooltip>
|
||||
|
||||
<CommonTooltip placement="bottom" content="Boost">
|
||||
<StatusActionButton
|
||||
:text="status.repliesCount"
|
||||
color="text-blue" hover="text-blue" group-hover="bg-blue/10"
|
||||
icon="i-ri:chat-3-line"
|
||||
tooltip="Replay"
|
||||
:text="status.reblogsCount"
|
||||
color="text-green" hover="text-green" group-hover="bg-green/10"
|
||||
icon="i-ri:repeat-line"
|
||||
active-icon="i-ri:repeat-fill"
|
||||
:active="status.reblogged"
|
||||
:disabled="isLoading.reblogged"
|
||||
@click="toggleReblog()"
|
||||
/>
|
||||
</RouterLink>
|
||||
</CommonTooltip>
|
||||
|
||||
<StatusActionButton
|
||||
:text="status.reblogsCount"
|
||||
color="text-green" hover="text-green" group-hover="bg-green/10"
|
||||
icon="i-ri:repeat-line"
|
||||
active-icon="i-ri:repeat-fill"
|
||||
:active="status.reblogged"
|
||||
:disabled="isLoading.reblogged"
|
||||
tooltip="Boost"
|
||||
@click="toggleReblog()"
|
||||
/>
|
||||
<CommonTooltip placement="bottom" content="Favourite">
|
||||
<StatusActionButton
|
||||
:text="status.favouritesCount"
|
||||
color="text-rose" hover="text-rose" group-hover="bg-rose/10"
|
||||
icon="i-ri:heart-3-line"
|
||||
active-icon="i-ri:heart-3-fill"
|
||||
:active="status.favourited"
|
||||
:disabled="isLoading.favourited"
|
||||
|
||||
<StatusActionButton
|
||||
:text="status.favouritesCount"
|
||||
color="text-rose" hover="text-rose" group-hover="bg-rose/10"
|
||||
icon="i-ri:heart-3-line"
|
||||
active-icon="i-ri:heart-3-fill"
|
||||
:active="status.favourited"
|
||||
:disabled="isLoading.favourited"
|
||||
tooltip="Favourite"
|
||||
@click="toggleFavourite()"
|
||||
/>
|
||||
@click="toggleFavourite()"
|
||||
/>
|
||||
</CommonTooltip>
|
||||
|
||||
<StatusActionButton
|
||||
color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
|
||||
icon="i-ri:bookmark-line"
|
||||
active-icon="i-ri:bookmark-fill"
|
||||
:active="status.bookmarked"
|
||||
:disabled="isLoading.bookmarked"
|
||||
tooltip="Bookmark"
|
||||
@click="toggleBookmark()"
|
||||
/>
|
||||
<CommonTooltip placement="bottom" content="Bookmark">
|
||||
<StatusActionButton
|
||||
color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
|
||||
icon="i-ri:bookmark-line"
|
||||
active-icon="i-ri:bookmark-fill"
|
||||
:active="status.bookmarked"
|
||||
:disabled="isLoading.bookmarked"
|
||||
@click="toggleBookmark()"
|
||||
/>
|
||||
</CommonTooltip>
|
||||
|
||||
<!-- <VDropdown>
|
||||
<button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>
|
||||
<div rounded-full p2 group-hover="bg-purple/10">
|
||||
<div i-ri:share-circle-line />
|
||||
<CommonDropdown placement="bottom">
|
||||
<CommonTooltip placement="bottom" content="More">
|
||||
<button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>
|
||||
<div rounded-full p2 group-hover="bg-purple/10">
|
||||
<div i-ri:more-line />
|
||||
</div>
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
|
||||
<template #popper>
|
||||
<div flex="~ col">
|
||||
<CommonDropdownItem icon="i-ri:link" @click="copyLink">
|
||||
Copy link to this post
|
||||
</CommonDropdownItem>
|
||||
|
||||
<CommonDropdownItem v-if="status.url" icon="i-ri:arrow-right-up-line" @click="openInOriginal">
|
||||
Open in original site
|
||||
</CommonDropdownItem>
|
||||
|
||||
<!-- TODO -->
|
||||
<template v-if="isAuthor">
|
||||
<CommonDropdownItem v-if="isAuthor" icon="i-ri:edit-line">
|
||||
Edit
|
||||
</CommonDropdownItem>
|
||||
|
||||
<CommonDropdownItem
|
||||
v-if="isAuthor" icon="i-ri:delete-bin-line" text-red-600
|
||||
@click="deleteStatus"
|
||||
>
|
||||
Delete
|
||||
</CommonDropdownItem>
|
||||
</template>
|
||||
</div>
|
||||
</button>
|
||||
</VDropdown> -->
|
||||
</template>
|
||||
</CommonDropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue