LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Added remove-buttons in editor instead of right-click

Browse Source
This commit is contained in:
Mawoka
2022-12-28 18:11:11 +01:00
parent 6f08613382
commit 7f949b585e
3 changed files with 81 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/editor/ABCDEditorPart.svelte
+24 -5
View File
@@ -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..."
frontend/src/lib/editor/card.svelte
+31 -13
View File
@@ -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>
frontend/src/lib/editor/sidebar.svelte
+26 -7
View File
@@ -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"