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

Text size setting also scales row height and path-bar controls

Browse Source 
--row-h and --path-ctl-h CSS vars per size level; Compact brings the path
input/buttons to 24px, aligned with the panel action buttons.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jokin
2026-07-11 19:12:36 +02:00
co-authored by Claude Fable 5
parent 3e33bac426
commit 70947da129
2 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/app/file-panel/file-panel.html
+4 -4
View File
@@ -133,7 +133,7 @@
<button <button
(click)="panel().up()" (click)="panel().up()"
title="Parent directory (Backspace)" title="Parent directory (Backspace)"
class="grid size-7 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground" class="grid size-(--path-ctl-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
> >
<ng-icon name="mynaArrowUp" size="1rem" /> <ng-icon name="mynaArrowUp" size="1rem" />
</button> </button>
@@ -144,12 +144,12 @@
(keydown.escape)="resetPath()" (keydown.escape)="resetPath()"
(keydown)="$event.stopPropagation()" (keydown)="$event.stopPropagation()"
spellcheck="false" spellcheck="false"
class="h-7 min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 font-mono text-(length:--path-font) outline-none focus:ring-2 focus:ring-ring" class="h-(--path-ctl-h) min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 font-mono text-(length:--path-font) outline-none focus:ring-2 focus:ring-ring"
/> />
<button <button
(click)="panel().refresh()" (click)="panel().refresh()"
title="Refresh" title="Refresh"
class="grid size-7 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground" class="grid size-(--path-ctl-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
> >
@if (panel().loading()) { @if (panel().loading()) {
<ng-icon name="mynaSpinner" size="1rem" class="animate-spin" /> <ng-icon name="mynaSpinner" size="1rem" class="animate-spin" />
@@ -187,7 +187,7 @@
[attr.data-index]="i" [attr.data-index]="i"
(click)="rowClick($event, i)" (click)="rowClick($event, i)"
(dblclick)="openAt(i)" (dblclick)="openAt(i)"
class="grid h-7 grid-cols-[minmax(0,1fr)_5.5rem_8.5rem] items-center text-(length:--list-font)" class="grid h-(--row-h) grid-cols-[minmax(0,1fr)_5.5rem_8.5rem] items-center text-(length:--list-font)"
[class.bg-accent]="i === panel().cursor() && !isSelected(entry)" [class.bg-accent]="i === panel().cursor() && !isSelected(entry)"
[class.bg-primary/15]="isSelected(entry)" [class.bg-primary/15]="isSelected(entry)"
[class.ring-1]="i === panel().cursor() && isActive()" [class.ring-1]="i === panel().cursor() && isActive()"
ui/src/styles.css
+9 -1
View File
@@ -100,21 +100,29 @@
--radius-lg: var(--radius); --radius-lg: var(--radius);
} }
/* Text-size setting for the path bar + file list (data-text set by SettingsService). */ /* Text-size setting for the path bar + file list (data-text set by SettingsService).
Also scales row height and the path-bar controls — compact matches the 24px
panel action buttons. */
:root { :root {
--list-font: 13px; --list-font: 13px;
--list-meta-font: 12px; --list-meta-font: 12px;
--path-font: 12px; --path-font: 12px;
--row-h: 28px;
--path-ctl-h: 28px;
} }
:root[data-text='compact'] { :root[data-text='compact'] {
--list-font: 12px; --list-font: 12px;
--list-meta-font: 11px; --list-meta-font: 11px;
--path-font: 11px; --path-font: 11px;
--row-h: 24px;
--path-ctl-h: 24px;
} }
:root[data-text='large'] { :root[data-text='large'] {
--list-font: 14px; --list-font: 14px;
--list-meta-font: 13px; --list-meta-font: 13px;
--path-font: 13px; --path-font: 13px;
--row-h: 32px;
--path-ctl-h: 32px;
} }
html, html,