limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-14 05:57:32 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhance(frontend): improve ux of deck scroll

Browse source
This commit is contained in:
syuilo 2023-06-24 12:58:26 +09:00 committed by naskya
parent 601e02bdcd
commit 75b55c5c2c
2 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/client/src/ui/deck.vue
View file

@ -9,6 +9,7 @@
class="columns"
:class="deckStore.reactiveState.columnAlign.value"
@contextmenu.self.prevent="onContextmenu"
@wheel.self="onWheel"
>
<template v-for="ids in layout">
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
@ -31,6 +32,7 @@
) + 'px',
}
"
@wheel.self="onWheel"
>
<DeckColumnCore
v-for="id in ids"
@ -50,6 +52,7 @@
:is-stacked="false"
:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
@parent-focus="moveFocus(ids[0], $event)"
@headerWheel="onWheel"
/>
</template>
<div v-if="layout.length === 0" class="intro _panel">
@ -279,18 +282,15 @@ const onContextmenu = (ev) => {
);
};
document.documentElement.style.overflowY = "hidden";
document.documentElement.style.scrollBehavior = "auto";
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
) {
function onWheel(ev: WheelEvent) {
if (ev.deltaX === 0) {
columnsEl.scrollLeft += ev.deltaY;
}
});
}
document.documentElement.style.overflowY = "hidden";
document.documentElement.style.scrollBehavior = "auto";
loadDeck();
function moveFocus(id: string, direction: "up" | "down" | "left" | "right") {

2
packages/client/src/ui/deck/column.vue
View file

@ -23,6 +23,7 @@
@dragstart="onDragstart"
@dragend="onDragend"
@contextmenu.prevent.stop="onContextmenu"
@wheel="emit('headerWheel', $event)"
>
<button
v-if="isStacked && !isMainColumn"
@ -95,6 +96,7 @@ const props = withDefaults(
const emit = defineEmits<{
(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
(ev: "change-active-state", v: boolean): void;
(ev: "headerWheel", ctx: WheelEvent): void;
}>();
let body = $ref<HTMLDivElement>();