refactor
This commit is contained in:
syuilo
parent
de71845b35
commit
8e8e3dbe4e
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="[$style.root, { [$style.withWallpaper]: wallpaper }]">
|
||||
<div :class="$style.root">
|
||||
<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
|
||||
|
||||
<MkStickyContainer :class="$style.contents">
|
||||
|
|
@ -12,8 +12,8 @@
|
|||
</main>
|
||||
</MkStickyContainer>
|
||||
|
||||
<div v-if="isDesktop" ref="widgetsEl" :class="$style.widgets">
|
||||
<XWidgets :marginTop="'var(--margin)'" @mounted="attachSticky"/>
|
||||
<div v-if="isDesktop" :class="$style.widgets">
|
||||
<XWidgets :marginTop="'var(--margin)'"/>
|
||||
</div>
|
||||
|
||||
<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
|
||||
|
|
@ -87,7 +87,6 @@
|
|||
import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, inject, Ref } from 'vue';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import { instanceName } from '@/config';
|
||||
import { StickySidebar } from '@/scripts/sticky-sidebar';
|
||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||
import * as os from '@/os';
|
||||
import { defaultStore } from '@/store';
|
||||
|
|
@ -114,7 +113,6 @@ window.addEventListener('resize', () => {
|
|||
});
|
||||
|
||||
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
||||
const widgetsEl = $shallowRef<HTMLElement>();
|
||||
const widgetsShowing = $ref(false);
|
||||
const navFooter = $shallowRef<HTMLElement>();
|
||||
|
||||
|
|
@ -140,8 +138,6 @@ mainRouter.on('change', () => {
|
|||
drawerMenuShowing.value = false;
|
||||
});
|
||||
|
||||
document.documentElement.style.overflowY = 'scroll';
|
||||
|
||||
if (window.innerWidth > 1024) {
|
||||
const tempUI = miLocalStorage.getItem('ui_temp');
|
||||
if (tempUI) {
|
||||
|
|
@ -197,19 +193,10 @@ const onContextmenu = (ev) => {
|
|||
}], ev);
|
||||
};
|
||||
|
||||
const attachSticky = (el) => {
|
||||
const sticky = new StickySidebar(widgetsEl);
|
||||
window.addEventListener('scroll', () => {
|
||||
sticky.calc(window.scrollY);
|
||||
}, { passive: true });
|
||||
};
|
||||
|
||||
function top() {
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
// TODO
|
||||
}
|
||||
|
||||
const wallpaper = miLocalStorage.getItem('wallpaper') != null;
|
||||
|
||||
let navFooterHeight = $ref(0);
|
||||
provide<Ref<number>>(CURRENT_STICKY_BOTTOM, $$(navFooterHeight));
|
||||
|
||||
|
|
@ -275,28 +262,31 @@ $widgets-hide-threshold: 1090px;
|
|||
}
|
||||
|
||||
.root {
|
||||
min-height: 100dvh;
|
||||
height: 100dvh;
|
||||
overflow: clip;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.withWallpaper {
|
||||
background: var(--wallpaperOverlay);
|
||||
//backdrop-filter: var(--blur, blur(4px));
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border-right: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
.contents {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.widgets {
|
||||
padding: 0 var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||
border-left: solid 0.5px var(--divider);
|
||||
background: var(--bg);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="$style.root" :style="{ paddingTop: marginTop }">
|
||||
<div :class="$style.root">
|
||||
<XWidgets :class="$style.widgets" :edit="editMode" :widgets="widgets" @addWidget="addWidget" @removeWidget="removeWidget" @updateWidget="updateWidget" @updateWidgets="updateWidgets" @exit="editMode = false"/>
|
||||
|
||||
<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
let editMode = $ref(false);
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { } from 'vue';
|
||||
import XWidgets from '@/components/MkWidgets.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { defaultStore } from '@/store';
|
||||
|
|
@ -21,28 +21,16 @@ const props = withDefaults(defineProps<{
|
|||
// left = place: leftだけを表示
|
||||
// right = rightとnullを表示
|
||||
place?: 'left' | null | 'right';
|
||||
marginTop?: string;
|
||||
}>(), {
|
||||
place: null,
|
||||
marginTop: '0',
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'mounted', el?: Element): void;
|
||||
}>();
|
||||
|
||||
let rootEl = $shallowRef<HTMLDivElement>();
|
||||
|
||||
const widgets = $computed(() => {
|
||||
if (props.place === null) return defaultStore.reactiveState.widgets.value;
|
||||
if (props.place === 'left') return defaultStore.reactiveState.widgets.value.filter(w => w.place === 'left');
|
||||
return defaultStore.reactiveState.widgets.value.filter(w => w.place !== 'left');
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
emit('mounted', rootEl);
|
||||
});
|
||||
|
||||
function addWidget(widget) {
|
||||
defaultStore.set('widgets', [{
|
||||
...widget,
|
||||
|
|
@ -83,13 +71,6 @@ function updateWidgets(thisWidgets) {
|
|||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: sticky;
|
||||
height: min-content;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.widgets {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.edit {
|
||||
|
|
|
|||
Loading…
Reference in New Issue