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

feat: muting feedback on follow button

Browse source
This commit is contained in:
patak 2022-12-19 15:29:12 +01:00
parent e72d45a208
commit 15b59ae9b9
6 changed files with 36 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/account/AccountFollowButton.vue
View file

@ -35,6 +35,18 @@ async function unblock() {
}
}
async function unmute() {
relationship!.muting = false
try {
const newRel = await useMasto().accounts.unmute(account.id)
Object.assign(relationship!, newRel)
}
catch {
// TODO error handling
relationship!.muting = true
}
}
const { t } = useI18n()
useCommand({
@ -54,6 +66,9 @@ const buttonStyle = $computed(() => {
if (relationship.blocking)
return 'text-inverted bg-red border-red'
if (relationship.muting)
return 'text-base bg-code border-base'
// If following, use a label style with a strong border for Mutuals
if (relationship.following)
return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}`
@ -71,13 +86,17 @@ const buttonStyle = $computed(() => {
border-1
rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1
:class="buttonStyle"
:hover="!relationship?.blocking && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
@click="relationship?.blocking ? unblock() : toggleFollow()"
:hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
@click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()"
>
<template v-if="relationship?.blocking">
<span group-hover="hidden">{{ $t('account.blocking') }}</span>
<span hidden group-hover="inline">{{ $t('account.unblock') }}</span>
</template>
<template v-if="relationship?.muting">
<span group-hover="hidden">{{ $t('account.muting') }}</span>
<span hidden group-hover="inline">{{ $t('account.unmute') }}</span>
</template>
<template v-else-if="relationship?.following">
<span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
<span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>