worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

tweak ui

Browse source
This commit is contained in:
syuilo 2023-05-31 18:03:43 +09:00
parent 6dd219b6c7
commit 6addf9002c
2 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/frontend/src/components/global/MkStickyContainer.vue
View file

@ -14,6 +14,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue'; import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue';
import { $$ } from 'vue/macros';
import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@/const'; import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@/const';
const rootEl = $shallowRef<HTMLElement>(); const rootEl = $shallowRef<HTMLElement>();
@ -83,8 +84,8 @@ onMounted(() => {
onUnmounted(() => { onUnmounted(() => {
observer.disconnect(); observer.disconnect();
}); });
defineExpose({
rootEl: $$(rootEl),
});
</script> </script>
<style lang="scss" module>
</style>

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

@ -2,14 +2,10 @@
<div :class="$style.root"> <div :class="$style.root">
<XSidebar v-if="!isMobile" :class="$style.sidebar"/> <XSidebar v-if="!isMobile" :class="$style.sidebar"/>
<MkStickyContainer :class="$style.contents"> <MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
<template #header><XStatusBars :class="$style.statusbars"/></template> <template #header><XStatusBars :class="$style.statusbars"/></template>
<main style="min-width: 0;" @contextmenu.stop="onContextmenu"> <RouterView/>
<div :class="$style.content" style="container-type: inline-size;"> <div :class="$style.spacer"></div>
<RouterView/>
</div>
<div :class="$style.spacer"></div>
</main>
</MkStickyContainer> </MkStickyContainer>
<div v-if="isDesktop" :class="$style.widgets"> <div v-if="isDesktop" :class="$style.widgets">
@ -84,8 +80,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, inject, Ref } from 'vue'; import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, shallowRef, Ref } from 'vue';
import XCommon from './_common_/common.vue'; import XCommon from './_common_/common.vue';
import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
import { instanceName } from '@/config'; import { instanceName } from '@/config';
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import * as os from '@/os'; import * as os from '@/os';
@ -98,6 +95,7 @@ import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
import { deviceKind } from '@/scripts/device-kind'; import { deviceKind } from '@/scripts/device-kind';
import { miLocalStorage } from '@/local-storage'; import { miLocalStorage } from '@/local-storage';
import { CURRENT_STICKY_BOTTOM } from '@/const'; import { CURRENT_STICKY_BOTTOM } from '@/const';
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue')); const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue')); const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue')); const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
@ -115,6 +113,7 @@ window.addEventListener('resize', () => {
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const widgetsShowing = $ref(false); const widgetsShowing = $ref(false);
const navFooter = $shallowRef<HTMLElement>(); const navFooter = $shallowRef<HTMLElement>();
const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
provide('router', mainRouter); provide('router', mainRouter);
provideMetadataReceiver((info) => { provideMetadataReceiver((info) => {
@ -194,7 +193,10 @@ const onContextmenu = (ev) => {
}; };
function top() { function top() {
// TODO contents.value.rootEl.scrollTo({
top: 0,
behavior: 'smooth',
});
} }
let navFooterHeight = $ref(0); let navFooterHeight = $ref(0);