diff --git a/frappe/public/js/form_builder/components/Column.vue b/frappe/public/js/form_builder/components/Column.vue index 814dbd0b9b..10afe3f495 100644 --- a/frappe/public/js/form_builder/components/Column.vue +++ b/frappe/public/js/form_builder/components/Column.vue @@ -5,7 +5,7 @@ import AddFieldButton from "./AddFieldButton.vue"; import EditableInput from "./EditableInput.vue"; import { computed, ref } from "vue"; import { useStore } from "../store"; -import { move_children_to_parent, confirm_dialog } from "../utils"; +import { move_children_to_parent, confirm_dialog, is_touch_screen_device } from "../utils"; import { useMagicKeys, whenever } from "@vueuse/core"; const props = defineProps(["section", "column"]); @@ -155,6 +155,7 @@ function move_columns_to_section() { class="column-container" v-model="column.fields" group="fields" + :delay="is_touch_screen_device() ? 200 : 0" :animation="200" :easing="store.get_animation" item-key="id" diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue index 1b3ab49d94..9266d5c8d3 100644 --- a/frappe/public/js/form_builder/components/Section.vue +++ b/frappe/public/js/form_builder/components/Section.vue @@ -4,7 +4,7 @@ import Column from "./Column.vue"; import EditableInput from "./EditableInput.vue"; import { ref, computed } from "vue"; import { useStore } from "../store"; -import { section_boilerplate, move_children_to_parent, confirm_dialog } from "../utils"; +import { section_boilerplate, move_children_to_parent, confirm_dialog, is_touch_screen_device } from "../utils"; import { useMagicKeys, whenever } from "@vueuse/core"; const props = defineProps(["tab", "section"]); @@ -177,6 +177,7 @@ function move_sections_to_tab() { v-model="section.columns" group="columns" item-key="id" + :delay="is_touch_screen_device() ? 200 : 0" :animation="200" :easing="store.get_animation" :disabled="store.read_only" diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue index e7cf7e1305..3946e93ee5 100644 --- a/frappe/public/js/form_builder/components/Tabs.vue +++ b/frappe/public/js/form_builder/components/Tabs.vue @@ -2,7 +2,7 @@ import Section from "./Section.vue"; import EditableInput from "./EditableInput.vue"; import { useStore } from "../store"; -import { section_boilerplate, confirm_dialog } from "../utils"; +import { section_boilerplate, confirm_dialog, is_touch_screen_device } from "../utils"; import draggable from "vuedraggable"; import { ref, computed } from "vue"; import { useMagicKeys, whenever } from "@vueuse/core"; @@ -117,6 +117,7 @@ function delete_tab(tab, with_children) { class="tabs" v-model="store.form.layout.tabs" group="tabs" + :delay="is_touch_screen_device() ? 200 : 0" :animation="200" :easing="store.get_animation" item-key="id" @@ -174,6 +175,7 @@ function delete_tab(tab, with_children) { class="tab-content-container" v-model="tab.sections" group="sections" + :delay="is_touch_screen_device() ? 200 : 0" :animation="200" :easing="store.get_animation" item-key="id" diff --git a/frappe/public/js/form_builder/utils.js b/frappe/public/js/form_builder/utils.js index 28e17354bf..6856432c2a 100644 --- a/frappe/public/js/form_builder/utils.js +++ b/frappe/public/js/form_builder/utils.js @@ -347,3 +347,7 @@ export function confirm_dialog( d.show(); d.set_message(message); } + +export function is_touch_screen_device() { + return "ontouchstart" in document.documentElement; +}