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

improve ux design with disabled buttons and info texts while no display is selected

Browse Source
This commit is contained in:
E44
2025-11-08 22:15:33 +01:00
parent ea74609349
commit e7588ce2d2
2 changed files with 61 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/components/ControlView.svelte
+20 -8
View File
@@ -17,6 +17,7 @@
import KeyInput from './KeyInput.svelte';
import { send_keyboard_input, show_blackscreen } from '../ts/api_handler';
import { run_on_all_selected_displays } from '../ts/stores/displays';
import { selected_display_ids } from '../ts/stores/select';
let popup_content: PopupContent = $state({
open: false,
@@ -60,6 +61,7 @@
<Button
title="Vorherige Folie (Pfeil nach Links)"
className="px-9"
disabled={$selected_display_ids.length === 0}
click_function={() => {
run_on_all_selected_displays(
() => {
@@ -73,6 +75,7 @@
<Button
title="Nächste Folie (Pfeil nach Rechts)"
className="px-9"
disabled={$selected_display_ids.length === 0}
click_function={() => {
run_on_all_selected_displays(
() => {
@@ -84,36 +87,45 @@
}}><ArrowBigRight /></Button
>
</div>
<Button className="px-3 flex gap-3 w-75 justify-normal"
><TextAlignStart /> Text anzeigen</Button
<Button
className="px-3 flex gap-3 w-75 justify-normal"
disabled={$selected_display_ids.length === 0}><TextAlignStart /> Text anzeigen</Button
>
<Button
className="px-3 flex gap-3 w-75 justify-normal"
disabled={$selected_display_ids.length === 0}
click_function={() => {
run_on_all_selected_displays(show_blackscreen, true);
}}><Presentation />Blackout</Button
>
<div class="flex flex-row justify-normal">
<Button className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal"
<Button
className="rounded-r-none pl-3 flex gap-3 grow w-65 justify-normal"
disabled={$selected_display_ids.length === 0}
><TrafficCone /> Fallback-Bild anzeigen</Button
>
<Button className="rounded-l-none flex grow-0 w-10"><ChevronDown /></Button>
</div>
<Button
className="px-3 flex gap-3 w-75 justify-normal"
disabled={$selected_display_ids.length === 0}
click_function={show_send_keys_popup}><Keyboard /> Tastatur-Eingaben durchgeben</Button
>
</div>
<div class="flex flex-col gap-2 justify-between">
<div class="flex flex-col gap-2">
<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
><Power /> PC hochfahren</Button
<Button
className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
disabled={$selected_display_ids.length === 0}><Power /> PC hochfahren</Button
>
<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
><PowerOff /> PC herunterfahren</Button
<Button
className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
disabled={$selected_display_ids.length === 0}><PowerOff /> PC herunterfahren</Button
>
</div>
<Button className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
<Button
className="px-3 flex gap-3 w-full xl:w-75 justify-normal"
disabled={$selected_display_ids.length === 0}
><SquareTerminal /> Shell-Befehl ausführen</Button
>
</div>
control/frontend/src/components/FileView.svelte
+41 -15
View File
@@ -1,14 +1,25 @@
<script lang="ts">
import { ClipboardPaste, Download, FolderPlus, Info, Minus, Pen, Plus, RefreshCcw, Scissors, Trash2, Upload } from "lucide-svelte";
import { change_height, current_height, next_height_step_size } from "../ts/stores/ui_behavior";
import Button from "./Button.svelte";
import PathBar from "./PathBar.svelte";
import { selected_display_ids, selected_file_ids } from "../ts/stores/select";
import { all_files, current_file_path, get_current_folder_elements } from "../ts/stores/files";
import { slide } from "svelte/transition";
import FolderElementObject from "./FolderElementObject.svelte";
import PopUp from "./PopUp.svelte";
import {
ClipboardPaste,
Download,
FolderPlus,
Info,
Minus,
Pen,
Plus,
RefreshCcw,
Scissors,
Trash2,
Upload
} from 'lucide-svelte';
import { change_height, current_height, next_height_step_size } from '../ts/stores/ui_behavior';
import Button from './Button.svelte';
import PathBar from './PathBar.svelte';
import { selected_display_ids, selected_file_ids } from '../ts/stores/select';
import { all_files, current_file_path, get_current_folder_elements } from '../ts/stores/files';
import { slide } from 'svelte/transition';
import FolderElementObject from './FolderElementObject.svelte';
import PopUp from './PopUp.svelte';
</script>
<div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_1fr] min-h-0">
@@ -92,11 +103,26 @@
</div>
<div class="min-h-0 h-full overflow-y-auto bg-stone-750 rounded-xl">
<div class="flex flex-col gap-2 p-2 min-h-0">
{#each get_current_folder_elements($all_files, $current_file_path, $selected_display_ids) as folder_element (folder_element.id)}
<section in:slide={{ duration: 100 }} class="outline-none">
<FolderElementObject file={folder_element} />
</section>
{/each}
{#if $selected_display_ids.length === 0}
<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
Es wurden keine Bildschirme ausgewählt.
</span>
{:else}
{#each get_current_folder_elements($all_files, $current_file_path, $selected_display_ids) as folder_element (folder_element.id)}
<section in:slide={{ duration: 100 }} class="outline-none">
<FolderElementObject file={folder_element} />
</section>
{/each}
{#if get_current_folder_elements($all_files, $current_file_path, $selected_display_ids).length === 0}
<span class="text-stone-450 px-10 py-6 leading-relaxed text-center">
Es sind keine Dateien auf {$selected_display_ids.length === 1
? 'dem ausgewähltem Bildchirm'
: 'den ausgewählten Bildschirmen'} vorhanden. Klicke auf <Upload
class="inline pb-1"
/> um Datei(en) hochzuladen.
</span>
{/if}
{/if}
</div>
</div>
<!-- <PopUp title="Test" title_icon={Info}>