mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-07 01:19:57 +00:00
parent
5075fdf194
commit
b7b6f0d1ca
3 changed files with 29 additions and 11 deletions
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
const { as = 'button', command, disabled, content, icon } = defineProps<{
|
||||
text?: string | number
|
||||
content: string
|
||||
color: string
|
||||
|
@ -27,10 +27,10 @@ useCommand({
|
|||
scope: 'Actions',
|
||||
|
||||
order: -2,
|
||||
visible: () => props.command && !props.disabled,
|
||||
visible: () => command && !disabled,
|
||||
|
||||
name: () => props.content,
|
||||
icon: () => props.icon,
|
||||
name: () => content,
|
||||
icon: () => icon,
|
||||
|
||||
onActivate() {
|
||||
if (!checkLogin())
|
||||
|
@ -47,18 +47,27 @@ useCommand({
|
|||
|
||||
<template>
|
||||
<component
|
||||
:is="as || 'button'"
|
||||
:is="as"
|
||||
v-bind="$attrs" ref="el"
|
||||
w-fit flex gap-1 items-center
|
||||
rounded group :hover="hover"
|
||||
focus:outline-none cursor-pointer
|
||||
rounded group
|
||||
:hover=" !disabled ? hover : undefined"
|
||||
focus:outline-none
|
||||
:focus-visible="hover"
|
||||
:class="active ? [color] : 'text-secondary'"
|
||||
:class="active ? color : 'text-secondary'"
|
||||
:aria-label="content"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<CommonTooltip placement="bottom" :content="content">
|
||||
<div rounded-full p2 :group-hover="groupHover" :group-focus-visible="groupHover" group-focus-visible:ring="2 current">
|
||||
<div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
|
||||
<div
|
||||
rounded-full p2
|
||||
v-bind="disabled ? {} : {
|
||||
'group-hover': groupHover,
|
||||
'group-focus-visible': groupHover,
|
||||
'group-focus-visible:ring': '2 current',
|
||||
}"
|
||||
>
|
||||
<div :class="active && activeIcon ? activeIcon : icon" />
|
||||
</div>
|
||||
</CommonTooltip>
|
||||
|
||||
|
|
|
@ -14,6 +14,7 @@ const { details, command } = $(props)
|
|||
const {
|
||||
status,
|
||||
isLoading,
|
||||
canReblog,
|
||||
toggleBookmark,
|
||||
toggleFavourite,
|
||||
toggleReblog,
|
||||
|
@ -62,7 +63,7 @@ const reply = () => {
|
|||
icon="i-ri:repeat-line"
|
||||
active-icon="i-ri:repeat-fill"
|
||||
:active="!!status.reblogged"
|
||||
:disabled="isLoading.reblogged"
|
||||
:disabled="isLoading.reblogged || !canReblog"
|
||||
:command="command"
|
||||
@click="toggleReblog()"
|
||||
>
|
||||
|
|
|
@ -31,6 +31,7 @@ export function useStatusActions(props: StatusActionsProps) {
|
|||
// check login
|
||||
if (!checkLogin())
|
||||
return
|
||||
|
||||
isLoading[action] = true
|
||||
fetchNewStatus().then((newStatus) => {
|
||||
Object.assign(status, newStatus)
|
||||
|
@ -44,6 +45,12 @@ export function useStatusActions(props: StatusActionsProps) {
|
|||
if (countField)
|
||||
status[countField] += status[action] ? 1 : -1
|
||||
}
|
||||
|
||||
const canReblog = $computed(() =>
|
||||
status.visibility !== 'direct'
|
||||
&& (status.visibility !== 'private' || status.account.id === currentUser.value?.account.id),
|
||||
)
|
||||
|
||||
const toggleReblog = () => toggleStatusAction(
|
||||
'reblogged',
|
||||
() => masto.v1.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
|
||||
|
@ -79,6 +86,7 @@ export function useStatusActions(props: StatusActionsProps) {
|
|||
return {
|
||||
status: $$(status),
|
||||
isLoading: $$(isLoading),
|
||||
canReblog: $$(canReblog),
|
||||
toggleMute,
|
||||
toggleReblog,
|
||||
toggleFavourite,
|
||||
|
|
Loading…
Reference in a new issue