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

Merge tag '2023.11.0' into merge-upstream

Browse source
This commit is contained in:
riku6460 2023-11-06 06:42:28 +09:00
commit 2bc887a6c5
No known key found for this signature in database
GPG key ID: 27414FA27DB94CF6
301 changed files with 9351 additions and 3283 deletions
Download patch file Download diff file Expand all files Collapse all files

67
packages/frontend/src/ui/_common_/common.ts
View file

@ -3,12 +3,43 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { defineAsyncComponent } from 'vue';
import type { MenuItem } from '@/types/menu.js';
import * as os from '@/os.js';
import { instance } from '@/instance.js';
import { host } from '@/config.js';
import { i18n } from '@/i18n.js';
import { $i } from '@/account.js';
function toolsMenuItems(): MenuItem[] {
return [{
type: 'link',
to: '/scratchpad',
text: i18n.ts.scratchpad,
icon: 'ti ti-terminal-2',
}, {
type: 'link',
to: '/api-console',
text: 'API Console',
icon: 'ti ti-terminal-2',
}, {
type: 'link',
to: '/clicker',
text: '🍪👈',
icon: 'ti ti-cookie',
}, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? {
type: 'link',
to: '/custom-emojis-manager',
text: i18n.ts.manageCustomEmojis,
icon: 'ti ti-icons',
} : undefined, ($i && ($i.isAdmin || $i.policies.canManageAvatarDecorations)) ? {
type: 'link',
to: '/avatar-decorations',
text: i18n.ts.manageAvatarDecorations,
icon: 'ti ti-sparkles',
} : undefined];
}
export function openInstanceMenu(ev: MouseEvent) {
os.popupMenu([{
text: instance.name ?? host,
@ -47,27 +78,7 @@ export function openInstanceMenu(ev: MouseEvent) {
type: 'parent',
text: i18n.ts.tools,
icon: 'ti ti-tool',
children: [{
type: 'link',
to: '/scratchpad',
text: i18n.ts.scratchpad,
icon: 'ti ti-terminal-2',
}, {
type: 'link',
to: '/api-console',
text: 'API Console',
icon: 'ti ti-terminal-2',
}, {
type: 'link',
to: '/clicker',
text: '🍪👈',
icon: 'ti ti-cookie',
}, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? {
type: 'link',
to: '/custom-emojis-manager',
text: i18n.ts.manageCustomEmojis,
icon: 'ti ti-icons',
} : undefined],
children: toolsMenuItems(),
}, null, (instance.impressumUrl) ? {
text: i18n.ts.impressum,
icon: 'ti ti-file-invoice',
@ -92,7 +103,13 @@ export function openInstanceMenu(ev: MouseEvent) {
action: () => {
window.open('https://misskey-hub.net/help.html', '_blank');
},
}, {
}, ($i) ? {
text: i18n.ts._initialTutorial.launchTutorial,
icon: 'ti ti-presentation',
action: () => {
os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {}, 'closed');
},
} : undefined, {
type: 'link',
text: i18n.ts.aboutMisskey,
to: '/about-misskey',
@ -100,3 +117,9 @@ export function openInstanceMenu(ev: MouseEvent) {
align: 'left',
});
}
export function openToolsMenu(ev: MouseEvent) {
os.popupMenu(toolsMenuItems(), ev.currentTarget ?? ev.target, {
align: 'left',
});
}

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

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

@ -19,7 +19,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)" 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" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
<i v-else class="_indicatorCircle"></i>
</span>
</component>
</template>
<div :class="$style.divider"></div>
@ -252,6 +255,12 @@ function more() {
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
left: auto;
right: 20px;
}
}
.itemText {

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

@ -29,7 +29,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" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
<i v-else class="_indicatorCircle"></i>
</span>
</component>
</template>
<div :class="$style.divider"></div>
@ -58,9 +61,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, defineAsyncComponent, ref, watch } from 'vue';
import { openInstanceMenu } from './common';
import { openInstanceMenu } from './common.js';
import * as os from '@/os.js';
import { navbarItemDef } from '@/navbar';
import { navbarItemDef } from '@/navbar.js';
import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
@ -106,7 +109,7 @@ function more(ev: MouseEvent) {
<style lang="scss" module>
.root {
--nav-width: 250px;
--nav-icon-only-width: 72px;
--nav-icon-only-width: 80px;
flex: 0 0 var(--nav-width);
width: var(--nav-width);
@ -230,6 +233,7 @@ function more(ev: MouseEvent) {
text-align: left;
box-sizing: border-box;
margin-top: 16px;
overflow: clip;
}
.avatar {
@ -311,6 +315,13 @@ function more(ev: MouseEvent) {
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
left: auto;
right: 40px;
font-size: 10px;
}
}
.itemText {
@ -401,6 +412,7 @@ function more(ev: MouseEvent) {
display: block;
text-align: center;
width: 100%;
overflow: clip;
}
.avatar {
@ -473,6 +485,14 @@ function more(ev: MouseEvent) {
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
top: 4px;
left: auto;
right: 4px;
font-size: 10px;
}
}
}
</style>

3
packages/frontend/src/ui/_common_/stream-indicator.vue
View file

@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onUnmounted } from 'vue';
import { useStream } from '@/stream.js';
import { useStream, isReloading } from '@/stream.js';
import { i18n } from '@/i18n.js';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
@ -27,6 +27,7 @@ let hasDisconnected = $ref(false);
let timeoutId = $ref<number>();
function onDisconnected() {
if (isReloading) return;
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
hasDisconnected = true;

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>

6
packages/frontend/src/ui/deck/tl-column.vue
View file

@ -62,6 +62,12 @@ watch($$(withRenotes), v => {
});
});
watch($$(withReplies), v => {
updateColumn(props.column.id, {
withReplies: v,
});
});
watch($$(onlyFiles), v => {
updateColumn(props.column.id, {
onlyFiles: v,

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

@ -27,7 +27,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<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="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.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
</div>
@ -444,6 +449,11 @@ $widgets-hide-threshold: 1090px;
color: var(--indicator);
font-size: 16px;
animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) {
animation: none;
font-size: 12px;
}
}
.menuDrawerBg {