diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-05-27 11:38:08 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-05-27 11:38:08 +0900 |
| commit | 11d22c7b7324e34ce329903271b297430516ff8c (patch) | |
| tree | 60d7348b599c388f981311d826840a290319b692 /packages/frontend/src/components | |
| parent | refactor (diff) | |
| download | misskey-11d22c7b7324e34ce329903271b297430516ff8c.tar.gz misskey-11d22c7b7324e34ce329903271b297430516ff8c.tar.bz2 misskey-11d22c7b7324e34ce329903271b297430516ff8c.zip | |
refactor
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkModalPageWindow.vue | 182 | ||||
| -rw-r--r-- | packages/frontend/src/components/form/link.vue | 2 | ||||
| -rw-r--r-- | packages/frontend/src/components/global/MkA.vue | 12 |
3 files changed, 2 insertions, 194 deletions
diff --git a/packages/frontend/src/components/MkModalPageWindow.vue b/packages/frontend/src/components/MkModalPageWindow.vue deleted file mode 100644 index b38865f525..0000000000 --- a/packages/frontend/src/components/MkModalPageWindow.vue +++ /dev/null @@ -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> diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue index 1424332dae..e6da039ac5 100644 --- a/packages/frontend/src/components/form/link.vue +++ b/packages/frontend/src/components/form/link.vue @@ -26,7 +26,7 @@ const props = defineProps<{ to: string; active?: boolean; external?: boolean; - behavior?: null | 'window' | 'browser' | 'modalWindow'; + behavior?: null | 'window' | 'browser'; inline?: boolean; }>(); </script> diff --git a/packages/frontend/src/components/global/MkA.vue b/packages/frontend/src/components/global/MkA.vue index 40d134dffb..4e608c6efe 100644 --- a/packages/frontend/src/components/global/MkA.vue +++ b/packages/frontend/src/components/global/MkA.vue @@ -15,7 +15,7 @@ import { useRouter } from '@/router'; const props = withDefaults(defineProps<{ to: string; activeClass?: null | string; - behavior?: null | 'window' | 'browser' | 'modalWindow'; + behavior?: null | 'window' | 'browser'; }>(), { activeClass: null, behavior: null, @@ -70,14 +70,6 @@ function openWindow() { os.pageWindow(props.to); } -function modalWindow() { - os.modalPageWindow(props.to); -} - -function popout() { - popout_(props.to); -} - function nav(ev: MouseEvent) { if (props.behavior === 'browser') { location.href = props.to; @@ -87,8 +79,6 @@ function nav(ev: MouseEvent) { if (props.behavior) { if (props.behavior === 'window') { return openWindow(); - } else if (props.behavior === 'modalWindow') { - return modalWindow(); } } |