forked from mirrors/misskey
329 lines
7.5 KiB
Vue
329 lines
7.5 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
|
|
<template>
|
|
<div :class="$style.root">
|
|
<div :class="$style.contents" @contextmenu.stop="onContextmenu">
|
|
<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" :class="$style.content"/>
|
|
<RouterView v-else :class="$style.content"/>
|
|
</div>
|
|
|
|
<XCommon/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { provide, onMounted, computed, ref } from 'vue';
|
|
import { instanceName } from '@@/js/config.js';
|
|
import { isLink } from '@@/js/is-link.js';
|
|
import XCommon from './_common_/common.vue';
|
|
import type { PageMetadata } from '@/page.js';
|
|
import * as os from '@/os.js';
|
|
import { i18n } from '@/i18n.js';
|
|
import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
|
|
import { deviceKind } from '@/utility/device-kind.js';
|
|
import { miLocalStorage } from '@/local-storage.js';
|
|
import { mainRouter } from '@/router.js';
|
|
import { prefer } from '@/preferences.js';
|
|
import { DI } from '@/di.js';
|
|
|
|
const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
|
|
|
|
const DESKTOP_THRESHOLD = 1100;
|
|
const MOBILE_THRESHOLD = 500;
|
|
|
|
// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
|
|
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
|
|
const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
|
|
window.addEventListener('resize', () => {
|
|
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
|
|
});
|
|
|
|
const pageMetadata = ref<null | PageMetadata>(null);
|
|
|
|
provide(DI.router, mainRouter);
|
|
provideMetadataReceiver((metadataGetter) => {
|
|
const info = metadataGetter();
|
|
pageMetadata.value = info;
|
|
if (pageMetadata.value) {
|
|
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
|
window.document.title = pageMetadata.value.title;
|
|
} else {
|
|
window.document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
|
}
|
|
}
|
|
});
|
|
provideReactiveMetadata(pageMetadata);
|
|
|
|
const drawerMenuShowing = ref(false);
|
|
|
|
mainRouter.on('change', () => {
|
|
drawerMenuShowing.value = false;
|
|
});
|
|
|
|
if (window.innerWidth > 1024) {
|
|
const tempUI = miLocalStorage.getItem('ui_temp');
|
|
if (tempUI) {
|
|
miLocalStorage.setItem('ui', tempUI);
|
|
miLocalStorage.removeItem('ui_temp');
|
|
window.location.reload();
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (!isDesktop.value) {
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
|
|
}, { passive: true });
|
|
}
|
|
});
|
|
|
|
const onContextmenu = (ev) => {
|
|
if (isLink(ev.target)) return;
|
|
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
|
|
if (window.getSelection()?.toString() !== '') return;
|
|
const path = mainRouter.getCurrentFullPath();
|
|
os.contextMenu([{
|
|
type: 'label',
|
|
text: path,
|
|
}, {
|
|
icon: 'ti ti-window-maximize',
|
|
text: i18n.ts.openInWindow,
|
|
action: () => {
|
|
os.pageWindow(path);
|
|
},
|
|
}], ev);
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
body {
|
|
/* NOTE: htmlにも overflow: clip を設定したいところだが、設定すると何故か少なくともChromeで html が main thread scrolling になりパフォーマンスが(多分)落ちる */
|
|
overflow: clip;
|
|
}
|
|
|
|
#misskey_app {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: clip;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" module>
|
|
$ui-font-size: 1em; // TODO: どこかに集約したい
|
|
$widgets-hide-threshold: 1090px;
|
|
|
|
.transition_menuDrawerBg_enterActive,
|
|
.transition_menuDrawerBg_leaveActive {
|
|
opacity: 1;
|
|
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
}
|
|
.transition_menuDrawerBg_enterFrom,
|
|
.transition_menuDrawerBg_leaveTo {
|
|
opacity: 0;
|
|
}
|
|
|
|
.transition_menuDrawer_enterActive,
|
|
.transition_menuDrawer_leaveActive {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
}
|
|
.transition_menuDrawer_enterFrom,
|
|
.transition_menuDrawer_leaveTo {
|
|
opacity: 0;
|
|
transform: translateX(-240px);
|
|
}
|
|
|
|
.transition_widgetsDrawerBg_enterActive,
|
|
.transition_widgetsDrawerBg_leaveActive {
|
|
opacity: 1;
|
|
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
}
|
|
.transition_widgetsDrawerBg_enterFrom,
|
|
.transition_widgetsDrawerBg_leaveTo {
|
|
opacity: 0;
|
|
}
|
|
|
|
.transition_widgetsDrawer_enterActive,
|
|
.transition_widgetsDrawer_leaveActive {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
}
|
|
.transition_widgetsDrawer_enterFrom,
|
|
.transition_widgetsDrawer_leaveTo {
|
|
opacity: 0;
|
|
transform: translateX(-240px);
|
|
}
|
|
|
|
.root {
|
|
height: 100dvh;
|
|
overflow: clip;
|
|
contain: strict;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
}
|
|
|
|
.sidebar {
|
|
border-right: solid 0.5px var(--MI_THEME-divider);
|
|
}
|
|
|
|
.contents {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
height: 100%;
|
|
min-width: 0;
|
|
background: var(--MI_THEME-bg);
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.nav {
|
|
padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
grid-gap: 8px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: var(--MI_THEME-bg);
|
|
border-top: solid 0.5px var(--MI_THEME-divider);
|
|
}
|
|
|
|
.navButton {
|
|
position: relative;
|
|
padding: 0;
|
|
aspect-ratio: 1;
|
|
width: 100%;
|
|
max-width: 60px;
|
|
margin: auto;
|
|
border-radius: 100%;
|
|
background: var(--MI_THEME-panel);
|
|
color: var(--MI_THEME-fg);
|
|
|
|
&:hover {
|
|
background: var(--MI_THEME-panelHighlight);
|
|
}
|
|
|
|
&:active {
|
|
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
|
|
}
|
|
}
|
|
|
|
.postButton {
|
|
composes: navButton;
|
|
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
|
color: var(--MI_THEME-fgOnAccent);
|
|
|
|
&:hover {
|
|
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
|
}
|
|
|
|
&:active {
|
|
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
|
}
|
|
}
|
|
|
|
.navButtonIcon {
|
|
font-size: 16px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.navButtonIndicator {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
color: var(--MI_THEME-indicator);
|
|
font-size: 16px;
|
|
|
|
&:has(.itemIndicateValueIcon) {
|
|
animation: none;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.menuDrawerBg {
|
|
z-index: 1001;
|
|
}
|
|
|
|
.menuDrawer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1001;
|
|
height: 100dvh;
|
|
width: 240px;
|
|
box-sizing: border-box;
|
|
contain: strict;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
background: var(--MI_THEME-navBg);
|
|
}
|
|
|
|
.statusbars {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.widgets {
|
|
width: 350px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
|
|
border-left: solid 0.5px var(--MI_THEME-divider);
|
|
background: var(--MI_THEME-bg);
|
|
|
|
@media (max-width: $widgets-hide-threshold) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.widgetsDrawerBg {
|
|
z-index: 1001;
|
|
}
|
|
|
|
.widgetsDrawer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1001;
|
|
width: 310px;
|
|
height: 100dvh;
|
|
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px)) !important;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
background: var(--MI_THEME-bg);
|
|
}
|
|
|
|
.widgetsCloseButton {
|
|
padding: 8px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (min-width: 370px) {
|
|
.widgetsCloseButton {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|