From 7f949b585e275c0a9c025bb9861d7a0357c9fee3 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Wed, 28 Dec 2022 18:11:11 +0100
Subject: [PATCH] :sparkles: Added remove-buttons in editor instead of
 right-click

---
 frontend/src/lib/editor/ABCDEditorPart.svelte | 29 +++++++++---
 frontend/src/lib/editor/card.svelte           | 44 +++++++++++++------
 frontend/src/lib/editor/sidebar.svelte        | 33 +++++++++++---
 3 files changed, 81 insertions(+), 25 deletions(-)

diff --git a/frontend/src/lib/editor/ABCDEditorPart.svelte b/frontend/src/lib/editor/ABCDEditorPart.svelte
index f633924..a8ced58 100644
--- a/frontend/src/lib/editor/ABCDEditorPart.svelte
+++ b/frontend/src/lib/editor/ABCDEditorPart.svelte
@@ -44,21 +44,40 @@
 		{#each data.questions[selected_question].answers as answer, index}
 			<div
 				out:fade={{ duration: 150 }}
-				class="p-4 rounded-lg flex justify-center w-full transition"
+				class="p-4 rounded-lg flex justify-center w-full transition relative"
 				class:bg-red-500={!answer.right}
 				class:bg-green-500={answer.right}
 				class:bg-yellow-500={!reach(ABCDQuestionSchema, 'answer').isValidSync(
 					answer.answer
 				)}
 			>
-				<input
-					bind:value={answer.answer}
-					type="text"
-					on:contextmenu|preventDefault={() => {
+				<button
+					class="rounded-full absolute -top-2 -right-2 opacity-70 hover:opacity-100 transition"
+					type="button"
+					on:click={() => {
 						data.questions[selected_question].answers.splice(index, 1);
 						data.questions[selected_question].answers =
 							data.questions[selected_question].answers;
 					}}
+				>
+					<svg
+						class="w-6 h-6 bg-red-500 rounded-full"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				</button>
+				<input
+					bind:value={answer.answer}
+					type="text"
 					class="border-b-2 border-dotted w-5/6 text-center rounded-lg"
 					style="background-color: {answer.color ?? 'transparent'}"
 					placeholder="Empty..."
diff --git a/frontend/src/lib/editor/card.svelte b/frontend/src/lib/editor/card.svelte
index 856e0e2..355b000 100644
--- a/frontend/src/lib/editor/card.svelte
+++ b/frontend/src/lib/editor/card.svelte
@@ -93,15 +93,36 @@
 					{/await}
 				</div>
 				{#if data.questions[selected_question].image != undefined && data.questions[selected_question].image !== ''}
-					<div class="flex justify-center pt-10 w-full max-h-72 w-full">
-						<img
-							src={data.questions[selected_question].image}
-							alt="not available"
-							class="max-h-72 h-auto w-auto"
-							on:contextmenu|preventDefault={() => {
-								data.questions[selected_question].image = '';
-							}}
-						/>
+					<div class="flex justify-center pt-10 w-full max-h-72">
+						<div class="max-h-72 h-auto relative">
+							<button
+								class="rounded-full absolute -top-2 -right-2 opacity-70 hover:opacity-100 transition"
+								type="button"
+								on:click={() => {
+									data.questions[selected_question].image = '';
+								}}
+							>
+								<svg
+									class="w-6 h-6 bg-red-500 rounded-full"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+							</button>
+							<img
+								src={data.questions[selected_question].image}
+								alt="not available"
+								class="max-h-64 h-auto w-auto"
+							/>
+						</div>
 					</div>
 				{:else if pow_data === undefined}
 					<a
@@ -163,7 +184,7 @@
 						<option value={QuizQuestionType.VOTING}>{$t('words.voting')}</option>
 					</select>
 				</div>
-				<div class="flex justify-center pt-10 w-full">
+				<div class="flex justify-center py-10 w-full">
 					{#if data.questions[selected_question].type === QuizQuestionType.ABCD}
 						{#await import('$lib/editor/ABCDEditorPart.svelte')}
 							<Spinner my_20={false} />
@@ -180,9 +201,6 @@
 						{/await}
 					{/if}
 				</div>
-				<p class="italic text-center mt-auto pt-4">
-					{$t('editor_page.right_click_to_delete')}
-				</p>
 			</div>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/editor/sidebar.svelte b/frontend/src/lib/editor/sidebar.svelte
index c23f9cd..8500553 100644
--- a/frontend/src/lib/editor/sidebar.svelte
+++ b/frontend/src/lib/editor/sidebar.svelte
@@ -147,18 +147,37 @@
 			class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition"
 			class:bg-green-300={index === selected_question}
 			class:dark:bg-green-500={index === selected_question}
-			on:contextmenu|preventDefault={() => {
-				if (confirm('Do you really want to delete this Question?')) {
-					selected_question = selected_question - 1;
-					data.questions.splice(index, 1);
-					data.questions = data.questions;
-				}
-			}}
 			on:click={() => {
 				setSelectedQuestion(index);
 			}}
 			bind:this={arr_of_cards[index]}
 		>
+			<button
+				class="rounded-full absolute -top-3 -right-3 opacity-70 hover:opacity-100 transition"
+				type="button"
+				on:click={() => {
+					if (confirm('Do you really want to delete this Question?')) {
+						selected_question = selected_question - 1;
+						data.questions.splice(index, 1);
+						data.questions = data.questions;
+					}
+				}}
+			>
+				<svg
+					class="w-6 h-6 bg-red-500 rounded-full"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+			</button>
 			<div
 				use:tippy={{ content: question.question === '' ? 'No title' : question.question }}
 				class="m-1 border border-gray-500 rounded-lg p-0.5"