Fix ListView selection and cursor rendering (regressions from Stage 2)
You were right that selecting a line looked off. Three separate problems, two of them introduced by the Stage 2 dark-mode block: 1. The selection band was ERASED in dark mode. Stage 2 restated the dark surface on `table > tbody > tr > *`, i.e. on the CELLS — but 7.css paints tr.highlighted on the ROW, and a cell background paints over a row background. The selected row kept only its 1px border and no fill. The base surface now goes on `table` alone; cells stay transparent so the row band shows through. Same trap re-applies to the cell separators, which 7.css deliberately drops inside a selected row and the dark rule was re-adding. 2. The cursor rectangle was drawn PER CELL. `tr.is-cursor > *` puts a dotted outline around every cell, so the focused row rendered as a row of dotted boxes. Win7 drew one rectangle around the row — the outline belongs on the `tr`. 3. Selection was barely visible even in light, and that one is 7.css's own semantics rather than a bug: listview's `.highlighted` is Win7's *inactive* selection, a near-white wash. Win7 drew the FOCUSED pane's selection as the stronger Aero band. The table now carries `is-active` from the panel's own isActive(), and the focused pane's selection uses --w7-el-grad-h/-bd-h, which the dark palette already restates, so it recolours for free. Verified by cropping and zooming the harness screenshots in both themes rather than eyeballing a full page: full-row band, separators dropped inside it, and a single dotted rectangle on the cursor row. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+2
-2
@@ -91,8 +91,8 @@
|
|||||||
</table>
|
</table>
|
||||||
</figure>
|
</figure>
|
||||||
<figure class="cell" style="margin:0">
|
<figure class="cell" style="margin:0">
|
||||||
<figcaption>ours — file-panel.html (selected + cursor row)</figcaption>
|
<figcaption>ours — focused panel (is-active): selected + cursor</figcaption>
|
||||||
<table>
|
<table class="is-active">
|
||||||
<colgroup>
|
<colgroup>
|
||||||
<col />
|
<col />
|
||||||
<col style="width: 5.5rem" />
|
<col style="width: 5.5rem" />
|
||||||
|
|||||||
@@ -242,7 +242,7 @@
|
|||||||
position:sticky, which is why it moved in here), the sorted column is
|
position:sticky, which is why it moved in here), the sorted column is
|
||||||
.highlighted.indicator[.up], and the selection band is tr.highlighted.
|
.highlighted.indicator[.up], and the selection band is tr.highlighted.
|
||||||
Widths come from <colgroup> because 7.css sets table-layout:fixed. -->
|
Widths come from <colgroup> because 7.css sets table-layout:fixed. -->
|
||||||
<table>
|
<table [class.is-active]="isActive()">
|
||||||
<colgroup>
|
<colgroup>
|
||||||
<col />
|
<col />
|
||||||
@for (col of visibleColumns(); track col.key) {
|
@for (col of visibleColumns(); track col.key) {
|
||||||
|
|||||||
+30
-8
@@ -610,10 +610,13 @@ body {
|
|||||||
white header gradient) instead of --w7-* vars, so unlike the rest of 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
|
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
|
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
|
terms; light keeps 7.css's own values untouched.
|
||||||
values untouched. */
|
|
||||||
.win7[data-theme='dark'] table,
|
CRITICAL: the base surface goes on `table`, NEVER on `tbody > tr > *`.
|
||||||
.win7[data-theme='dark'] table > tbody > tr > * {
|
7.css paints the selection band on the ROW, and a cell background paints
|
||||||
|
over a row background — setting one erased the selection highlight
|
||||||
|
entirely in dark mode. */
|
||||||
|
.win7[data-theme='dark'] table {
|
||||||
background-color: var(--w7-el-bg-s-2);
|
background-color: var(--w7-el-bg-s-2);
|
||||||
border-color: var(--w7-el-bd-d);
|
border-color: var(--w7-el-bd-d);
|
||||||
color: var(--w7-el-c);
|
color: var(--w7-el-c);
|
||||||
@@ -626,11 +629,30 @@ body {
|
|||||||
.win7[data-theme='dark'] table > tbody > tr > :not(:last-child) {
|
.win7[data-theme='dark'] table > tbody > tr > :not(:last-child) {
|
||||||
border-right-color: var(--w7-el-bd-d);
|
border-right-color: var(--w7-el-bd-d);
|
||||||
}
|
}
|
||||||
|
/* 7.css drops the cell separators inside a selected row; the rule above is
|
||||||
|
more specific than its, so restore that behaviour explicitly. */
|
||||||
|
.win7[data-theme='dark'] table > tbody > tr.highlighted > :not(:last-child) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
.win7[data-theme='dark'] table > tbody > tr.highlighted {
|
||||||
|
background: var(--w7-li-bg-hl);
|
||||||
|
border-color: var(--w7-li-bd-hl);
|
||||||
|
}
|
||||||
|
|
||||||
/* The keyboard cursor. 7.css models only selection (tr.highlighted); Win7
|
/* Selection in the FOCUSED panel. 7.css's tr.highlighted is Win7's *inactive*
|
||||||
drew the focused row with a dotted focus rectangle on top of it, which is
|
selection — a near-white wash that is almost invisible when it is the
|
||||||
what distinguishes "cursor" from "selected" when they differ. */
|
panel you are actually working in. Win7 drew the focused pane's selection
|
||||||
.win7 table > tbody > tr.is-cursor > * {
|
as the stronger Aero band, which is what --w7-el-grad-h/-bd-h already are
|
||||||
|
(and the dark palette restates them, so this recolours for free). */
|
||||||
|
.win7 table.is-active > tbody > tr.highlighted {
|
||||||
|
background: var(--w7-el-grad-h);
|
||||||
|
border-color: var(--w7-el-bd-h);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The keyboard cursor: one dotted focus rectangle around the ROW, the way
|
||||||
|
Win7 drew a focused-but-unselected item. Applying this per cell (tr > *)
|
||||||
|
draws a dotted box around every cell instead — visibly wrong. */
|
||||||
|
.win7 table > tbody > tr.is-cursor {
|
||||||
outline: 1px dotted var(--w7-el-c);
|
outline: 1px dotted var(--w7-el-c);
|
||||||
outline-offset: -1px;
|
outline-offset: -1px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user