jgamboaandClaude
fa2cec7136
TDesign draws its glyphs on a 24px grid with a 2px stroke and sizes a component's icon 2px above its text, in whole pixels. The templates had drifted to 12 one-off sizes, most of them fractional (0.9rem = 14.4px), so strokes blurred and neighbours never matched: the tab bar's 14.4px cog beside a 12.8px +, the shortcut rows' 12px + beside an 11.2px reset and 9.6px chip x. Every <ng-icon> now takes one of --icon-size-sm (14px: beside 11-12px text, small icon buttons), -md (16px: file rows, window titles, path-bar buttons), -lg (20px) or -xl (24px: lone spinners and status marks). --action-icon goes; architecture.md and gotchas.md carry the rule. Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
1.9 KiB
HTML
60 lines
1.9 KiB
HTML
<div class="flex h-screen flex-col bg-background text-foreground">
|
|
@if (!rpc.available) {
|
|
<div class="flex flex-1 items-center justify-center">
|
|
<div class="max-w-sm border border-border bg-card p-6 text-center shadow-sm">
|
|
<ng-icon name="tdesignCloseCircle" size="var(--icon-size-xl)" class="text-destructive" />
|
|
<p class="mt-2 text-sm font-medium">{{ i18n.t('app.notConnectedTitle') }}</p>
|
|
<p class="mt-1 text-xs text-muted-foreground">
|
|
{{ i18n.t('app.notConnectedBody') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<app-tab-bar />
|
|
|
|
<main class="flex min-h-0 flex-1 divide-x divide-border">
|
|
<app-file-panel side="left" />
|
|
<app-file-panel side="right" />
|
|
</main>
|
|
|
|
<app-transfer-bar />
|
|
<app-status-bar />
|
|
}
|
|
|
|
<!-- modal block: the connection-manager window owns the app until closed -->
|
|
@if (managerOpen()) {
|
|
<div
|
|
class="fixed inset-0 z-60 flex items-center justify-center bg-black/40"
|
|
(mousedown)="focusManager()"
|
|
>
|
|
<div class="border border-border bg-card px-5 py-4 text-center shadow-xl">
|
|
<ng-icon name="tdesignServer" size="var(--icon-size-lg)" class="text-muted-foreground" />
|
|
<p class="mt-1.5 text-xs text-muted-foreground">{{ i18n.t('app.managerOpen') }}</p>
|
|
<button
|
|
(click)="focusManager()"
|
|
class="mt-3 bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
|
|
>
|
|
{{ i18n.t('app.showConnections') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- dialogs -->
|
|
@if (dialogs.prompt(); as req) {
|
|
<app-prompt-dialog [request]="req" />
|
|
}
|
|
@if (dialogs.confirm(); as req) {
|
|
<app-confirm-dialog [request]="req" />
|
|
}
|
|
@if (dialogs.chmod(); as req) {
|
|
<app-chmod-dialog [request]="req" />
|
|
}
|
|
@if (dialogs.overwrite(); as req) {
|
|
<app-overwrite-dialog [request]="req" />
|
|
}
|
|
|
|
<app-context-menu />
|
|
<app-toasts />
|
|
</div>
|