Browse Source

refactor(nc-gui): only enable swipe controls for mobile layout

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
commit
6652c39bf5
  1. 53
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
  2. 3
      packages/nc-gui/pages/index/index/index.vue

53
packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
import { SwipeDirection } from '@vueuse/core'
import { SwipeDirection, breakpointsTailwind } from '@vueuse/core'
import {
DropZoneRef,
computed,
@ -9,7 +9,7 @@ import {
onMounted,
provide,
ref,
useEventListener,
useBreakpoints,
usePointerSwipe,
useSharedFormStoreOrThrow,
useStepper,
@ -20,6 +20,8 @@ enum TransitionDirection {
Right = 'right',
}
const { md } = useBreakpoints(breakpointsTailwind)
const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
const isTransitioning = ref(false)
@ -28,18 +30,6 @@ const transitionName = ref<TransitionDirection>(TransitionDirection.Left)
const el = ref<HTMLDivElement>()
const { direction } = usePointerSwipe(el, {
onSwipe: () => {
if (isTransitioning.value) return
if (direction.value === SwipeDirection.LEFT) {
goNext()
} else if (direction.value === SwipeDirection.RIGHT) {
goPrevious()
}
},
})
provide(DropZoneRef, el)
const steps = computed(() => {
@ -129,25 +119,26 @@ function focusInput() {
}
}
useEventListener('wheel', (event) => {
if (Math.abs(event.deltaX) < Math.abs(event.deltaY)) {
// Scrolling more vertically than horizontally
return
}
if (isTransitioning.value) return
if (event.deltaX < -15) {
goPrevious()
} else if (event.deltaX > 15) {
goNext()
}
})
onKeyStroke(['ArrowLeft', 'ArrowDown'], goPrevious)
onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
onMounted(focusInput)
onMounted(() => {
focusInput()
if (!md.value) {
const { direction } = usePointerSwipe(el, {
onSwipe: () => {
if (isTransitioning.value) return
if (direction.value === SwipeDirection.LEFT) {
goNext()
} else if (direction.value === SwipeDirection.RIGHT) {
goPrevious()
}
},
})
}
})
</script>
<template>
@ -248,7 +239,7 @@ onMounted(focusInput)
</a-tooltip>
<!-- todo: i18n -->
<div class="text-sm text-gray-500 flex items-center gap-1">
<div class="hidden md:flex text-sm text-gray-500 items-center gap-1">
Press Enter <MaterialSymbolsKeyboardReturn class="mt-1" />
</div>
</div>

3
packages/nc-gui/pages/index/index/index.vue

@ -204,7 +204,8 @@ onBeforeMount(loadProjects)
<a-skeleton />
</div>
<a-table v-else
<a-table
v-else
:custom-row="customRow"
:data-source="filteredProjects"
:pagination="{ position: ['bottomCenter'] }"

Loading…
Cancel
Save