mirror of
https://iceshrimp.dev/iceshrimp/iceshrimp
synced 2024-11-24 07:06:07 +09:00
feat(client): 通知ページで通知の種類によるフィルタ
This commit is contained in:
parent
395c8c36d0
commit
5d3604eb63
@ -15,6 +15,7 @@
|
||||
- クライアント: アニメーションを減らす設定をメニューのアニメーションにも適用するように
|
||||
- クライアント: MFM関数構文のサジェストを実装
|
||||
- クライアント: 未読の通知のみ表示する機能
|
||||
- クライアント: 通知ページで通知の種類によるフィルタ
|
||||
- ActivityPub: HTML -> MFMの変換を強化
|
||||
- API: i/notifications に unreadOnly オプションを追加
|
||||
- API: ap系のエンドポイントをログイン必須化+レートリミット追加
|
||||
|
@ -27,7 +27,7 @@
|
||||
<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
|
||||
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
|
||||
</button>
|
||||
<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger }">
|
||||
<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active">
|
||||
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
|
||||
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
|
||||
<span>{{ item.text }}</span>
|
||||
@ -175,6 +175,10 @@ export default defineComponent({
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: #ff2a2a;
|
||||
|
||||
@ -195,7 +199,16 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.active {
|
||||
color: var(--fgOnAccent);
|
||||
opacity: 1;
|
||||
|
||||
&:before {
|
||||
background: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
|
||||
@ -204,11 +217,6 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
//color: var(--fgOnAccent);
|
||||
//background: var(--accentDarken);
|
||||
}
|
||||
|
||||
&:not(:active):focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--focus) inset;
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<MkHeader :info="header"/>
|
||||
<div class="clupoqwt" v-size="{ min: [800] }">
|
||||
<XNotifications class="notifications" @before="before" @after="after" :unread-only="tab === 'unread'"/>
|
||||
<XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -13,6 +13,7 @@ import Progress from '@client/scripts/loading';
|
||||
import XNotifications from '@client/components/notifications.vue';
|
||||
import * as os from '@client/os';
|
||||
import * as symbols from '@client/symbols';
|
||||
import { notificationTypes } from '@/types';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@ -27,11 +28,17 @@ export default defineComponent({
|
||||
bg: 'var(--bg)',
|
||||
},
|
||||
tab: 'all',
|
||||
includeTypes: null,
|
||||
header: computed(() => ({
|
||||
title: this.$ts.notifications,
|
||||
icon: 'fas fa-bell',
|
||||
bg: 'var(--bg)',
|
||||
actions: [{
|
||||
text: this.$ts.filter,
|
||||
icon: 'fas fa-filter',
|
||||
highlighted: this.includeTypes != null,
|
||||
handler: this.setFilter,
|
||||
}, {
|
||||
text: this.$ts.markAllAsRead,
|
||||
icon: 'fas fa-check',
|
||||
handler: () => {
|
||||
@ -58,6 +65,24 @@ export default defineComponent({
|
||||
|
||||
after() {
|
||||
Progress.done();
|
||||
},
|
||||
|
||||
setFilter(ev) {
|
||||
const typeItems = notificationTypes.map(t => ({
|
||||
text: this.$t(`_notification._types.${t}`),
|
||||
active: this.includeTypes && this.includeTypes.includes(t),
|
||||
action: () => {
|
||||
this.includeTypes = [t];
|
||||
}
|
||||
}));
|
||||
const items = this.includeTypes != null ? [{
|
||||
icon: 'fas fa-times',
|
||||
text: this.$ts.clear,
|
||||
action: () => {
|
||||
this.includeTypes = null;
|
||||
}
|
||||
}, null, ...typeItems] : typeItems;
|
||||
os.popupMenu(items, ev.currentTarget || ev.target);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user