Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'misskey-original/develop' into develop

Browse source 
# Conflicts:
#	package.json
#	packages/frontend/src/components/MkLaunchPad.vue
#	packages/frontend/src/ui/_common_/navbar-for-mobile.vue
#	packages/frontend/src/ui/_common_/navbar.vue
#	packages/frontend/src/ui/universal.vue
This commit is contained in:
mattyatea 2023-11-02 06:47:13 +09:00
commit d720501c82
38 changed files with 1022 additions and 769 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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" :class="{gamingDark: gamingType === 'dark',gamingLight: gamingType === 'light' }" @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" :class="{gamingDark: gamingType === 'dark',gamingLight: gamingType === 'light' }" @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 { ref , computed , watch} 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';
@ -59,6 +61,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() {
@ -131,6 +134,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;

9
packages/frontend/src/components/MkNote.vue
View file

@ -68,7 +68,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :nyaize="'account'" :i="$i" :emojiUrls="appearNote.emojis"/>
<Mfm v-if="appearNote.text" :parsedNodes="parsed" :text="appearNote.text" :author="appearNote.user" :nyaize="'account'" :i="$i" :emojiUrls="appearNote.emojis"/>
<div v-if="translating || translation" :class="$style.translation">
<MkLoading v-if="translating" mini/>
<div v-else>
@ -92,7 +92,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
</div>
<MkReactionsViewer :note="appearNote" :maxNumber="16">
<MkReactionsViewer v-show="appearNote.cw == null || showContent" :note="appearNote" :maxNumber="16">
<template #more>
<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
</template>
@ -218,8 +218,9 @@ const clipButton = shallowRef<HTMLElement>();
let appearNote = $computed(() => isRenote ? note.renote as Misskey.entities.Note : note);
const isMyRenote = $i && ($i.id === note.userId);
const showContent = ref(false);
const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
const isLong = shouldCollapsed(appearNote);
const parsed = appearNote.text ? mfm.parse(appearNote.text) : null;
const urls = parsed ? extractUrlFromMfm(parsed) : null;
const isLong = shouldCollapsed(appearNote, urls ?? []);
const collapsed = ref(appearNote.cw == null && isLong);
const isDeleted = ref(false);
const muted = ref($i ? checkWordMute(appearNote, $i, $i.mutedWords) : false);

5
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-show="appearNote.cw == null || showContent">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<MkA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :nyaize="'account'" :i="$i" :emojiUrls="appearNote.emojis"/>
<Mfm v-if="appearNote.text" :parsedNodes="parsed" :text="appearNote.text" :author="appearNote.user" :nyaize="'account'" :i="$i" :emojiUrls="appearNote.emojis"/>
<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
<div v-if="translating || translation" :class="$style.translation">
<MkLoading v-if="translating" mini/>
@ -287,7 +287,8 @@ const isDeleted = ref(false);
const muted = ref($i ? checkWordMute(appearNote, $i, $i.mutedWords) : false);
const translation = ref(null);
const translating = ref(false);
const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
const parsed = appearNote.text ? mfm.parse(appearNote.text) : null;
const urls = parsed ? extractUrlFromMfm(parsed) : null;
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
const conversation = ref<Misskey.entities.Note[]>([]);
const replies = ref<Misskey.entities.Note[]>([]);

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>

2
packages/frontend/src/components/MkSubNoteContent.vue
View file

@ -42,7 +42,7 @@ const props = defineProps<{
note: Misskey.entities.Note;
}>();
const isLong = shouldCollapsed(props.note);
const isLong = shouldCollapsed(props.note, []);
const collapsed = $ref(isLong);
</script>

4
packages/frontend/src/components/global/MkFooterSpacer.vue
View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="[$style.spacer, defaultStore.reactiveState.darkMode ? $style.dark : $style.light]"></div>
<div :class="[$style.spacer, defaultStore.reactiveState.darkMode.value ? $style.dark : $style.light]"></div>
</template>
<script lang="ts" setup>
@ -22,7 +22,7 @@ import { defaultStore } from '@/store.js';
background-color: rgba(255, 255, 255, 0);
&.light {
background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #00000026 16px, #00000026 20px );
background-image: repeating-linear-gradient(135deg, transparent, transparent 16px, #00000010 16px, #00000010 20px );
}
&.dark {

3
packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
View file

@ -68,6 +68,7 @@ type MfmProps = {
emojiUrls?: string[];
rootScale?: number;
nyaize: boolean | 'account';
parsedNodes?: mfm.MfmNode[] | null;
};
// eslint-disable-next-line import/no-default-export
@ -78,7 +79,7 @@ export default function(props: MfmProps) {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (props.text == null || props.text === '') return;
const rootAst = (props.plain ? mfm.parseSimple : mfm.parse)(props.text);
const rootAst = props.parsedNodes ?? (props.plain ? mfm.parseSimple : mfm.parse)(props.text);
const validTime = (t: string | null | undefined) => {
if (t == null || typeof t === 'boolean') return null;

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.unreadNotificationsCount === 0) return '';
if ($i.unreadNotificationsCount > 99) {
return '99+';
} else {
return $i.unreadNotificationsCount.toString();
}
}),
to: '/my/notifications',
},
drive: {

4
packages/frontend/src/pages/settings/notifications.vue
View file

@ -74,11 +74,11 @@ let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage
const userLists = await os.api('users/lists/list');
async function readAllUnreadNotes() {
await os.api('i/read-all-unread-notes');
await os.apiWithDialog('i/read-all-unread-notes');
}
async function readAllNotifications() {
await os.api('notifications/mark-all-as-read');
await os.apiWithDialog('notifications/mark-all-as-read');
}
async function updateReceiveConfig(type, value) {

7
packages/frontend/src/scripts/collapsed.ts
View file

@ -3,12 +3,9 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import * as mfm from 'mfm-js';
import * as Misskey from 'misskey-js';
import { extractUrlFromMfm } from './extract-url-from-mfm.js';
export function shouldCollapsed(note: Misskey.entities.Note): boolean {
const urls = note.text ? extractUrlFromMfm(mfm.parse(note.text)) : null;
export function shouldCollapsed(note: Misskey.entities.Note, urls: string[]): boolean {
const collapsed = note.cw == null && note.text != null && (
(note.text.includes('$[x2')) ||
(note.text.includes('$[x3')) ||
@ -17,7 +14,7 @@ export function shouldCollapsed(note: Misskey.entities.Note): boolean {
(note.text.split('\n').length > 9) ||
(note.text.length > 500) ||
(note.files.length >= 5) ||
(!!urls && urls.length >= 4)
(urls.length >= 4)
);
return collapsed;

13
packages/frontend/src/style.scss
View file

@ -163,6 +163,19 @@ hr {
}
._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 {
user-select: none;
-webkit-user-select: none;

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');
}

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

@ -28,8 +28,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<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,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i
class="_indicatorCircle"></i></span>
:class="[$style.itemIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span><i
v-else class="_indicatorCircle"></i></span>
</component>
</template>
<div :class="$style.divider"></div>
@ -459,6 +460,18 @@ function more() {
&.gamingLight {
color: black;
}
position: absolute;
top: 0;
left: 20px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
left: auto;
right: 20px;
}
}
.itemText {

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

@ -36,8 +36,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<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,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]"><i
class="_indicatorCircle"></i></span>
:class="[$style.itemIndicator,{[$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]">
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span><i
v-else class="_indicatorCircle"></i></span>
</component>
</template>
<div :class="$style.divider"></div>
@ -191,8 +192,8 @@ function more(ev: MouseEvent) {
<style lang="scss" module>
.root {
--nav-width: 250px;
--nav-icon-only-width: 72px;
--nav-width: 250px;
--nav-icon-only-width: 80px;
flex: 0 0 var(--nav-width);
width: var(--nav-width);
@ -554,6 +555,21 @@ function more(ev: MouseEvent) {
margin-right: 8px;
}
.itemIndicator {
position: absolute;
top: 0;
left: 20px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
left: auto;
right: 40px;
font-size: 10px;
}
}
.itemIndicator {
position: absolute;
top: 0;
@ -861,6 +877,22 @@ function more(ev: MouseEvent) {
display: none;
}
.itemIndicator {
position: absolute;
top: 6px;
left: 24px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
top: 4px;
left: auto;
right: 4px;
font-size: 10px;
}
}
.itemIndicator {
position: absolute;
top: 6px;

11
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 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" class="_indicateCounter itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
<i v-else class="_indicatorCircle"></i>
</span>
</component>
</template>
<div class="divider"></div>
@ -218,6 +221,12 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
left: auto;
right: 20px;
}
}
&:hover {

12
packages/frontend/src/ui/deck.vue
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>

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

@ -36,8 +36,10 @@ SPDX-License-Identifier: AGPL-3.0-only
: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,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]"><i
class="_indicatorCircle"></i></span></button>
:class="[$style.navButtonIndicator,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light'}]">
<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>
@ -570,6 +572,17 @@ $widgets-hide-threshold: 1090px;
}
.navButtonIndicator {
position: absolute;
top: 0;
left: 0;
color: var(--indicator);
font-size: 16px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
font-size: 12px;
}
position: absolute;
top: 0;
left: 0;