worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #11982 from misskey-dev/misskey

Browse source
This commit is contained in:
NoriDev 2023-10-12 16:16:35 +09:00
parent 517e26dc0f a818cd5163
commit 0e2f25bc05
27 changed files with 339 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG_CHERRYPICK.md
View file

@ -35,6 +35,10 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
## NOTE
- Misskey 2023.10.0 에서 제거된 노트 편집 기능이 계속 유지됩니다.
### General
- Feat: 未読の通知数を表示できるようになりました (misskey-dev/misskey#11982)
- Fix: サーバーサイドからのテスト通知を正しく行えるように修正 (misskey-dev/misskey#11982)
### Client
- Feat: 클라이언트 업데이트 알림 개선
- 알림 채널을 선택할 수 있음

1
locales/index.d.ts vendored
View file

@ -1221,6 +1221,7 @@ export interface Locale {
"privacyPolicy": string;
"privacyPolicyUrl": string;
"tosAndPrivacyPolicy": string;
"showUnreadNotificationCount": string;
"showCatOnly": string;
"additionalPermissionsForFlash": string;
"thisFlashRequiresTheFollowingPermissions": string;

1
locales/ja-JP.yml
View file

@ -1218,6 +1218,7 @@ impressumDescription: "ドイツなどの一部の国と地域では表示が義
privacyPolicy: "プライバシーポリシー"
privacyPolicyUrl: "プライバシーポリシーURL"
tosAndPrivacyPolicy: "利用規約・プライバシーポリシー"
showUnreadNotificationCount: "未読の通知の数を表示する"
showCatOnly: "キャット付きのみ"
additionalPermissionsForFlash: "Playへの追加許可"
thisFlashRequiresTheFollowingPermissions: "このPlayは以下の権限を要求しています"

BIN
packages/backend/assets/tabler-badges/bell.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

4
packages/backend/src/core/NotificationService.ts
View file

@ -144,7 +144,9 @@ export class NotificationService implements OnApplicationShutdown {
this.globalEventService.publishMainStream(notifieeId, 'notification', packed);
// 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}`);
if (latestReadNotificationId && (latestReadNotificationId >= (await redisIdPromise)!)) return;

38
packages/backend/src/core/entities/UserEntityService.ts
View file

@ -273,17 +273,34 @@ export class UserEntityService implements OnModuleInit {
}
@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 latestNotificationIdsRes = await this.redisClient.xrevrange(
`notificationTimeline:${userId}`,
'+',
'-',
'COUNT', 1);
const latestNotificationId = latestNotificationIdsRes[0]?.[0];
if (!latestReadNotificationId) {
response.unreadCount = await this.redisClient.xlen(`notificationTimeline:${userId}`);
} else {
const latestNotificationIdsRes = await this.redisClient.xrevrange(
`notificationTimeline:${userId}`,
'+',
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
@ -365,6 +382,8 @@ export class UserEntityService implements OnModuleInit {
const isAdmin = isMe && opts.detail ? this.roleService.isAdministrator(user) : null;
const unreadAnnouncements = isMe && opts.detail ? await this.announcementService.getUnreadAnnouncements(user) : null;
const notificationsInfo = isMe && opts.detail ? await this.getNotificationsInfo(user.id) : null;
const falsy = opts.detail ? false : undefined;
const packed = {
@ -480,8 +499,9 @@ export class UserEntityService implements OnModuleInit {
hasUnreadAntenna: this.getHasUnreadAntenna(user.id),
hasUnreadChannel: false, // 後方互換性のため
hasUnreadMessagingMessage: this.getHasUnreadMessagingMessage(user.id),
hasUnreadNotification: this.getHasUnreadNotification(user.id),
hasUnreadNotification: notificationsInfo?.hasUnread,
hasPendingReceivedFollowRequest: this.getHasPendingReceivedFollowRequest(user.id),
unreadNotificationCount: notificationsInfo?.unreadCount,
mutedWords: profile!.mutedWords,
mutedInstances: profile!.mutedInstances,
mutingNotificationTypes: [], // 後方互換性のため

4
packages/backend/src/models/json-schema/user.ts
View file

@ -375,6 +375,10 @@ export const packedMeDetailedOnlySchema = {
type: 'boolean',
nullable: false, optional: false,
},
unreadNotificationCount: {
type: 'number',
nullable: false, optional: false,
},
mutedWords: {
type: 'array',
nullable: false, optional: false,

2
packages/backend/test/e2e/users.ts
View file

@ -164,6 +164,7 @@ describe('ユーザー', () => {
hasUnreadAntenna: user.hasUnreadAntenna,
hasUnreadChannel: user.hasUnreadChannel,
hasUnreadNotification: user.hasUnreadNotification,
unreadNotificationCount: user.unreadNotificationCount,
hasPendingReceivedFollowRequest: user.hasPendingReceivedFollowRequest,
unreadAnnouncements: user.unreadAnnouncements,
mutedWords: user.mutedWords,
@ -414,6 +415,7 @@ describe('ユーザー', () => {
assert.strictEqual(response.hasUnreadAntenna, false);
assert.strictEqual(response.hasUnreadChannel, false);
assert.strictEqual(response.hasUnreadNotification, false);
assert.strictEqual(response.unreadNotificationCount, 0);
assert.strictEqual(response.hasPendingReceivedFollowRequest, false);
assert.deepStrictEqual(response.unreadAnnouncements, []);
assert.deepStrictEqual(response.mutedWords, []);

1
packages/cherrypick-js/etc/cherrypick-js.api.md
View file

@ -2525,6 +2525,7 @@ type MeDetailed = UserDetailed & {
hasUnreadMessagingMessage: boolean;
hasUnreadNotification: boolean;
hasUnreadSpecifiedNotes: boolean;
unreadNotificationCount: number;
hideOnlineStatus: boolean;
injectFeaturedNote: boolean;
integrations: Record<string, any>;

1
packages/cherrypick-js/src/entities.ts
View file

@ -98,6 +98,7 @@ export type MeDetailed = UserDetailed & {
hasUnreadMessagingMessage: boolean;
hasUnreadNotification: boolean;
hasUnreadSpecifiedNotes: boolean;
unreadNotificationCount: number;
hideOnlineStatus: boolean;
injectFeaturedNote: boolean;
integrations: Record<string, any>;

11
packages/frontend/src/boot/main-boot.ts
View file

@ -227,11 +227,18 @@ export async function mainBoot() {
});
main.on('readAllNotifications', () => {
updateAccount({ hasUnreadNotification: false });
updateAccount({
hasUnreadNotification: false,
unreadNotificationCount: 0,
});
});
main.on('unreadNotification', () => {
updateAccount({ hasUnreadNotification: true });
const unreadNotificationCount = ($i?.unreadNotificationCount ?? 0) + 1;
updateAccount({
hasUnreadNotification: true,
unreadNotificationCount,
});
});
main.on('unreadMention', () => {

38
packages/frontend/src/components/MkLaunchPad.vue
View file

@ -8,15 +8,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
<div class="main">
<template v-for="item in items">
<button v-if="item.action" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
<button v-if="item.action" :key="item.text" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
<i class="icon" :class="item.icon"></i>
<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 && defaultStore.state.showUnreadNotificationCount" class="indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
</button>
<MkA v-else v-click-anime :to="item.to" class="item" @click.passive="close()">
<MkA v-else :key="item.text" v-click-anime :to="item.to" class="item" @click.passive="close()">
<i class="icon" :class="item.icon"></i>
<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 && defaultStore.state.showUnreadNotificationCount" class="indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
</MkA>
</template>
</div>
@ -57,6 +59,7 @@ const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k =>
to: def.to,
action: def.action,
indicate: def.indicated,
indicateValue: def.indicateValue,
}));
function close() {
@ -116,6 +119,33 @@ function close() {
line-height: 1.5em;
}
> .indicatorWithValue {
position: absolute;
top: 32px;
left: 16px;
font-size: 8px;
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;
@media (max-width: 500px) {
top: 16px;
left: 8px;
}
> span {
display: inline-block;
padding: 0 .25em;
line-height: 1.5em;
}
}
> .indicator {
position: absolute;
top: 32px;

6
packages/frontend/src/components/MkNotifications.vue
View file

@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<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 XNotification from '@/components/MkNotification.vue';
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@ -70,6 +70,10 @@ onMounted(() => {
onUnmounted(() => {
if (connection) connection.dispose();
});
onDeactivated(() => {
if (connection) connection.dispose();
});
</script>
<style lang="scss" module>

9
packages/frontend/src/navbar.ts
View file

@ -20,6 +20,15 @@ export const navbarItemDef = reactive({
icon: 'ti ti-bell',
show: computed(() => $i != null),
indicated: computed(() => $i != null && $i.hasUnreadNotification),
indicateValue: computed(() => {
if (!$i || $i.unreadNotificationCount === 0) return '';
if ($i.unreadNotificationCount > 99) {
return '99+';
} else {
return $i.unreadNotificationCount.toString();
}
}),
to: '/my/notifications',
},
messaging: {

3
packages/frontend/src/pages/settings/general.vue
View file

@ -144,6 +144,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="useSystemFont">{{ i18n.ts.useSystemFont }}</MkSwitch>
<MkSwitch v-model="disableDrawer">{{ i18n.ts.disableDrawer }}</MkSwitch>
<MkSwitch v-model="forceShowAds">{{ i18n.ts.forceShowAds }}</MkSwitch>
<MkSwitch v-model="showUnreadNotificationCount">{{ i18n.ts.showUnreadNotificationCount }}</MkSwitch>
<MkSwitch v-model="enableDataSaverMode">{{ i18n.ts.dataSaver }}</MkSwitch>
</div>
<div>
@ -353,6 +354,7 @@ const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('
const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition'));
const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
const showUnreadNotificationCount = computed(defaultStore.makeGetterSetter('showUnreadNotificationCount'));
const newNoteReceivedNotificationBehavior = computed(defaultStore.makeGetterSetter('newNoteReceivedNotificationBehavior'));
const fontSize = computed(defaultStore.makeGetterSetter('fontSize'));
const collapseDefault = computed(defaultStore.makeGetterSetter('collapseDefault'));
@ -416,6 +418,7 @@ watch([
reactionsDisplaySize,
highlightSensitiveMedia,
keepScreenOn,
showUnreadNotificationCount,
enableDataSaverMode,
enableAbsoluteTime,
enableMarkByDate,

4
packages/frontend/src/store.ts
View file

@ -382,6 +382,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: false,
},
showUnreadNotificationCount: {
where: 'deviceAccount',
default: false,
},
// #region CherryPick
// - Settings/General

3
packages/frontend/src/ui/_common_/common.vue
View file

@ -67,7 +67,8 @@ let notifications = $ref<Misskey.entities.Notification[]>([]);
function onNotification(notification: Misskey.entities.Notification, isClient = false) {
if (document.visibilityState === 'visible') {
if (!isClient) {
if (!isClient && notification.type !== 'test') {
// サーバーサイドのテスト通知の際は自動で既読をつけない（テストできないので）
useStream().send('readNotification');
}

29
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View file

@ -20,7 +20,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="item === '-'" :class="$style.divider"></div>
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-vibrate="5" 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>
<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 && defaultStore.state.showUnreadNotificationCount" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
<i v-else class="_indicatorCircle"></i>
</span>
</component>
</template>
<div :class="$style.divider"></div>
@ -292,6 +295,30 @@ function more() {
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
left: auto;
right: 20px;
}
}
.itemIndicateValueIcon {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--navIndicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
line-height: 1.5em;
}
}
.itemText {

29
packages/frontend/src/ui/_common_/navbar.vue
View file

@ -31,7 +31,10 @@ SPDX-License-Identifier: AGPL-3.0-only
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>
<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 && defaultStore.state.showUnreadNotificationCount" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
<i v-else class="_indicatorCircle"></i>
</span>
</component>
</template>
<div :class="$style.divider"></div>
@ -156,6 +159,24 @@ function more(ev: MouseEvent) {
flex-direction: column;
}
.itemIndicateValueIcon {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--navIndicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
line-height: 1.5em;
}
}
.root:not(.iconOnly) {
.body {
width: var(--nav-width);
@ -352,6 +373,12 @@ function more(ev: MouseEvent) {
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
left: auto;
right: 40px;
}
}
.itemText {

29
packages/frontend/src/ui/classic.sidebar.vue
View file

@ -21,7 +21,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<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 v-vibrate="5" 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>
<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 && defaultStore.state.showUnreadNotificationCount" class="itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
<i v-else class="_indicatorCircle"></i>
</span>
</component>
</template>
<div class="divider"></div>
@ -241,6 +244,30 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
left: auto;
right: 20px;
}
& > .itemIndicateValueIcon {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--navIndicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
line-height: 1.5em;
}
}
}
&:hover {

27
packages/frontend/src/ui/deck.vue
View file

@ -52,7 +52,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="isMobile" :class="$style.nav">
<button v-vibrate="5" :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 v-vibrate="5" :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
<button v-vibrate="5" :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 v-vibrate="5" :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 v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" :class="$style.navButtonIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
<i v-else class="_indicatorCircle"></i>
</span>
</button>
<button v-vibrate="5" :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
</div>
@ -486,4 +492,23 @@ body {
font-size: 16px;
animation: blink 1s infinite;
}
.navButtonIndicateValueIcon {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--navIndicator);
height: 1em;
min-width: 1em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
font-size: .75em;
line-height: 1em;
}
}
</style>

30
packages/frontend/src/ui/friendly.vue
View file

@ -36,7 +36,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<!-- v-vibrate="5" <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 v-vibrate="5" :class="[$style.navButton, { [$style.active]: mainRouter.currentRoute.value.name === 'index' }]" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')" @touchstart="openAccountMenu" @touchend="closeAccountMenu"><i :class="$style.navButtonIcon" class="ti ti-home"></i><span v-if="queue > 0" :class="$style.navButtonIndicatorHome"><i class="_indicatorCircle"></i></span></button>
<button v-vibrate="5" :class="[$style.navButton, { [$style.active]: mainRouter.currentRoute.value.name === 'explore' }]" class="_button" @click="mainRouter.currentRoute.value.name === 'explore' ? top() : mainRouter.push('/explore')"><i :class="$style.navButtonIcon" class="ti ti-hash"></i></button>
<button v-vibrate="5" :class="[$style.navButton, { [$style.active]: mainRouter.currentRoute.value.name === 'my-notifications' }]" class="_button" @click="mainRouter.currentRoute.value.name === 'my-notifications' ? top() : 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 v-vibrate="5" :class="[$style.navButton, { [$style.active]: mainRouter.currentRoute.value.name === 'my-notifications' }]" class="_button" @click="mainRouter.currentRoute.value.name === 'my-notifications' ? top() : mainRouter.push('/my/notifications')">
<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" :class="$style.navButtonIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
<i v-else class="_indicatorCircle"></i>
</span>
</button>
<button v-vibrate="5" :class="[$style.navButton, { [$style.active]: ['messaging', 'messaging-room', 'messaging-room-group'].includes(<string>mainRouter.currentRoute.value.name) }]" class="_button" @click="mainRouter.currentRoute.value.name === 'messaging' ? top() : mainRouter.push('/my/messaging')"><i :class="$style.navButtonIcon" class="ti ti-messages"></i><span v-if="$i?.hasUnreadMessagingMessage" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
<button v-vibrate="5" :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
<!-- <button v-vibrate="5" :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button> -->
@ -217,8 +223,7 @@ const calcBg = () => {
if (defaultStore.state.useBlurEffect) {
tinyBg.setAlpha(0.7);
tinyPostBg.setAlpha(0.7);
}
else {
} else {
tinyBg.setAlpha(1);
tinyPostBg.setAlpha(1);
}
@ -659,6 +664,25 @@ $float-button-size: 65px;
animation: none;
}
.navButtonIndicateValueIcon {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--navIndicator);
height: 1em;
min-width: 1em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
font-size: .75em;
line-height: 1em;
}
}
.menuDrawerBg {
z-index: 1001;
}

29
packages/frontend/src/ui/friendly/navbar-for-mobile.vue
View file

@ -20,7 +20,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="item === '-'" :class="$style.divider"></div>
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-vibrate="5" 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>
<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 && defaultStore.state.showUnreadNotificationCount" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
<i v-else class="_indicatorCircle"></i>
</span>
</component>
</template>
<div :class="$style.divider"></div>
@ -319,6 +322,30 @@ function openProfile() {
color: var(--navIndicator);
font-size: 6px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
left: auto;
right: 20px;
}
}
.itemIndicateValueIcon {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--navIndicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
line-height: 1.5em;
}
}
.itemText {

29
packages/frontend/src/ui/friendly/navbar.vue
View file

@ -31,7 +31,10 @@ SPDX-License-Identifier: AGPL-3.0-only
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>
<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 && defaultStore.state.showUnreadNotificationCount" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
<i v-else class="_indicatorCircle"></i>
</span>
</component>
</template>
<div :class="$style.divider"></div>
@ -167,6 +170,24 @@ function openProfile() {
flex-direction: column;
}
.itemIndicateValueIcon {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--navIndicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
line-height: 1.5em;
}
}
.root:not(.iconOnly) {
.body {
width: var(--nav-width);
@ -381,6 +402,12 @@ function openProfile() {
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
left: auto;
right: 40px;
}
}
.itemText {

27
packages/frontend/src/ui/universal.vue
View file

@ -27,7 +27,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="isMobile" ref="navFooter" :class="[$style.nav, { [$style.reduceAnimation]: !defaultStore.state.animation, [$style.showEl]: (showEl && ['hideFloatBtnNavBar', 'hide'].includes(<string>defaultStore.state.displayHeaderNavBarWhenScroll)) }]">
<button v-vibrate="5" :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 v-vibrate="5" :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 v-vibrate="5" :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 v-vibrate="5" :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 v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" :class="$style.navButtonIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
<i v-else class="_indicatorCircle"></i>
</span>
</button>
<button v-vibrate="5" :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
<button v-vibrate="5" :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
</div>
@ -490,6 +496,25 @@ $widgets-hide-threshold: 1090px;
animation: blink 1s infinite;
}
.navButtonIndicateValueIcon {
display: inline-flex;
color: var(--fgOnAccent);
font-weight: 700;
background: var(--navIndicator);
height: 1em;
min-width: 1em;
align-items: center;
justify-content: center;
border-radius: 99rem;
& > span {
display: inline-block;
padding: 0 .25em;
font-size: .75em;
line-height: 1em;
}
}
.menuDrawerBg {
z-index: 1001;
}

7
packages/sw/src/scripts/create-notification.ts
View file

@ -242,6 +242,13 @@ async function composeNotification(data: PushNotificationDataMap[keyof PushNotif
data,
}];
case 'test':
return [t('_notification.testNotification'), {
body: t('_notification.notificationWillBeDisplayedLikeThis'),
badge: iconUrl('bell'),
data,
}];
default:
return null;
}

1
packages/sw/src/types.ts
View file

@ -44,6 +44,7 @@ export type BadgeNames =
| 'antenna'
| 'arrow-back-up'
| 'at'
| 'bell'
| 'chart-arrows'
| 'circle-check'
| 'medal'