From 216d9b40a9ebfcc4ca208a5d0ba326cd73c755d5 Mon Sep 17 00:00:00 2001
From: Danielo Rodriguez <rdanielo@gmail.com>
Date: Thu, 14 Sep 2023 11:33:28 +0200
Subject: [PATCH] feat: keep the form header always visible fixes #11

---
 src/views/EditFormView.ts    |  2 +-
 src/views/FormBuilder.svelte | 33 ++++++++++++++++++++++++---------
 src/views/ManageFormsView.ts |  1 -
 styles.css                   |  3 +++
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/views/EditFormView.ts b/src/views/EditFormView.ts
index f03971ab..fdd40fc1 100644
--- a/src/views/EditFormView.ts
+++ b/src/views/EditFormView.ts
@@ -41,7 +41,7 @@ export class EditFormView extends ItemView {
 
 	async onOpen() {
 		this.formEditor = new FormEditor({
-			target: this.contentEl,
+			target: this.containerEl,
 			props: {
 				definition: this.formState,
 				app: this.app,
diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte
index 93d56486..b64ba2fb 100644
--- a/src/views/FormBuilder.svelte
+++ b/src/views/FormBuilder.svelte
@@ -85,9 +85,9 @@
 	};
 </script>
 
-<div class="flex column gap2">
+<div class="flex column gap2 wrapper modal-form">
 	<form on:submit|preventDefault={handleSubmit}>
-		<fieldset class="flex column gap2">
+		<fieldset class="flex column gap2 header">
 			<label for="name">Form unique name</label>
 			<span class="hint"
 				>This name will identify this form uniquely, and will be the
@@ -134,9 +134,9 @@
 			</div>
 		</fieldset>
 
-		<h3>Fields</h3>
-		{#if definition.fields.length > 0}
-			<fieldset class="flex column gap2 p-2">
+		<fieldset class="flex column gap2 fields">
+			<h3>Fields</h3>
+			{#if definition.fields.length > 0}
 				{#each definition.fields as field, index}
 					{@const desc_id = `desc_${index}`}
 					{@const delete_id = `delete_${index}`}
@@ -346,14 +346,29 @@
 					</div>
 					<hr />
 				{/each}
-			</fieldset>
-		{:else}
-			No fields yet
-		{/if}
+			{:else}
+				No fields yet
+			{/if}
+		</fieldset>
 	</form>
 </div>
 
 <style>
+	.wrapper,
+	form {
+		max-height: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.header {
+		box-shadow: var(--shadow-bottom) var(--divider-color);
+		padding: 1rem;
+	}
+	.fields {
+		overflow-y: auto;
+		padding: 1rem;
+	}
 	.flex {
 		display: flex;
 	}
diff --git a/src/views/ManageFormsView.ts b/src/views/ManageFormsView.ts
index f6b85705..955faae4 100644
--- a/src/views/ManageFormsView.ts
+++ b/src/views/ManageFormsView.ts
@@ -53,7 +53,6 @@ export class ManageFormsView extends ItemView {
 			new Setting(row)
 				.setName(form.title)
 				.then((setting) => {
-					console.log(setting)
 					// This moves the separator of the settings container from he top to the bottom
 					setting.settingEl.setCssStyles({ borderTop: 'none', borderBottom: '1px solid var(--background-modifier-border)' })
 				})
diff --git a/styles.css b/styles.css
index 8910b40d..fd9e0739 100644
--- a/styles.css
+++ b/styles.css
@@ -34,6 +34,9 @@ If your plugin does not need CSS, delete this file.
 .modal-form-hint {
 	color: var(--text-muted);
 }
+.modal-form {
+	--shadow-bottom: 0 0.8rem 0.8rem -0.8rem;
+}
 /* .modal-form-hint code {
 	color: var(--text-normal);
 	background-color: var(--background-secondary);