feat: preview mode

frappe/public/js/form_builder/components/FormBuilder.vue

@@ -36,7 +36,7 @@ onMounted(() => store.fetch());
 			</div>
 		</div>
 		<div class="form-container">
-			<div class="form-main">
+			<div class="form-main" :class="[store.preview ? 'preview' : '']">
 				<Tabs />
 			</div>
 		</div>
@@ -153,6 +153,72 @@ onMounted(() => store.fetch());
 		}
 	}
 
+	:deep(.preview) {
+		.tab, .column, .field, [data-is-custom="1"] {
+			background-color: var(--fg-color);
+		}
+
+		.column, .field {
+			border: none;
+			padding: 0;
+		}
+
+		.form-section {
+			padding: 5px;
+
+			.section-header {
+				&.has-label {
+					padding: 10px 15px;
+					margin-bottom: 8px;
+				}
+
+				&.collapsed {
+					margin-bottom: 0;
+				}
+			}
+
+			.section-columns {
+				margin-top: 8px;
+
+				.section-columns-container {
+					.column {
+						padding-left: 15px;
+						padding-right: 15px;
+						margin: 0;
+
+						.field {
+							margin: 0;
+							margin-bottom: 1rem;
+							.field-controls {
+								margin-bottom: 5px;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.selected, .hovered {
+			border-color: transparent;
+		}
+
+		input,
+		textarea,
+		select,
+		.ace_editor,
+		.ace_gutter,
+		.ace_content,
+		.signature-field,
+		.missing-image,
+		.ql-editor {
+			background-color: var(--control-bg) !important;
+		}
+
+		input[type="checkbox"] {
+			background-color: var(--fg-bg) !important;
+		}
+	}
+
 	.form-main:not(:has(.tab-header)) :deep(.tab-contents) {
 		max-height: calc(100vh - 160px);
 	}

frappe/public/js/form_builder/components/Section.vue

@@ -87,9 +87,12 @@ function move_sections_to_tab() {
 			@mouseup.stop="store.start_drag(section.df.is_custom_field)"
 		>
 			<div
-				:class="['section-header', section.df.label || section.df.collapsible ? 'has-label' : '']"
+				:class="[
+					'section-header',
+					section.df.label || section.df.collapsible ? 'has-label' : '',
+					collapsed ? 'collapsed' : ''
+				]"
 				:hidden="!section.df.label && store.read_only"
-				:style="{ paddingBottom: !collapsed ? '0.75rem' : '' }"
 			>
 				<div class="section-label">
 					<EditableInput
@@ -191,6 +194,11 @@ function move_sections_to_tab() {
 			display: none;
 			justify-content: space-between;
 			align-items: center;
+			padding-bottom: 0.75rem;
+
+			&.collapsed {
+				padding-bottom: 0;
+			}
 
 			&.has-label {
 				display: flex;

frappe/public/js/form_builder/form_builder.bundle.js

@@ -11,6 +11,7 @@ class FormBuilder {
 		this.page = page;
 		this.doctype = doctype;
 		this.customize = customize;
+		this.read_only = false;
 
 		// set page title
 		this.page.set_title(__("Form Builder: {0}", [this.doctype]));
@@ -31,6 +32,16 @@ class FormBuilder {
 			this.store.save_changes()
 		);
 
+		this.preview_btn = this.page.add_button(__("Show Preview"), () => {
+			this.store.preview = !this.store.preview;
+
+			if (this.store.read_only && !this.read_only) {
+				return;
+			}
+
+			this.store.read_only = this.store.preview;
+			this.read_only = true;
+		});
 		this.customize_form_btn = this.page.add_button(__("Switch to Customize Form"), () => {
 			frappe.set_route("form-builder", this.doctype, "customize");
 		});
@@ -100,9 +111,15 @@ class FormBuilder {
 				this.go_to_customize_form_btn.hide();
 			}
 
+			// toggle preview btn text
+			this.preview_btn.text(this.store.preview ? __("Hide Preview") : __("Show Preview"));
+
 			// toggle primary btn and show indicator based on read_only state
 			this.primary_btn.toggle(!this.store.read_only);
-			this.store.read_only && this.page.set_indicator(__("Read Only"), "orange");
+			if (this.store.read_only) {
+				let message = this.store.preview ? __("Preview Mode") : __("Read Only");
+				this.page.set_indicator(message, "orange");
+			}
 		});
 	}
 }

frappe/public/js/form_builder/store.js

@@ -14,6 +14,7 @@ export const useStore = defineStore("form-builder-store", {
 		dirty: false,
 		read_only: false,
 		is_customize_form: false,
+		preview: false,
 		drag: false,
 	}),
 	getters: {
@@ -95,6 +96,7 @@ export const useStore = defineStore("form-builder-store", {
 				this.dirty = false;
 				this.read_only =
 					!this.is_customize_form && !frappe.boot.developer_mode && !this.doc.custom;
+				this.preview = false;
 			});
 		},
 		reset_changes() {