zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat(account): more actions for user

Browse source
This commit is contained in:
三咲智子 2022-11-25 19:39:21 +08:00
parent b58d204199
commit dfdf95da61
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
5 changed files with 105 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/account/AccountHeader.vue
View file

@ -64,16 +64,12 @@ function getFieldNameIcon(fieldName: string) {
</div>
</div>
<div flex gap-2 items-center>
<AccountMoreButton :account="account" />
<AccountFollowButton :account="account" />
<!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div rounded p2 group-hover="bg-rose/10">
<div i-ri:bell-line />
</div>
</button>
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div rounded p2 group-hover="bg-purple/10">
<div i-ri:more-2-fill />
</div>
</button> -->
</div>
</div>

77
components/account/AccountMoreButton.vue Normal file
View file

@ -0,0 +1,77 @@
<script setup lang="ts">
import type { Account } from 'masto'
const { account } = defineProps<{
account: Account
}>()
let relationship = $(useRelationship(account))
const mute = async () => {
// TODO: Add confirmation
relationship!.muting = true
relationship = await masto.accounts.mute(account.id, {
// TODO support more options
})
}
const unmute = async () => {
// TODO: Add confirmation
relationship!.muting = false
relationship = await masto.accounts.unmute(account.id)
}
const block = async () => {
// TODO: Add confirmation
relationship!.blocking = true
relationship = await masto.accounts.block(account.id)
}
const unblock = async () => {
// TODO: Add confirmation
relationship!.blocking = false
relationship = await masto.accounts.unblock(account.id)
}
</script>
<template>
<CommonDropdown>
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div rounded-5 p2 group-hover="bg-purple/10">
<div i-ri:more-2-fill />
</div>
</button>
<template #popper>
<NuxtLink :to="account.url" target="_blank">
<CommonDropdownItem icon="i-ri:arrow-right-up-line">
Open in original site
</CommonDropdownItem>
</NuxtLink>
<CommonDropdownItem icon="i-ri:at-line" @click="mentionUser(account)">
Mention @{{ account.acct }}
</CommonDropdownItem>
<CommonDropdownItem icon="i-ri:message-3-line" @click="directMessageUser(account)">
Direct message @{{ account.acct }}
</CommonDropdownItem>
<CommonDropdownItem v-if="!relationship?.muting" icon="i-ri:volume-up-fill" @click="mute">
Mute @{{ account.acct }}
</CommonDropdownItem>
<CommonDropdownItem v-else icon="i-ri:volume-mute-line" @click="unmute">
Unmute @{{ account.acct }}
</CommonDropdownItem>
<CommonDropdownItem v-if="!relationship?.blocking" icon="i-ri:forbid-2-line" @click="block">
Block @{{ account.acct }}
</CommonDropdownItem>
<CommonDropdownItem v-else icon="i-ri:checkbox-circle-line" @click="unblock">
Unblock @{{ account.acct }}
</CommonDropdownItem>
</template>
</CommonDropdown>
</template>