Répartition assistée sur le formulaire + widget compacté
- ledger-form.js : nouveau behavior figliLedgerRepartition -- pré-remplit les montants de répartition (1re ligne = HT entier, chaque ajout partage au centime avec report du reste sur les lignes suivantes), valeurs saisies manuellement ou chargées de la base « figées » (plus jamais déplacées), écart en direct dans la cellule de titre du widget (miroir exact du round(HT − somme, 2) et de la tolérance 0,01 du presave). Zéro changement PHP : #validate et node_presave() restent l'autorité. Les verrous vivent hors du DOM (survie aux re-rendus AJAX du widget) ; la détection manuel/assist repose sur le fait qu'une écriture programmatique ne déclenche pas d'événement input. - ledger-form.css : compactage du widget -- titre « Répartition » par ligne, bouton Collapse et colonne Order masqués, paragraph-top en absolu (coin haut-droit, zéro hauteur), une seule ligne par répartition « Compte [input] Montant (€) [input] » où l'input du Compte est contraint en pourcentage de son wrapper claro-autocomplete (size=60 : il débordait sur le libellé Montant), header réordonné titre / écart / menu trois-points, inputs visibles au repos (--flform-bg, atténué en mode sombre), marqueur « figé ». - install : update_8015 (features du widget vidées) puis update_8016 (collapse_edit_all rétabli à la demande, duplicate reste off) + settings de l'install fraîche synchronisés.
This commit is contained in:
@@ -20,6 +20,7 @@
|
||||
--flform-border-soft: #e8eaed;
|
||||
--flform-label: #4b5563;
|
||||
--flform-text: #1a1a1a;
|
||||
--flform-bg: #ffffff;
|
||||
--flform-bg-subtle: #f7f8fa;
|
||||
--flform-accent: #2f6f4f;
|
||||
--flform-danger: #b3261e;
|
||||
@@ -43,6 +44,7 @@ html.gin--dark-mode .figli-ledger-form {
|
||||
--flform-border-soft: #333438;
|
||||
--flform-label: #a1a5ab;
|
||||
--flform-text: #e8e9ea;
|
||||
--flform-bg: #3a3b40;
|
||||
--flform-bg-subtle: #2a2b2e;
|
||||
--flform-accent: #5fb98a;
|
||||
--flform-danger: #ff6b6b;
|
||||
@@ -212,10 +214,10 @@ html.gin--dark-mode .figli-ledger-form {
|
||||
}
|
||||
.figli-ledger-form table.field-multiple-table thead th {
|
||||
text-align: left;
|
||||
padding: 0.4rem 0.6rem 0.25rem;
|
||||
padding: 0.3rem 0.5rem 0.2rem;
|
||||
}
|
||||
.figli-ledger-form table.field-multiple-table tbody td {
|
||||
padding: 0.35rem 0.6rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid var(--flform-border-soft);
|
||||
}
|
||||
@@ -224,12 +226,25 @@ html.gin--dark-mode .figli-ledger-form {
|
||||
}
|
||||
.figli-ledger-form .paragraphs-subform {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
gap: 0.5rem;
|
||||
/* Réserve le coin haut-droit (bouton Remove du paragraph-top, en
|
||||
position:absolute) : les inputs ne passent plus dessous et
|
||||
rétrécissent d'autant. */
|
||||
padding-right: 4.4rem;
|
||||
}
|
||||
.figli-ledger-form .paragraphs-subform > .js-form-wrapper {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
/* Le Compte (nom, souvent long) prend une part plus large que le
|
||||
Montant (chiffre court) -- tous deux plus étroits qu'avant, la zone
|
||||
du Remove étant réservée ci-dessus. */
|
||||
.figli-ledger-form .paragraphs-subform > .js-form-wrapper.field--name-field-compte {
|
||||
flex: 1.6;
|
||||
}
|
||||
.figli-ledger-form .paragraphs-subform > .js-form-wrapper.field--name-field-montant {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Buttons: "Ajouter Répartition" / "Add another item", and the per-row
|
||||
Remove/Duplicate/Collapse actions -- all plain Drupal form-submit
|
||||
@@ -249,7 +264,7 @@ html.gin--dark-mode .figli-ledger-form {
|
||||
color: var(--flform-accent);
|
||||
}
|
||||
.figli-ledger-form .field-add-more-submit {
|
||||
margin-top: 0.4rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.figli-ledger-form .paragraphs-dropdown-toggle {
|
||||
border: none;
|
||||
@@ -287,6 +302,164 @@ html.gin--dark-mode .figli-ledger-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==== Répartition : compactage du widget (une ligne = Compte + Montant,
|
||||
rien d'autre) + assist (PLAN-repartition-assistee.md) ==== */
|
||||
|
||||
/* Une ligne de répartition ne doit montrer que ses deux champs. Le
|
||||
titre "Répartition" de chaque ligne est redondant (le titre du champ
|
||||
est déjà en thead), le bouton Collapse n'a pas de sens (edit_mode:
|
||||
open, les lignes sont toujours ouvertes -- et le CSS les masque de
|
||||
toute façon côté JS), et paragraph-info/paragraph-summary sont rendus
|
||||
vides pour ce bundle : chacun coûtait une ligne de bruit vertical. */
|
||||
.figli-ledger-form .field--name-field-repartition .paragraph-type,
|
||||
.figli-ledger-form .field--name-field-repartition .paragraph-info,
|
||||
.figli-ledger-form .field--name-field-repartition .paragraph-summary,
|
||||
.figli-ledger-form .field--name-field-repartition .paragraphs-icon-button-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Le "paragraph-top" ne porte plus que le menu d'actions de la ligne
|
||||
(Remove) : en ABSOLU dans le coin haut-droit de la ligne (td en
|
||||
position:relative), aligné sur le padding horizontal de la cellule --
|
||||
il n'ajoute donc AUCUNE hauteur, la ligne se réduit à ses deux
|
||||
champs. */
|
||||
.figli-ledger-form .field--name-field-repartition tr.paragraph-type--repartition > td {
|
||||
position: relative;
|
||||
/* Aucun padding vertical sur les lignes de répartition (demande
|
||||
explicite) : la hauteur de ligne vient uniquement des champs, le
|
||||
bordure-top reste comme séparateur. */
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.figli-ledger-form .field--name-field-repartition .paragraph-top {
|
||||
position: absolute;
|
||||
top: 0.15rem;
|
||||
right: 0.5rem;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
margin: 0;
|
||||
}
|
||||
.figli-ledger-form .field--name-field-repartition .paragraph-top .paragraphs-actions {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Colonne "Order" (poids des lignes) des tables multi-valeurs : l'ordre
|
||||
ne compte jamais ici (cf. handles de drag déjà masqués plus haut),
|
||||
deux champs de largeur récupérés. */
|
||||
.figli-ledger-form .field-multiple-table thead th:last-child,
|
||||
.figli-ledger-form .field-multiple-table td.delta-order {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Menu "Toggle Actions" du thead : il porte le bouton "Collapse / Edit
|
||||
all" (feature rétablie par update_8016) -- seul le mode "Drag & drop"
|
||||
y est masqué, un réordonnancement sans objet (handles masqués plus
|
||||
haut). Le menu par ligne (Remove) est hors de ce sélecteur. */
|
||||
.figli-ledger-form .field--name-field-repartition thead input[name="field_repartition_dragdrop_mode"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Barre de titre du widget : titre "Répartition" À GAUCHE, écart AU
|
||||
MILIEU, menu trois-points À DROITE (l'ordre DOM est titre, actions,
|
||||
puis l'écart injecté par JS, d'où les order). */
|
||||
.figli-ledger-form .field--name-field-repartition th.field-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.figli-ledger-form .field--name-field-repartition th.field-label h4 {
|
||||
order: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.figli-ledger-form .figli-repartition-ecart {
|
||||
order: 1;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
color: var(--flform-label);
|
||||
}
|
||||
.figli-ledger-form .field--name-field-repartition th.field-label .paragraphs-actions {
|
||||
order: 2;
|
||||
}
|
||||
.figli-ledger-form .figli-repartition-ecart-val {
|
||||
font-weight: 600;
|
||||
}
|
||||
.figli-ledger-form .figli-repartition-ecart.is-ok .figli-repartition-ecart-val {
|
||||
color: var(--flform-accent);
|
||||
}
|
||||
.figli-ledger-form .figli-repartition-ecart.is-ko .figli-repartition-ecart-val {
|
||||
color: var(--flform-danger);
|
||||
}
|
||||
|
||||
/* Une ligne par répartition : "Compte [input] Montant (€) [input]".
|
||||
Le piège : le form-item de Compte n'a PAS l'input pour enfant direct
|
||||
-- claro l'emballe dans div.claro-autocomplete (le Montant, lui, a
|
||||
l'input direct). Sans flex/min-width sur ce wrapper, l'input
|
||||
(size=60) force sa largeur native, pousse le Montant hors de la
|
||||
cellule et les deux champs disparaissent : chaque niveau doit être
|
||||
flex et compressible. */
|
||||
.figli-ledger-form .paragraphs-subform .form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.figli-ledger-form .paragraphs-subform .form-item__label {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.figli-ledger-form .paragraphs-subform .claro-autocomplete {
|
||||
display: block;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* L'input du Compte (size="60", ~420px de largeur intrinsèque) : la
|
||||
chaîne flex/min-width ne suffit pas à le contenir de façon fiable à
|
||||
tous les niveaux -- contrainte dure en pourcentage de son wrapper à
|
||||
la place : physiquement incapable de déborder sur la colonne du
|
||||
Montant, quoi que dise l'attribut size. */
|
||||
.figli-ledger-form .paragraphs-subform .claro-autocomplete input.form-element {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Inputs visibles au repos (fond opaque + bordure franche, les deux
|
||||
modes via --flform-bg) et compressibles. flex:1 s'applique : au
|
||||
Montant comme item direct du form-item, au Compte comme item du
|
||||
claro-autocomplete flex ci-dessus. */
|
||||
.figli-ledger-form .paragraphs-subform input.form-element {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
background: var(--flform-bg);
|
||||
border: 1px solid var(--flform-border);
|
||||
color: var(--flform-text);
|
||||
-webkit-text-fill-color: var(--flform-text);
|
||||
}
|
||||
|
||||
/* Marqueur "figé" (ledger-form.js) : une valeur que l'assist ne
|
||||
touchera plus -- saisie manuelle, ou chargée de la base. En item flex
|
||||
(le form-item est en ligne ci-dessus), il suit l'input ; pointillé =
|
||||
même convention que la référence bancaire, "valeur à regarder, pas à
|
||||
retaper". */
|
||||
.figli-ledger-form .figli-repartition-locked::after {
|
||||
content: "figé";
|
||||
flex: none;
|
||||
align-self: center;
|
||||
font-size: 0.64rem;
|
||||
line-height: 1;
|
||||
padding: 0.16rem 0.28rem;
|
||||
border-radius: 5px;
|
||||
border: 1px dashed var(--flform-border);
|
||||
color: var(--flform-label);
|
||||
}
|
||||
|
||||
/* A répartition row flagged by the sum-mismatch #validate error (see
|
||||
figli_compta_ledger_validate_repartition()) -- kept subtle (a red
|
||||
outline, not a solid fill) to match the same red-liseré convention
|
||||
|
||||
Reference in New Issue
Block a user