diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/app.vue | 4 | ||||
| -rw-r--r-- | src/client/components/deck/notifications-column.vue | 28 | ||||
| -rw-r--r-- | src/client/components/notification-setting-window.vue | 98 | ||||
| -rw-r--r-- | src/client/components/notifications.vue | 39 | ||||
| -rw-r--r-- | src/client/deck.vue | 6 | ||||
| -rw-r--r-- | src/client/pages/my-settings/index.vue | 21 | ||||
| -rw-r--r-- | src/client/scripts/form.ts | 5 | ||||
| -rw-r--r-- | src/client/widgets/notifications.vue | 23 |
8 files changed, 188 insertions, 36 deletions
diff --git a/src/client/app.vue b/src/client/app.vue index f81e7e44ad..c10ba9c9d9 100644 --- a/src/client/app.vue +++ b/src/client/app.vue @@ -328,6 +328,10 @@ export default Vue.extend({ }, async onNotification(notification) { + const t = this.$store.state.i.includingNotificationTypes; + if (!!t && !t.includes(notification.type)) { + return; + } if (document.visibilityState === 'visible') { this.$root.stream.send('readNotification', { id: notification.id diff --git a/src/client/components/deck/notifications-column.vue b/src/client/components/deck/notifications-column.vue index 331cb9207f..ac49aec06d 100644 --- a/src/client/components/deck/notifications-column.vue +++ b/src/client/components/deck/notifications-column.vue @@ -2,7 +2,7 @@ <x-column :column="column" :is-stacked="isStacked" :menu="menu"> <template #header><fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template> - <x-notifications/> + <x-notifications :include-types="column.includingTypes"/> </x-column> </template> @@ -38,28 +38,14 @@ export default Vue.extend({ }, created() { - if (this.column.notificationType == null) { - this.column.notificationType = 'all'; - this.$store.commit('deviceUser/updateDeckColumn', this.column); - } - this.menu = [{ icon: faCog, - text: this.$t('notificationType'), - action: () => { - this.$root.dialog({ - title: this.$t('notificationType'), - type: null, - select: { - items: ['all', 'follow', 'mention', 'reply', 'renote', 'quote', 'reaction', 'pollVote', 'receiveFollowRequest'].map(x => ({ - value: x, text: this.$t(`_notification._types.${x}`) - })) - default: this.column.notificationType, - }, - showCancelButton: true - }).then(({ canceled, result: type }) => { - if (canceled) return; - this.column.notificationType = type; + text: this.$t('notificationSetting'), + action: async () => { + this.$root.new(await import('../notification-setting-window.vue').then(m => m.default), { + includingTypes: this.column.includingTypes, + }).$on('ok', async ({ includingTypes }) => { + this.$set(this.column, 'includingTypes', includingTypes); this.$store.commit('deviceUser/updateDeckColumn', this.column); }); } diff --git a/src/client/components/notification-setting-window.vue b/src/client/components/notification-setting-window.vue new file mode 100644 index 0000000000..d63a3d48a5 --- /dev/null +++ b/src/client/components/notification-setting-window.vue @@ -0,0 +1,98 @@ +<template> +<x-window ref="window" :width="400" :height="450" :no-padding="true" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="false" @ok="ok()"> + <template #header>{{ $t('notificationSetting') }}</template> + <div class="vv94n3oa"> + <div v-if="showGlobalToggle"> + <mk-switch v-model="useGlobalSetting"> + {{ $t('useGlobalSetting') }} + <template #desc>{{ $t('useGlobalSettingDesc') }}</template> + </mk-switch> + </div> + <div v-if="!useGlobalSetting"> + <mk-info>{{ $t('notificationSettingDesc') }}</mk-info> + <mk-button inline @click="disableAll">{{ $t('disableAll') }}</mk-button> + <mk-button inline @click="enableAll">{{ $t('enableAll') }}</mk-button> + <mk-switch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</mk-switch> + </div> + </div> +</x-window> +</template> + +<script lang="ts"> +import Vue, { PropType } from 'vue'; +import XWindow from './window.vue'; +import MkSwitch from './ui/switch.vue'; +import MkInfo from './ui/info.vue'; +import MkButton from './ui/button.vue'; +import { notificationTypes } from '../../types'; + +export default Vue.extend({ + components: { + XWindow, + MkSwitch, + MkInfo, + MkButton + }, + + props: { + includingTypes: { + // TODO: これで型に合わないものを弾いてくれるのかどうか要調査 + type: Array as PropType<typeof notificationTypes[number][]>, + required: false, + default: null, + }, + showGlobalToggle: { + type: Boolean, + required: false, + default: true, + } + }, + + data() { + return { + typesMap: {} as Record<typeof notificationTypes[number], boolean>, + useGlobalSetting: false, + notificationTypes, + }; + }, + + created() { + this.useGlobalSetting = this.includingTypes === null && this.showGlobalToggle; + + for (const type of this.notificationTypes) { + Vue.set(this.typesMap, type, this.includingTypes === null || this.includingTypes.includes(type)); + } + }, + + methods: { + ok() { + const includingTypes = this.useGlobalSetting ? null : (Object.keys(this.typesMap) as typeof notificationTypes[number][]) + .filter(type => this.typesMap[type]); + + this.$emit('ok', { includingTypes }); + this.$refs.window.close(); + }, + + disableAll() { + for (const type in this.typesMap) { + this.typesMap[type as typeof notificationTypes[number]] = false; + } + }, + + enableAll() { + for (const type in this.typesMap) { + this.typesMap[type as typeof notificationTypes[number]] = true; + } + } + } +}); +</script> + +<style lang="scss" scoped> +.vv94n3oa { + > div { + border-top: solid 1px var(--divider); + padding: 24px; + } +} +</style> diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue index 1271b89475..07dee6354b 100644 --- a/src/client/components/notifications.vue +++ b/src/client/components/notifications.vue @@ -17,11 +17,12 @@ </template> <script lang="ts"> -import Vue from 'vue'; +import Vue, { PropType } from 'vue'; import paging from '../scripts/paging'; import XNotification from './notification.vue'; import XList from './date-separated-list.vue'; import XNote from './note.vue'; +import { notificationTypes } from '../../types'; export default Vue.extend({ components: { @@ -35,9 +36,10 @@ export default Vue.extend({ ], props: { - type: { - type: String, - required: false + includeTypes: { + type: Array as PropType<typeof notificationTypes[number][]>, + required: false, + default: null, }, }, @@ -48,15 +50,26 @@ export default Vue.extend({ endpoint: 'i/notifications', limit: 10, params: () => ({ - includeTypes: this.type ? [this.type] : undefined + includeTypes: this.allIncludeTypes || undefined, }) }, }; }, + computed: { + allIncludeTypes() { + return this.includeTypes ?? this.$store.state.i.includingNotificationTypes; + } + }, + watch: { - type() { + includeTypes() { this.reload(); + }, + '$store.state.i.includingNotificationTypes'() { + if (this.includeTypes === null) { + this.reload(); + } } }, @@ -71,16 +84,20 @@ export default Vue.extend({ methods: { onNotification(notification) { - if (document.visibilityState === 'visible') { + // + const isMuted = !!this.allIncludeTypes && !this.allIncludeTypes.includes(notification.type); + if (isMuted || document.visibilityState === 'visible') { this.$root.stream.send('readNotification', { id: notification.id }); } - this.prepend({ - ...notification, - isRead: document.visibilityState === 'visible' - }); + if (!isMuted) { + this.prepend({ + ...notification, + isRead: document.visibilityState === 'visible' + }); + } }, noteUpdated(oldValue, newValue) { diff --git a/src/client/deck.vue b/src/client/deck.vue index d4d1fc07e6..dc662801f0 100644 --- a/src/client/deck.vue +++ b/src/client/deck.vue @@ -161,6 +161,11 @@ export default Vue.extend({ }, async onNotification(notification) { + const t = this.$store.state.i.includingNotificationTypes; + if (!!t && !t.includes(notification.type)) { + return; + } + if (document.visibilityState === 'visible') { this.$root.stream.send('readNotification', { id: notification.id @@ -170,7 +175,6 @@ export default Vue.extend({ notification }); } - this.$root.sound('notification'); }, diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue index 6fb3116912..7da9f24c75 100644 --- a/src/client/pages/my-settings/index.vue +++ b/src/client/pages/my-settings/index.vue @@ -22,6 +22,9 @@ <mk-button @click="readAllUnreadNotes">{{ $t('markAsReadAllUnreadNotes') }}</mk-button> <mk-button @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</mk-button> </div> + <div class="_content"> + <mk-button @click="configure">{{ $t('notificationSetting') }}</mk-button> + </div> </section> <x-import-export class="_vMargin"/> @@ -109,6 +112,24 @@ export default Vue.extend({ readAllNotifications() { this.$root.api('notifications/mark-all-as-read'); }, + + async configure() { + this.$root.new(await import('../../components/notification-setting-window.vue').then(m => m.default), { + includingTypes: this.$store.state.i.includingNotificationTypes, + showGlobalToggle: false, + }).$on('ok', async ({ includingTypes: value }: any) => { + await this.$root.api('i/update', { + includingNotificationTypes: value, + }).then(i => { + this.$store.state.i.includingNotificationTypes = i.includingNotificationTypes; + }).catch(err => { + this.$root.dialog({ + type: 'error', + text: err.message + }); + }); + }); + } } }); </script> diff --git a/src/client/scripts/form.ts b/src/client/scripts/form.ts index 3cf062be2a..7bf6cec452 100644 --- a/src/client/scripts/form.ts +++ b/src/client/scripts/form.ts @@ -21,6 +21,11 @@ export type FormItem = { default: string | null; hidden?: boolean; enum: string[]; +} | { + label?: string; + type: 'array'; + default: unknown[] | null; + hidden?: boolean; }; export type Form = Record<string, FormItem>; diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue index 24d7fe4200..9d6282735b 100644 --- a/src/client/widgets/notifications.vue +++ b/src/client/widgets/notifications.vue @@ -1,15 +1,16 @@ <template> <mk-container :style="`height: ${props.height}px;`" :show-header="props.showHeader" :scrollable="true"> <template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template> + <template #func><button @click="configure()" class="_button"><fa :icon="faCog"/></button></template> <div> - <x-notifications/> + <x-notifications :include-types="props.includingTypes"/> </div> </mk-container> </template> <script lang="ts"> -import { faBell } from '@fortawesome/free-solid-svg-icons'; +import { faBell, faCog } from '@fortawesome/free-solid-svg-icons'; import MkContainer from '../components/ui/container.vue'; import XNotifications from '../components/notifications.vue'; import define from './define'; @@ -25,6 +26,11 @@ export default define({ type: 'number', default: 300, }, + includingTypes: { + type: 'array', + hidden: true, + default: null, + }, }) }).extend({ components: { @@ -34,8 +40,19 @@ export default define({ data() { return { - faBell + faBell, faCog }; }, + + methods: { + async configure() { + this.$root.new(await import('../components/notification-setting-window.vue').then(m => m.default), { + includingTypes: this.props.includingTypes, + }).$on('ok', async ({ includingTypes }) => { + this.props.includingTypes = includingTypes; + this.save(); + }); + } + } }); </script> |