feat: allow to set mute duration and notifications mute option (#2665)

zio/stable
TAKAHASHI Shuuji 2024-03-09 18:52:41 +09:00 committed by GitHub
parent 4954473f50
commit 3448335356
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 163 additions and 47 deletions

View File

@ -25,13 +25,16 @@ function shareAccount() {
}
async function toggleReblogs() {
if (!relationship.value!.showingReblogs && await openConfirmDialog({
if (!relationship.value!.showingReblogs) {
const dialogChoice = await openConfirmDialog({
title: t('confirm.show_reblogs.title'),
description: t('confirm.show_reblogs.description', [account.acct]),
confirm: t('confirm.show_reblogs.confirm'),
cancel: t('confirm.show_reblogs.cancel'),
}) !== 'confirm')
})
if (dialogChoice.choice !== 'confirm')
return
}
const showingReblogs = !relationship.value?.showingReblogs
relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })

View File

@ -4,6 +4,8 @@ defineProps<{
hover?: boolean
iconChecked?: string
iconUnchecked?: string
checkedIconColor?: string
prependCheckbox?: boolean
}>()
const modelValue = defineModel<boolean | null>()
</script>
@ -15,9 +17,12 @@ const modelValue = defineModel<boolean | null>()
v-bind="$attrs"
@click.prevent="modelValue = !modelValue"
>
<span v-if="label" flex-1 ms-2 pointer-events-none>{{ label }}</span>
<span v-if="label && !prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
<span
:class="modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line')"
:class="[
modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line'),
modelValue && checkedIconColor,
]"
text-lg
aria-hidden="true"
/>
@ -26,6 +31,7 @@ const modelValue = defineModel<boolean | null>()
type="checkbox"
sr-only
>
<span v-if="label && prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
</label>
</template>

View File

@ -68,7 +68,7 @@ async function removeList() {
actionError.value = undefined
await nextTick()
if (confirmDelete === 'confirm') {
if (confirmDelete.choice === 'confirm') {
await nextTick()
try {
await client.v1.lists.$select(list.value.id).remove()

View File

@ -0,0 +1,45 @@
<script setup lang="ts">
const model = defineModel<number>()
const isValid = defineModel<boolean>('isValid')
const days = ref<number | ''>(0)
const hours = ref<number | ''>(1)
const minutes = ref<number | ''>(0)
watchEffect(() => {
if (days.value === '' || hours.value === '' || minutes.value === '') {
isValid.value = false
return
}
const duration
= days.value * 24 * 60 * 60
+ hours.value * 60 * 60
+ minutes.value * 60
if (duration <= 0) {
isValid.value = false
return
}
isValid.value = true
model.value = duration
})
</script>
<template>
<div flex flex-grow-0 gap-2>
<label flex items-center gap-2>
<input v-model="days" type="number" min="0" max="1999" input-base :class="!isValid ? 'input-error' : null">
{{ $t('confirm.mute_account.days', days === '' ? 0 : days) }}
</label>
<label flex items-center gap-2>
<input v-model="hours" type="number" min="0" max="24" input-base :class="!isValid ? 'input-error' : null">
{{ $t('confirm.mute_account.hours', hours === '' ? 0 : hours) }}
</label>
<label flex items-center gap-2>
<input v-model="minutes" type="number" min="0" max="59" step="5" input-base :class="!isValid ? 'input-error' : null">
{{ $t('confirm.mute_account.minute', minutes === '' ? 0 : minutes) }}
</label>
</div>
</template>

View File

@ -1,11 +1,34 @@
<script setup lang="ts">
import type { ConfirmDialogChoice, ConfirmDialogLabel } from '~/types'
import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
import DurationPicker from '~/components/modal/DurationPicker.vue'
defineProps<ConfirmDialogLabel>()
const props = defineProps<ConfirmDialogOptions>()
const emit = defineEmits<{
(evt: 'choice', choice: ConfirmDialogChoice): void
}>()
const hasDuration = ref(false)
const isValidDuration = ref(true)
const duration = ref(60 * 60) // default to 1 hour
const shouldMuteNotifications = ref(true)
const isMute = computed(() => props.extraOptionType === 'mute')
function handleChoice(choice: ConfirmDialogChoice['choice']) {
const dialogChoice = {
choice,
...isMute && {
extraOptions: {
mute: {
duration: hasDuration.value ? duration.value : 0,
notifications: shouldMuteNotifications.value,
},
},
},
}
emit('choice', dialogChoice)
}
</script>
<template>
@ -16,11 +39,17 @@ const emit = defineEmits<{
<div v-if="description">
{{ description }}
</div>
<div v-if="isMute" flex-col flex gap-4>
<CommonCheckbox v-model="hasDuration" :label="$t('confirm.mute_account.specify_duration')" prepend-checkbox checked-icon-color="text-primary" />
<DurationPicker v-if="hasDuration" v-model="duration" v-model:is-valid="isValidDuration" />
<CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
</div>
<div flex justify-end gap-2>
<button btn-text @click="emit('choice', 'cancel')">
<button btn-text @click="handleChoice('cancel')">
{{ cancel || $t('confirm.common.cancel') }}
</button>
<button btn-solid @click="emit('choice', 'confirm')">
<button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
{{ confirm || $t('confirm.common.confirm') }}
</button>
</div>

View File

@ -62,12 +62,13 @@ async function shareLink(status: mastodon.v1.Status) {
}
async function deleteStatus() {
if (await openConfirmDialog({
const confirmDelete = await openConfirmDialog({
title: t('confirm.delete_posts.title'),
description: t('confirm.delete_posts.description'),
confirm: t('confirm.delete_posts.confirm'),
cancel: t('confirm.delete_posts.cancel'),
}) !== 'confirm')
})
if (confirmDelete.choice !== 'confirm')
return
removeCachedStatus(status.value.id)
@ -80,12 +81,13 @@ async function deleteStatus() {
}
async function deleteAndRedraft() {
if (await openConfirmDialog({
const confirmDelete = await openConfirmDialog({
title: t('confirm.delete_posts.title'),
description: t('confirm.delete_posts.description'),
confirm: t('confirm.delete_posts.confirm'),
cancel: t('confirm.delete_posts.cancel'),
}) !== 'confirm')
})
if (confirmDelete.choice !== 'confirm')
return
if (import.meta.dev) {

View File

@ -1,9 +1,9 @@
import type { mastodon } from 'masto'
import type { ConfirmDialogChoice, ConfirmDialogLabel, Draft, ErrorDialogData } from '~/types'
import type { ConfirmDialogChoice, ConfirmDialogOptions, Draft, ErrorDialogData } from '~/types'
import { STORAGE_KEY_FIRST_VISIT } from '~/constants'
export const confirmDialogChoice = ref<ConfirmDialogChoice>()
export const confirmDialogLabel = ref<ConfirmDialogLabel>()
export const confirmDialogLabel = ref<ConfirmDialogOptions>()
export const errorDialogData = ref<ErrorDialogData>()
export const mediaPreviewList = ref<mastodon.v1.MediaAttachment[]>([])
@ -39,7 +39,7 @@ export function openSigninDialog() {
isSigninDialogOpen.value = true
}
export async function openConfirmDialog(label: ConfirmDialogLabel | string): Promise<ConfirmDialogChoice> {
export async function openConfirmDialog(label: ConfirmDialogOptions | string): Promise<ConfirmDialogChoice> {
confirmDialogLabel.value = typeof label === 'string' ? { title: label } : label
confirmDialogChoice.value = undefined
isConfirmDialogOpen.value = true

View File

@ -39,12 +39,13 @@ export async function toggleFollowAccount(relationship: mastodon.v1.Relationship
const unfollow = relationship!.following || relationship!.requested
if (unfollow) {
if (await openConfirmDialog({
const confirmUnfollow = await openConfirmDialog({
title: i18n.t('confirm.unfollow.title'),
description: i18n.t('confirm.unfollow.description', [`@${account.acct}`]),
confirm: i18n.t('confirm.unfollow.confirm'),
cancel: i18n.t('confirm.unfollow.cancel'),
}) !== 'confirm')
})
if (confirmUnfollow.choice !== 'confirm')
return
}
@ -66,18 +67,28 @@ export async function toggleMuteAccount(relationship: mastodon.v1.Relationship,
const { client } = useMasto()
const i18n = useNuxtApp().$i18n
if (!relationship!.muting && await openConfirmDialog({
let duration = 0 // default 0 == indefinite
let notifications = true // default true = mute notifications
if (!relationship!.muting) {
const confirmMute = await openConfirmDialog({
title: i18n.t('confirm.mute_account.title'),
description: i18n.t('confirm.mute_account.description', [account.acct]),
confirm: i18n.t('confirm.mute_account.confirm'),
cancel: i18n.t('confirm.mute_account.cancel'),
}) !== 'confirm')
extraOptionType: 'mute',
})
if (confirmMute.choice !== 'confirm')
return
duration = confirmMute.extraOptions!.mute.duration
notifications = confirmMute.extraOptions!.mute.notifications
}
relationship!.muting = !relationship!.muting
relationship = relationship!.muting
? await client.value.v1.accounts.$select(account.id).mute({
// TODO support more options
duration,
notifications,
})
: await client.value.v1.accounts.$select(account.id).unmute()
}
@ -86,13 +97,16 @@ export async function toggleBlockAccount(relationship: mastodon.v1.Relationship,
const { client } = useMasto()
const i18n = useNuxtApp().$i18n
if (!relationship!.blocking && await openConfirmDialog({
if (!relationship!.blocking) {
const confirmBlock = await openConfirmDialog({
title: i18n.t('confirm.block_account.title'),
description: i18n.t('confirm.block_account.description', [account.acct]),
confirm: i18n.t('confirm.block_account.confirm'),
cancel: i18n.t('confirm.block_account.cancel'),
}) !== 'confirm')
})
if (confirmBlock.choice !== 'confirm')
return
}
relationship!.blocking = !relationship!.blocking
relationship = await client.value.v1.accounts.$select(account.id)[relationship!.blocking ? 'block' : 'unblock']()
@ -102,13 +116,16 @@ export async function toggleBlockDomain(relationship: mastodon.v1.Relationship,
const { client } = useMasto()
const i18n = useNuxtApp().$i18n
if (!relationship!.domainBlocking && await openConfirmDialog({
if (!relationship!.domainBlocking) {
const confirmDomainBlock = await openConfirmDialog({
title: i18n.t('confirm.block_domain.title'),
description: i18n.t('confirm.block_domain.description', [getServerName(account)]),
confirm: i18n.t('confirm.block_domain.confirm'),
cancel: i18n.t('confirm.block_domain.cancel'),
}) !== 'confirm')
})
if (confirmDomainBlock.choice !== 'confirm')
return
}
relationship!.domainBlocking = !relationship!.domainBlocking
await client.value.v1.domainBlocks[relationship!.domainBlocking ? 'create' : 'remove']({ domain: getServerName(account) })

View File

@ -149,7 +149,12 @@
"mute_account": {
"cancel": "Cancel",
"confirm": "Mute",
"days": "days|day|days",
"description": "Are you sure you want to mute {0}?",
"hours": "hours|hour|hours",
"minute": "minutes|minute|minutes",
"notifications": "Mute notifications",
"specify_duration": "Specify mute duration",
"title": "Mute account"
},
"show_reblogs": {

View File

@ -56,13 +56,22 @@ export interface Draft {
export type DraftMap = Record<string, Draft>
export interface ConfirmDialogLabel {
export interface ConfirmDialogOptions {
title: string
description?: string
confirm?: string
cancel?: string
extraOptionType?: 'mute'
}
export interface ConfirmDialogChoice {
choice: 'confirm' | 'cancel'
extraOptions?: {
mute: {
duration: number
notifications: boolean
}
}
}
export type ConfirmDialogChoice = 'confirm' | 'cancel'
export interface CommonRouteTabOption {
to: RouteLocationRaw