ZDDC
be5b3967ba
Every column table in the classifier now has the same three powers: multi-column sort, per-column autofilters, and drag-resizable widths. Two of the three tables were each missing one; the fix is to make the shared seltable the single engine. - shared/seltable.js: add multi-column sort (click a header to sort; shift/ctrl- click ADDS a secondary key; asc→desc→off cycle; ▲/▼ + priority indicator) and self-contained drag-resizable columns (a .seltable__resizer on each title th — no dependency on the classifier-only resize.js, since the tables tool shares seltable). New opt-in opts.persistKey persists widths + sort to localStorage. - By-tracking grid → seltable (target-tree.js): the bespoke merged-cell table is replaced by a seltable (status badge, original-name preview link, editable tracking/rev/title inputs, ✕). It inherits sort + autofilter + resize for free. The Columns ▾ chooser now rebuilds the seltable; widths + sort persist under the same prefs key. Grid is self-correcting — a column-set change rebuilds on render. - Worklist (already seltable): gains sort + resize automatically; the derived Source column is marked non-sortable/non-filterable. - The Rename-in-place spreadsheet already had all three (sort.js + filter.js + resize.js) — no change needed there. - seltable.css: .seltable__resizer / .seltable__sortind / sortable-header cursor. - tests: seltable multi-sort (header click, shift-add, indicators) + resize (drag widens + persists via persistKey); the grid's selectors move off the old .ttable--grid onto .seltable__table. 66 classify + 56 classifier/tables green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
57 lines
3.9 KiB
CSS
57 lines
3.9 KiB
CSS
/* ── Shared selectable + autofilter table (seltable) + its hosting overlay ───
|
|
Used by the tables tool's "Add from archive". The classifier carries an
|
|
equivalent copy inline in its layout.css for the catalog. */
|
|
.seltable { display: flex; flex-direction: column; min-height: 0; height: 100%; }
|
|
.seltable__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
|
|
.seltable__count { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
|
|
.seltable__scroll { flex: 1; min-height: 0; overflow: auto; }
|
|
/* width:auto + nowrap cells → each column shrinks to fit its header/longest cell. */
|
|
.seltable__table { border-collapse: separate; border-spacing: 0; width: auto; font-size: 0.82rem; }
|
|
.seltable__table th, .seltable__table td { border-bottom: 1px solid var(--border); padding: 0.25rem 0.5rem; text-align: left; white-space: nowrap; }
|
|
.seltable__table thead th {
|
|
position: sticky; top: 0; z-index: 2; background: var(--bg-secondary, var(--bg));
|
|
color: var(--text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
|
|
}
|
|
.seltable__table thead tr.seltable__filters th { top: 1.55rem; padding: 0.15rem 0.35rem; }
|
|
/* Sortable headers + multi-sort indicator. The title th is position:sticky
|
|
(a positioning context) so the drag-resizer can absolutely anchor to its edge. */
|
|
.seltable__th--sortable { cursor: pointer; }
|
|
.seltable__th--sortable:hover { color: var(--text); }
|
|
.seltable__sortind { color: var(--primary); font-size: 0.7em; font-weight: 700; }
|
|
.seltable__resizer {
|
|
position: absolute; top: 0; right: 0; bottom: 0; width: 6px;
|
|
cursor: col-resize; user-select: none; touch-action: none;
|
|
}
|
|
.seltable__resizer:hover { background: var(--primary); opacity: 0.4; }
|
|
.seltable__colfilter {
|
|
width: 100%; min-width: 2rem; box-sizing: border-box; padding: 0.15rem 0.35rem;
|
|
border: 1px solid var(--border); border-radius: var(--radius);
|
|
background: var(--bg); color: var(--text); font-size: 0.74rem; font-weight: 400; text-transform: none; letter-spacing: 0;
|
|
}
|
|
.seltable__row { cursor: pointer; user-select: none; }
|
|
.seltable__row:hover { background: var(--bg-hover); }
|
|
.seltable__row.is-selected { background: var(--primary-light, rgba(37,99,235,0.12)); }
|
|
.seltable__row.is-selected:hover { background: var(--primary-light, rgba(37,99,235,0.18)); }
|
|
.seltable__row.drop-hover { outline: 2px solid var(--primary); outline-offset: -2px; }
|
|
|
|
/* ── "Add deliverables from archive" overlay (project MDL rollup) ─────────── */
|
|
.mdlarch-overlay {
|
|
position: fixed; inset: 0; z-index: 1000;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
display: flex; align-items: center; justify-content: center; padding: 1.5rem;
|
|
}
|
|
.mdlarch-overlay__box {
|
|
display: flex; flex-direction: column; min-height: 0;
|
|
width: min(960px, 95vw); height: min(80vh, 760px);
|
|
background: var(--bg); color: var(--text);
|
|
border: 1px solid var(--border); border-radius: var(--radius);
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.mdlarch-overlay__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
|
|
.mdlarch-overlay__head h2 { margin: 0; font-size: 1.05rem; flex: 1; }
|
|
.mdlarch-overlay__close { border: none; background: none; color: var(--text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }
|
|
.mdlarch-overlay__close:hover { color: var(--text); }
|
|
.mdlarch-overlay__status { padding: 0.5rem 1.1rem; color: var(--text-muted); font-size: 0.82rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
|
|
.mdlarch-overlay__table { flex: 1; min-height: 0; display: flex; }
|
|
.mdlarch-overlay__table .seltable { height: 100%; flex: 1; }
|
|
.mdlarch-overlay__foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.75rem 1.1rem; border-top: 1px solid var(--border); flex: 0 0 auto; }
|