Add per-row edit button and paired column highlight to /lignes

Pencil icon opens the existing node edit form in the same AJAX modal
as "+ Ajouter une ligne" -- no new form logic, reuses the form_alter
validation/close-on-save already in place for the add form.

Column highlight pairs with the existing row hover (from Gin's global
table CSS) to form a crosshair. Column position is computed logically
(accounting for colspan) rather than via DOM cellIndex, since the
totals row's label cell spans 4 columns and would otherwise misalign
every column after it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-04 10:40:21 +02:00
co-authored by Claude Sonnet 5
parent a5af59a349
commit 8c63c19619
3 changed files with 102 additions and 2 deletions
@@ -9,6 +9,7 @@
--figli-border: #dcdee2;
--figli-error: #c9312b;
--figli-positive: #1a7f37;
--figli-col-hover: rgba(15, 23, 42, 0.05);
font-family: Inter, -apple-system, sans-serif;
margin: 1rem 0;
@@ -23,6 +24,7 @@ html.gin--dark-mode #figli-home-app {
--figli-border: #3d3e42;
--figli-error: #ff6b6b;
--figli-positive: #4ade80;
--figli-col-hover: rgba(255, 255, 255, 0.07);
}
#figli-home-app .figli-toolbar {
@@ -165,6 +167,15 @@ html.gin--dark-mode #figli-home-app {
font-weight: 700;
}
/* Column highlight to pair with the row hover, forming a crosshair over
the hovered cell. box-shadow (not background) so it layers on top of
whatever the cell already has -- sticky header/footer backgrounds,
error-row outlines -- instead of overwriting them. */
#figli-home-app td.figli-col-hover,
#figli-home-app th.figli-col-hover {
box-shadow: inset 0 0 0 9999px var(--figli-col-hover);
}
#figli-home-app .figli-badge {
display: inline-block;
padding: 0.1rem 0.45rem;
@@ -187,6 +198,32 @@ html.gin--dark-mode #figli-home-app {
font-size: 0.75rem;
}
#figli-home-app td.actions-col,
#figli-home-app th.actions-col {
width: 1%;
text-align: center;
}
#figli-home-app .figli-edit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: var(--figli-text-light);
cursor: pointer;
}
#figli-home-app .figli-edit-btn:hover {
background: var(--figli-bg-alt);
border-color: var(--figli-border);
color: var(--figli-text);
}
#figli-home-app .figli-error {
background: #fde8e8;
border: 1px solid #f4a3a3;