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

🐛 Closes #269

Browse Source
This commit is contained in:
Mawoka
2023-08-04 09:30:27 +02:00
parent 69711bcf00
commit 8c6418c39e
1 changed files with 66 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/editor/slides/edit_menu.svelte
+66 -62
View File
@@ -4,7 +4,7 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0 SPDX-License-Identifier: MPL-2.0
--> -->
<script lang="ts"> <script lang='ts'>
import type { Konva, ShapeModel } from 'pikaso'; import type { Konva, ShapeModel } from 'pikaso';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
@@ -23,8 +23,12 @@ SPDX-License-Identifier: MPL-2.0
case 'label': case 'label':
available_modifiers.push('font_size', 'text_color'); available_modifiers.push('font_size', 'text_color');
break; break;
case 'circle' || 'rectangle': case 'circle':
available_modifiers.push('fill_color'); available_modifiers.push('fill_color');
break;
case 'rect':
available_modifiers.push("fill_color");
break;
} }
}; };
@@ -63,11 +67,11 @@ SPDX-License-Identifier: MPL-2.0
} }
</script> </script>
<div class="flex flex-row justify-evenly z-40"> <div class='flex flex-row justify-evenly z-40'>
<div> <div>
<button <button
type="button" type='button'
class="disabled:opacity-50 transition" class='disabled:opacity-50 transition'
disabled={!( disabled={!(
available_modifiers.includes('fill_color') || available_modifiers.includes('fill_color') ||
available_modifiers.includes('text_color') available_modifiers.includes('text_color')
@@ -78,35 +82,35 @@ SPDX-License-Identifier: MPL-2.0
> >
<!-- iconoir/color-picker --> <!-- iconoir/color-picker -->
<svg <svg
class="w-6 h-6" class='w-6 h-6'
stroke-width="2" stroke-width='2'
viewBox="0 0 24 24" viewBox='0 0 24 24'
fill="none" fill='none'
xmlns="http://www.w3.org/2000/svg" xmlns='http://www.w3.org/2000/svg'
color="currentColor" color='currentColor'
> >
<path <path
d="M7 13.161l5.464-5.464a1 1 0 011.415 0l2.12 2.12a1 1 0 010 1.415l-1.928 1.929m-7.071 0l-2.172 2.172a.999.999 0 00-.218.327l-1.028 2.496c-.508 1.233.725 2.466 1.958 1.959l2.497-1.028c.122-.05.233-.125.326-.218l5.708-5.708m-7.071 0h7.071M13.878 3.454l2.121 2.121m4.243 4.243l-2.121-2.121m-2.122-2.122l1.414-1.414a1 1 0 011.415 0l.707.707a1 1 0 010 1.414L18.12 7.697m-2.122-2.122l2.122 2.122" d='M7 13.161l5.464-5.464a1 1 0 011.415 0l2.12 2.12a1 1 0 010 1.415l-1.928 1.929m-7.071 0l-2.172 2.172a.999.999 0 00-.218.327l-1.028 2.496c-.508 1.233.725 2.466 1.958 1.959l2.497-1.028c.122-.05.233-.125.326-.218l5.708-5.708m-7.071 0h7.071M13.878 3.454l2.121 2.121m4.243 4.243l-2.121-2.121m-2.122-2.122l1.414-1.414a1 1 0 011.415 0l.707.707a1 1 0 010 1.414L18.12 7.697m-2.122-2.122l2.122 2.122'
stroke="currentColor" stroke='currentColor'
stroke-width="2" stroke-width='2'
stroke-linecap="round" stroke-linecap='round'
stroke-linejoin="round" stroke-linejoin='round'
/> />
</svg> </svg>
</button> </button>
{#if opened_dropdown === 'color'} {#if opened_dropdown === 'color'}
<div <div
class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40" class='bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40'
transition:fade={{ duration: 100 }} transition:fade={{ duration: 100 }}
> >
<input type="color" on:change={change_color} /> <input type='color' on:change={change_color} />
</div> </div>
{/if} {/if}
</div> </div>
<div> <div>
<button <button
type="button" type='button'
class="disabled:opacity-50 transition" class='disabled:opacity-50 transition'
on:click={() => { on:click={() => {
toggle_switch('font_size'); toggle_switch('font_size');
}} }}
@@ -114,41 +118,41 @@ SPDX-License-Identifier: MPL-2.0
> >
<!-- iconoir/font-size --> <!-- iconoir/font-size -->
<svg <svg
class="w-6 h-6" class='w-6 h-6'
stroke-width="2" stroke-width='2'
viewBox="0 0 24 24" viewBox='0 0 24 24'
fill="none" fill='none'
xmlns="http://www.w3.org/2000/svg" xmlns='http://www.w3.org/2000/svg'
color="currentColor" color='currentColor'
> >
<path <path
d="M18 21V11m0 10l-2-2.5m2 2.5l2-2.5M18 11l-2 2m2-2l2 2M9 5v12m0 0H7m2 0h2M15 7V5H3v2" d='M18 21V11m0 10l-2-2.5m2 2.5l2-2.5M18 11l-2 2m2-2l2 2M9 5v12m0 0H7m2 0h2M15 7V5H3v2'
stroke="currentColor" stroke='currentColor'
stroke-width="2" stroke-width='2'
stroke-linecap="round" stroke-linecap='round'
stroke-linejoin="round" stroke-linejoin='round'
/> />
</svg> </svg>
</button> </button>
{#if opened_dropdown === 'font_size'} {#if opened_dropdown === 'font_size'}
<div <div
class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40" class='bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40'
transition:fade={{ duration: 100 }} transition:fade={{ duration: 100 }}
> >
<input <input
type="range" type='range'
on:change={change_fontsize} on:change={change_fontsize}
value={selected_el?.node?.children?.[1]?.attrs?.fontSize} value={selected_el?.node?.children?.[1]?.attrs?.fontSize}
min="10" min='10'
max="250" max='250'
/> />
</div> </div>
{/if} {/if}
</div> </div>
<div class="flex flex-row gap-2"> <div class='flex flex-row gap-2'>
<button <button
type="button" type='button'
class="disabled:opacity-50 transition" class='disabled:opacity-50 transition'
on:click={() => { on:click={() => {
selected_el.update({ zIndex: selected_el.node.getZIndex() + 1 }); selected_el.update({ zIndex: selected_el.node.getZIndex() + 1 });
}} }}
@@ -156,25 +160,25 @@ SPDX-License-Identifier: MPL-2.0
> >
<!-- iconoir/priority-up --> <!-- iconoir/priority-up -->
<svg <svg
class="w-6 h-6" class='w-6 h-6'
stroke-width="2" stroke-width='2'
viewBox="0 0 24 24" viewBox='0 0 24 24'
fill="none" fill='none'
xmlns="http://www.w3.org/2000/svg" xmlns='http://www.w3.org/2000/svg'
color="currentColor" color='currentColor'
> >
<path <path
d="M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 7l4 4m-4-4l-4 4.167M12 7v9" d='M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 7l4 4m-4-4l-4 4.167M12 7v9'
stroke="currentColor" stroke='currentColor'
stroke-width="2" stroke-width='2'
stroke-linecap="round" stroke-linecap='round'
stroke-linejoin="round" stroke-linejoin='round'
/> />
</svg> </svg>
</button> </button>
<button <button
type="button" type='button'
class="disabled:opacity-50 transition" class='disabled:opacity-50 transition'
on:click={() => { on:click={() => {
selected_el.update({ zIndex: selected_el.node.getZIndex() - 1 }); selected_el.update({ zIndex: selected_el.node.getZIndex() - 1 });
}} }}
@@ -182,19 +186,19 @@ SPDX-License-Identifier: MPL-2.0
> >
<!-- iconoir/priority-down --> <!-- iconoir/priority-down -->
<svg <svg
class="w-6 h-6" class='w-6 h-6'
stroke-width="2" stroke-width='2'
viewBox="0 0 24 24" viewBox='0 0 24 24'
fill="none" fill='none'
xmlns="http://www.w3.org/2000/svg" xmlns='http://www.w3.org/2000/svg'
color="currentColor" color='currentColor'
> >
<path <path
d="M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 16l4-4m-4 4l-4-4.167M12 16V7" d='M11.576 1.424a.6.6 0 01.848 0l10.152 10.152a.6.6 0 010 .848L12.424 22.576a.6.6 0 01-.848 0L1.424 12.424a.6.6 0 010-.848L11.576 1.424zM12 16l4-4m-4 4l-4-4.167M12 16V7'
stroke="currentColor" stroke='currentColor'
stroke-width="2" stroke-width='2'
stroke-linecap="round" stroke-linecap='round'
stroke-linejoin="round" stroke-linejoin='round'
/> />
</svg> </svg>
</button> </button>