This commit is contained in:
syuilo 2023-05-27 11:38:08 +09:00
parent a879607479
commit 11d22c7b73
6 changed files with 6 additions and 204 deletions

View file

@ -1,182 +0,0 @@
<template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div ref="rootEl" class="hrmcaedk" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
<div class="header" @contextmenu="onContextmenu">
<button v-if="history.length > 0" v-tooltip="i18n.ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button>
<span v-else style="display: inline-block; width: 20px"></span>
<span v-if="pageMetadata?.value" class="title">
<i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i>
<span>{{ pageMetadata?.value.title }}</span>
</span>
<button class="_button" @click="$refs.modal.close()"><i class="ti ti-x"></i></button>
</div>
<div class="body" style="container-type: inline-size;">
<MkStickyContainer>
<template #header><MkPageHeader v-if="pageMetadata?.value && !pageMetadata?.value.hideHeader" :info="pageMetadata?.value"/></template>
<RouterView :router="router"/>
</MkStickyContainer>
</div>
</div>
</MkModal>
</template>
<script lang="ts" setup>
import { ComputedRef, provide } from 'vue';
import MkModal from '@/components/MkModal.vue';
import { popout as _popout } from '@/scripts/popout';
import copyToClipboard from '@/scripts/copy-to-clipboard';
import { url } from '@/config';
import * as os from '@/os';
import { mainRouter, routes } from '@/router';
import { i18n } from '@/i18n';
import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
import { Router } from '@/nirax';
const props = defineProps<{
initialPath: string;
}>();
defineEmits<{
(ev: 'closed'): void;
(ev: 'click'): void;
}>();
const router = new Router(routes, props.initialPath);
router.addListener('push', ctx => {
});
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
let rootEl = $ref();
let modal = $shallowRef<InstanceType<typeof MkModal>>();
let path = $ref(props.initialPath);
let width = $ref(860);
let height = $ref(660);
const history = [];
provide('router', router);
provideMetadataReceiver((info) => {
pageMetadata = info;
});
provide('shouldOmitHeaderTitle', true);
provide('shouldHeaderThin', true);
const pageUrl = $computed(() => url + path);
const contextmenu = $computed(() => {
return [{
type: 'label',
text: path,
}, {
icon: 'ti ti-player-eject',
text: i18n.ts.showInPage,
action: expand,
}, {
icon: 'ti ti-window-maximize',
text: i18n.ts.popout,
action: popout,
}, null, {
icon: 'ti ti-external-link',
text: i18n.ts.openInNewTab,
action: () => {
window.open(pageUrl, '_blank');
modal.close();
},
}, {
icon: 'ti ti-link',
text: i18n.ts.copyLink,
action: () => {
copyToClipboard(pageUrl);
},
}];
});
function navigate(path, record = true) {
if (record) history.push(router.getCurrentPath());
router.push(path);
}
function back() {
navigate(history.pop(), false);
}
function expand() {
mainRouter.push(path);
modal.close();
}
function popout() {
_popout(path, rootEl);
modal.close();
}
function onContextmenu(ev: MouseEvent) {
os.contextMenu(contextmenu, ev);
}
</script>
<style lang="scss" scoped>
.hrmcaedk {
margin: auto;
overflow: hidden;
display: flex;
flex-direction: column;
contain: content;
border-radius: var(--radius);
--root-margin: 24px;
@media (max-width: 500px) {
--root-margin: 16px;
}
> .header {
$height: 52px;
$height-narrow: 42px;
display: flex;
flex-shrink: 0;
height: $height;
line-height: $height;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: var(--windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
> button {
height: $height;
width: $height;
&:hover {
color: var(--fgHighlighted);
}
}
@media (max-width: 500px) {
height: $height-narrow;
line-height: $height-narrow;
padding-left: 16px;
> button {
height: $height-narrow;
width: $height-narrow;
}
}
> .title {
flex: 1;
> .icon {
margin-right: 0.5em;
}
}
}
> .body {
overflow: auto;
background: var(--bg);
}
}
</style>

View file

@ -26,7 +26,7 @@ const props = defineProps<{
to: string; to: string;
active?: boolean; active?: boolean;
external?: boolean; external?: boolean;
behavior?: null | 'window' | 'browser' | 'modalWindow'; behavior?: null | 'window' | 'browser';
inline?: boolean; inline?: boolean;
}>(); }>();
</script> </script>

View file

@ -15,7 +15,7 @@ import { useRouter } from '@/router';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
to: string; to: string;
activeClass?: null | string; activeClass?: null | string;
behavior?: null | 'window' | 'browser' | 'modalWindow'; behavior?: null | 'window' | 'browser';
}>(), { }>(), {
activeClass: null, activeClass: null,
behavior: null, behavior: null,
@ -70,14 +70,6 @@ function openWindow() {
os.pageWindow(props.to); os.pageWindow(props.to);
} }
function modalWindow() {
os.modalPageWindow(props.to);
}
function popout() {
popout_(props.to);
}
function nav(ev: MouseEvent) { function nav(ev: MouseEvent) {
if (props.behavior === 'browser') { if (props.behavior === 'browser') {
location.href = props.to; location.href = props.to;
@ -87,8 +79,6 @@ function nav(ev: MouseEvent) {
if (props.behavior) { if (props.behavior) {
if (props.behavior === 'window') { if (props.behavior === 'window') {
return openWindow(); return openWindow();
} else if (props.behavior === 'modalWindow') {
return modalWindow();
} }
} }

View file

@ -172,12 +172,6 @@ export function pageWindow(path: string) {
}, {}, 'closed'); }, {}, 'closed');
} }
export function modalPageWindow(path: string) {
popup(defineAsyncComponent(() => import('@/components/MkModalPageWindow.vue')), {
initialPath: path,
}, {}, 'closed');
}
export function toast(message: string) { export function toast(message: string) {
popup(MkToast, { popup(MkToast, {
message, message,

View file

@ -16,7 +16,7 @@
</component> </component>
</template> </template>
<div class="divider"></div> <div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" activeClass="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null"> <MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" activeClass="active" to="/admin" :behavior="settingsWindowed ? 'window' : null">
<i class="ti ti-dashboard ti-fw"></i> <i class="ti ti-dashboard ti-fw"></i>
</MkA> </MkA>
<button v-click-anime class="item _button" @click="more"> <button v-click-anime class="item _button" @click="more">
@ -25,7 +25,7 @@
</button> </button>
</div> </div>
<div class="right"> <div class="right">
<MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null"> <MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'window' : null">
<i class="ti ti-settings ti-fw"></i> <i class="ti ti-settings ti-fw"></i>
</MkA> </MkA>
<button v-click-anime class="item _button account" @click="openAccountMenu"> <button v-click-anime class="item _button account" @click="openAccountMenu">

View file

@ -20,14 +20,14 @@
</component> </component>
</template> </template>
<div class="divider"></div> <div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" activeClass="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null"> <MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" activeClass="active" to="/admin" :behavior="settingsWindowed ? 'window' : null">
<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span> <i class="ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
</MkA> </MkA>
<button v-click-anime class="item _button" @click="more"> <button v-click-anime class="item _button" @click="more">
<i class="ti ti-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span> <i class="ti ti-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span> <span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
</button> </button>
<MkA v-click-anime class="item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null"> <MkA v-click-anime class="item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'window' : null">
<i class="ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span> <i class="ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
</MkA> </MkA>
<div class="divider"></div> <div class="divider"></div>