generated from coulomb/repo-seed
tegwick
bef2725fdd
Three UX iterations rolled into one:
1. Unified evidence form
- New EvidenceFormBody is the single source for "citation +
commentary" editing. Both InlineCaptureForm (creating fresh
evidence from a selection) and the EvidenceCard edit mode render
this body with their own save/cancel labels + badge/helper text.
- The capture form now exposes the citation as an editable
textarea — pre-filled with the selection text — so the user can
refine a partial capture before saving without re-selecting.
- Old testid prefixes are unchanged for the inline-capture flow
(`inline-capture-quote/commentary/save/cancel`); edit-mode
testids are now `evidence-edit-<id>-{quote,commentary,save,cancel}`.
2. Active document card
- The blue background alone was the only "this is open" cue. Added
a 3px #0050b3 border (matching the evidence-card thick-border
pattern, but in the documents-are-blue palette) plus a
`data-active` attribute.
3. PDF layer-hide diagnostics
- New debug flags `hideCanvas`, `hideTextLayer`, `hideAnnotationLayer`,
`hideXfaLayer` — applied as `.ce-hide-<layer>` classes on the viewer
wrapper, each `display: none`-ing the matching PDF.js layer.
- SessionMenu groups the toggles under a "PDF diagnostics" header
with a new shared DebugCheckbox helper. The existing "Debug text
layer" highlight toggle now lives in the same group.
- Lets the user isolate stacking issues by elimination — e.g.
"hide text layer, can I now see the canvas content underneath?".
Tests
- citation-card-export-e2e + session-export-reimport switched from
placeholder/role-name lookups to the inline-capture testids so
they survive form-copy changes.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
60 lines
1.8 KiB
CSS
60 lines
1.8 KiB
CSS
/*
|
|
* Debug overlay for PDF text layer alignment.
|
|
*
|
|
* The text layer is normally invisible (`opacity: 0`) and selectable.
|
|
* When `.ce-debug-textlayer` is on a parent, every text node becomes a
|
|
* light grey box so it's obvious where text is selectable and where it
|
|
* isn't — useful for diagnosing OCR misalignment, scan-only PDFs, and
|
|
* text-layer shift caused by font fallbacks.
|
|
*
|
|
* Light grey was chosen so the debug overlay does not clash with the
|
|
* citation-yellow used for evidence highlights (see highlight-styles.css).
|
|
*
|
|
* Toggle via the "Debug text layer" entry in SessionMenu.
|
|
*/
|
|
|
|
.ce-debug-textlayer .textLayer {
|
|
outline: 2px dashed rgba(120, 120, 120, 0.55);
|
|
background: rgba(120, 120, 120, 0.06);
|
|
}
|
|
|
|
/* PDF.js 4.x wraps marked content in nested spans/divs — cover every
|
|
descendant so the entire selectable area is visible regardless of how
|
|
the renderer nested things. */
|
|
.ce-debug-textlayer .textLayer * {
|
|
background: rgba(170, 170, 170, 0.4) !important;
|
|
color: rgba(40, 40, 40, 0.85) !important;
|
|
opacity: 1 !important;
|
|
outline: 1px solid rgba(100, 100, 100, 0.35);
|
|
}
|
|
|
|
/* Dim the canvas-rendered layer slightly so the debug overlay stands
|
|
out by contrast. */
|
|
.ce-debug-textlayer canvas {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/*
|
|
* Layer-visibility toggles. Each `.ce-hide-<layer>` class is applied
|
|
* to the same viewer-wrapper element so a single parent can hide any
|
|
* combination of layers. Useful for diagnosing layer stacking issues
|
|
* (e.g. "is the textLayer covering the canvas?") by elimination.
|
|
*/
|
|
|
|
.ce-hide-canvas canvas {
|
|
display: none !important;
|
|
}
|
|
|
|
.ce-hide-text-layer .textLayer {
|
|
display: none !important;
|
|
}
|
|
|
|
.ce-hide-annotation-layer .annotationLayer,
|
|
.ce-hide-annotation-layer .annotationEditorLayer {
|
|
display: none !important;
|
|
}
|
|
|
|
.ce-hide-xfa-layer .xfaLayer {
|
|
display: none !important;
|
|
}
|