Make Jauge, Onglets, and every form-field widget real native Bulma elements
- Jauge now renders a real <progress class="progress"> instead of a hand-built pair of absolutely-positioned divs. The bas/haut color interpolation still works, set via Bulma's own --bulma-progress-value-background-color CSS custom property rather than fighting the class. - Onglets' tab strip is now genuine Bulma tabs markup (tabs > ul > li, is-active on the li) instead of custom forgeTabBar/forgeTabBtn classes; forgeShowTab (duplicated in screen_edit.html and play.html) now toggles is-active to match. - Champ texte/email/mot de passe get class="input", Zone de texte gets class="textarea", Case à cocher/Bouton radio's existing <label> wrapper gets class="checkbox"/"radio" (Bulma's own convention — the structure already matched, just needed the class), Liste déroulante is wrapped in Bulma's required <div class="select"> (a bare class on the <select> itself has zero effect in Bulma), Tableau gets class="table is-bordered is-fullwidth" with the per-cell inline borders removed so Bulma's own table styling applies. - Removed the now-dead .forgeTabBar/.forgeTabBtn CSS. Updated tests/test_jauge.py and tests/test_onglets_widget.py assertions to match the new markup (value="X" attribute instead of width:X% inline style, --bulma-progress-value-background-color instead of background-color, forgeShowTab(this) marker instead of the removed forgeTabBtn class) — same behavior, different rendering mechanism. Full suite green (89 passed), verified end to end against the real "test" project via the actual /play route.
This commit is contained in:
@@ -127,14 +127,21 @@ def _render_jauge(el, meta, slug, children_map=None, ctx=None, parent_flex_direc
|
||||
f'color:#e8eaf0; text-align:{text_align};">{html_lib.escape(str(nom_value))}</div>'
|
||||
)
|
||||
|
||||
# La classe "jaugeBar" est repérée côté client (play.html, refreshRuntimeData)
|
||||
# pour savoir que ce wrapper doit être régénéré après toute action
|
||||
# "Modifier une donnée" — sinon la jauge resterait figée sur sa valeur
|
||||
# de départ après un changement, exactement comme il fallait déjà
|
||||
# repérer "repeaterItem" pour les Répéteurs (voir 1.1/1.2).
|
||||
# Vraie balise <progress> Bulma ("class=progress") plutôt qu'une barre
|
||||
# maison faite de <div> positionnés — la couleur dégradée bas/haut (voir
|
||||
# _interpolate_color ci-dessus) reste possible nativement : Bulma pilote
|
||||
# justement le remplissage via la variable CSS --bulma-progress-value-
|
||||
# background-color, qu'on peut fixer en ligne à la couleur calculée sans
|
||||
# sortir du système de classes de Bulma. La classe "jaugeBar" est
|
||||
# repérée côté client (play.html, refreshRuntimeData) pour savoir que
|
||||
# cette balise doit être régénérée après toute action "Modifier une
|
||||
# donnée" — sinon la jauge resterait figée sur sa valeur de départ après
|
||||
# un changement, exactement comme il fallait déjà repérer "repeaterItem"
|
||||
# pour les Répéteurs (voir 1.1/1.2).
|
||||
bar = (
|
||||
f'<div class="jaugeBar" style="position:absolute; left:0; top:0; bottom:0; width:{percent}%; '
|
||||
f'background-color:{fill_color}; transition:width .3s ease, background-color .3s ease;"></div>'
|
||||
f'<progress class="progress jaugeBar" value="{percent}" max="100" '
|
||||
f'style="--bulma-progress-value-background-color:{fill_color}; --bulma-progress-bar-background-color:#1c2130; '
|
||||
f'margin:0; border-radius:6px; transition:background-color .3s ease;">{percent}%</progress>'
|
||||
)
|
||||
# min-height (pas 0) : un élément posé DANS un conteneur a une hauteur
|
||||
# "auto" par défaut (voir _style_string) — "flex:1 1 auto" seul n'a
|
||||
@@ -145,7 +152,7 @@ def _render_jauge(el, meta, slug, children_map=None, ctx=None, parent_flex_direc
|
||||
# l'élément a une vraie hauteur (posé directement sur un écran, ou
|
||||
# hauteur fixée via "Position & taille").
|
||||
bar_wrap = (
|
||||
f'<div style="position:relative; overflow:hidden; background:#1c2130; border-radius:6px; '
|
||||
f'<div style="position:relative; display:flex; align-items:center; '
|
||||
f'flex:1 1 auto; min-height:14px;">{bar}{label_html}</div>'
|
||||
)
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user