jgamboaandClaude
e4ba846719
The dark palette was shadcn's cool zinc (#202023, hue ~286). Anchor it on #1a1a19 instead — cds gray-830, a warm near-neutral (hue 107) — and retone the whole dark neutral family to match, since a warm background under cool panels clashes. Lightness ramp is preserved; chromatic tokens (destructive, success, icon hues, accent formulas) and the light palette are untouched. Also introduce --chrome so the app isn't one flat tone: frame strips (tab bar, status bar, transfer bar, editor/manager header+footer, connection sidebar) now sit one step below the content panes, with popovers and hover above them — the standard dark-UI elevation order. Dark ramp: #151514 chrome, #1a1a19 content, #20201f card, #2e2e2d hover; the "darker" tone drops chrome to true black. Light gains only a zinc-50 chrome step. Co-Authored-By: Claude <noreply@anthropic.com>
51 lines
2.2 KiB
HTML
51 lines
2.2 KiB
HTML
@if (transfers.expanded() && transfers.hasJobs()) {
|
|
<div class="flex items-center justify-between border-t border-border bg-chrome px-3 py-1 text-[11px] text-muted-foreground">
|
|
<span>
|
|
{{ i18n.t('transfer.summary', { active: transfers.activeJobs().length, finished: transfers.finishedJobs().length }) }}
|
|
</span>
|
|
<button
|
|
(click)="transfers.clearFinished()"
|
|
[disabled]="!transfers.finishedJobs().length"
|
|
class="flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
|
|
>
|
|
<ng-icon name="mynaTrash" size="0.75rem" /> {{ i18n.t('transfer.clearFinished') }}
|
|
</button>
|
|
</div>
|
|
<div class="max-h-40 overflow-y-auto border-t border-border bg-chrome">
|
|
@for (job of transfers.jobs(); track job.id) {
|
|
<div class="flex items-center gap-2 px-3 py-1.5 text-xs">
|
|
<ng-icon [name]="stateIcon(job)" size="0.95rem" [class]="stateClass(job)" />
|
|
<span class="w-40 shrink-0 truncate font-medium" [title]="job.srcPath">{{ job.name }}</span>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="truncate text-[11px] text-muted-foreground">{{ progressLabel(job) }}</div>
|
|
@if (isActive(job)) {
|
|
<div class="mt-0.5 h-1 overflow-hidden rounded-full bg-muted">
|
|
<div
|
|
class="h-full rounded-full bg-primary transition-[width] duration-100"
|
|
[style.width.%]="jobPercent(job)"
|
|
></div>
|
|
</div>
|
|
}
|
|
</div>
|
|
@if (isActive(job)) {
|
|
<button
|
|
(click)="transfers.cancel(job.id)"
|
|
[title]="i18n.t('transfer.cancel')"
|
|
class="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-destructive"
|
|
>
|
|
<ng-icon name="mynaX" size="0.9rem" />
|
|
</button>
|
|
} @else {
|
|
<button
|
|
(click)="transfers.dismiss(job.id)"
|
|
[title]="i18n.t('transfer.dismiss')"
|
|
class="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
>
|
|
<ng-icon name="mynaX" size="0.9rem" />
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|