feat: panneaux sticky + boutons close ✕
CI / lint (push) Successful in 16s
CI / security (push) Successful in 9s
CI / test (push) Successful in 17s
CI / build (push) Successful in 16s

This commit is contained in:
2026-05-30 08:00:50 -04:00
parent de9f4b0bb5
commit a8131a4285
2 changed files with 25 additions and 12 deletions
+8 -4
View File
@@ -724,11 +724,15 @@
</div>
<div class="editor-body" style="flex:1;overflow:hidden;position:relative;padding:0">
<canvas id="graph-canvas" style="width:100%;height:100%;cursor:grab"></canvas>
<!-- Info panel: top-right, shows on hover -->
<div id="graph-info-panel" style="display:none;position:absolute;top:10px;right:10px;max-width:320px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:12px 14px;font-size:0.78rem;color:var(--text-primary);z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.4);pointer-events:none">
<!-- Info panel: top-right, shows on hover, stays until closed -->
<div id="graph-info-panel" style="display:none;position:absolute;top:10px;right:10px;max-width:320px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:12px 14px;font-size:0.78rem;color:var(--text-primary);z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.4)">
<button id="graph-info-close" style="position:absolute;top:6px;right:8px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;line-height:1;padding:2px" title="Fermer">✕</button>
<div id="graph-info-content"></div>
</div>
<!-- Preview panel: right sidebar, full height, shows on Ctrl+hover -->
<div id="graph-preview-panel" style="display:none;position:absolute;top:0;right:0;width:380px;height:100%;background:var(--bg-primary);border-left:1px solid var(--border-color);z-index:9;overflow-y:auto;padding:16px;font-size:0.8rem;color:var(--text-primary);box-shadow:-4px 0 16px rgba(0,0,0,0.3)">
<!-- Preview panel: right sidebar, full height, shows on Ctrl+hover, stays until closed -->
<div id="graph-preview-panel" style="display:none;position:absolute;top:0;right:0;width:380px;height:100%;background:var(--bg-primary);border-left:1px solid var(--border-color);z-index:9;overflow-y:auto;font-size:0.8rem;color:var(--text-primary);box-shadow:-4px 0 16px rgba(0,0,0,0.3)">
<button id="graph-preview-close" style="position:sticky;top:0;float:right;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-muted);cursor:pointer;font-size:0.9rem;padding:2px 8px;z-index:1;margin-bottom:-24px" title="Fermer">✕ Fermer</button>
<div id="graph-preview-content" style="padding:16px;padding-top:8px"></div>
</div>
<!-- Status bar + legend -->
<div style="position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:4px 12px;background:var(--bg-primary);border-top:1px solid var(--border-color);font-size:0.7rem;color:var(--text-muted)">