From 76b8b9ab9c1c443bb2b23e0b379926a45571ac0f Mon Sep 17 00:00:00 2001 From: E44 <129310925+programmer-44@users.noreply.github.com> Date: Sat, 22 Nov 2025 23:16:28 +0100 Subject: [PATCH] refactor(control): add HighlightedText --- control/frontend/package-lock.json | 3 +-- control/frontend/src/components/Button.svelte | 2 +- .../src/components/DisplayView.svelte | 21 ++++++++++++++----- .../frontend/src/components/FileView.svelte | 13 +++++++----- .../src/components/HighlightedText.svelte | 12 +++++++++++ control/frontend/src/routes/+page.svelte | 21 +++++++++++-------- 6 files changed, 50 insertions(+), 22 deletions(-) create mode 100644 control/frontend/src/components/HighlightedText.svelte diff --git a/control/frontend/package-lock.json b/control/frontend/package-lock.json index 3c51fed..f4afed5 100644 --- a/control/frontend/package-lock.json +++ b/control/frontend/package-lock.json @@ -5360,8 +5360,7 @@ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz", "integrity": "sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/tapable": { "version": "2.3.0", diff --git a/control/frontend/src/components/Button.svelte b/control/frontend/src/components/Button.svelte index c5e5d5a..2231a63 100644 --- a/control/frontend/src/components/Button.svelte +++ b/control/frontend/src/components/Button.svelte @@ -154,7 +154,7 @@ transition:fade={{ duration: 50 }} class="absolute {position_bottom ? 'top-full' - : 'bottom-full'} {menu_class} z-100 my-1.5 min-w-64 rounded-xl backdrop-blur bg-black/20 border border-stone-400/10 shadow-xl/20 p-2 flex flex-col gap-2 text-stone-200 cursor-auto" + : 'bottom-full'} {menu_class} z-100 my-1.5 min-w-64 rounded-xl backdrop-blur bg-stone-800/45 border border-stone-400/10 shadow-xl/20 p-2 flex flex-col gap-2 text-stone-200 cursor-auto" onclick={(e) => { e.stopPropagation(); }} diff --git a/control/frontend/src/components/DisplayView.svelte b/control/frontend/src/components/DisplayView.svelte index a42c80a..9c0bda4 100644 --- a/control/frontend/src/components/DisplayView.svelte +++ b/control/frontend/src/components/DisplayView.svelte @@ -26,6 +26,7 @@ import { flip } from 'svelte/animate'; import DisplayGroupObject from './DisplayGroupObject.svelte'; import { Pane, Splitpanes } from 'svelte-splitpanes'; + import HighlightedText from './HighlightedText.svelte'; let { handle_display_deletion, handle_display_editing } = $props<{ handle_display_deletion: (display_id: string) => void; @@ -104,7 +105,12 @@
- + {#if $pinned_display_id} @@ -245,9 +251,10 @@ > {#if $displays.length === 1 && $displays[0].data.length === 0}
- Es wurden noch keine Bildschirme hinzugefügt. Klicke oben rechts auf und "Neuen Bildschirm hinzufügen". + Es wurden noch keine Bildschirme hinzugefügt. Klicke oben rechts auf + + und + Neuen Bildschirm hinzufügen.
{:else} {#each $displays as display_group (display_group.id)} @@ -257,7 +264,11 @@ animate:flip={{ duration: dnd_flip_duration_ms, easing: cubicOut }} class="outline-none" > - + {/each} {/if} diff --git a/control/frontend/src/components/FileView.svelte b/control/frontend/src/components/FileView.svelte index 9101d1a..2da45d7 100644 --- a/control/frontend/src/components/FileView.svelte +++ b/control/frontend/src/components/FileView.svelte @@ -23,6 +23,7 @@ import type { PopupContent } from '../ts/types'; import TextInput from './TextInput.svelte'; import { is_valid_name } from '../ts/utils'; + import HighlightedText from './HighlightedText.svelte'; let current_name: string = ''; let current_valid: boolean = false; @@ -169,12 +170,14 @@ {/each} {#if get_current_folder_elements($all_files, $current_file_path, $selected_display_ids).length === 0} - - Es sind keine Dateien auf {$selected_display_ids.length === 1 + + Es existieren keine Dateien auf {$selected_display_ids.length === 1 ? 'dem ausgewähltem Bildchirm' - : 'den ausgewählten Bildschirmen'} vorhanden. Klicke auf um Datei(en) hochzuladen. + : 'den ausgewählten Bildschirmen'} im aktuellen Ordner. Klicke auf um Datei(en) hochzuladen. {/if} {/if} diff --git a/control/frontend/src/components/HighlightedText.svelte b/control/frontend/src/components/HighlightedText.svelte new file mode 100644 index 0000000..ced36d1 --- /dev/null +++ b/control/frontend/src/components/HighlightedText.svelte @@ -0,0 +1,12 @@ + + +
+ {@render children()} +
diff --git a/control/frontend/src/routes/+page.svelte b/control/frontend/src/routes/+page.svelte index c3aa66c..6691466 100644 --- a/control/frontend/src/routes/+page.svelte +++ b/control/frontend/src/routes/+page.svelte @@ -22,6 +22,7 @@ import { onMount } from 'svelte'; import { on_start } from '../ts/main'; import { display_status_to_info } from '../ts/utils'; + import HighlightedText from '../components/HighlightedText.svelte'; const ip_regex = /^(?:(?:10|127)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|192\.168\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|172\.(?:1[6-9]|2\d|3[0-1])\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d))$/; @@ -118,9 +119,10 @@ {#snippet remove_display_popup(display_id: string)}
- Soll der Bildschirm "{get_display_by_id(display_id, $displays)?.name || '?'}" wirklich gelöscht - werden? Dadurch wird es von diesem Controller nicht mehr erreichbar. Die Installation auf dem - Gerät bleibt bestehen. Mit dem erneuten Hinzufügen des Bildschirms wird er wieder steuerbar. + Soll der Bildschirm {get_display_by_id(display_id, $displays)?.name || '?'} wirklich gelöscht werden? Dadurch wird es von diesem Controller nicht mehr erreichbar. Die Installation + auf dem Gerät bleibt bestehen. Mit dem erneuten Hinzufügen des Bildschirms wird er wieder steuerbar.
@@ -216,11 +218,6 @@
{/snippet} -
@@ -258,5 +255,11 @@
- + +