diff options
Diffstat (limited to 'packages/frontend/src/ui/deck')
| -rw-r--r-- | packages/frontend/src/ui/deck/column.vue | 8 | ||||
| -rw-r--r-- | packages/frontend/src/ui/deck/main-column.vue | 24 |
2 files changed, 28 insertions, 4 deletions
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue index 11937fda24..312ca51c83 100644 --- a/packages/frontend/src/ui/deck/column.vue +++ b/packages/frontend/src/ui/deck/column.vue @@ -62,15 +62,18 @@ const props = withDefaults(defineProps<{ column: Column; isStacked?: boolean; naked?: boolean; + handleScrollToTop?: boolean; menu?: MenuItem[]; refresher?: () => Promise<void>; }>(), { isStacked: false, naked: false, + handleScrollToTop: true, }); const emit = defineEmits<{ (ev: 'headerWheel', ctx: WheelEvent): void; + (ev: 'headerClick', ctx: MouseEvent): void; }>(); const body = useTemplateRef('body'); @@ -252,7 +255,10 @@ function onContextmenu(ev: MouseEvent) { os.contextMenu(getMenu(), ev); } -function goTop() { +function goTop(ev: MouseEvent) { + emit('headerClick', ev); + if (!props.handleScrollToTop) return; + if (body.value) { body.value.scrollTo({ top: 0, diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue index 78454d2e49..1388cbdc18 100644 --- a/packages/frontend/src/ui/deck/main-column.vue +++ b/packages/frontend/src/ui/deck/main-column.vue @@ -4,7 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<XColumn v-if="prefer.s['deck.alwaysShowMainColumn'] || mainRouter.currentRoute.value.name !== 'index'" :column="column" :isStacked="isStacked"> +<XColumn + v-if="prefer.s['deck.alwaysShowMainColumn'] || mainRouter.currentRoute.value.name !== 'index'" + :column="column" + :isStacked="isStacked" + :handleScrollToTop="false" + @headerClick="onHeaderClick" +> <template #header> <template v-if="pageMetadata"> <i :class="pageMetadata.icon"></i> @@ -12,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> </template> - <div style="height: 100%;"> + <div ref="rootEl" style="height: 100%;"> <StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" @contextmenu.stop="onContextmenu"/> <RouterView v-else @contextmenu.stop="onContextmenu"/> </div> @@ -20,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { provide, shallowRef, ref } from 'vue'; +import { provide, useTemplateRef, ref } from 'vue'; import { isLink } from '@@/js/is-link.js'; import XColumn from './column.vue'; import type { Column } from '@/deck.js'; @@ -38,6 +44,7 @@ defineProps<{ }>(); const pageMetadata = ref<null | PageMetadata>(null); +const rootEl = useTemplateRef('rootEl'); provide(DI.router, mainRouter); provideMetadataReceiver((metadataGetter) => { @@ -69,4 +76,15 @@ function onContextmenu(ev: MouseEvent) { }, }], ev); } + +function onHeaderClick() { + if (!rootEl.value) return; + const scrollEl = rootEl.value.querySelector<HTMLElement>('._pageScrollable,._pageScrollableReversed'); + if (scrollEl) { + scrollEl.scrollTo({ + top: 0, + behavior: 'smooth', + }); + } +} </script> |