archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-17 18:32:35 +00:00
Code Issues Projects Releases Wiki Activity

Added threshold to the field drag and drop

Browse source
This commit is contained in:
Bram Wiepjes 2022-09-26 17:28:20 +00:00
parent b58ffb9b33
commit d1c8fc79a7
5 changed files with 47 additions and 62 deletions
web-frontend
modules
core/assets/scss/components/views
grid.scss
database/components/view/grid
GridViewFieldDragging.vueGridViewFieldType.vue
test/unit/database
__snapshots__
publicView.spec.js.snap
components/view/grid/__snapshots__
gridViewDecoration.spec.js.snap

8
web-frontend/modules/core/assets/scss/components/views/grid.scss
View file

@ -529,13 +529,7 @@
.grid-view__description-name {
@extend %ellipsis;
.grid-view__quick-edit--editable {
user-select: none;
&:hover {
cursor: pointer;
}
}
user-select: none;
}
&.grid-view__description--loading {

37
web-frontend/modules/database/components/view/grid/GridViewFieldDragging.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-show="dragging">
<div v-show="dragging && moved">
<div
class="grid-view__field-dragging"
:style="{ width: draggingWidth + 'px', left: draggingLeft + 'px' }"
@ -40,12 +40,16 @@ export default {
return {
// Indicates if the user is dragging a field to another position.
dragging: false,
// Indicates whether the user has moved the mouse more than the 3px threshold.
moved: false,
// The field object that is being dragged.
field: null,
// The id of the field where the dragged field must be placed after.
targetFieldId: null,
// The horizontal starting position of the mouse.
mouseStart: 0,
mouseStartX: 0,
// The vertical starting position of the mouse.
mouseStartY: 0,
// The horizontal scrollbar offset starting position.
scrollStart: 0,
// The width of the dragging animation, this is equal to the width of the field.
@ -83,7 +87,9 @@ export default {
this.field = field
this.targetFieldId = field.id
this.dragging = true
this.mouseStart = event.clientX
this.moved = false
this.mouseStartX = event.clientX
this.mouseStartY = event.clientY
this.scrollStart = this.$parent.$el.scrollLeft
this.draggingLeft = 0
this.targetLeft = 0
@ -101,7 +107,6 @@ export default {
}
}
document.body.addEventListener('keydown', this.$el.keydownEvent)
this.move(event, false)
},
/**
* The move method is called when every time the user moves the mouse while
@ -115,6 +120,22 @@ export default {
event = this.lastMoveEvent
}
// Sometimes the user could accidentally drag the element one or two pixels while
// clicking it. Because it could be annoying that the click doesn't work because
// the moving state started, we check here if the user has at least dragged
// the element 3 pixels vertically or horizontally before starting the moved
// state.
if (!this.moved) {
if (
Math.abs(event.clientX - this.mouseStartX) > 3 ||
Math.abs(event.clientY - this.mouseStartY) > 3
) {
this.moved = true
} else {
return
}
}
// This is the horizontally scrollable element.
const element = this.$parent.$el
@ -125,7 +146,7 @@ export default {
this.draggingLeft = Math.min(
this.getFieldLeft(this.field.id) +
event.clientX -
this.mouseStart +
this.mouseStartX +
this.$parent.$el.scrollLeft -
this.scrollStart,
this.containerWidth - this.draggingWidth
@ -205,6 +226,8 @@ export default {
*/
cancel() {
this.dragging = false
this.mouseStartX = 0
this.mouseStartY = 0
window.removeEventListener('mousemove', this.$el.moveEvent)
window.removeEventListener('mouseup', this.$el.upEvent)
document.body.addEventListener('keydown', this.$el.keydownEvent)
@ -219,6 +242,10 @@ export default {
event.preventDefault()
this.cancel()
if (!this.moved) {
return
}
// We don't need to do anything if the field needs to be placed after itself
// because that wouldn't change the position.
if (this.field.id === this.targetFieldId) {

12
web-frontend/modules/database/components/view/grid/GridViewFieldType.vue
View file

@ -19,16 +19,7 @@
<i class="fas" :class="'fa-' + field._.type.iconClass"></i>
</div>
<div class="grid-view__description-name">
<span
ref="quickEditLink"
:class="
readOnly
? 'grid-view__quick-edit'
: 'grid-view__quick-edit--editable'
"
@dblclick="handleQuickEdit()"
@mousedown.stop
>
<span ref="quickEditLink" @dblclick="handleQuickEdit()">
{{ field.name }}
</span>
</div>
@ -326,7 +317,6 @@ export default {
}
},
startDragging(event, field) {
event.preventDefault()
this.$emit('dragging', { field, event })
},
getSortIndicator(field, index) {

16
web-frontend/test/unit/database/__snapshots__/publicView.spec.js.snap
View file

@ -237,9 +237,7 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit"
>
<span>
Name
@ -406,9 +404,7 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit"
>
<span>
Last name
@ -445,9 +441,7 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit"
>
<span>
Notes
@ -484,9 +478,7 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit"
>
<span>
Active

36
web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewDecoration.spec.js.snap
View file

@ -59,9 +59,7 @@ exports[`GridView component with decoration Default component with first_cell de
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit--editable"
>
<span>
Name
@ -266,9 +264,7 @@ exports[`GridView component with decoration Default component with first_cell de
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit--editable"
>
<span>
Surname
@ -310,9 +306,7 @@ exports[`GridView component with decoration Default component with first_cell de
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit--editable"
>
<span>
Address
@ -549,9 +543,7 @@ exports[`GridView component with decoration Default component with row wrapper d
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit--editable"
>
<span>
Name
@ -702,9 +694,7 @@ exports[`GridView component with decoration Default component with row wrapper d
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit--editable"
>
<span>
Surname
@ -746,9 +736,7 @@ exports[`GridView component with decoration Default component with row wrapper d
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit--editable"
>
<span>
Address
@ -954,9 +942,7 @@ exports[`GridView component with decoration Default component with unavailable d
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit--editable"
>
<span>
Name
@ -1155,9 +1141,7 @@ exports[`GridView component with decoration Default component with unavailable d
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit--editable"
>
<span>
Surname
@ -1199,9 +1183,7 @@ exports[`GridView component with decoration Default component with unavailable d
<div
class="grid-view__description-name"
>
<span
class="grid-view__quick-edit--editable"
>
<span>
Address