jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stage 4a: context menu is pure 7.css; retire the lookalike and the false claim

Browse Source 
The menu now renders 7.css's real contract — ul[role=menu] > li[role=menuitem]
> button for actions, input[type=checkbox] + label for the checkable column
toggles, and dividers as .has-divider on the PRECEDING item (7.css draws them
as an ::after bevel, not as a node; the service's separator entries collapse
onto their predecessor at render time). With the markup right, the framework
supplies everything the hand-written version imitated or lacked: the left
gutter stripe, bevelled separators, the gradient selection band, the checked
box, and disabled/submenu styling we previously had none of.

Deleted: the w7-menu lookalike (both the button-slab stripper in `skin` and
the whole hand-authored Aero set in `skinfix`) and its w7-menu/w7-menu-sep
hooks. The "7.css has no menu component" claims in styles.css and
architecture.md were FALSE — dist/gui/menu.css is a full component; the old
markup (div > button) simply matched none of it. Both corrected to state the
real contract and the trap.

Keyboard now follows the platform instead of a highlight class: arrows move
REAL focus between items — 7.css styles :focus-visible identically to :hover,
and keyboard-initiated programmatic focus counts — and Enter/Space activate
buttons natively; only labels need a synthetic click. This also makes the menu
honest to screen readers.

Dark mode: menu.css hardcodes light literals (color:initial, white bevel
halves, the #b3d3f9 checked-box ring); restated in skinfix's dark arm like the
ListView's.

Also fixed, caught BY the harness: the Stage 3 frame sizing rule was keyed on
bare `.window`, forcing 100vh height onto every 7.css window (the harness's
demo windows blew up to full page). It is now keyed on `w7-frame`, a hook only
the three real window roots carry.

Verified zoomed in light and dark against 7.css's reference markup: gutter,
dividers, checkmark box, grey right-aligned accelerator all match; bundle
490.92 kB.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jgamboa
2026-08-16 03:20:55 +02:00
co-authored by Claude
parent 1f773261a8
commit 0ae2a62229
7 changed files with 152 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/dev/harness.html
+17 -17
View File
@@ -199,23 +199,23 @@
</ul>
</figure>
<figure class="cell" style="margin:0">
<figcaption>ours — div &gt; 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>
<figcaption>ours — context-menu.ts output (buttons, divider, accelerator, checkables)</figcaption>
<ul role="menu" style="width:200px">
<li role="menuitem"><button type="button">Send to Other Panel</button></li>
<li role="menuitem"><button type="button">Open</button></li>
<li role="menuitem"><button type="button">Edit <span>F4</span></button></li>
<li role="menuitem" class="has-divider"><button type="button">Rename</button></li>
<li role="menuitem"><button type="button">Copy Path</button></li>
<li role="menuitem" class="has-divider"><button type="button">Delete</button></li>
<li role="menuitem">
<input type="checkbox" id="ours-col-size" checked tabindex="-1" />
<label for="ours-col-size">Size</label>
</li>
<li role="menuitem">
<input type="checkbox" id="ours-col-kind" tabindex="-1" />
<label for="ours-col-kind">Kind</label>
</li>
</ul>
</figure>
</div>