monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

enhance(frontend): improve ux of deck scroll

Browse source 
Resolve #11007
This commit is contained in:
syuilo 2023-06-24 12:58:26 +09:00
parent 3fe1c862f6
commit dc27ba6f03
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/frontend/src/ui/deck.vue
View file

@ -4,12 +4,13 @@
<div :class="$style.main"> <div :class="$style.main">
<XStatusBars/> <XStatusBars/>
<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu"> <div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.self="onWheel">
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため --> <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
<section <section
v-for="ids in layout" v-for="ids in layout"
:class="$style.section" :class="$style.section"
:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }" :style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
@wheel.self="onWheel"
> >
<component <component
:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn" :is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
@ -19,6 +20,7 @@
:class="$style.column" :class="$style.column"
:column="columns.find(c => c.id === id)" :column="columns.find(c => c.id === id)"
:isStacked="ids.length > 1" :isStacked="ids.length > 1"
@headerWheel="onWheel"
/> />
</section> </section>
<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding"> <div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
@ -196,15 +198,14 @@ const onContextmenu = (ev) => {
}], ev); }], ev);
}; };
document.documentElement.style.overflowY = 'hidden'; function onWheel(ev: WheelEvent) {
document.documentElement.style.scrollBehavior = 'auto'; if (ev.deltaX === 0) {
window.addEventListener('wheel', (ev) => {
if (ev.target === columnsEl && ev.deltaX === 0) {
columnsEl.scrollLeft += ev.deltaY;
} else if (getScrollContainer(ev.target as HTMLElement) == null && ev.deltaX === 0) {
columnsEl.scrollLeft += ev.deltaY; columnsEl.scrollLeft += ev.deltaY;
} }
}); }
document.documentElement.style.overflowY = 'hidden';
document.documentElement.style.scrollBehavior = 'auto';
loadDeck(); loadDeck();

5
packages/frontend/src/ui/deck/column.vue
View file

@ -12,6 +12,7 @@
@dragstart="onDragstart" @dragstart="onDragstart"
@dragend="onDragend" @dragend="onDragend"
@contextmenu.prevent.stop="onContextmenu" @contextmenu.prevent.stop="onContextmenu"
@wheel="emit('headerWheel', $event)"
> >
<svg viewBox="0 0 256 128" :class="$style.tabShape"> <svg viewBox="0 0 256 128" :class="$style.tabShape">
<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)"> <g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">
@ -56,6 +57,10 @@ const props = withDefaults(defineProps<{
naked: false, naked: false,
}); });
const emit = defineEmits<{
(ev: 'headerWheel', ctx: WheelEvent): void;
}>();
let body = $shallowRef<HTMLDivElement | null>(); let body = $shallowRef<HTMLDivElement | null>();
let dragging = $ref(false); let dragging = $ref(false);