@@ -88,8 +97,17 @@ let docfield_df = computed(() => {
diff --git a/frappe/public/js/form_builder/components/SearchBox.vue b/frappe/public/js/form_builder/components/SearchBox.vue
index 46a2c86f67..bae326058d 100644
--- a/frappe/public/js/form_builder/components/SearchBox.vue
+++ b/frappe/public/js/form_builder/components/SearchBox.vue
@@ -5,7 +5,7 @@
@@ -18,9 +18,8 @@
.search-box {
display: flex;
position: relative;
- padding: 0px 9px 9px;
background-color: var(--fg-color);
- border-bottom: 1px solid var(--border-color);
+ width: 100%;
.search-input {
padding-left: 30px;
@@ -28,7 +27,7 @@
.search-icon {
position: absolute;
- left: 16px;
+ left: 7px;
top: 2px;
}
}
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index cd675e5958..9266d5c8d3 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -2,15 +2,25 @@
import draggable from "vuedraggable";
import Column from "./Column.vue";
import EditableInput from "./EditableInput.vue";
-import { ref } from "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"]);
-let store = useStore();
+const store = useStore();
-let hovered = ref(false);
-let collapsed = ref(false);
+// delete/backspace to delete the field
+const { Backspace } = useMagicKeys();
+whenever(Backspace, (value) => {
+ if (value && selected.value && store.not_using_input) {
+ remove_section();
+ }
+});
+
+const hovered = ref(false);
+const collapsed = ref(false);
+const selected = computed(() => store.selected(props.section.df.name));
function add_section_above() {
let index = props.tab.sections.indexOf(props.section);
@@ -19,7 +29,7 @@ function add_section_above() {
function is_section_empty() {
return !props.section.columns.some(
- column => (store.is_customize_form && !column.df.is_custom_field) || column.fields.length
+ (column) => (store.is_customize_form && !column.df.is_custom_field) || column.fields.length
);
}
@@ -34,11 +44,15 @@ function remove_section() {
} else {
confirm_dialog(
__("Delete Section", null, "Title of confirmation dialog"),
- __("Are you sure you want to delete the section? All the columns along with fields in the section will be moved to the previous section.", null, "Confirmation dialog message"),
+ __(
+ "Are you sure you want to delete the section? All the columns along with fields in the section will be moved to the previous section.",
+ null,
+ "Confirmation dialog message"
+ ),
() => delete_section(),
__("Delete section", null, "Button text"),
() => delete_section(true),
- __("Delete entire section with columns", null, "Button text")
+ __("Delete entire section with fields", null, "Button text")
);
}
}
@@ -94,7 +108,7 @@ function move_sections_to_tab() {
:class="[
'form-section',
hovered ? 'hovered' : '',
- store.selected(section.df.name) ? 'selected' : ''
+ store.selected(section.df.name) ? 'selected' : '',
]"
:title="section.df.fieldname"
@click.stop="select_section"
@@ -105,7 +119,7 @@ function move_sections_to_tab() {
:class="[
'section-header',
section.df.label || section.df.collapsible ? 'has-label' : '',
- collapsed ? 'collapsed' : ''
+ collapsed ? 'collapsed' : '',
]"
:hidden="!section.df.label && store.read_only"
>
@@ -118,18 +132,10 @@ function move_sections_to_tab() {
-
{{ section.df.description }}
+
+ {{ section.df.description }}
+
-import FieldTypes from "./FieldTypes.vue";
import FieldProperties from "./FieldProperties.vue";
-import { ref, watch } from "vue";
import { useStore } from "../store";
+import { ref } from "vue";
let store = useStore();
-let tab_titles = [__("Field Types"), __("Field Properties")];
-let active_tab = ref(tab_titles[0]);
let sidebar_width = ref(272);
let sidebar_resizing = ref(false);
@@ -23,7 +20,8 @@ function start_resize() {
function resize(e) {
sidebar_resizing.value = true;
$(".form-builder-container").addClass("resizing");
- sidebar_width.value = e.clientX - 90;
+ let screen_width = e.view.innerWidth;
+ sidebar_width.value = screen_width - e.clientX - 90;
if (sidebar_width.value < 16 * 16) {
sidebar_width.value = 16 * 16;
@@ -32,14 +30,6 @@ function resize(e) {
sidebar_width.value = 24 * 16;
}
}
-
-watch(
- () => store.form.selected_field,
- value => {
- active_tab.value = value ? tab_titles[1] : tab_titles[0];
- },
- { deep: true }
-);
@@ -48,21 +38,20 @@ watch(
@mousedown="start_resize"
/>