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 floating, draggable, and closable

Browse Source 
The right-hand properties panel was a fixed 320px flex column, permanently shrinking the canvas — on a screen with real content (tabs, gauges), this made the editor's preview visibly narrower than the actual /play rendering, to the point of wrapping tab labels differently. It's now position:fixed with a drag handle header, moved out of .builder3's flex flow so .builderCanvasArea automatically reclaims the space; closing it (✕, replaced by a small "⚙️ Propriétés" reopen button) frees the full width for a more faithful preview. Position and open/closed state persist per screen in localStorage and get reapplied after every selection change (which replaces #builder3 wholesale). Falls back to a normal stacked column below 1300px width, where a floating panel wouldn't fit usefully.
This commit is contained in:
william
2026-08-24 15:12:50 +02:00
parent a7518355ed
commit 03ca2723c5
2 changed files with 127 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+32 -2
View File
@@ -151,9 +151,33 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
disponible), avec leur propre défilement interne si leur contenu dépasse. */
.builder3{ display:flex; gap:20px; align-items:stretch; margin-top:14px; flex:1 1 auto; min-height:0; }
.builderPanel{ flex:0 0 260px; min-width:0; height:100%; overflow-y:auto; }
.builderPanelRight{ flex:0 0 320px; min-width:0; height:100%; overflow-y:auto; }
.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow-y:auto; display:flex; flex-direction:column; }
/* ---------- Panneau de propriétés flottant ---------- */
/* Sorti du flux flex de .builder3 (position:fixed) : .builderCanvasArea
(flex:1 1 auto) récupère automatiquement l'espace libéré, sans réglage
supplémentaire — un panneau flottant repositionné par l'utilisateur
n'agrandit/ne rétrécit donc jamais le canevas de travers. Position et
état ouvert/fermé mémorisés par écran (voir restorePropsPanelState dans
screen_edit.html) pour survivre à un changement de sélection ou un
rechargement. */
.builderPanelRight{
position:fixed; top:90px; right:24px; width:340px; max-height:calc(100vh - 120px);
min-width:0; display:flex; flex-direction:column; z-index:60;
background:var(--panel); border:1px solid var(--border); border-radius:10px;
box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.builderPanelRight.hidden{ display:none; }
.propsPanelHeader{
display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:8px 10px; border-bottom:1px solid var(--border); background:var(--panel2);
border-radius:10px 10px 0 0; cursor:move; flex:0 0 auto; user-select:none;
}
.propsPanelHeader .propsPanelTitle{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.propsPanelBody{ padding:12px; overflow-y:auto; min-height:0; flex:1 1 auto; }
#propsPanelReopenBtn{ position:fixed; top:90px; right:24px; z-index:60; display:none; }
#propsPanelReopenBtn.visible{ display:inline-flex; }
.widgetGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.widgetBtnForm{ margin:0; }
.widgetBtn{
@@ -306,7 +330,13 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p
body.builderBody{ height:auto; overflow:visible; }
body.builderBody > main.content{ overflow:visible; }
.builder3{ flex-direction:column; flex:none; }
.builderPanel, .builderPanelRight, .builderCanvasArea{ flex:none; width:100%; height:auto; max-height:none; overflow:visible; }
.builderPanel, .builderCanvasArea{ flex:none; width:100%; height:auto; max-height:none; overflow:visible; }
/* Trop peu de largeur pour qu'un panneau flottant ait un sens (il
couvrirait tout l'écran) : il rejoint la pile normale comme les deux
autres colonnes, redimensionnement/déplacement désactivés (voir le
garde useFloatingPanel() dans screen_edit.html). */
.builderPanelRight{ position:static; flex:none; width:100%; height:auto; max-height:none; box-shadow:none; top:auto; right:auto; }
#propsPanelReopenBtn{ display:none !important; }
}
/* ---------- Logique de la scène : éditeur de flow à nœuds ---------- */