From db2c13a2f4c722983a804c02be1cd95cb623fcf7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Oct 2022 16:01:51 +0530
Subject: [PATCH] feat: resizable sidebar

---
 .../form_builder/components/FormBuilder.vue   | 23 +++++-
 .../js/form_builder/components/Sidebar.vue    | 74 +++++++++++++++----
 2 files changed, 79 insertions(+), 18 deletions(-)

diff --git a/frappe/public/js/form_builder/components/FormBuilder.vue b/frappe/public/js/form_builder/components/FormBuilder.vue
index c09490636d..681b3a85d6 100644
--- a/frappe/public/js/form_builder/components/FormBuilder.vue
+++ b/frappe/public/js/form_builder/components/FormBuilder.vue
@@ -20,13 +20,13 @@ onMounted(() => store.fetch());
 </script>
 
 <template>
-	<div class="layout-main-section row" v-if="should_render">
-		<div class="form-controls col-3">
+	<div class="form-builder-container" v-if="should_render">
+		<div class="form-controls">
 			<div class="form-sidebar">
 				<Sidebar />
 			</div>
 		</div>
-		<div class="form-container col-9">
+		<div class="form-container">
 			<div class="form-main">
 				<Tabs />
 			</div>
@@ -35,8 +35,23 @@ onMounted(() => store.fetch());
 </template>
 
 <style lang="scss" scoped>
-.layout-main-section {
+.form-builder-container {
 	margin-bottom: -60px;
+	display: flex;
+	gap: 20px;
+
+	&.resizing {
+		user-select: none;
+		cursor: col-resize;
+	}
+
+	.form-controls {
+		position: relative;
+	}
+
+	.form-container {
+		flex: 1;
+	}
 
 	.form-sidebar,
 	.form-main {
diff --git a/frappe/public/js/form_builder/components/Sidebar.vue b/frappe/public/js/form_builder/components/Sidebar.vue
index 2fb6b20d18..afcce6b237 100644
--- a/frappe/public/js/form_builder/components/Sidebar.vue
+++ b/frappe/public/js/form_builder/components/Sidebar.vue
@@ -8,6 +8,30 @@ 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);
+
+function start_resize() {
+	$(document).on("mousemove", resize);
+	$(document).on("mouseup", () => {
+		$(".form-builder-container").removeClass("resizing");
+		sidebar_resizing.value = false;
+		$(document).off("mousemove", resize);
+	});
+}
+
+function resize(e) {
+	sidebar_resizing.value = true;
+	$(".form-builder-container").addClass("resizing");
+	sidebar_width.value = e.clientX - 90;
+
+	if (sidebar_width.value < 16 * 16) {
+		sidebar_width.value = 16 * 16;
+	}
+	if (sidebar_width.value > 24 * 16) {
+		sidebar_width.value = 24 * 16;
+	}
+}
 
 watch(
 	() => store.selected_field,
@@ -19,25 +43,47 @@ watch(
 </script>
 
 <template>
-	<div class="tab-header">
-		<div
-			:class="['tab', active_tab == tab ? 'active' : '']"
-			v-for="(tab, i) in tab_titles"
-			:key="i"
-			@click="active_tab = tab"
-		>
-			{{ tab }}
+	<div
+		:class="['sidebar-resizer', sidebar_resizing ? 'resizing' : '']"
+		@mousedown="start_resize"
+	/>
+	<div class="sidebar-container" :style="{ width: `${sidebar_width}px` }">
+		<div class="tab-header">
+			<div
+				:class="['tab', active_tab == tab ? 'active' : '']"
+				v-for="(tab, i) in tab_titles"
+				:key="i"
+				@click="active_tab = tab"
+			>
+				{{ tab }}
+			</div>
+		</div>
+		<div :class="['tab-content', active_tab == tab_titles[0] ? 'active' : '']">
+			<FieldTypes />
+		</div>
+		<div :class="['tab-content', active_tab == tab_titles[1] ? 'active' : '']">
+			<FieldProperties />
 		</div>
-	</div>
-	<div :class="['tab-content', active_tab == tab_titles[0] ? 'active' : '']">
-		<FieldTypes />
-	</div>
-	<div :class="['tab-content', active_tab == tab_titles[1] ? 'active' : '']">
-		<FieldProperties />
 	</div>
 </template>
 
 <style lang="scss" scoped>
+.sidebar-resizer {
+	position: absolute;
+	top: 0;
+	right: -6px;
+	width: 5px;
+	height: 100%;
+	opacity: 0;
+	background-color: var(--bg-gray);
+	transition: opacity 0.2s ease;
+	z-index: 10;
+	cursor: col-resize;
+
+	&:hover, &.resizing {
+		opacity: 1;
+	}
+}
 .tab-header {
 	display: flex;
 	justify-content: space-between;