diff options
Diffstat (limited to 'src/client/components')
| -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 |
3 files changed, 133 insertions, 32 deletions
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) { |