feat: blocking feedback on follow button

This commit is contained in:
patak 2022-12-19 15:01:41 +01:00
parent 79fb8c5d92
commit e72d45a208
6 changed files with 34 additions and 2 deletions

View file

@ -23,6 +23,18 @@ async function toggleFollow() {
} }
} }
async function unblock() {
relationship!.blocking = false
try {
const newRel = await useMasto().accounts.unblock(account.id)
Object.assign(relationship!, newRel)
}
catch {
// TODO error handling
relationship!.blocking = true
}
}
const { t } = useI18n() const { t } = useI18n()
useCommand({ useCommand({
@ -39,6 +51,9 @@ const buttonStyle = $computed(() => {
if (!relationship) if (!relationship)
return 'text-inverted' return 'text-inverted'
if (relationship.blocking)
return 'text-inverted bg-red border-red'
// 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'}`
@ -54,9 +69,16 @@ const buttonStyle = $computed(() => {
gap-1 items-center group gap-1 items-center group
:disabled="relationship?.requested" :disabled="relationship?.requested"
border-1 border-1
rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1 :class="buttonStyle" :hover="relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" @click="toggleFollow" 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()"
> >
<template v-if="relationship?.following"> <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-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>
</template> </template>

View file

@ -4,6 +4,7 @@
"blocked_by": "You're blocked by this user.", "blocked_by": "You're blocked by this user.",
"blocked_domains": "Blocked domains", "blocked_domains": "Blocked domains",
"blocked_users": "Blocked users", "blocked_users": "Blocked users",
"blocking": "Blocked",
"bot": "BOT", "bot": "BOT",
"favourites": "Favourites", "favourites": "Favourites",
"follow": "Follow", "follow": "Follow",
@ -24,6 +25,7 @@
"posts_count": "{0} posts|{0} post|{0} posts", "posts_count": "{0} posts|{0} post|{0} posts",
"profile_description": "{0}'s profile header", "profile_description": "{0}'s profile header",
"profile_unavailable": "Profile unavailable", "profile_unavailable": "Profile unavailable",
"unblock": "Unblock",
"unfollow": "Unfollow" "unfollow": "Unfollow"
}, },
"action": { "action": {

View file

@ -4,6 +4,7 @@
"blocked_by": "Fuiste bloqueado por este usuario.", "blocked_by": "Fuiste bloqueado por este usuario.",
"blocked_domains": "Dominios bloqueados", "blocked_domains": "Dominios bloqueados",
"blocked_users": "Usuarios bloqueados", "blocked_users": "Usuarios bloqueados",
"blocking": "Blocked",
"favourites": "Favoritos", "favourites": "Favoritos",
"follow": "Seguir", "follow": "Seguir",
"follow_back": "Seguir de vuelta", "follow_back": "Seguir de vuelta",
@ -23,6 +24,7 @@
"posts_count": "{0} publicaciones|{0} publicación|{0} publicaciones", "posts_count": "{0} publicaciones|{0} publicación|{0} publicaciones",
"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",
"unfollow": "Dejar de seguir" "unfollow": "Dejar de seguir"
}, },
"action": { "action": {

View file

@ -4,6 +4,7 @@
"blocked_by": "Vous êtes bloqué·e par cet·te utilisateur.", "blocked_by": "Vous êtes bloqué·e par cet·te utilisateur.",
"blocked_domains": "Domaines bloqués", "blocked_domains": "Domaines bloqués",
"blocked_users": "Utilisateurs bloqués", "blocked_users": "Utilisateurs bloqués",
"blocking": "Blocked",
"bot": "Automatisé", "bot": "Automatisé",
"favourites": "Favoris", "favourites": "Favoris",
"follow": "Suivre", "follow": "Suivre",
@ -24,6 +25,7 @@
"posts_count": "{0} messages", "posts_count": "{0} messages",
"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",
"unfollow": "Ne plus suivre" "unfollow": "Ne plus suivre"
}, },
"action": { "action": {

View file

@ -2,6 +2,7 @@
"account": { "account": {
"blocked_domains": "ブロックしたドメイン", "blocked_domains": "ブロックしたドメイン",
"blocked_users": "ブロックしたユーザー", "blocked_users": "ブロックしたユーザー",
"blocking": "Blocked",
"favourites": "お気に入り", "favourites": "お気に入り",
"follow": "フォローする", "follow": "フォローする",
"follow_back": "フォローバックする", "follow_back": "フォローバックする",
@ -12,6 +13,7 @@
"muted_users": "ミュート済み", "muted_users": "ミュート済み",
"pinned": "固定された投稿", "pinned": "固定された投稿",
"posts_count": "{0} 投稿", "posts_count": "{0} 投稿",
"unblock": "Unblock",
"unfollow": "フォロー解除" "unfollow": "フォロー解除"
}, },
"action": { "action": {

View file

@ -4,6 +4,7 @@
"blocked_by": "您已被此用户拉黑", "blocked_by": "您已被此用户拉黑",
"blocked_domains": "已拉黑的域名", "blocked_domains": "已拉黑的域名",
"blocked_users": "已拉黑的用户", "blocked_users": "已拉黑的用户",
"blocking": "Blocked",
"bot": "机器人", "bot": "机器人",
"favourites": "喜欢的帖文", "favourites": "喜欢的帖文",
"follow": "关注", "follow": "关注",
@ -24,6 +25,7 @@
"posts_count": "{0} 条帖文", "posts_count": "{0} 条帖文",
"profile_description": "{0}的个人资料头图", "profile_description": "{0}的个人资料头图",
"profile_unavailable": "个人资料不可见", "profile_unavailable": "个人资料不可见",
"unblock": "Unblock",
"unfollow": "取消关注" "unfollow": "取消关注"
}, },
"action": { "action": {