Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Make the screen editor's properties panel use native Bulma elements, not just Bulma-styled buttons

Browse Source 
The element header/rename/id row, tabs list, position & size grid, and — most importantly — the generic control-rendering loop (used by every widget's properties panel: text, color, slider, checkbox, align, select...) now emit real field/control/label/select/checkbox/buttons-has-addons Bulma markup instead of the old custom controlRow/sliderRow/alignGroup/posGrid CSS. Removed the now-redundant custom CSS those classes used to carry.

Verified structurally safe: bindPropsAutosave/submitPropsForm already used querySelectorAll/FormData (structure-agnostic), so wrapping inputs in field/control divs doesn't affect autosave; the one sibling-dependent bit (slider oninput reading nextElementSibling) was kept adjacent inside its wrapper. Confirmed end-to-end with a live save round-trip through the actual route (Bulma modifier + free-style values both persist correctly) and every widget type's panel still renders 200 OK.

The flow-graph node editor (bottom panel) is not converted yet — part of its markup is built dynamically in JS (renderFlowConditionClauses), so reskinning it means updating the JS templates in lockstep with the HTML, which is more work/risk than this pass; noting it as the next piece.
This commit is contained in:
william
2026-08-24 13:30:17 +02:00
parent 25a331830b
commit 8da5715e5b
2 changed files with 123 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+6 -14
View File
@@ -284,23 +284,15 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
.containerContentGroup{ border-color:#3d6b3d; background:#152015; }
.containerContentGroup > summary{ color:#8fd98f; }
.posGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-bottom:14px; }
.posGrid label{ font-size:11px; color:var(--text-dim); display:flex; flex-direction:column; gap:4px; }
.posGrid input{ background:var(--panel2); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:6px 8px; }
/* .posGrid/.controlRow/.sizeField/.sliderRow/.alignGroup : Bulma fournit
déjà la mise en page (columns/field/control/buttons has-addons, voir
screen_edit.html) — ce qui reste ici n'est que ce que Bulma ne fournit
pas nativement : l'espacement propre à un curseur (slider) et son
pastille de valeur affichée à côté. */
.posGrid input:disabled{ opacity:0.4; cursor:not-allowed; }
.sizeField{ display:flex; gap:4px; }
.sizeField input{ flex:1; min-width:0; }
.sizeField select{ width:auto; flex:0 0 auto; padding:6px 4px; }
.controlRow{ margin-bottom:12px; }
.controlRow > label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px; }
.sliderRow{ display:flex; align-items:center; gap:10px; }
.sliderRow input[type=range]{ flex:1; }
.sliderValue{ font-size:12px; color:var(--text-dim); min-width:44px; text-align:right; }
.alignGroup{ display:flex; gap:6px; }
.alignOption{ flex:1; text-align:center; padding:8px 0; border:1px solid var(--border); border-radius:6px; cursor:pointer; }
.alignOption input{ display:none; }
.alignOption.active{ border-color:var(--accent); background:rgba(91,140,255,.15); }
.sliderValue{ min-width:44px; text-align:right; }
input[type=color]{ width:52px; height:34px; padding:2px; }
.propsPanel .sectionDivider, .builderPanelRight .sectionDivider{ border:none; border-top:1px solid var(--border); margin:14px 0; }