mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-08 23:33:09 +02:00
Feat: 未読通知数を表示できるように (#11982)
* 未読通知数を表示できるように * Update Changelog * オプトインにする * Fix lint * (add) テスト通知のプッシュ通知を追加 * add test * フロントエンドの表示上限を99に変更 * Make it default on * 共通スタイルをくくりだす * Update Changelog * tweak * Update UserEntityService.ts * rename * Update navbar-for-mobile.vue --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
parent
e85b8217c0
commit
5fb6847419
22 changed files with 173 additions and 28 deletions
|
@ -21,6 +21,7 @@
|
||||||
- 最大でも黄色いエリア内にデコレーションを収めることを推奨します。
|
- 最大でも黄色いエリア内にデコレーションを収めることを推奨します。
|
||||||
- 画像は512x512pxを推奨します。
|
- 画像は512x512pxを推奨します。
|
||||||
- Enhance: すでにフォローしたすべての人の返信をTLに追加できるように
|
- Enhance: すでにフォローしたすべての人の返信をTLに追加できるように
|
||||||
|
- Enhance: 未読の通知数を表示できるように
|
||||||
- Enhance: ローカリゼーションの更新
|
- Enhance: ローカリゼーションの更新
|
||||||
- Enhance: 依存関係の更新
|
- Enhance: 依存関係の更新
|
||||||
|
|
||||||
|
@ -63,6 +64,7 @@
|
||||||
- Fix: リノートをリノートできるのを修正
|
- Fix: リノートをリノートできるのを修正
|
||||||
- Fix: アクセストークンを削除すると、通知が取得できなくなる場合がある問題を修正
|
- Fix: アクセストークンを削除すると、通知が取得できなくなる場合がある問題を修正
|
||||||
- Fix: 自身の宛先なしダイレクト投稿がストリーミングで流れてこない問題を修正
|
- Fix: 自身の宛先なしダイレクト投稿がストリーミングで流れてこない問題を修正
|
||||||
|
- Fix: サーバーサイドからのテスト通知を正しく行えるように修正
|
||||||
|
|
||||||
## 2023.10.2
|
## 2023.10.2
|
||||||
|
|
||||||
|
|
BIN
packages/backend/assets/tabler-badges/bell.png
Normal file
BIN
packages/backend/assets/tabler-badges/bell.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 KiB |
|
@ -144,7 +144,9 @@ export class NotificationService implements OnApplicationShutdown {
|
||||||
this.globalEventService.publishMainStream(notifieeId, 'notification', packed);
|
this.globalEventService.publishMainStream(notifieeId, 'notification', packed);
|
||||||
|
|
||||||
// 2秒経っても(今回作成した)通知が既読にならなかったら「未読の通知がありますよ」イベントを発行する
|
// 2秒経っても(今回作成した)通知が既読にならなかったら「未読の通知がありますよ」イベントを発行する
|
||||||
setTimeout(2000, 'unread notification', { signal: this.#shutdownController.signal }).then(async () => {
|
// テスト通知の場合は即時発行
|
||||||
|
const interval = notification.type === 'test' ? 0 : 2000;
|
||||||
|
setTimeout(interval, 'unread notification', { signal: this.#shutdownController.signal }).then(async () => {
|
||||||
const latestReadNotificationId = await this.redisClient.get(`latestReadNotification:${notifieeId}`);
|
const latestReadNotificationId = await this.redisClient.get(`latestReadNotification:${notifieeId}`);
|
||||||
if (latestReadNotificationId && (latestReadNotificationId >= (await redisIdPromise)!)) return;
|
if (latestReadNotificationId && (latestReadNotificationId >= (await redisIdPromise)!)) return;
|
||||||
|
|
||||||
|
|
|
@ -15,6 +15,7 @@ import { awaitAll } from '@/misc/prelude/await-all.js';
|
||||||
import { USER_ACTIVE_THRESHOLD, USER_ONLINE_THRESHOLD } from '@/const.js';
|
import { USER_ACTIVE_THRESHOLD, USER_ONLINE_THRESHOLD } from '@/const.js';
|
||||||
import type { MiLocalUser, MiPartialLocalUser, MiPartialRemoteUser, MiRemoteUser, MiUser } from '@/models/User.js';
|
import type { MiLocalUser, MiPartialLocalUser, MiPartialRemoteUser, MiRemoteUser, MiUser } from '@/models/User.js';
|
||||||
import { birthdaySchema, descriptionSchema, localUsernameSchema, locationSchema, nameSchema, passwordSchema } from '@/models/User.js';
|
import { birthdaySchema, descriptionSchema, localUsernameSchema, locationSchema, nameSchema, passwordSchema } from '@/models/User.js';
|
||||||
|
import { MiNotification } from '@/models/Notification.js';
|
||||||
import type { UsersRepository, UserSecurityKeysRepository, FollowingsRepository, FollowRequestsRepository, BlockingsRepository, MutingsRepository, DriveFilesRepository, NoteUnreadsRepository, UserNotePiningsRepository, UserProfilesRepository, AnnouncementReadsRepository, AnnouncementsRepository, MiUserProfile, RenoteMutingsRepository, UserMemoRepository } from '@/models/_.js';
|
import type { UsersRepository, UserSecurityKeysRepository, FollowingsRepository, FollowRequestsRepository, BlockingsRepository, MutingsRepository, DriveFilesRepository, NoteUnreadsRepository, UserNotePiningsRepository, UserProfilesRepository, AnnouncementReadsRepository, AnnouncementsRepository, MiUserProfile, RenoteMutingsRepository, UserMemoRepository } from '@/models/_.js';
|
||||||
import { bindThis } from '@/decorators.js';
|
import { bindThis } from '@/decorators.js';
|
||||||
import { RoleService } from '@/core/RoleService.js';
|
import { RoleService } from '@/core/RoleService.js';
|
||||||
|
@ -235,17 +236,34 @@ export class UserEntityService implements OnModuleInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
@bindThis
|
@bindThis
|
||||||
public async getHasUnreadNotification(userId: MiUser['id']): Promise<boolean> {
|
public async getNotificationsInfo(userId: MiUser['id']): Promise<{
|
||||||
|
hasUnread: boolean;
|
||||||
|
unreadCount: number;
|
||||||
|
}> {
|
||||||
|
const response = {
|
||||||
|
hasUnread: false,
|
||||||
|
unreadCount: 0,
|
||||||
|
};
|
||||||
|
|
||||||
const latestReadNotificationId = await this.redisClient.get(`latestReadNotification:${userId}`);
|
const latestReadNotificationId = await this.redisClient.get(`latestReadNotification:${userId}`);
|
||||||
|
|
||||||
const latestNotificationIdsRes = await this.redisClient.xrevrange(
|
if (!latestReadNotificationId) {
|
||||||
`notificationTimeline:${userId}`,
|
response.unreadCount = await this.redisClient.xlen(`notificationTimeline:${userId}`);
|
||||||
'+',
|
} else {
|
||||||
'-',
|
const latestNotificationIdsRes = await this.redisClient.xrevrange(
|
||||||
'COUNT', 1);
|
`notificationTimeline:${userId}`,
|
||||||
const latestNotificationId = latestNotificationIdsRes[0]?.[0];
|
'+',
|
||||||
|
latestReadNotificationId,
|
||||||
|
);
|
||||||
|
|
||||||
return latestNotificationId != null && (latestReadNotificationId == null || latestReadNotificationId < latestNotificationId);
|
response.unreadCount = (latestNotificationIdsRes.length - 1 >= 0) ? latestNotificationIdsRes.length - 1 : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (response.unreadCount > 0) {
|
||||||
|
response.hasUnread = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
@bindThis
|
@bindThis
|
||||||
|
@ -331,6 +349,8 @@ export class UserEntityService implements OnModuleInit {
|
||||||
...announcement,
|
...announcement,
|
||||||
})) : null;
|
})) : null;
|
||||||
|
|
||||||
|
const notificationsInfo = isMe && opts.detail ? await this.getNotificationsInfo(user.id) : null;
|
||||||
|
|
||||||
const packed = {
|
const packed = {
|
||||||
id: user.id,
|
id: user.id,
|
||||||
name: user.name,
|
name: user.name,
|
||||||
|
@ -449,8 +469,9 @@ export class UserEntityService implements OnModuleInit {
|
||||||
unreadAnnouncements,
|
unreadAnnouncements,
|
||||||
hasUnreadAntenna: this.getHasUnreadAntenna(user.id),
|
hasUnreadAntenna: this.getHasUnreadAntenna(user.id),
|
||||||
hasUnreadChannel: false, // 後方互換性のため
|
hasUnreadChannel: false, // 後方互換性のため
|
||||||
hasUnreadNotification: this.getHasUnreadNotification(user.id),
|
hasUnreadNotification: notificationsInfo?.hasUnread, // 後方互換性のため
|
||||||
hasPendingReceivedFollowRequest: this.getHasPendingReceivedFollowRequest(user.id),
|
hasPendingReceivedFollowRequest: this.getHasPendingReceivedFollowRequest(user.id),
|
||||||
|
unreadNotificationsCount: notificationsInfo?.unreadCount,
|
||||||
mutedWords: profile!.mutedWords,
|
mutedWords: profile!.mutedWords,
|
||||||
mutedInstances: profile!.mutedInstances,
|
mutedInstances: profile!.mutedInstances,
|
||||||
mutingNotificationTypes: [], // 後方互換性のため
|
mutingNotificationTypes: [], // 後方互換性のため
|
||||||
|
|
|
@ -399,6 +399,10 @@ export const packedMeDetailedOnlySchema = {
|
||||||
type: 'boolean',
|
type: 'boolean',
|
||||||
nullable: false, optional: false,
|
nullable: false, optional: false,
|
||||||
},
|
},
|
||||||
|
unreadNotificationsCount: {
|
||||||
|
type: 'number',
|
||||||
|
nullable: false, optional: false,
|
||||||
|
},
|
||||||
mutedWords: {
|
mutedWords: {
|
||||||
type: 'array',
|
type: 'array',
|
||||||
nullable: false, optional: false,
|
nullable: false, optional: false,
|
||||||
|
|
|
@ -164,6 +164,7 @@ describe('ユーザー', () => {
|
||||||
hasUnreadAntenna: user.hasUnreadAntenna,
|
hasUnreadAntenna: user.hasUnreadAntenna,
|
||||||
hasUnreadChannel: user.hasUnreadChannel,
|
hasUnreadChannel: user.hasUnreadChannel,
|
||||||
hasUnreadNotification: user.hasUnreadNotification,
|
hasUnreadNotification: user.hasUnreadNotification,
|
||||||
|
unreadNotificationsCount: user.unreadNotificationsCount,
|
||||||
hasPendingReceivedFollowRequest: user.hasPendingReceivedFollowRequest,
|
hasPendingReceivedFollowRequest: user.hasPendingReceivedFollowRequest,
|
||||||
unreadAnnouncements: user.unreadAnnouncements,
|
unreadAnnouncements: user.unreadAnnouncements,
|
||||||
mutedWords: user.mutedWords,
|
mutedWords: user.mutedWords,
|
||||||
|
@ -414,6 +415,7 @@ describe('ユーザー', () => {
|
||||||
assert.strictEqual(response.hasUnreadAntenna, false);
|
assert.strictEqual(response.hasUnreadAntenna, false);
|
||||||
assert.strictEqual(response.hasUnreadChannel, false);
|
assert.strictEqual(response.hasUnreadChannel, false);
|
||||||
assert.strictEqual(response.hasUnreadNotification, false);
|
assert.strictEqual(response.hasUnreadNotification, false);
|
||||||
|
assert.strictEqual(response.unreadNotificationsCount, 0);
|
||||||
assert.strictEqual(response.hasPendingReceivedFollowRequest, false);
|
assert.strictEqual(response.hasPendingReceivedFollowRequest, false);
|
||||||
assert.deepStrictEqual(response.unreadAnnouncements, []);
|
assert.deepStrictEqual(response.unreadAnnouncements, []);
|
||||||
assert.deepStrictEqual(response.mutedWords, []);
|
assert.deepStrictEqual(response.mutedWords, []);
|
||||||
|
|
|
@ -226,11 +226,18 @@ export async function mainBoot() {
|
||||||
});
|
});
|
||||||
|
|
||||||
main.on('readAllNotifications', () => {
|
main.on('readAllNotifications', () => {
|
||||||
updateAccount({ hasUnreadNotification: false });
|
updateAccount({
|
||||||
|
hasUnreadNotification: false,
|
||||||
|
unreadNotificationsCount: 0,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
main.on('unreadNotification', () => {
|
main.on('unreadNotification', () => {
|
||||||
updateAccount({ hasUnreadNotification: true });
|
const unreadNotificationsCount = ($i?.unreadNotificationsCount ?? 0) + 1;
|
||||||
|
updateAccount({
|
||||||
|
hasUnreadNotification: true,
|
||||||
|
unreadNotificationsCount,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
main.on('unreadMention', () => {
|
main.on('unreadMention', () => {
|
||||||
|
|
|
@ -7,16 +7,18 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
|
<MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
|
||||||
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
|
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<template v-for="item in items">
|
<template v-for="item in items" :key="item.text">
|
||||||
<button v-if="item.action" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
|
<button v-if="item.action" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
|
||||||
<i class="icon" :class="item.icon"></i>
|
<i class="icon" :class="item.icon"></i>
|
||||||
<div class="text">{{ item.text }}</div>
|
<div class="text">{{ item.text }}</div>
|
||||||
<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
|
<span v-if="item.indicate && item.indicateValue" class="_indicateCounter indicatorWithValue">{{ item.indicateValue }}</span>
|
||||||
|
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
|
||||||
</button>
|
</button>
|
||||||
<MkA v-else v-click-anime :to="item.to" class="item" @click.passive="close()">
|
<MkA v-else v-click-anime :to="item.to" class="item" @click.passive="close()">
|
||||||
<i class="icon" :class="item.icon"></i>
|
<i class="icon" :class="item.icon"></i>
|
||||||
<div class="text">{{ item.text }}</div>
|
<div class="text">{{ item.text }}</div>
|
||||||
<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
|
<span v-if="item.indicate && item.indicateValue" class="_indicateCounter indicatorWithValue">{{ item.indicateValue }}</span>
|
||||||
|
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
|
||||||
</MkA>
|
</MkA>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { } from 'vue';
|
import { } from 'vue';
|
||||||
import MkModal from '@/components/MkModal.vue';
|
import MkModal from '@/components/MkModal.vue';
|
||||||
import { navbarItemDef } from '@/navbar';
|
import { navbarItemDef } from '@/navbar.js';
|
||||||
import { defaultStore } from '@/store.js';
|
import { defaultStore } from '@/store.js';
|
||||||
import { deviceKind } from '@/scripts/device-kind.js';
|
import { deviceKind } from '@/scripts/device-kind.js';
|
||||||
|
|
||||||
|
@ -57,6 +59,7 @@ const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k =>
|
||||||
to: def.to,
|
to: def.to,
|
||||||
action: def.action,
|
action: def.action,
|
||||||
indicate: def.indicated,
|
indicate: def.indicated,
|
||||||
|
indicateValue: def.indicateValue,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
|
@ -116,6 +119,17 @@ function close() {
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .indicatorWithValue {
|
||||||
|
position: absolute;
|
||||||
|
top: 32px;
|
||||||
|
left: 16px;
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
top: 16px;
|
||||||
|
left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> .indicator {
|
> .indicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 32px;
|
top: 32px;
|
||||||
|
|
|
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onUnmounted, onMounted, computed, shallowRef } from 'vue';
|
import { onUnmounted, onDeactivated, onMounted, computed, shallowRef } from 'vue';
|
||||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||||
import XNotification from '@/components/MkNotification.vue';
|
import XNotification from '@/components/MkNotification.vue';
|
||||||
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
|
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
|
||||||
|
@ -68,6 +68,10 @@ onMounted(() => {
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
if (connection) connection.dispose();
|
if (connection) connection.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
onDeactivated(() => {
|
||||||
|
if (connection) connection.dispose();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
|
|
|
@ -19,6 +19,15 @@ export const navbarItemDef = reactive({
|
||||||
icon: 'ti ti-bell',
|
icon: 'ti ti-bell',
|
||||||
show: computed(() => $i != null),
|
show: computed(() => $i != null),
|
||||||
indicated: computed(() => $i != null && $i.hasUnreadNotification),
|
indicated: computed(() => $i != null && $i.hasUnreadNotification),
|
||||||
|
indicateValue: computed(() => {
|
||||||
|
if (!$i || $i.unreadNotificationsCount === 0) return '';
|
||||||
|
|
||||||
|
if ($i.unreadNotificationsCount > 99) {
|
||||||
|
return '99+';
|
||||||
|
} else {
|
||||||
|
return $i.unreadNotificationsCount.toString();
|
||||||
|
}
|
||||||
|
}),
|
||||||
to: '/my/notifications',
|
to: '/my/notifications',
|
||||||
},
|
},
|
||||||
drive: {
|
drive: {
|
||||||
|
|
|
@ -74,11 +74,11 @@ let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage
|
||||||
const userLists = await os.api('users/lists/list');
|
const userLists = await os.api('users/lists/list');
|
||||||
|
|
||||||
async function readAllUnreadNotes() {
|
async function readAllUnreadNotes() {
|
||||||
await os.api('i/read-all-unread-notes');
|
await os.apiWithDialog('i/read-all-unread-notes');
|
||||||
}
|
}
|
||||||
|
|
||||||
async function readAllNotifications() {
|
async function readAllNotifications() {
|
||||||
await os.api('notifications/mark-all-as-read');
|
await os.apiWithDialog('notifications/mark-all-as-read');
|
||||||
}
|
}
|
||||||
|
|
||||||
async function updateReceiveConfig(type, value) {
|
async function updateReceiveConfig(type, value) {
|
||||||
|
|
|
@ -155,6 +155,19 @@ hr {
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
._indicateCounter {
|
||||||
|
display: inline-flex;
|
||||||
|
color: var(--fgOnAccent);
|
||||||
|
font-weight: 700;
|
||||||
|
background: var(--indicator);
|
||||||
|
height: 1.5em;
|
||||||
|
min-width: 1.5em;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 99rem;
|
||||||
|
padding: 0.3em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
._noSelect {
|
._noSelect {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
|
|
|
@ -67,7 +67,8 @@ let notifications = $ref<Misskey.entities.Notification[]>([]);
|
||||||
|
|
||||||
function onNotification(notification: Misskey.entities.Notification, isClient = false) {
|
function onNotification(notification: Misskey.entities.Notification, isClient = false) {
|
||||||
if (document.visibilityState === 'visible') {
|
if (document.visibilityState === 'visible') {
|
||||||
if (!isClient) {
|
if (!isClient && notification.type !== 'test') {
|
||||||
|
// サーバーサイドのテスト通知の際は自動で既読をつけない(テストできないので)
|
||||||
useStream().send('readNotification');
|
useStream().send('readNotification');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div v-if="item === '-'" :class="$style.divider"></div>
|
<div v-if="item === '-'" :class="$style.divider"></div>
|
||||||
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" class="_button" :class="[$style.item, { [$style.active]: navbarItemDef[item].active }]" :activeClass="$style.active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" class="_button" :class="[$style.item, { [$style.active]: navbarItemDef[item].active }]" :activeClass="$style.active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
||||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
||||||
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
|
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
|
||||||
|
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
|
||||||
|
<i v-else class="_indicatorCircle"></i>
|
||||||
|
</span>
|
||||||
</component>
|
</component>
|
||||||
</template>
|
</template>
|
||||||
<div :class="$style.divider"></div>
|
<div :class="$style.divider"></div>
|
||||||
|
@ -252,6 +255,12 @@ function more() {
|
||||||
color: var(--navIndicator);
|
color: var(--navIndicator);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
animation: blink 1s infinite;
|
||||||
|
|
||||||
|
&:has(.itemIndicateValueIcon) {
|
||||||
|
animation: none;
|
||||||
|
left: auto;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemText {
|
.itemText {
|
||||||
|
|
|
@ -29,7 +29,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
|
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
|
||||||
>
|
>
|
||||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
||||||
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
|
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
|
||||||
|
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
|
||||||
|
<i v-else class="_indicatorCircle"></i>
|
||||||
|
</span>
|
||||||
</component>
|
</component>
|
||||||
</template>
|
</template>
|
||||||
<div :class="$style.divider"></div>
|
<div :class="$style.divider"></div>
|
||||||
|
@ -106,7 +109,7 @@ function more(ev: MouseEvent) {
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
.root {
|
.root {
|
||||||
--nav-width: 250px;
|
--nav-width: 250px;
|
||||||
--nav-icon-only-width: 72px;
|
--nav-icon-only-width: 80px;
|
||||||
|
|
||||||
flex: 0 0 var(--nav-width);
|
flex: 0 0 var(--nav-width);
|
||||||
width: var(--nav-width);
|
width: var(--nav-width);
|
||||||
|
@ -312,6 +315,13 @@ function more(ev: MouseEvent) {
|
||||||
color: var(--navIndicator);
|
color: var(--navIndicator);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
animation: blink 1s infinite;
|
||||||
|
|
||||||
|
&:has(.itemIndicateValueIcon) {
|
||||||
|
animation: none;
|
||||||
|
left: auto;
|
||||||
|
right: 40px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemText {
|
.itemText {
|
||||||
|
@ -475,6 +485,14 @@ function more(ev: MouseEvent) {
|
||||||
color: var(--navIndicator);
|
color: var(--navIndicator);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
animation: blink 1s infinite;
|
||||||
|
|
||||||
|
&:has(.itemIndicateValueIcon) {
|
||||||
|
animation: none;
|
||||||
|
top: 4px;
|
||||||
|
left: auto;
|
||||||
|
right: 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -21,7 +21,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div v-if="item === '-'" class="divider"></div>
|
<div v-if="item === '-'" class="divider"></div>
|
||||||
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
||||||
<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
|
<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
|
||||||
<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
|
<span v-if="navbarItemDef[item].indicated" class="indicator">
|
||||||
|
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
|
||||||
|
<i v-else class="_indicatorCircle"></i>
|
||||||
|
</span>
|
||||||
</component>
|
</component>
|
||||||
</template>
|
</template>
|
||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
|
@ -218,6 +221,12 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
|
||||||
color: var(--navIndicator);
|
color: var(--navIndicator);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
animation: blink 1s infinite;
|
animation: blink 1s infinite;
|
||||||
|
|
||||||
|
&:has(.itemIndicateValueIcon) {
|
||||||
|
animation: none;
|
||||||
|
left: auto;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -52,7 +52,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div v-if="isMobile" :class="$style.nav">
|
<div v-if="isMobile" :class="$style.nav">
|
||||||
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
|
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
|
||||||
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
|
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
|
||||||
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i :class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
|
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
|
||||||
|
<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
|
||||||
|
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
|
||||||
|
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
|
<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -485,5 +490,10 @@ body {
|
||||||
color: var(--indicator);
|
color: var(--indicator);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
animation: blink 1s infinite;
|
animation: blink 1s infinite;
|
||||||
|
|
||||||
|
&:has(.itemIndicateValueIcon) {
|
||||||
|
animation: none;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -27,7 +27,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div v-if="isMobile" ref="navFooter" :class="$style.nav">
|
<div v-if="isMobile" ref="navFooter" :class="$style.nav">
|
||||||
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
|
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
|
||||||
<button :class="$style.navButton" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
|
<button :class="$style.navButton" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
|
||||||
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i :class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
|
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
|
||||||
|
<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
|
||||||
|
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
|
||||||
|
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
|
<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
|
||||||
<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
|
<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -444,6 +449,11 @@ $widgets-hide-threshold: 1090px;
|
||||||
color: var(--indicator);
|
color: var(--indicator);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
animation: blink 1s infinite;
|
animation: blink 1s infinite;
|
||||||
|
|
||||||
|
&:has(.itemIndicateValueIcon) {
|
||||||
|
animation: none;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuDrawerBg {
|
.menuDrawerBg {
|
||||||
|
|
|
@ -2488,6 +2488,7 @@ type MeDetailed = UserDetailed & {
|
||||||
hasUnreadMessagingMessage: boolean;
|
hasUnreadMessagingMessage: boolean;
|
||||||
hasUnreadNotification: boolean;
|
hasUnreadNotification: boolean;
|
||||||
hasUnreadSpecifiedNotes: boolean;
|
hasUnreadSpecifiedNotes: boolean;
|
||||||
|
unreadNotificationsCount: number;
|
||||||
hideOnlineStatus: boolean;
|
hideOnlineStatus: boolean;
|
||||||
injectFeaturedNote: boolean;
|
injectFeaturedNote: boolean;
|
||||||
integrations: Record<string, any>;
|
integrations: Record<string, any>;
|
||||||
|
@ -3023,8 +3024,8 @@ type UserSorting = '+follower' | '-follower' | '+createdAt' | '-createdAt' | '+u
|
||||||
// src/api.types.ts:16:32 - (ae-forgotten-export) The symbol "TODO" needs to be exported by the entry point index.d.ts
|
// src/api.types.ts:16:32 - (ae-forgotten-export) The symbol "TODO" needs to be exported by the entry point index.d.ts
|
||||||
// src/api.types.ts:18:25 - (ae-forgotten-export) The symbol "NoParams" needs to be exported by the entry point index.d.ts
|
// src/api.types.ts:18:25 - (ae-forgotten-export) The symbol "NoParams" needs to be exported by the entry point index.d.ts
|
||||||
// src/api.types.ts:633:18 - (ae-forgotten-export) The symbol "ShowUserReq" needs to be exported by the entry point index.d.ts
|
// src/api.types.ts:633:18 - (ae-forgotten-export) The symbol "ShowUserReq" needs to be exported by the entry point index.d.ts
|
||||||
// src/entities.ts:115:2 - (ae-forgotten-export) The symbol "notificationTypes_2" needs to be exported by the entry point index.d.ts
|
// src/entities.ts:116:2 - (ae-forgotten-export) The symbol "notificationTypes_2" needs to be exported by the entry point index.d.ts
|
||||||
// src/entities.ts:611:2 - (ae-forgotten-export) The symbol "ModerationLogPayloads" needs to be exported by the entry point index.d.ts
|
// src/entities.ts:612:2 - (ae-forgotten-export) The symbol "ModerationLogPayloads" needs to be exported by the entry point index.d.ts
|
||||||
// src/streaming.types.ts:33:4 - (ae-forgotten-export) The symbol "FIXME" needs to be exported by the entry point index.d.ts
|
// src/streaming.types.ts:33:4 - (ae-forgotten-export) The symbol "FIXME" needs to be exported by the entry point index.d.ts
|
||||||
|
|
||||||
// (No @packageDocumentation comment for this package)
|
// (No @packageDocumentation comment for this package)
|
||||||
|
|
|
@ -106,6 +106,7 @@ export type MeDetailed = UserDetailed & {
|
||||||
hasUnreadMessagingMessage: boolean;
|
hasUnreadMessagingMessage: boolean;
|
||||||
hasUnreadNotification: boolean;
|
hasUnreadNotification: boolean;
|
||||||
hasUnreadSpecifiedNotes: boolean;
|
hasUnreadSpecifiedNotes: boolean;
|
||||||
|
unreadNotificationsCount: number;
|
||||||
hideOnlineStatus: boolean;
|
hideOnlineStatus: boolean;
|
||||||
injectFeaturedNote: boolean;
|
injectFeaturedNote: boolean;
|
||||||
integrations: Record<string, any>;
|
integrations: Record<string, any>;
|
||||||
|
|
|
@ -225,6 +225,13 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
|
||||||
data,
|
data,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
case 'test':
|
||||||
|
return [t('_notification.testNotification'), {
|
||||||
|
body: t('_notification.notificationWillBeDisplayedLikeThis'),
|
||||||
|
badge: iconUrl('bell'),
|
||||||
|
data,
|
||||||
|
}];
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,6 +41,7 @@ export type BadgeNames =
|
||||||
| 'antenna'
|
| 'antenna'
|
||||||
| 'arrow-back-up'
|
| 'arrow-back-up'
|
||||||
| 'at'
|
| 'at'
|
||||||
|
| 'bell'
|
||||||
| 'chart-arrows'
|
| 'chart-arrows'
|
||||||
| 'circle-check'
|
| 'circle-check'
|
||||||
| 'medal'
|
| 'medal'
|
||||||
|
|
Loading…
Reference in a new issue