diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index d3fd0403d275c39a203ef1386d9106a739f71a27..18735ead5fd752cdbafe64fdfe8f15fcc8296e2b 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/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"> - <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); diff --git a/packages/frontend/src/ui/universal.widgets.vue b/packages/frontend/src/ui/universal.widgets.vue index a3e34ed181d9bf27d5b21b70a1b9809879729f31..1ee95bf06ecd53e3defb341d1e94bce3f66448f4 100644 --- a/packages/frontend/src/ui/universal.widgets.vue +++ b/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 {