refactor

packages/frontend/src/ui/universal.vue

@@ -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">
+	<div v-if="isDesktop" :class="$style.widgets">
-		<XWidgets :marginTop="'var(--margin)'" @mounted="attachSticky"/>
+		<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);
 

packages/frontend/src/ui/universal.widgets.vue

@@ -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 {