From 47abc28440c53a2f27b2477f2f89c77f21a37f7a Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Wed, 4 Oct 2023 11:51:24 +0200
Subject: [PATCH] :sparkles: Made editor more user-friendly

---
 frontend/src/lib/editor/ABCDEditorPart.svelte |  4 +--
 .../src/lib/editor/AddNewQuestionPopup.svelte | 14 +++++++-
 .../src/lib/editor/OrderEditorPart.svelte     | 20 ++++++++++--
 frontend/src/lib/editor/TextEditorPart.svelte | 11 +++++--
 frontend/src/lib/editor/card.svelte           |  4 +--
 frontend/src/lib/editor/settings-card.svelte  | 32 ++++++++++++-------
 frontend/src/lib/i18n/locales/en.json         |  5 ++-
 frontend/src/routes/dashboard/+page.svelte    | 12 ++++++-
 8 files changed, 80 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/editor/ABCDEditorPart.svelte b/frontend/src/lib/editor/ABCDEditorPart.svelte
index f930f34..0e5cbce 100644
--- a/frontend/src/lib/editor/ABCDEditorPart.svelte
+++ b/frontend/src/lib/editor/ABCDEditorPart.svelte
@@ -97,11 +97,11 @@ SPDX-License-Identifier: MPL-2.0
 				<input
 					bind:value={answer.answer}
 					type="text"
-					class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent"
+					class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-none focus:shadow-2xl transition-all"
 					style="background-color: {answer.color}; color: {get_foreground_color(
 						answer.color
 					)}"
-					placeholder={$t('editor.empty')}
+					placeholder={$t('editor.enter_answer')}
 				/>
 				<button
 					type="button"
diff --git a/frontend/src/lib/editor/AddNewQuestionPopup.svelte b/frontend/src/lib/editor/AddNewQuestionPopup.svelte
index 42eebb5..d5ae962 100644
--- a/frontend/src/lib/editor/AddNewQuestionPopup.svelte
+++ b/frontend/src/lib/editor/AddNewQuestionPopup.svelte
@@ -96,7 +96,7 @@ SPDX-License-Identifier: MPL-2.0
 	on:click={on_parent_click}
 	transition:fade|local={{ duration: 100 }}
 >
-	<div class="m-auto w-2/3 h-5/6 rounded shadow-2xl bg-white dark:bg-gray-600 p-6">
+	<div class="m-auto w-2/3 h-5/6 rounded shadow-2xl bg-white dark:bg-gray-600 p-6 flex flex-col">
 		<h1 class="text-center text-3xl mb-6">{$t('quiztivity.editor.select_page_type')}</h1>
 		<div class="grid grid-cols-4 gap-4 overflow-y-scroll">
 			{#each question_types as qt, i}
@@ -111,5 +111,17 @@ SPDX-License-Identifier: MPL-2.0
 				</div>
 			{/each}
 		</div>
+
+		<div class="mt-auto flex justify-center">
+			<p>
+				{$t('editor.need_more_help')}
+				<a
+					href="/docs/quiz/question-types"
+					target="_blank"
+					class="text-sm font-bold underline text-blue-500 dark:text-blue-400"
+					>{$t('editor.visit_docs')}</a
+				>
+			</p>
+		</div>
 	</div>
 </div>
diff --git a/frontend/src/lib/editor/OrderEditorPart.svelte b/frontend/src/lib/editor/OrderEditorPart.svelte
index 07171a1..4a39875 100644
--- a/frontend/src/lib/editor/OrderEditorPart.svelte
+++ b/frontend/src/lib/editor/OrderEditorPart.svelte
@@ -9,6 +9,7 @@ SPDX-License-Identifier: MPL-2.0
 	import type { EditorData, OrderQuizAnswer } from '$lib/quiz_types';
 	import { fade } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
+	import { get_foreground_color } from '$lib/helpers.ts';
 
 	const { t } = getLocalization();
 
@@ -51,6 +52,19 @@ SPDX-License-Identifier: MPL-2.0
 			id: [i]
 		};
 	}
+	const default_colors = ['#D6EDC9', '#B07156', '#7F7057', '#4E6E58'];
+	const set_colors_if_unset = () => {
+		for (let i = 0; i < data.questions[selected_question].answers.length; i++) {
+			if (!data.questions[selected_question].answers[i].color) {
+				data.questions[selected_question].answers[i].color = default_colors[i];
+			}
+		}
+	};
+	$: {
+		set_colors_if_unset();
+		data;
+		selected_question;
+	}
 </script>
 
 <div class="w-full">
@@ -140,8 +154,10 @@ SPDX-License-Identifier: MPL-2.0
 				<input
 					bind:value={answer.answer}
 					type="text"
-					class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent"
-					style="background-color: {answer.color ?? 'transparent'}"
+					class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-none"
+					style="background-color: {answer.color}; color: {get_foreground_color(
+						answer.color
+					)}"
 					placeholder={$t('editor.empty')}
 				/>
 				<input
diff --git a/frontend/src/lib/editor/TextEditorPart.svelte b/frontend/src/lib/editor/TextEditorPart.svelte
index 8e11c4b..60d9362 100644
--- a/frontend/src/lib/editor/TextEditorPart.svelte
+++ b/frontend/src/lib/editor/TextEditorPart.svelte
@@ -10,6 +10,7 @@ SPDX-License-Identifier: MPL-2.0
 	import { getLocalization } from '$lib/i18n';
 	import { reach } from 'yup';
 	import { TextQuestionSchema } from '$lib/yupSchemas';
+	import { createTippy } from 'svelte-tippy';
 
 	export let selected_question: number;
 	export let data: EditorData;
@@ -27,6 +28,11 @@ SPDX-License-Identifier: MPL-2.0
 		};
 	}
 
+	const tippy = createTippy({
+		arrow: true,
+		animation: 'perspective-subtle'
+	});
+
 	const get_empty_answer = (): TextQuizAnswer => {
 		return {
 			answer: '',
@@ -74,14 +80,15 @@ SPDX-License-Identifier: MPL-2.0
 				<input
 					bind:value={answer.answer}
 					type="text"
-					class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent"
-					placeholder={$t('editor.empty')}
+					class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-none"
+					placeholder={$t('editor.enter_answer')}
 				/>
 				<button
 					type="button"
 					on:click={() => {
 						answer.case_sensitive = !answer.case_sensitive;
 					}}
+					use:tippy={{ content: 'Case sensitive?', placement: 'top' }}
 				>
 					{#if answer.case_sensitive}
 						<svg
diff --git a/frontend/src/lib/editor/card.svelte b/frontend/src/lib/editor/card.svelte
index d0b0e78..fec573f 100644
--- a/frontend/src/lib/editor/card.svelte
+++ b/frontend/src/lib/editor/card.svelte
@@ -186,9 +186,10 @@ SPDX-License-Identifier: MPL-2.0
 							type="number"
 							max="999"
 							min="1"
-							class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1"
+							class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 outline-none focus:shadow-2xl"
 							bind:value={data.questions[selected_question].time}
 						/>
+						<p class="inline-block">s</p>
 					</div>
 				</div>
 				<div class="flex justify-center py-5">
@@ -207,7 +208,6 @@ SPDX-License-Identifier: MPL-2.0
 							/>
 						{/await}
 					{:else if type === QuizQuestionType.RANGE}
-						<p>Range</p>
 						<RangeEditor bind:selected_question bind:data />
 					{:else if type === QuizQuestionType.VOTING}
 						{#await import('$lib/editor/VotingEditorPart.svelte')}
diff --git a/frontend/src/lib/editor/settings-card.svelte b/frontend/src/lib/editor/settings-card.svelte
index 0ebc21b..7d6df6f 100644
--- a/frontend/src/lib/editor/settings-card.svelte
+++ b/frontend/src/lib/editor/settings-card.svelte
@@ -8,6 +8,7 @@ SPDX-License-Identifier: MPL-2.0
 	import type { EditorData } from '$lib/quiz_types';
 	import { getLocalization } from '$lib/i18n';
 	import Spinner from '$lib/Spinner.svelte';
+	import { createTippy } from 'svelte-tippy';
 
 	const { t } = getLocalization();
 
@@ -18,6 +19,10 @@ SPDX-License-Identifier: MPL-2.0
 	export let data: EditorData;
 
 	let custom_bg_color = Boolean(data.background_color);
+	const tippy = createTippy({
+		arrow: true,
+		animation: 'perspective-subtle'
+	});
 
 	$: data.background_color = custom_bg_color ? data.background_color : undefined;
 </script>
@@ -45,10 +50,10 @@ SPDX-License-Identifier: MPL-2.0
 		>
 			<div class="flex justify-center pt-10 w-full">
 				<!--<input
-					type="text"
-					bind:value={data.title}
-					class="p-3 rounded-lg border-gray-500 border text-center w-1/3 text-lg font-semibold dark:bg-gray-500"
-				/>-->
+				type="text"
+				bind:value={data.title}
+				class="p-3 rounded-lg border-gray-500 border text-center w-1/3 text-lg font-semibold dark:bg-gray-500"
+			/>-->
 				{#await import('$lib/inline-editor.svelte')}
 					<Spinner my_20={false} />
 				{:then c}
@@ -58,8 +63,9 @@ SPDX-License-Identifier: MPL-2.0
 			<div class="flex justify-center pt-10 w-full max-h-32">
 				<textarea
 					type="text"
+					placeholder="Description"
 					bind:value={data.description}
-					class="p-3 rounded-lg border-gray-500 border text-center w-1/3 h-20 resize-none dark:bg-gray-500"
+					class="p-3 rounded-lg border-gray-500 border text-center w-1/3 h-20 resize-none dark:bg-gray-500 outline-none focus:shadow-2xl transition-all"
 				/>
 			</div>
 
@@ -134,12 +140,15 @@ SPDX-License-Identifier: MPL-2.0
 				<div class="grid grid-cols-3 w-fit h-fit gap-4">
 					<div
 						class="max-w-full transition-all"
-						class:pointer-events-none={custom_bg_color}
 						class:opacity-50={custom_bg_color}
+						use:tippy={{ content: 'use the standard background', placement: 'left' }}
 					>
-						<div class="bg-gray-200 rounded-lg w-full h-full p-1">
+						<div
+							class="bg-gray-200 rounded-lg w-full h-full p-1"
+							class:pointer-events-none={custom_bg_color}
+						>
 							<span
-								class="inline-block w-full h-full bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] dark:bg-[#0f2702] dark:from-[#0f2702] dark:via-[#0f2702] dark:to[#0f2702]"
+								class="inline-block w-full h-full bg-[#d6edc9] dark:bg-[#4e6e58]"
 							/>
 						</div>
 					</div>
@@ -160,11 +169,12 @@ SPDX-License-Identifier: MPL-2.0
 						</label>
 					</div>
 					<div
-						class:pointer-events-none={!custom_bg_color}
 						class:opacity-50={!custom_bg_color}
 						class="transition-all"
+						use:tippy={{ content: 'Use your own background color', placement: 'right' }}
 					>
 						<input
+							class:pointer-events-none={!custom_bg_color}
 							type="color"
 							class="rounded-lg p-1 min-h-full hover:cursor-pointer border-black border"
 							bind:value={data.background_color}
@@ -182,8 +192,8 @@ SPDX-License-Identifier: MPL-2.0
 							data.background_image = undefined;
 						}}
 						class="mt-10 bg-red-500 p-2 rounded-lg border-2 border-black transition hover:bg-red-400"
-						>Remove Background-Image</button
-					>
+						>Remove Background-Image
+					</button>
 				{:else}
 					{#await import('$lib/editor/uploader.svelte')}
 						<div class="pt-10">
diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
index 22520aa..1325951 100644
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -217,7 +217,10 @@
         "check_choice_description": "All correct answers have to be chosen to score points",
         "order_description": "Answers can be brought into the correct order",
         "text_description": "Players can enter text",
-        "range_description": "A number-range can be selected with a slider"
+        "range_description": "A number-range can be selected with a slider",
+        "need_more_help": "Need more help?",
+        "visit_docs": "Visit the docs.",
+        "enter_answer": "Enter an answer"
     },
     "import_page": {
         "need_help": "Need help?",
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index ab5bd33..3c2501c 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -18,6 +18,7 @@ SPDX-License-Identifier: MPL-2.0
 	import StartGamePopup from '$lib/dashboard/start_game.svelte';
 	import Analytics from './Analytics.svelte';
 	import MediaComponent from '$lib/editor/MediaComponent.svelte';
+	import { createTippy } from 'svelte-tippy';
 
 	// import GrayButton from "$lib/components/buttons/gray.svelte";
 
@@ -31,6 +32,11 @@ SPDX-License-Identifier: MPL-2.0
 	let items_to_show = [];
 	let all_items: Array<any>;
 	let fuse;
+	const tippy = createTippy({
+		arrow: true,
+		animation: 'perspective-subtle',
+		placement: 'bottom'
+	});
 
 	let id_to_position_map = {};
 
@@ -117,7 +123,11 @@ SPDX-License-Identifier: MPL-2.0
                 </button>-->
 			<div class="w-full grid lg:grid-cols-4 gap-2 grid-cols-2 px-4">
 				{#if create_button_clicked}
-					<div class="flex gap-2" transition:fly={{ y: 10 }}>
+					<div
+						class="flex gap-2"
+						transition:fly={{ y: 10 }}
+						use:tippy={{ content: 'Unsure? Choose "Quiz".' }}
+					>
 						<BrownButton href="/create">{$t('words.quiz')}</BrownButton>
 						<BrownButton href="/quiztivity/create">{$t('words.quiztivity')}</BrownButton
 						>