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

Rename Text size to Interface; scale panel header with it

Browse Source 
Action buttons, server picker, and its dropdown now follow the size
setting via new --action-h/--action-font/--action-icon variables.
Default tier matches the old fixed sizes; tab bar stays fixed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jgamboa
2026-07-13 14:26:25 +02:00
co-authored by Claude Fable 5
parent 09792c93cf
commit 628ccebd9a
4 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/app/file-panel/file-panel.html
+38 -34
View File
@@ -2,28 +2,32 @@
<div class="relative flex items-center gap-1.5 border-b border-border px-2 py-1">
<button
(click)="toggleMenu()"
class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium hover:bg-accent"
class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-(length:--path-font) font-medium hover:bg-accent"
title="Choose what this panel shows"
>
@if (panel().connecting()) {
<ng-icon name="mynaSpinner" class="shrink-0 animate-spin text-primary" size="0.9rem" />
<ng-icon name="mynaSpinner" class="shrink-0 animate-spin text-primary" size="var(--action-icon)" />
} @else {
<ng-icon
[name]="isRemote() ? 'mynaServers' : 'mynaHardDrive'"
[class]="isRemote() ? 'shrink-0 text-primary' : 'shrink-0 text-muted-foreground'"
size="0.9rem"
size="var(--action-icon)"
/>
}
<span class="truncate">{{ panel().title() }}</span>
<ng-icon name="mynaChevronDown" class="shrink-0 text-muted-foreground" size="0.8rem" />
<ng-icon
name="mynaChevronDown"
class="shrink-0 text-muted-foreground"
size="calc(var(--action-icon) - 0.1rem)"
/>
</button>
@if (isRemote()) {
<button
(click)="disconnect()"
title="Disconnect (back to local)"
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="mynaLogout" size="0.85rem" />
<ng-icon name="mynaLogout" size="var(--action-icon)" />
</button>
}
@@ -34,55 +38,55 @@
<button
(click)="copyToOther()"
[title]="side() === 'left' ? 'Copy to right panel (F5)' : 'Copy to left panel (F5)'"
class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-primary"
class="flex h-(--action-h) 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>
<ng-icon [name]="copyIcon()" size="var(--action-icon)" />
<span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">Copy</span>
</button>
<button
(click)="run('edit')"
title="Edit file (F4)"
class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
class="flex h-(--action-h) 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>
<ng-icon name="mynaFileText" size="var(--action-icon)" />
<span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">Edit</span>
</button>
<button
(click)="run('rename')"
title="Rename (F2)"
class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-foreground"
class="flex h-(--action-h) 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>
<ng-icon name="mynaEdit" size="var(--action-icon)" />
<span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">Rename</span>
</button>
<button
(click)="run('mkdir')"
title="New folder (F7)"
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="mynaFolderPlus" size="0.9rem" />
<ng-icon name="mynaFolderPlus" size="var(--action-icon)" />
</button>
<button
(click)="run('createFile')"
title="New file"
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="mynaFilePlus" size="0.9rem" />
<ng-icon name="mynaFilePlus" size="var(--action-icon)" />
</button>
<button
(click)="run('chmod')"
title="Permissions"
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
class="grid size-(--action-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
>
<ng-icon name="mynaLock" size="0.9rem" />
<ng-icon name="mynaLock" size="var(--action-icon)" />
</button>
<button
(click)="run('delete')"
title="Delete (F8 / Del)"
class="flex h-6 shrink-0 items-center rounded-md px-1 text-muted-foreground hover:bg-accent hover:text-destructive"
class="flex h-(--action-h) 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>
<ng-icon name="mynaTrash" size="var(--action-icon)" />
<span class="ml-1 hidden text-(length:--action-font) @[30rem]:inline">Delete</span>
</button>
@if (menuOpen()) {
@@ -92,9 +96,9 @@
>
<button
(click)="pickLocal()"
class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-(length:--path-font) hover:bg-accent"
>
<ng-icon name="mynaHardDrive" size="0.9rem" class="shrink-0 text-muted-foreground" />
<ng-icon name="mynaHardDrive" size="var(--action-icon)" class="shrink-0 text-muted-foreground" />
<span class="flex-1">Local</span>
@if (!isRemote()) {
<ng-icon name="mynaCheck" size="0.85rem" class="shrink-0 text-primary" />
@@ -107,9 +111,9 @@
@for (connection of connections.grouped().root; track connection.id) {
<button
(click)="pickConnection(connection)"
class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-(length:--path-font) hover:bg-accent"
>
<ng-icon name="mynaServers" size="0.9rem" class="shrink-0 text-muted-foreground" />
<ng-icon name="mynaServers" size="var(--action-icon)" class="shrink-0 text-muted-foreground" />
<span class="flex-1 truncate">{{ connection.name }}</span>
</button>
}
@@ -120,9 +124,9 @@
@for (connection of group.connections; track connection.id) {
<button
(click)="pickConnection(connection)"
class="flex w-full items-center gap-2 py-1.5 pr-3 pl-5 text-left text-xs hover:bg-accent"
class="flex w-full items-center gap-2 py-1.5 pr-3 pl-5 text-left text-(length:--path-font) hover:bg-accent"
>
<ng-icon name="mynaServers" size="0.9rem" class="shrink-0 text-muted-foreground" />
<ng-icon name="mynaServers" size="var(--action-icon)" class="shrink-0 text-muted-foreground" />
<span class="flex-1 truncate">{{ connection.name }}</span>
</button>
}
@@ -138,9 +142,9 @@
(click)="pickSshHost(host)"
[disabled]="host.unsupported"
[title]="sshHostTitle(host)"
class="flex w-full items-center gap-2 py-1.5 pr-3 pl-5 text-left text-xs hover:bg-accent disabled:opacity-60 disabled:hover:bg-transparent"
class="flex w-full items-center gap-2 py-1.5 pr-3 pl-5 text-left text-(length:--path-font) hover:bg-accent disabled:opacity-60 disabled:hover:bg-transparent"
>
<ng-icon name="mynaServers" size="0.9rem" class="shrink-0 text-muted-foreground" />
<ng-icon name="mynaServers" size="var(--action-icon)" class="shrink-0 text-muted-foreground" />
<span class="flex-1 truncate">{{ host.name }}</span>
</button>
}
@@ -149,9 +153,9 @@
<div class="my-1 border-t border-border"></div>
<button
(click)="openManager()"
class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-(length:--path-font) hover:bg-accent"
>
<ng-icon name="mynaCog" size="0.9rem" class="shrink-0 text-muted-foreground" />
<ng-icon name="mynaCog" size="var(--action-icon)" class="shrink-0 text-muted-foreground" />
Manage connections…
</button>
</div>
ui/src/app/tab-bar/tab-bar.ts
+1 -1
View File
@@ -169,7 +169,7 @@ const CONCURRENCY_CHOICES = [2, 3, 4, 6, 8] as const;
</div>
<div class="mt-2.5 flex items-center justify-between gap-2">
<span class="text-xs text-muted-foreground">Text size</span>
<span class="text-xs text-muted-foreground">Interface</span>
<div class="flex rounded-md border border-border p-0.5">
@for (size of textSizes; track size) {
<button