feat: muting feedback on follow button
This commit is contained in:
parent
e72d45a208
commit
15b59ae9b9
|
@ -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()
|
const { t } = useI18n()
|
||||||
|
|
||||||
useCommand({
|
useCommand({
|
||||||
|
@ -54,6 +66,9 @@ const buttonStyle = $computed(() => {
|
||||||
if (relationship.blocking)
|
if (relationship.blocking)
|
||||||
return 'text-inverted bg-red border-red'
|
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 following, use a label style with a strong border for Mutuals
|
||||||
if (relationship.following)
|
if (relationship.following)
|
||||||
return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}`
|
return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}`
|
||||||
|
@ -71,13 +86,17 @@ const buttonStyle = $computed(() => {
|
||||||
border-1
|
border-1
|
||||||
rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1
|
rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1
|
||||||
:class="buttonStyle"
|
:class="buttonStyle"
|
||||||
:hover="!relationship?.blocking && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
|
:hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
|
||||||
@click="relationship?.blocking ? unblock() : toggleFollow()"
|
@click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()"
|
||||||
>
|
>
|
||||||
<template v-if="relationship?.blocking">
|
<template v-if="relationship?.blocking">
|
||||||
<span group-hover="hidden">{{ $t('account.blocking') }}</span>
|
<span group-hover="hidden">{{ $t('account.blocking') }}</span>
|
||||||
<span hidden group-hover="inline">{{ $t('account.unblock') }}</span>
|
<span hidden group-hover="inline">{{ $t('account.unblock') }}</span>
|
||||||
</template>
|
</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">
|
<template v-else-if="relationship?.following">
|
||||||
<span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
|
<span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
|
||||||
<span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
|
<span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
"joined": "Joined",
|
"joined": "Joined",
|
||||||
"moved_title": "has indicated that their new account is now:",
|
"moved_title": "has indicated that their new account is now:",
|
||||||
"muted_users": "Muted users",
|
"muted_users": "Muted users",
|
||||||
|
"muting": "Muted",
|
||||||
"mutuals": "Mutuals",
|
"mutuals": "Mutuals",
|
||||||
"pinned": "Pinned",
|
"pinned": "Pinned",
|
||||||
"posts": "Posts",
|
"posts": "Posts",
|
||||||
|
@ -26,7 +27,8 @@
|
||||||
"profile_description": "{0}'s profile header",
|
"profile_description": "{0}'s profile header",
|
||||||
"profile_unavailable": "Profile unavailable",
|
"profile_unavailable": "Profile unavailable",
|
||||||
"unblock": "Unblock",
|
"unblock": "Unblock",
|
||||||
"unfollow": "Unfollow"
|
"unfollow": "Unfollow",
|
||||||
|
"unmute": "Unmute"
|
||||||
},
|
},
|
||||||
"action": {
|
"action": {
|
||||||
"bookmark": "Bookmark",
|
"bookmark": "Bookmark",
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
"joined": "Se unió",
|
"joined": "Se unió",
|
||||||
"moved_title": "ha indicado que su nueva cuenta ahora es:",
|
"moved_title": "ha indicado que su nueva cuenta ahora es:",
|
||||||
"muted_users": "Usuarios silenciados",
|
"muted_users": "Usuarios silenciados",
|
||||||
|
"muting": "Muted",
|
||||||
"mutuals": "Mutuo",
|
"mutuals": "Mutuo",
|
||||||
"pinned": "Publicaciones fijadas",
|
"pinned": "Publicaciones fijadas",
|
||||||
"posts": "Publicaciones",
|
"posts": "Publicaciones",
|
||||||
|
@ -25,7 +26,8 @@
|
||||||
"profile_description": "Encabezado del perfil de {0}",
|
"profile_description": "Encabezado del perfil de {0}",
|
||||||
"profile_unavailable": "Perfil no disponible",
|
"profile_unavailable": "Perfil no disponible",
|
||||||
"unblock": "Unblock",
|
"unblock": "Unblock",
|
||||||
"unfollow": "Dejar de seguir"
|
"unfollow": "Dejar de seguir",
|
||||||
|
"unmute": "Unmute"
|
||||||
},
|
},
|
||||||
"action": {
|
"action": {
|
||||||
"bookmark": "Añadir marcador",
|
"bookmark": "Añadir marcador",
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
"joined": "a rejoint",
|
"joined": "a rejoint",
|
||||||
"moved_title": "a indiqué que son nouveau compte est désormais :",
|
"moved_title": "a indiqué que son nouveau compte est désormais :",
|
||||||
"muted_users": "Utilisateurs mis en sourdine",
|
"muted_users": "Utilisateurs mis en sourdine",
|
||||||
|
"muting": "Muted",
|
||||||
"mutuals": "@:account.following",
|
"mutuals": "@:account.following",
|
||||||
"pinned": "Épinglés",
|
"pinned": "Épinglés",
|
||||||
"posts": "Messages",
|
"posts": "Messages",
|
||||||
|
@ -26,7 +27,8 @@
|
||||||
"profile_description": "En-tête du profil de {0}",
|
"profile_description": "En-tête du profil de {0}",
|
||||||
"profile_unavailable": "Profil non accessible",
|
"profile_unavailable": "Profil non accessible",
|
||||||
"unblock": "Unblock",
|
"unblock": "Unblock",
|
||||||
"unfollow": "Ne plus suivre"
|
"unfollow": "Ne plus suivre",
|
||||||
|
"unmute": "Unmute"
|
||||||
},
|
},
|
||||||
"action": {
|
"action": {
|
||||||
"bookmark": "Ajouter aux marque-pages",
|
"bookmark": "Ajouter aux marque-pages",
|
||||||
|
|
|
@ -11,10 +11,12 @@
|
||||||
"following_count": "{0} フォロー中",
|
"following_count": "{0} フォロー中",
|
||||||
"follows_you": "フォローされています",
|
"follows_you": "フォローされています",
|
||||||
"muted_users": "ミュート済み",
|
"muted_users": "ミュート済み",
|
||||||
|
"muting": "Muted",
|
||||||
"pinned": "固定された投稿",
|
"pinned": "固定された投稿",
|
||||||
"posts_count": "{0} 投稿",
|
"posts_count": "{0} 投稿",
|
||||||
"unblock": "Unblock",
|
"unblock": "Unblock",
|
||||||
"unfollow": "フォロー解除"
|
"unfollow": "フォロー解除",
|
||||||
|
"unmute": "Unmute"
|
||||||
},
|
},
|
||||||
"action": {
|
"action": {
|
||||||
"compose": "今なにしてる?",
|
"compose": "今なにしてる?",
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
"joined": "已加入",
|
"joined": "已加入",
|
||||||
"moved_title": "的新账号是:",
|
"moved_title": "的新账号是:",
|
||||||
"muted_users": "已屏蔽的用户",
|
"muted_users": "已屏蔽的用户",
|
||||||
|
"muting": "Muted",
|
||||||
"mutuals": "互相关注",
|
"mutuals": "互相关注",
|
||||||
"pinned": "置顶的帖文",
|
"pinned": "置顶的帖文",
|
||||||
"posts": "帖文",
|
"posts": "帖文",
|
||||||
|
@ -26,7 +27,8 @@
|
||||||
"profile_description": "{0}的个人资料头图",
|
"profile_description": "{0}的个人资料头图",
|
||||||
"profile_unavailable": "个人资料不可见",
|
"profile_unavailable": "个人资料不可见",
|
||||||
"unblock": "Unblock",
|
"unblock": "Unblock",
|
||||||
"unfollow": "取消关注"
|
"unfollow": "取消关注",
|
||||||
|
"unmute": "Unmute"
|
||||||
},
|
},
|
||||||
"action": {
|
"action": {
|
||||||
"bookmark": "收藏",
|
"bookmark": "收藏",
|
||||||
|
|
Loading…
Reference in a new issue