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:
かっこかり 2023-11-01 13:34:05 +09:00 committed by GitHub
parent e85b8217c0
commit 5fb6847419
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 173 additions and 28 deletions

View file

@ -52,7 +52,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<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="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>
</div>
@ -485,5 +490,10 @@ body {
color: var(--indicator);
font-size: 16px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
font-size: 12px;
}
}
</style>