From fd662b8864ac2205dc1cb2775dae889f1d935920 Mon Sep 17 00:00:00 2001 From: Jeff Sikes <jeffsikes@users.noreply.github.com> Date: Tue, 17 Jan 2023 06:57:24 -0600 Subject: [PATCH] feat: enhancements to profile account notifications (#1127) --- components/account/AccountHeader.vue | 27 ++++++++++++++++----------- locales/en-US.json | 3 ++- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue index aaed93b2..cc69486e 100644 --- a/components/account/AccountHeader.vue +++ b/components/account/AccountHeader.vue @@ -25,6 +25,10 @@ function getFieldIconTitle(fieldName: string) { return fieldName === 'Joined' ? t('account.joined') : fieldName } +function getNotificationIconTitle() { + return relationship?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` }) +} + function previewHeader() { openMediaPreview([{ id: `${account.acct}:header`, @@ -100,17 +104,18 @@ const isNotifiedOnPost = $computed(() => !!relationship?.notifying) </div> <div absolute top-18 inset-ie-0 flex gap-2 items-center> <AccountMoreButton :account="account" :command="command" /> - <button - v-if="!isSelf && relationship?.following" - :aria-pressed="isNotifiedOnPost" - :aria-label="t('account.notify_on_post', { username: `@${account.username}` })" - rounded-full p2 border-1 transition-colors - :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> + <CommonTooltip v-if="!isSelf && relationship?.following" :content="getNotificationIconTitle()"> + <button + :aria-pressed="isNotifiedOnPost" + :aria-label="t('account.notifications_on_post_enable', { username: `@${account.username}` })" + rounded-full p2 border-1 transition-colors + :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:notification-4-fill block text-current /> + <span v-else i-ri-notification-4-line block text-current /> + </button> + </CommonTooltip> <AccountFollowButton :account="account" :command="command" /> <!-- Edit profile --> <NuxtLink diff --git a/locales/en-US.json b/locales/en-US.json index cd819112..0b991c02 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -28,7 +28,8 @@ "muted_users": "Muted users", "muting": "Muted", "mutuals": "Mutuals", - "notify_on_post": "Notify me when {username} posts", + "notifications_on_post_disable": "Stop notifying me when {username} posts", + "notifications_on_post_enable": "Notify me when {username} posts", "pinned": "Pinned", "posts": "Posts", "posts_count": "{0} Posts|{0} Post|{0} Posts",