通知の管理を強化

Resolve #3772

4 files changed, 51 insertions, 21 deletions

diff --git a/src/client/app/common/views/components/notification-settings.vue b/src/client/app/common/views/components/notification-settings.vue
new file mode 100644
index 0000000000..566d0b5702
--- /dev/null
+++ b/src/client/app/common/views/components/notification-settings.vue
@@ -0,0 +1,44 @@
+<template>
+<ui-card>
+	<div slot="title"><fa :icon="['far', 'bell']"/> {{ $t('notification') }}</div>
+	<section>
+		<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
+			{{ $t('auto-watch') }}<span slot="desc">{{ $t('auto-watch-desc') }}</span>
+		</ui-switch>
+		<section>
+			<ui-button @click="readAllNotifications">{{ $t('mark-as-read-all-notifications') }}</ui-button>
+			<ui-button @click="readAllUnreadNotes">{{ $t('mark-as-read-all-unread-notes') }}</ui-button>
+			<ui-button @click="readAllMessagingMessages">{{ $t('mark-as-read-all-talk-messages') }}</ui-button>
+		</section>
+	</section>
+</ui-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/notification-settings.vue'),
+
+	methods: {
+		onChangeAutoWatch(v) {
+			this.$root.api('i/update', {
+				autoWatch: v
+			});
+		},
+
+		readAllUnreadNotes() {
+			this.$root.api('i/read_all_unread_notes');
+		},
+
+		readAllMessagingMessages() {
+			this.$root.api('i/read_all_messaging_messages');
+		},
+
+		readAllNotifications() {
+			this.$root.api('notifications/mark_all_as_read');
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 921aa59c5e..741e11db15 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -170,17 +170,7 @@
 			</section>
 		</ui-card>
 
-		<ui-card class="notification" v-show="page == 'notification'">
-			<div slot="title"><fa :icon="['far', 'bell']"/> {{ $t('notification') }}</div>
-			<section>
-				<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
-					{{ $t('auto-watch') }}<span slot="desc">{{ $t('auto-watch-desc') }}</span>
-				</ui-switch>
-				<section>
-					<ui-button @click="readAllUnreadNotes">{{ $t('mark-as-read-all-unread-notes') }}</ui-button>
-				</section>
-			</section>
-		</ui-card>
+		<x-notification-settings v-show="page == 'notification'"/>
 
 		<div class="drive" v-if="page == 'drive'">
 			<x-drive-settings/>
@@ -289,6 +279,7 @@ import XPasswordSettings from '../../../common/views/components/password-setting
 import XProfileEditor from '../../../common/views/components/profile-editor.vue';
 import XApiSettings from '../../../common/views/components/api-settings.vue';
 import XLanguageSettings from '../../../common/views/components/language-settings.vue';
+import XNotificationSettings from '../../../common/views/components/notification-settings.vue';
 
 import { url, clientVersion as version } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
@@ -308,6 +299,7 @@ export default Vue.extend({
 		XProfileEditor,
 		XApiSettings,
 		XLanguageSettings,
+		XNotificationSettings,
 	},
 	props: {
 		initialPage: {
@@ -531,9 +523,6 @@ export default Vue.extend({
 		});
 	},
 	methods: {
-		readAllUnreadNotes() {
-			this.$root.api('i/read_all_unread_notes');
-		},
 		customizeHome() {
 			this.$router.push('/i/customize-home');
 			this.$emit('done');
@@ -552,11 +541,6 @@ export default Vue.extend({
 				wallpaperId: null
 			});
 		},
-		onChangeAutoWatch(v) {
-			this.$root.api('i/update', {
-				autoWatch: v
-			});
-		},
 		checkForUpdate() {
 			this.checkingForUpdate = true;
 			checkForUpdate(this.$root, true, true).then(newer => {
diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue
index 69f7b902c8..c6e5b646f2 100644
--- a/src/client/app/mobile/views/pages/notifications.vue
+++ b/src/client/app/mobile/views/pages/notifications.vue
@@ -41,8 +41,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 main
 	width 100%
 	max-width 680px
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index cdeb8a50ff..3aa8bb7673 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -94,6 +94,8 @@
 				</section>
 			</ui-card>
 
+			<x-notification-settings/>
+
 			<x-drive-settings/>
 
 			<x-mute-and-block/>
@@ -157,6 +159,7 @@ import XProfileEditor from '../../../common/views/components/profile-editor.vue'
 import XApiSettings from '../../../common/views/components/api-settings.vue';
 import XLanguageSettings from '../../../common/views/components/language-settings.vue';
 import XIntegrationSettings from '../../../common/views/components/integration-settings.vue';
+import XNotificationSettings from '../../../common/views/components/notification-settings.vue';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/settings.vue'),
@@ -170,6 +173,7 @@ export default Vue.extend({
 		XApiSettings,
 		XLanguageSettings,
 		XIntegrationSettings,
+		XNotificationSettings,
 	},
 
 	data() {