sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: 未読通知数を表示できるように (#11982)

Browse Source 
* 未読通知数を表示できるように

* 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
22 changed files with 173 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/frontend/src/components/MkLaunchPad.vue
View File

@@ -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')">
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
<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(); }">
<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" class="_indicateCounter indicatorWithValue">{{ item.indicateValue }}</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()">
<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" class="_indicateCounter indicatorWithValue">{{ item.indicateValue }}</span>
<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
</MkA>
</template>
</div>
@@ -27,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { } from 'vue';
import MkModal from '@/components/MkModal.vue';
import { navbarItemDef } from '@/navbar';
import { navbarItemDef } from '@/navbar.js';
import { defaultStore } from '@/store.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,
action: def.action,
indicate: def.indicated,
indicateValue: def.indicateValue,
}));
function close() {
@@ -116,6 +119,17 @@ function close() {
line-height: 1.5em;
}
> .indicatorWithValue {
position: absolute;
top: 32px;
left: 16px;
@media (max-width: 500px) {
top: 16px;
left: 8px;
}
}
> .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';
@@ -68,6 +68,10 @@ onMounted(() => {
onUnmounted(() => {
if (connection) connection.dispose();
});
onDeactivated(() => {
if (connection) connection.dispose();
});
</script>
<style lang="scss" module>