fix(frontend): デッキのメインカラムのヘッダをクリックしてもページ上部/下部にスクロールしない問題を修正 (#16653)
* fix(frontend): デッキのメインカラムのヘッダをクリックしても上部にスクロールしない問題を修正 * fix * Update Changelog * fix lint --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
parent
3df81931ec
commit
42008d1377
|
@ -4,6 +4,7 @@
|
||||||
- 依存関係の更新
|
- 依存関係の更新
|
||||||
|
|
||||||
### Client
|
### Client
|
||||||
|
- Enhance: デッキのメインカラムのヘッダをクリックしてページ上部/下部にスクロールできるように
|
||||||
- Fix: カスタム絵文字画面(beta)のaliasesで使用される区切り文字が一致していないのを修正 #15614
|
- Fix: カスタム絵文字画面(beta)のaliasesで使用される区切り文字が一致していないのを修正 #15614
|
||||||
- Fix: バナー画像の幅が表示領域と一致していない問題を修正
|
- Fix: バナー画像の幅が表示領域と一致していない問題を修正
|
||||||
- Fix: 一部のブラウザでバナー画像が上下中央に表示されない問題を修正
|
- Fix: 一部のブラウザでバナー画像が上下中央に表示されない問題を修正
|
||||||
|
|
|
@ -62,15 +62,18 @@ const props = withDefaults(defineProps<{
|
||||||
column: Column;
|
column: Column;
|
||||||
isStacked?: boolean;
|
isStacked?: boolean;
|
||||||
naked?: boolean;
|
naked?: boolean;
|
||||||
|
handleScrollToTop?: boolean;
|
||||||
menu?: MenuItem[];
|
menu?: MenuItem[];
|
||||||
refresher?: () => Promise<void>;
|
refresher?: () => Promise<void>;
|
||||||
}>(), {
|
}>(), {
|
||||||
isStacked: false,
|
isStacked: false,
|
||||||
naked: false,
|
naked: false,
|
||||||
|
handleScrollToTop: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(ev: 'headerWheel', ctx: WheelEvent): void;
|
(ev: 'headerWheel', ctx: WheelEvent): void;
|
||||||
|
(ev: 'headerClick', ctx: MouseEvent): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const body = useTemplateRef('body');
|
const body = useTemplateRef('body');
|
||||||
|
@ -252,7 +255,10 @@ function onContextmenu(ev: MouseEvent) {
|
||||||
os.contextMenu(getMenu(), ev);
|
os.contextMenu(getMenu(), ev);
|
||||||
}
|
}
|
||||||
|
|
||||||
function goTop() {
|
function goTop(ev: MouseEvent) {
|
||||||
|
emit('headerClick', ev);
|
||||||
|
if (!props.handleScrollToTop) return;
|
||||||
|
|
||||||
if (body.value) {
|
if (body.value) {
|
||||||
body.value.scrollTo({
|
body.value.scrollTo({
|
||||||
top: 0,
|
top: 0,
|
||||||
|
|
|
@ -4,7 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<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 #header>
|
||||||
<template v-if="pageMetadata">
|
<template v-if="pageMetadata">
|
||||||
<i :class="pageMetadata.icon"></i>
|
<i :class="pageMetadata.icon"></i>
|
||||||
|
@ -12,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div style="height: 100%;">
|
<div ref="rootEl" style="height: 100%;">
|
||||||
<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" @contextmenu.stop="onContextmenu"/>
|
<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" @contextmenu.stop="onContextmenu"/>
|
||||||
<RouterView v-else @contextmenu.stop="onContextmenu"/>
|
<RouterView v-else @contextmenu.stop="onContextmenu"/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -20,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { provide, shallowRef, ref } from 'vue';
|
import { provide, useTemplateRef, ref } from 'vue';
|
||||||
import { isLink } from '@@/js/is-link.js';
|
import { isLink } from '@@/js/is-link.js';
|
||||||
import XColumn from './column.vue';
|
import XColumn from './column.vue';
|
||||||
import type { Column } from '@/deck.js';
|
import type { Column } from '@/deck.js';
|
||||||
|
@ -38,6 +44,7 @@ defineProps<{
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const pageMetadata = ref<null | PageMetadata>(null);
|
const pageMetadata = ref<null | PageMetadata>(null);
|
||||||
|
const rootEl = useTemplateRef('rootEl');
|
||||||
|
|
||||||
provide(DI.router, mainRouter);
|
provide(DI.router, mainRouter);
|
||||||
provideMetadataReceiver((metadataGetter) => {
|
provideMetadataReceiver((metadataGetter) => {
|
||||||
|
@ -69,4 +76,15 @@ function onContextmenu(ev: MouseEvent) {
|
||||||
},
|
},
|
||||||
}], ev);
|
}], ev);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onHeaderClick() {
|
||||||
|
if (!rootEl.value) return;
|
||||||
|
const scrollEl = rootEl.value.querySelector<HTMLElement>('._pageScrollable,._pageScrollableReversed');
|
||||||
|
if (scrollEl) {
|
||||||
|
scrollEl.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue