diff --git a/ui/dev/harness.html b/ui/dev/harness.html index 61b2d79..154b970 100644 --- a/ui/dev/harness.html +++ b/ui/dev/harness.html @@ -91,17 +91,27 @@
-
ours — div grid (7.css never applies)
-
-
-
Name
-
Size
-
Modified
-
-
..
—
—
-
Documents
—
3/29/2007
-
report.pdf
27 KB
3/23/2007
-
+
ours — file-panel.html (selected + cursor row)
+ + + + + + + + + + + + + + + + + + + +
NameSizeModified
..——
Documents—3/29/2007 12:00 AM
report.pdf27 KB3/23/2007 12:00 AM
notes.txt4 KB3/13/2007 12:00 AM
diff --git a/ui/src/app/file-panel/file-panel.html b/ui/src/app/file-panel/file-panel.html index 7810094..137cb31 100644 --- a/ui/src/app/file-panel/file-panel.html +++ b/ui/src/app/file-panel/file-panel.html @@ -191,26 +191,8 @@ - -
- - @for (col of visibleColumns(); track col.key) { - - } -
+ @if (panel().filter(); as query) { @@ -256,67 +238,96 @@ } @else { - @for (entry of panel().sorted(); track entry.name; let i = $index) { -
-
- - {{ entry.name }} -
+ + + + @for (col of visibleColumns(); track col.key) { - @switch (col.key) { - @case ('size') { - - {{ entry.type === 'dir' ? '—' : formatSize(entry.size) }} - - } - @case ('mtime') { - - {{ formatDate(entry.mtime) }} - - } - @case ('kind') { - - {{ fileKind(entry) }} - - - - } - @case ('rights') { - - {{ entry.name === '..' ? '' : formatMode(entry.mode) }} - - } - @case ('owner') { - - {{ entry.name === '..' ? '' : (entry.owner ?? '—') }} - - } - @case ('group') { - - {{ entry.name === '..' ? '' : (entry.group ?? '—') }} - - } - } + } - - } @empty { -
{{ i18n.t('panel.emptyDir') }}
- } - @if (panel().filter() && filterMatches() === 0) { -
{{ i18n.t('panel.noMatches') }}
- } + + + + + @for (col of visibleColumns(); track col.key) { + + } + + + + @for (entry of panel().sorted(); track entry.name; let i = $index) { + + + @for (col of visibleColumns(); track col.key) { + @switch (col.key) { + @case ('size') { + + } + @case ('mtime') { + + } + @case ('kind') { + + + } + @case ('rights') { + + } + @case ('owner') { + + } + @case ('group') { + + } + } + } + + } @empty { + + + + } + @if (panel().filter() && filterMatches() === 0) { + + + + } + +
+ {{ i18n.t('columns.name') }} + + {{ i18n.t('columns.' + col.key) }} +
+ + + {{ entry.name }} + + {{ entry.type === 'dir' ? '—' : formatSize(entry.size) }}{{ formatDate(entry.mtime) }}{{ fileKind(entry) }}{{ entry.name === '..' ? '' : formatMode(entry.mode) }}{{ entry.name === '..' ? '' : (entry.owner ?? '—') }}{{ entry.name === '..' ? '' : (entry.group ?? '—') }}
+ {{ i18n.t('panel.emptyDir') }} +
+ {{ i18n.t('panel.noMatches') }} +
}
@if (panel().slowLoad() && !panel().connecting()) { diff --git a/ui/src/app/file-panel/file-panel.ts b/ui/src/app/file-panel/file-panel.ts index 943dc29..e29a93d 100644 --- a/ui/src/app/file-panel/file-panel.ts +++ b/ui/src/app/file-panel/file-panel.ts @@ -84,9 +84,6 @@ export class FilePanel { const visible = this.settings.columns(); return COLUMN_DEFS.filter((c) => visible.includes(c.key)); }); - readonly gridTemplate = computed(() => - ['minmax(0,1fr)', ...this.visibleColumns().map((c) => c.width)].join(' '), - ); headerContextMenu(event: MouseEvent): void { event.preventDefault(); @@ -197,11 +194,6 @@ export class FilePanel { .filter((e) => e.name !== '..').length; } - sortIndicator(key: SortKey): string { - if (this.panel().sortKey() !== key) return ''; - return this.panel().sortAsc() ? '↑' : '↓'; - } - commitPath(): void { if (this.blocked()) return; const value = this.pathDraft().trim(); diff --git a/ui/src/styles.css b/ui/src/styles.css index 8845976..02078c3 100644 --- a/ui/src/styles.css +++ b/ui/src/styles.css @@ -598,13 +598,43 @@ body { neighbouring layer. */ @layer skinfix { /* Opt back IN to real Win7 push-button metrics, for the dialog and options - buttons where they are right. Inert under the modern skin. */ + buttons where they are right. */ .win7 .w7-btn { min-width: 75px; min-height: 23px; padding: 0 12px; } + /* ---- ListView (file panels) ---- + 7.css's listview.css hardcodes light literals (#fff, #c0c1cd, #eee and the + white header gradient) instead of --w7-* vars, so unlike the rest of the + skin it does NOT follow the hand-authored dark palette — the header labels + came out invisible, dark on dark. These restate the same rules in dark + terms; they are scoped to the dark arms only so light keeps 7.css's own + values untouched. */ + .win7[data-theme='dark'] table, + .win7[data-theme='dark'] table > tbody > tr > * { + background-color: var(--w7-el-bg-s-2); + border-color: var(--w7-el-bd-d); + color: var(--w7-el-c); + } + .win7[data-theme='dark'] table > thead > tr > * { + background: linear-gradient(180deg, var(--w7-el-bg) 45%, var(--w7-el-bg-d) 0, var(--w7-el-bg-s-1)); + border-color: var(--w7-el-bd-d); + color: var(--w7-el-c); + } + .win7[data-theme='dark'] table > tbody > tr > :not(:last-child) { + border-right-color: var(--w7-el-bd-d); + } + + /* The keyboard cursor. 7.css models only selection (tr.highlighted); Win7 + drew the focused row with a dotted focus rectangle on top of it, which is + what distinguishes "cursor" from "selected" when they differ. */ + .win7 table > tbody > tr.is-cursor > * { + outline: 1px dotted var(--w7-el-c); + outline-offset: -1px; + } + /* Aero context menu. 7.css has no menu component, so this is hand-authored — but ONLY out of the existing --w7-* vars, never literal hex, so the hand-written dark Win7 palette above recolours it for free. Values are