teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: Improve styling and add accessible text to notify button (#1138)

Browse source
This commit is contained in:
rshigg 2023-01-15 06:30:39 -03:30 committed by GitHub
parent 08293a107c
commit e7ccd00ad3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
components/account/AccountHeader.vue
View file

@ -43,15 +43,15 @@ function previewAvatar() {
}]) }])
} }
async function toggleNotify() { async function toggleNotifications() {
relationship!.notifying = !relationship!.notifying relationship!.notifying = !relationship?.notifying
try { try {
const newRel = await client.v1.accounts.follow(account.id, { notify: relationship!.notifying }) const newRel = await client.v1.accounts.follow(account.id, { notify: relationship?.notifying })
Object.assign(relationship!, newRel) Object.assign(relationship!, newRel)
} }
catch { catch {
// TODO error handling // TODO error handling
relationship!.notifying = !relationship!.notifying relationship!.notifying = !relationship?.notifying
} }
} }
@ -76,6 +76,7 @@ watchEffect(() => {
}) })
const isSelf = $(useSelfAccount(() => account)) const isSelf = $(useSelfAccount(() => account))
const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
</script> </script>
<template> <template>
@ -99,14 +100,17 @@ const isSelf = $(useSelfAccount(() => account))
</div> </div>
<div absolute top-18 inset-ie-0 flex gap-2 items-center> <div absolute top-18 inset-ie-0 flex gap-2 items-center>
<AccountMoreButton :account="account" :command="command" /> <AccountMoreButton :account="account" :command="command" />
<button
<button v-if="!isSelf && relationship?.following" flex gap-1 items-center w-full rounded op75 hover="op100 text-pink" group @click="toggleNotify()"> v-if="!isSelf && relationship?.following"
<div rounded-full p2 group-hover="bg-pink/10"> :aria-pressed="isNotifiedOnPost"
<div v-if="relationship?.notifying" i-ri:bell-fill /> :aria-label="t('account.notify_on_post', { username: `@${account.username}` })"
<div v-else i-ri-bell-line /> rounded-full p2 border-1 transition-colors
</div> :class="isNotifiedOnPost ? 'text-primary border-primary hover:bg-red/20 hover:text-red hover:border-red' : 'border-base hover:text-primary'"
@click="toggleNotifications"
>
<span v-if="isNotifiedOnPost" i-ri:bell-fill block text-current />
<span v-else i-ri-bell-line block text-current />
</button> </button>
<AccountFollowButton :account="account" :command="command" /> <AccountFollowButton :account="account" :command="command" />
<!-- Edit profile --> <!-- Edit profile -->
<NuxtLink <NuxtLink

1
locales/en-US.json
View file

@ -28,6 +28,7 @@
"muted_users": "Muted users", "muted_users": "Muted users",
"muting": "Muted", "muting": "Muted",
"mutuals": "Mutuals", "mutuals": "Mutuals",
"notify_on_post": "Notify me when {username} posts",
"pinned": "Pinned", "pinned": "Pinned",
"posts": "Posts", "posts": "Posts",
"posts_count": "{0} Posts|{0} Post|{0} Posts", "posts_count": "{0} Posts|{0} Post|{0} Posts",