jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Toolbar buttons show text labels when the panel is wide

Browse Source 
Container query on the panel (Tailwind v4 @container): Copy, Edit, Rename and
Delete grow labels at >=30rem panel width; New folder, New file and
Permissions stay icon-only (self-explanatory icons). Tooltips unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jokin
2026-07-11 20:30:24 +02:00
co-authored by Claude Fable 5
parent e4f7ca86f7
commit 06dbe14d76
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/app/file-panel/file-panel.html
+10 -5
View File
@@ -29,27 +29,31 @@
<div class="flex-1"></div>
<!-- panel actions: act on THIS panel -->
<!-- panel actions: act on THIS panel. Frequent/destructive verbs grow text
labels when the panel is wide enough (container query). -->
<button
(click)="copyToOther()"
[title]="side() === 'left' ? 'Copy to right panel (F5)' : 'Copy to left panel (F5)'"
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-primary"
class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-primary"
>
<ng-icon [name]="copyIcon()" size="0.95rem" />
<span class="ml-1 hidden text-[11px] @[30rem]:inline">Copy</span>
</button>
<button
(click)="run('edit')"
title="Edit file (F4)"
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="mynaFileText" size="0.9rem" />
<span class="ml-1 hidden text-[11px] @[30rem]:inline">Edit</span>
</button>
<button
(click)="run('rename')"
title="Rename (F2)"
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="mynaEdit" size="0.9rem" />
<span class="ml-1 hidden text-[11px] @[30rem]:inline">Rename</span>
</button>
<button
(click)="run('mkdir')"
@@ -75,9 +79,10 @@
<button
(click)="run('delete')"
title="Delete (F8 / Del)"
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-destructive"
class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-destructive"
>
<ng-icon name="mynaTrash" size="0.9rem" />
<span class="ml-1 hidden text-[11px] @[30rem]:inline">Delete</span>
</button>
@if (menuOpen()) {