jgamboaandClaude
66076cf1d7
The previous model made the dotted rectangle the de-facto focus signal: the cursor row got ONLY dots (and only in the active pane), so an unfocused pane's cursor row disappeared entirely, and selection strength was the only band difference. Wrong way around for a commander UI. Now (matching Win7 Explorer / the commander convention): - tr.highlighted = "selected via Space" OR "cursor row" — the template ORs them, so the cursor row always carries the selection band in BOTH panes. - Pane focus is what changes the band: strong Aero band (--w7-el-grad-h) in the focused pane, 7.css's own faint inactive wash in the unfocused pane — that wash IS Win7's inactive-selection colour, faint by design. - The dotted rect is demoted to what it was in Win7: a keyboard-focus marker layered ON TOP of the band, focused pane only. It is no longer the thing that tells you which pane is active. Harness now renders a focused and an unfocused pane stacked, with selected rows and a cursor row in each; verified zoomed in light and dark. Co-Authored-By: Claude <noreply@anthropic.com>
206 lines
9.0 KiB
HTML
206 lines
9.0 KiB
HTML
<!doctype html>
|
|
<!--
|
|
Skin harness — a static gallery rendered headlessly by scripts/shot.ts so the
|
|
Win7 skin can be LOOKED AT during development instead of inferred from a
|
|
clean build log. Not shipped: it lives outside ui/src, so the Angular build
|
|
never sees it.
|
|
|
|
Each section pairs 7.css's own documented markup ("reference") with what the
|
|
app currently renders ("ours"). Where those two disagree visually, 7.css is
|
|
not reaching our component — that mismatch is the whole point of the page.
|
|
|
|
Layout here uses INLINE STYLES on purpose: Tailwind v4 only emits utilities it
|
|
found while scanning ui/src, so utility classes used only here would not exist
|
|
in the built stylesheet. {{STYLES}} is replaced by scripts/shot.ts with the
|
|
real hashed build output.
|
|
-->
|
|
<html class="win7" lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>7.css harness</title>
|
|
<link rel="stylesheet" href="{{STYLES}}" />
|
|
<style>
|
|
body { margin: 0; padding: 20px; }
|
|
h2 { font-size: 13px; margin: 22px 0 6px; opacity: 0.75; }
|
|
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
|
|
.cell { min-width: 0; }
|
|
.cell > figcaption {
|
|
font-size: 11px; opacity: 0.6; margin-bottom: 5px; text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.stage { padding: 14px; background: #6ba5d7; border-radius: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>1 — Window frame, glass, drop shadow, active colour</h2>
|
|
<div class="pair">
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>reference — .window.glass.active</figcaption>
|
|
<div class="stage">
|
|
<div class="window glass active" style="width: 320px">
|
|
<div class="title-bar">
|
|
<div class="title-bar-text">miniSCP</div>
|
|
<div class="title-bar-controls">
|
|
<button aria-label="Minimize"></button>
|
|
<button aria-label="Maximize"></button>
|
|
<button aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="window-body"><p>Glass frame, 6px radius, drop shadow.</p></div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>ours — bare .title-bar, no wrapper</figcaption>
|
|
<div class="stage">
|
|
<div style="width: 320px">
|
|
<div class="title-bar">
|
|
<div class="title-bar-text">miniSCP</div>
|
|
<div class="title-bar-controls">
|
|
<button aria-label="Minimize"></button>
|
|
<button aria-label="Maximize"></button>
|
|
<button aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div style="background: var(--w7-surface); padding: 10px">
|
|
<p style="margin:0">No frame, no shadow, no glass.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
|
|
<h2>2 — ListView (file panel)</h2>
|
|
<div class="pair">
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>reference — <table></figcaption>
|
|
<table class="has-shadow" style="width:100%">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th class="highlighted indicator">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><td>notes.txt</td><td style="text-align:right">4 KB</td><td>3/13/2007 12:00 AM</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</figure>
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>ours — focused pane (top) vs unfocused pane (bottom)</figcaption>
|
|
<!-- Focused pane: strong band on selected rows AND the cursor row;
|
|
the cursor row additionally gets the dotted focus rect. -->
|
|
<table class="is-active">
|
|
<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 class="highlighted"><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="highlighted 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>
|
|
<!-- Unfocused pane: same rows, faint inactive wash, no dots. -->
|
|
<table style="margin-top:10px">
|
|
<colgroup>
|
|
<col />
|
|
<col style="width: 5.5rem" />
|
|
<col style="width: 8.5rem" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th 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 class="highlighted"><td>Documents</td><td style="text-align:right">—</td><td>3/29/2007 12:00 AM</td></tr>
|
|
<tr><td>report.pdf</td><td style="text-align:right">27 KB</td><td>3/23/2007 12:00 AM</td></tr>
|
|
<tr class="highlighted"><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>
|
|
|
|
<h2>3 — Context menu</h2>
|
|
<div class="pair">
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>reference — ul[role=menu]</figcaption>
|
|
<ul role="menu" style="width:200px">
|
|
<li role="menuitem"><a href="#m">Send to Other Panel</a></li>
|
|
<li role="menuitem"><a href="#m">Open</a></li>
|
|
<li role="menuitem" class="has-divider"><a href="#m">Rename</a></li>
|
|
<li role="menuitem"><a href="#m">Copy Path</a></li>
|
|
<li role="menuitem" aria-disabled="true"><a href="#m">Permissions</a></li>
|
|
<li role="menuitem" class="has-divider"><a href="#m">Delete</a></li>
|
|
<li role="menuitem">
|
|
<input type="checkbox" id="h-col-size" checked />
|
|
<label for="h-col-size">Size</label>
|
|
</li>
|
|
<li role="menuitem">
|
|
<input type="checkbox" id="h-col-kind" />
|
|
<label for="h-col-kind">Kind</label>
|
|
</li>
|
|
</ul>
|
|
</figure>
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>ours — div > button + hand-written CSS</figcaption>
|
|
<div class="w7-menu" style="width:224px">
|
|
<button style="display:flex;width:100%;gap:8px;padding:3px 8px;text-align:left">
|
|
<span style="width:14px"></span><span style="flex:1">Send to Other Panel</span>
|
|
</button>
|
|
<button style="display:flex;width:100%;gap:8px;padding:3px 8px;text-align:left">
|
|
<span style="width:14px"></span><span style="flex:1">Open</span>
|
|
</button>
|
|
<div class="w7-menu-sep" style="border-top:1px solid var(--w7-el-bd);margin:2px 0"></div>
|
|
<button style="display:flex;width:100%;gap:8px;padding:3px 8px;text-align:left">
|
|
<span style="width:14px"></span><span style="flex:1">Rename</span>
|
|
</button>
|
|
<button style="display:flex;width:100%;gap:8px;padding:3px 8px;text-align:left">
|
|
<span style="width:14px"></span><span style="flex:1">Edit</span>
|
|
<span style="color:var(--w7-el-c-d)">F4</span>
|
|
</button>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
|
|
<h2>4 — Controls 7.css already owns (sanity check)</h2>
|
|
<div class="pair">
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>buttons / textbox / progress</figcaption>
|
|
<div style="display:flex;flex-direction:column;gap:10px">
|
|
<div style="display:flex;gap:6px"><button>OK</button><button>Cancel</button><button disabled>Disabled</button></div>
|
|
<input type="text" value="/home/supongo/code" style="width:100%" />
|
|
<div role="progressbar" style="width:100%"><div style="width:42%"></div></div>
|
|
<div role="progressbar" class="marquee" style="width:100%"></div>
|
|
</div>
|
|
</figure>
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>tabs — menu[role=tablist]</figcaption>
|
|
<menu role="tablist">
|
|
<button role="tab" aria-selected="true">local</button>
|
|
<button role="tab">server-a</button>
|
|
<button role="tab">server-b</button>
|
|
</menu>
|
|
<div role="tabpanel" style="padding:10px">Tab body</div>
|
|
</figure>
|
|
</div>
|
|
</body>
|
|
</html>
|