PLG_Development/PLG-MuDiCS
3
0
Fork 0
mirror of https://codeberg.org/PLG-Development/PLG-MuDiCS synced 2026-07-06 00:47:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

test(frontend): more tests

Browse Source
This commit is contained in:
2mal3
2025-12-29 18:21:30 +01:00
parent 7dbc746242
commit 3fc67dadd9
6 changed files with 86 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/components/DisplayObject.svelte
+1
View File
@@ -45,6 +45,7 @@
</script>
<div
data-testid="display"
role="button"
tabindex="0"
onkeydown={(e) => {
control/frontend/src/components/InodeElement.svelte
+1 -1
View File
@@ -92,7 +92,7 @@
}
</script>
<div class="flex flex-row h-{$current_height.file} w-full">
<div data-testid="inode" class="flex flex-row h-{$current_height.file} w-full">
{#if !not_interactable}
<div class="h-{$current_height.file} aspect-square max-w-15 flex">
<Button
control/frontend/src/components/Notification.svelte
+48 -39
View File
@@ -1,48 +1,57 @@
<script lang="ts">
import { fade } from "svelte/transition";
import Button from "./Button.svelte";
import { X } from "lucide-svelte";
import { notifications } from "../ts/stores/notification";
import { get_shifted_color } from "../ts/stores/ui_behavior";
import { fade } from 'svelte/transition';
import Button from './Button.svelte';
import { X } from 'lucide-svelte';
import { notifications } from '../ts/stores/notification';
import { get_shifted_color } from '../ts/stores/ui_behavior';
</script>
<div class="fixed flex flex-col gap-2 {true ? "top-[41%]": "top-2"} right-2 left-2 md:top-auto md:left-auto md:bottom-2 md:w-100 z-50">
{#each $notifications as n (n.id)}
<div
transition:fade={{ duration: 200 }}
class="p-2 pl-4 pb-3 rounded-lg shadow-xl/30 text-white flex flex-col gap-2 overflow-hidden relative border-1 border-black/20 {n.className}"
class:bg-red-900={n.type === "error"}
class:bg-green-900={n.type === "success"}
class:bg-sky-900={n.type === "info"}
style="--dur: {n.duration}ms"
>
<div class="flex flex-row justify-between">
<span class="text-xl font-bold flex items-center">{n.title}</span>
<Button click_function={() => notifications.remove(n.id)} className="p-2" bg="bg-stone-900/50" hover_bg="bg-stone-600/70" active_bg="bg-stone-500/80"><X/></Button>
</div>
<div
data-testid="notification"
class="fixed flex flex-col gap-2 {true
? 'top-[41%]'
: 'top-2'} right-2 left-2 md:top-auto md:left-auto md:bottom-2 md:w-100 z-50"
>
{#each $notifications as n (n.id)}
<div
transition:fade={{ duration: 200 }}
class="p-2 pl-4 pb-3 rounded-lg shadow-xl/30 text-white flex flex-col gap-2 overflow-hidden relative border-1 border-black/20 {n.className}"
class:bg-red-900={n.type === 'error'}
class:bg-green-900={n.type === 'success'}
class:bg-sky-900={n.type === 'info'}
style="--dur: {n.duration}ms"
>
<div class="flex flex-row justify-between">
<span class="text-xl font-bold flex items-center">{n.title}</span>
<Button
click_function={() => notifications.remove(n.id)}
className="p-2"
bg="bg-stone-900/50"
hover_bg="bg-stone-600/70"
active_bg="bg-stone-500/80"><X /></Button
>
</div>
<span class="whitespace-break-spaces">{n.message}</span>
<span class="whitespace-break-spaces">{n.message}</span>
<div class="absolute inset-x-0 bottom-0 h-1 bg-white/25">
<div
class="block h-full w-full bg-white/80 origin-left animate-progress-bar"
></div>
</div>
</div>
{/each}
<div class="absolute inset-x-0 bottom-0 h-1 bg-white/25">
<div class="block h-full w-full bg-white/80 origin-left animate-progress-bar"></div>
</div>
</div>
{/each}
</div>
<style>
@keyframes progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.animate-progress-bar {
animation: progress var(--dur) linear forwards;
transform-origin: left;
}
@keyframes progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.animate-progress-bar {
animation: progress var(--dur) linear forwards;
transform-origin: left;
}
</style>
control/frontend/src/components/TipTapInput.svelte
+1 -1
View File
@@ -152,7 +152,7 @@
{#each Object.values(color_states) as color_state}
<input type="color" bind:this={color_state.el} bind:value={color_state.value} class="hidden" />
{/each}
<div data-testid="text-popup" class="flex flex-row gap-2 size-full">
<div
class="rounded-xl size-full flex-shrink min-w-0 flex"