u
This commit is contained in:
hijiki
parent
b0719a8594
commit
158600d799
@ -1,11 +1,8 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<MkStickyContainer>
|
||||
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<template #header>
|
||||
<MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/>
|
||||
</template>
|
||||
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
|
||||
<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
|
||||
<XOverview/>
|
||||
@ -13,12 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
|
||||
<XEmojis/>
|
||||
</MkSpacer>
|
||||
<MkSpacer v-else-if="tab === 'federation'" :contentMax="1000" :marginMin="20">
|
||||
<XFederation/>
|
||||
</MkSpacer>
|
||||
<MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
|
||||
<MkInstanceStats/>
|
||||
</MkSpacer>
|
||||
<!-- 連携とチャートのタブは削除 -->
|
||||
</MkHorizontalSwipe>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
@ -32,8 +24,6 @@ import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
|
||||
|
||||
const XOverview = defineAsyncComponent(() => import('@/pages/about.overview.vue'));
|
||||
const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue'));
|
||||
const XFederation = defineAsyncComponent(() => import('@/pages/about.federation.vue'));
|
||||
const MkInstanceStats = defineAsyncComponent(() => import('@/components/MkInstanceStats.vue'));
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
initialTab?: string;
|
||||
@ -58,15 +48,7 @@ const headerTabs = computed(() => [{
|
||||
key: 'emojis',
|
||||
title: i18n.ts.customEmojis,
|
||||
icon: 'ph-smiley ph-bold ph-lg',
|
||||
}, {
|
||||
key: 'federation',
|
||||
title: i18n.ts.federation,
|
||||
icon: 'ti ti-whirl',
|
||||
}, {
|
||||
key: 'charts',
|
||||
title: i18n.ts.charts,
|
||||
icon: 'ti ti-chart-line',
|
||||
}]);
|
||||
}]); // 連携とチャートを削除
|
||||
|
||||
definePageMetadata(() => ({
|
||||
title: i18n.ts.instanceInfo,
|
||||
|
||||
@ -1,288 +1,134 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
/*
|
||||
* SPDX-FileCopyrightText: syuilo and misskey-project
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
<template>
|
||||
<component
|
||||
:is="popup.component"
|
||||
v-for="popup in popups"
|
||||
:key="popup.id"
|
||||
v-bind="popup.props"
|
||||
v-on="popup.events"
|
||||
/>
|
||||
|
||||
<XUpload v-if="uploads.length > 0"/>
|
||||
|
||||
<TransitionGroup
|
||||
tag="div"
|
||||
:class="[$style.notifications, {
|
||||
[$style.notificationsPosition_leftTop]: defaultStore.state.notificationPosition === 'leftTop',
|
||||
[$style.notificationsPosition_leftBottom]: defaultStore.state.notificationPosition === 'leftBottom',
|
||||
[$style.notificationsPosition_rightTop]: defaultStore.state.notificationPosition === 'rightTop',
|
||||
[$style.notificationsPosition_rightBottom]: defaultStore.state.notificationPosition === 'rightBottom',
|
||||
[$style.notificationsStackAxis_vertical]: defaultStore.state.notificationStackAxis === 'vertical',
|
||||
[$style.notificationsStackAxis_horizontal]: defaultStore.state.notificationStackAxis === 'horizontal',
|
||||
}]"
|
||||
:moveClass="defaultStore.state.animation ? $style.transition_notification_move : ''"
|
||||
:enterActiveClass="defaultStore.state.animation ? $style.transition_notification_enterActive : ''"
|
||||
:leaveActiveClass="defaultStore.state.animation ? $style.transition_notification_leaveActive : ''"
|
||||
:enterFromClass="defaultStore.state.animation ? $style.transition_notification_enterFrom : ''"
|
||||
:leaveToClass="defaultStore.state.animation ? $style.transition_notification_leaveTo : ''"
|
||||
>
|
||||
<div v-for="notification in notifications" :key="notification.id" :class="$style.notification">
|
||||
<XNotification :notification="notification"/>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
|
||||
<XStreamIndicator/>
|
||||
|
||||
<div v-if="pendingApiRequestsCount > 0" id="wait"></div>
|
||||
|
||||
<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
|
||||
|
||||
<div v-if="$i && $i.isBot" id="botWarn"><span>{{ i18n.ts.loggedInAsBot }}</span></div>
|
||||
|
||||
<SkOneko v-if="defaultStore.state.oneko"/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { swInject } from './sw-inject.js';
|
||||
import XNotification from './notification.vue';
|
||||
import { popups } from '@/os.js';
|
||||
import { pendingApiRequestsCount } from '@/scripts/misskey-api.js';
|
||||
import { uploads } from '@/scripts/upload.js';
|
||||
import * as sound from '@/scripts/sound.js';
|
||||
import { $i } from '@/account.js';
|
||||
import { useStream } from '@/stream.js';
|
||||
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 { defaultStore } from '@/store.js';
|
||||
import { globalEvents } from '@/events.js';
|
||||
import { $i } from '@/account.js';
|
||||
|
||||
const SkOneko = defineAsyncComponent(() => import('@/components/SkOneko.vue'));
|
||||
|
||||
const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
|
||||
const XUpload = defineAsyncComponent(() => import('./upload.vue'));
|
||||
|
||||
const dev = _DEV_;
|
||||
|
||||
const notifications = ref<Misskey.entities.Notification[]>([]);
|
||||
|
||||
function onNotification(notification: Misskey.entities.Notification, isClient = false) {
|
||||
if (document.visibilityState === 'visible') {
|
||||
if (!isClient && notification.type !== 'test') {
|
||||
// サーバーサイドのテスト通知の際は自動で既読をつけない（テストできないので）
|
||||
useStream().send('readNotification');
|
||||
}
|
||||
|
||||
notifications.value.unshift(notification);
|
||||
window.setTimeout(() => {
|
||||
if (notifications.value.length > 3) notifications.value.pop();
|
||||
}, 500);
|
||||
|
||||
window.setTimeout(() => {
|
||||
notifications.value = notifications.value.filter(x => x.id !== notification.id);
|
||||
}, 6000);
|
||||
}
|
||||
|
||||
sound.playMisskeySfx('notification');
|
||||
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];
|
||||
}
|
||||
|
||||
if ($i) {
|
||||
const connection = useStream().useChannel('main', null, 'UI');
|
||||
connection.on('notification', onNotification);
|
||||
|
||||
globalEvents.on('clientNotification', notification => onNotification(notification, true));
|
||||
|
||||
//#region Listen message from SW
|
||||
if ('serviceWorker' in navigator) {
|
||||
swInject();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.transition_notification_move,
|
||||
.transition_notification_enterActive,
|
||||
.transition_notification_leaveActive {
|
||||
transition: opacity 0.3s, transform 0.3s !important;
|
||||
}
|
||||
.transition_notification_enterFrom {
|
||||
opacity: 0;
|
||||
transform: translateX(250px);
|
||||
}
|
||||
.transition_notification_leaveTo {
|
||||
opacity: 0;
|
||||
transform: translateX(-250px);
|
||||
export function openInstanceMenu(ev: MouseEvent) {
|
||||
os.popupMenu([{
|
||||
text: instance.name ?? host,
|
||||
type: 'label',
|
||||
}, {
|
||||
type: 'link',
|
||||
text: i18n.ts.instanceInfo,
|
||||
icon: 'ti ti-info-circle',
|
||||
to: '/about',
|
||||
}, {
|
||||
type: 'link',
|
||||
text: i18n.ts.customEmojis,
|
||||
icon: 'ti ti-icons',
|
||||
to: '/about#emojis',
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
text: i18n.ts.federation,
|
||||
icon: 'ti ti-whirl',
|
||||
to: '/about#federation',
|
||||
}, {
|
||||
type: 'link',
|
||||
text: i18n.ts.charts,
|
||||
icon: 'ti ti-chart-line',
|
||||
to: '/about#charts',
|
||||
},
|
||||
{ type: 'divider' }, {
|
||||
type: 'link',
|
||||
text: i18n.ts.ads,
|
||||
icon: 'ti ti-ad',
|
||||
to: '/ads',
|
||||
}, ($i && ($i.isAdmin || $i.policies.canInvite) && instance.disableRegistration) ? {
|
||||
type: 'link',
|
||||
to: '/invite',
|
||||
text: i18n.ts.invite,
|
||||
icon: 'ti ti-user-plus',
|
||||
} : undefined, {
|
||||
type: 'parent',
|
||||
text: i18n.ts.tools,
|
||||
icon: 'ti ti-tool',
|
||||
children: toolsMenuItems(),
|
||||
}, { type: 'divider' }, {
|
||||
type: 'link',
|
||||
text: i18n.ts.inquiry,
|
||||
icon: 'ti ti-help-circle',
|
||||
to: '/contact',
|
||||
}, (instance.impressumUrl) ? {
|
||||
type: 'a',
|
||||
text: i18n.ts.impressum,
|
||||
icon: 'ti ti-file-invoice',
|
||||
href: instance.impressumUrl,
|
||||
target: '_blank',
|
||||
} : undefined, (instance.tosUrl) ? {
|
||||
type: 'a',
|
||||
text: i18n.ts.termsOfService,
|
||||
icon: 'ti ti-notebook',
|
||||
href: instance.tosUrl,
|
||||
target: '_blank',
|
||||
} : undefined, (instance.privacyPolicyUrl) ? {
|
||||
type: 'a',
|
||||
text: i18n.ts.privacyPolicy,
|
||||
icon: 'ti ti-shield-lock',
|
||||
href: instance.privacyPolicyUrl,
|
||||
target: '_blank',
|
||||
} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : { type: 'divider' }, {
|
||||
type: 'a',
|
||||
text: i18n.ts.document,
|
||||
icon: 'ti ti-bulb',
|
||||
href: 'https://misskey-hub.net/docs/for-users/',
|
||||
target: '_blank',
|
||||
}, ($i) ? {
|
||||
text: i18n.ts._initialTutorial.launchTutorial,
|
||||
icon: 'ti ti-presentation',
|
||||
action: () => {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
},
|
||||
} : undefined, {
|
||||
type: 'link',
|
||||
text: i18n.ts.aboutMisskey,
|
||||
to: '/about-misskey',
|
||||
}], ev.currentTarget ?? ev.target, {
|
||||
align: 'left',
|
||||
});
|
||||
}
|
||||
|
||||
.notifications {
|
||||
position: fixed;
|
||||
z-index: 3900000;
|
||||
padding: 0 var(--margin);
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
|
||||
&.notificationsPosition_leftTop {
|
||||
top: var(--margin);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition_rightTop {
|
||||
top: var(--margin);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition_leftBottom {
|
||||
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition_rightBottom {
|
||||
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.notificationsStackAxis_vertical {
|
||||
width: 250px;
|
||||
|
||||
&.notificationsPosition_leftTop,
|
||||
&.notificationsPosition_rightTop {
|
||||
flex-direction: column;
|
||||
|
||||
.notification {
|
||||
& + .notification {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.notificationsPosition_leftBottom,
|
||||
&.notificationsPosition_rightBottom {
|
||||
flex-direction: column-reverse;
|
||||
|
||||
.notification {
|
||||
& + .notification {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.notificationsStackAxis_horizontal {
|
||||
width: 100%;
|
||||
|
||||
&.notificationsPosition_leftTop,
|
||||
&.notificationsPosition_leftBottom {
|
||||
flex-direction: row;
|
||||
|
||||
.notification {
|
||||
& + .notification {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.notificationsPosition_rightTop,
|
||||
&.notificationsPosition_rightBottom {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.notification {
|
||||
& + .notification {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
export function openToolsMenu(ev: MouseEvent) {
|
||||
os.popupMenu(toolsMenuItems(), ev.currentTarget ?? ev.target, {
|
||||
align: 'left',
|
||||
});
|
||||
}
|
||||
|
||||
.notification {
|
||||
container-type: inline-size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@keyframes dev-ticker-blink {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes progress-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#wait {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 4000000;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
border: solid 2px transparent;
|
||||
border-top-color: var(--accent);
|
||||
border-left-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: progress-spinner 400ms linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
#botWarn {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
text-align: center;
|
||||
z-index: 2147483647;
|
||||
color: #ff0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 4px 7px;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
> span {
|
||||
animation: dev-ticker-blink 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
#devTicker {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2147483647;
|
||||
color: #ff0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 4px 5px;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
> span {
|
||||
animation: dev-ticker-blink 2s infinite;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user