WIP: Tab-like system for question editors

acmcsufoss · Apr 30, 2024 · 4f9b185 · 4f9b185
1 parent 3f8ae5f
commit 4f9b185
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 29 deletions.
diff --git a/src/lib/components/form_editor/question_list_editor/delete_item.svelte b/src/lib/components/form_editor/question_list_editor/delete_item.svelte
@@ -8,3 +8,10 @@
 <!-- With the enter key still inactive its very easy to accidentally delete a question. -->
 <!-- Some inputs may also use an enter such as text area if the user writes mutliple paragraphs -->
 <button on:click={() => deleteAction()}>Delete</button>
+
+<style>
+	button {
+		position: absolute;
+		transform: translateX(-140%) translateY(-80%);
+	}
+</style>
diff --git a/src/lib/components/questions/base/base_editor.svelte b/src/lib/components/questions/base/base_editor.svelte
@@ -12,23 +12,34 @@
 </script>
 
 <!-- Copied From TextQuestionInput -->
-<div>
-	<fieldset>
-		<legend>Question Title</legend>
-		<input type="text" bind:value={data.content} placeholder="Question Title" />
-	</fieldset>
-
-	<fieldset>
-		<legend>Internal Question</legend>
-		<input type="text" bind:value={data.name} placeholder="Internal Question Name" />
-	</fieldset>
-
-	<fieldset>
-		<legend>Question Required</legend>
-		<input type="checkbox" bind:value={data.required} placeholder="Question Required" />
-	</fieldset>
-
-	<slot />
+<div class="tabs">
+	<input type="radio" name="tabs" id="tab-01-{data.name}:{data.type}" checked={true} />
+	<label for="tab-01-{data.name}:{data.type}">Tab 1</label>
+	<div class="tab-content">
+		<fieldset>
+			<legend>Question Title</legend>
+			<input type="text" bind:value={data.content} placeholder="Question Title" />
+		</fieldset>
+
+		<fieldset>
+			<legend>Internal Question</legend>
+			<input type="text" bind:value={data.name} placeholder="Internal Question Name" />
+		</fieldset>
+
+		<fieldset>
+			<legend>Question Required</legend>
+			<input type="checkbox" bind:value={data.required} placeholder="Question Required" />
+		</fieldset>
+
+		<!-- 	<slot name="additionalFields" /> -->
+		<slot />
+	</div>
+
+	<input type="radio" name="tabs" id="tab-02-{data.name}:{data.type}" />
+	<label for="tab-02-{data.name}:{data.type}">Tab 2</label>
+	<div class="tab-content">
+		<slot name="preview" />
+	</div>
 </div>
 
 <style>
@@ -54,4 +65,93 @@
 		outline-width: 1px;
 		outline-color: chocolate;
 	}
+	:global(details) {
+		padding: 20px 15px;
+		width: calc(100% - 30px);
+		margin: 10px auto;
+		background-color: #ffffff;
+		border-radius: 10px;
+		border-color: #c5c8c9;
+		border-width: 0;
+		border-style: solid;
+	}
+	:global(details .sort-buttons) {
+		position: absolute;
+		transform: translateX(-140%) translateY(-80%);
+		display: flex;
+		flex-direction: column;
+	}
+
+	:root {
+		--primary-text-color: #222;
+		--secondary-text-color: #fff;
+		--primary-bg-color: #222;
+		--secondary-bg-color: #fff;
+		--tertiary-bg-color: #ddd;
+	}
+
+	body {
+		background-color: var(--tertiary-bg-color);
+		color: var(--primary-text-color);
+		font-family: 'Rubik', serif;
+		font-size: 1.2rem;
+		line-height: 1.6;
+	}
+
+	.tabs {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 2rem auto;
+		max-width: 70ch;
+	}
+
+	.tabs label {
+		background: var(--primary-bg-color);
+		color: var(--secondary-text-color);
+		cursor: pointer;
+		display: block;
+		font-weight: 600;
+		margin-right: 0.3rem;
+		order: initial;
+		padding: 1rem 2rem;
+		transition: background ease 0.3s;
+		width: 100%;
+	}
+
+	.tabs .tab-content {
+		background: var(--secondary-bg-color);
+		display: none;
+		flex-grow: 1;
+		padding: 1rem;
+		width: 100%;
+	}
+
+	.tabs input[type='radio'] {
+		display: none;
+	}
+
+	.tabs input[type='radio']:checked + label {
+		background: var(--secondary-bg-color);
+		color: var(--primary-text-color);
+	}
+
+	.tabs input[type='radio']:checked + label + .tab-content {
+		display: block;
+	}
+
+	@media (min-width: 10em) {
+		.tabs .tab-content {
+			order: 99;
+		}
+
+		.tabs label {
+			order: 1;
+		}
+
+		.tabs label {
+			margin-right: 0.3rem;
+			margin-top: 0;
+			width: auto;
+		}
+	}
 </style>
diff --git a/src/lib/components/questions/boolean/boolean_question_input_editor.svelte b/src/lib/components/questions/boolean/boolean_question_input_editor.svelte
@@ -26,15 +26,6 @@
 </script>
 
 <BaseEditor bind:data>
-	<!-- <SelectQuestionInput
-		name={'style'}
-		content={'Choose a Style'}
-		options={[
-			{ content: 'checkbox', value: 'checkbox' },
-			{ content: 'radio', value: 'radio' }
-		]}
-		bind:value={data.style}
-	/> -->
 	<fieldset>
 		<legend>Choose a Style</legend>
 		<select name={'style'} bind:value={data.style}>
@@ -43,10 +34,9 @@
 			{/each}
 		</select>
 	</fieldset>
-	<details>
-		<summary>Sample</summary>
+	<svelte:fragment slot="preview">
 		<div class="question">
 			<BooleanQuestionInput bind:data />
 		</div>
-	</details>
+	</svelte:fragment>
 </BaseEditor>