Stage 2: file panels become a real 7.css ListView
The file list was a CSS grid of <div>s, so 7.css's listview component never matched a single selector and Tailwind styled the whole thing. It is now the plain <table> 7.css documents, which is what makes the Aero treatment appear. - The column header row moved OUT of its own div and INTO <thead>: 7.css makes thead position:sticky, so it stays put while the body scrolls, and it has to be inside the same table to do that. - Column widths moved from a computed grid-template-columns to <colgroup>, because 7.css sets table-layout: fixed. `gridTemplate()` is deleted. - Selection is now `tr.highlighted` (7.css's gradient band + #aaddfa border) instead of bg-primary/15. - The sort arrow was the text glyph ↑/↓ from `sortIndicator()`, which is also deleted; the sorted column is now `th.highlighted.indicator[.up]` and 7.css draws the real clip-path triangle in the header. - Row height, padding, borders and fonts now come from 7.css, so --row-h and the per-cell text/color/font utilities are gone. Two things 7.css does not cover, added in `skinfix`: - Dark mode. listview.css hardcodes light literals (#fff, #c0c1cd, #eee and a white header gradient) rather than --w7-* vars, so it does NOT follow the hand-authored dark palette — the header labels rendered invisible, dark on dark. The dark arms restate those rules; light keeps 7.css's own values. - The keyboard cursor. 7.css models selection only; Win7 drew the focused row with a dotted focus rectangle over it, which is what tells "cursor" apart from "selected" when they differ. That is `tr.is-cursor`. Verified visually this time, not just by build log: harness screenshots in both light and dark show the header gradient, sort triangle, cell separators, selection band and cursor rectangle matching 7.css's reference markup. Backend `tsc --noEmit` clean, `bun run build:ui` clean, bundle 489.83 kB (from 490.50). Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+21
-11
@@ -91,17 +91,27 @@
|
||||
</table>
|
||||
</figure>
|
||||
<figure class="cell" style="margin:0">
|
||||
<figcaption>ours — div grid (7.css never applies)</figcaption>
|
||||
<div style="border:1px solid var(--w7-el-bd); background:#fff">
|
||||
<div style="display:grid;grid-template-columns:1fr 5.5rem 8.5rem;font-size:11px;opacity:.7;border-bottom:1px solid #d7d7d7">
|
||||
<div style="padding:2px 8px">Name</div>
|
||||
<div style="padding:2px 8px;text-align:right">Size</div>
|
||||
<div style="padding:2px 8px">Modified</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 5.5rem 8.5rem"><div style="padding:2px 8px">..</div><div style="padding:2px 8px;text-align:right">—</div><div style="padding:2px 8px">—</div></div>
|
||||
<div style="display:grid;grid-template-columns:1fr 5.5rem 8.5rem"><div style="padding:2px 8px">Documents</div><div style="padding:2px 8px;text-align:right">—</div><div style="padding:2px 8px">3/29/2007</div></div>
|
||||
<div style="display:grid;grid-template-columns:1fr 5.5rem 8.5rem;background:rgba(59,130,246,.15)"><div style="padding:2px 8px">report.pdf</div><div style="padding:2px 8px;text-align:right">27 KB</div><div style="padding:2px 8px">3/23/2007</div></div>
|
||||
</div>
|
||||
<figcaption>ours — file-panel.html (selected + cursor row)</figcaption>
|
||||
<table>
|
||||
<colgroup>
|
||||
<col />
|
||||
<col style="width: 5.5rem" />
|
||||
<col style="width: 8.5rem" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th class="highlighted indicator up" style="text-align:right">Size</th>
|
||||
<th>Modified</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>..</td><td style="text-align:right">—</td><td>—</td></tr>
|
||||
<tr><td>Documents</td><td style="text-align:right">—</td><td>3/29/2007 12:00 AM</td></tr>
|
||||
<tr class="highlighted"><td>report.pdf</td><td style="text-align:right">27 KB</td><td>3/23/2007 12:00 AM</td></tr>
|
||||
<tr class="is-cursor"><td>notes.txt</td><td style="text-align:right">4 KB</td><td>3/13/2007 12:00 AM</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user