通知のフィルタ (#5224)

* ✌️

* Deck
This commit is contained in:
syuilo 2019-07-28 04:44:09 +09:00 committed by GitHub
parent 6516bd2ade
commit 4277e53433
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 101 additions and 8 deletions

View File

@ -37,6 +37,17 @@ common:
reload-to-apply-the-setting: "この設定を反映するにはページをリロードする必要があります。今すぐリロードしますか?"
fetching-as-ap-object: "連合に照会中"
unfollow-confirm: "{name}さんをフォロー解除しますか?"
notification-type: "通知の種類"
notification-types:
all: "すべて"
pollVote: "投票"
follow: "フォロー"
receiveFollowRequest: "フォローリクエスト"
reply: "返信"
quote: "引用"
renote: "Renote"
mention: "言及"
reaction: "リアクション"
got-it: "わかった"
customization-tips:

View File

@ -98,7 +98,7 @@ export default Vue.extend({
return {
inputValue: this.input && this.input.default ? this.input.default : null,
userInputValue: null,
selectedValue: this.select ? this.select.items ? this.select.items[0].value : this.select.groupedItems[0].items[0].value : null,
selectedValue: this.select ? this.select.default ? this.select.default : this.select.items ? this.select.items[0].value : this.select.groupedItems[0].items[0].value : null,
canOk: true,
faTimesCircle, faQuestionCircle
};

View File

@ -1,8 +1,8 @@
<template>
<x-column :name="name" :column="column" :is-stacked="isStacked">
<x-column :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
<template #header><fa :icon="['far', 'bell']"/>{{ name }}</template>
<x-notifications/>
<x-notifications :type="column.notificationType === 'all' ? null : column.notificationType"/>
</x-column>
</template>
@ -30,11 +30,46 @@ export default Vue.extend({
}
},
data() {
return {
menu: null,
}
},
computed: {
name(): string {
if (this.column.name) return this.column.name;
return this.$t('@deck.notifications');
}
},
created() {
if (this.column.notificationType == null) {
this.column.notificationType = 'all';
this.$store.commit('updateDeckColumn', this.column);
}
this.menu = [{
icon: 'cog',
text: this.$t('@.notification-type'),
action: () => {
this.$root.dialog({
title: this.$t('@.notification-type'),
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;
this.$store.commit('updateDeckColumn', this.column);
});
}
}];
},
});
</script>

View File

@ -47,12 +47,22 @@ export default Vue.extend({
}),
],
props: {
type: {
type: String,
required: false
}
},
data() {
return {
connection: null,
pagination: {
endpoint: 'i/notifications',
limit: 20,
params: () => ({
includeTypes: this.type ? [this.type] : undefined
})
}
};
},
@ -69,6 +79,12 @@ export default Vue.extend({
}
},
watch: {
type() {
this.reload();
}
},
mounted() {
this.connection = this.$root.stream.useSharedConnection('main');
this.connection.on('notification', this.onNotification);

View File

@ -153,6 +153,13 @@ export default Vue.extend({
paging({}),
],
props: {
type: {
type: String,
required: false
}
},
data() {
return {
connection: null,
@ -160,6 +167,9 @@ export default Vue.extend({
pagination: {
endpoint: 'i/notifications',
limit: 10,
params: () => ({
includeTypes: this.type ? [this.type] : undefined
})
}
};
},
@ -176,6 +186,12 @@ export default Vue.extend({
}
},
watch: {
type() {
this.reload();
}
},
mounted() {
this.connection = this.$root.stream.useSharedConnection('main');
this.connection.on('notification', this.onNotification);

View File

@ -1,10 +1,10 @@
<template>
<div class="mkw-notifications">
<ui-container :show-header="!props.compact">
<template #header><fa :icon="['far', 'bell']"/>{{ $t('title') }}</template>
<!-- <button #func :title="$t('title')" @click="settings"><fa icon="cog"/></button> -->
<template #header><fa :icon="['far', 'bell']"/>{{ props.type === 'all' ? $t('title') : $t('@.notification-types.' + props.type) }}</template>
<template #func><button :title="$t('@.notification-type')" @click="settings"><fa icon="cog"/></button></template>
<mk-notifications :class="$style.notifications"/>
<mk-notifications :class="$style.notifications" :type="props.type === 'all' ? null : props.type"/>
</ui-container>
</div>
</template>
@ -16,13 +16,28 @@ import i18n from '../../../i18n';
export default define({
name: 'notifications',
props: () => ({
compact: false
compact: false,
type: 'all'
})
}).extend({
i18n: i18n('desktop/views/widgets/notifications.vue'),
methods: {
settings() {
alert('not implemented yet');
this.$root.dialog({
title: this.$t('@.notification-type'),
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.props.type,
},
showCancelButton: true
}).then(({ canceled, result: type }) => {
if (canceled) return;
this.props.type = type;
this.save();
});
},
func() {
this.props.compact = !this.props.compact;