Projets/ObsiGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: header graph 2 lignes responsives — titre flexible + recherche dédiée
All checks were successful
CI / lint (push) Successful in 14s
Details
CI / security (push) Successful in 7s
Details
CI / test (push) Successful in 16s
Details
CI / build (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Bruno Charest 2026-05-30 08:48:35 -04:00
parent 14192f67d7
commit ca84bfdf11
1 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/index.html
View File

@ -700,30 +700,32 @@
<!-- Graph View Modal -->
<div class="editor-modal" id="graph-modal">
<div class="editor-container" style="max-width:95vw;width:1000px;height:85vh;display:flex;flex-direction:column;">
<!-- Header: 3 zones — titre | recherche | contrôles -->
<div class="editor-header" style="display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--border-color)">
<div class="editor-title" id="graph-title" style="font-weight:600;font-size:0.9rem;white-space:nowrap;flex-shrink:0;min-width:0;overflow:hidden;text-overflow:ellipsis">Vue Graphique</div>
<button class="editor-btn" id="graph-nav-back" title="Retour" style="font-size:0.75rem;padding:2px 4px;opacity:0.5;flex-shrink:0" disabled>←</button>
<button class="editor-btn" id="graph-nav-fwd" title="Avancer" style="font-size:0.75rem;padding:2px 4px;opacity:0.5;flex-shrink:0" disabled>→</button>
<button class="editor-btn" id="graph-nav-up" title="Dossier parent" style="font-size:0.7rem;padding:2px 6px;flex-shrink:0;display:none">↑ Parent</button>
<div style="flex:1;display:flex;justify-content:center">
<div style="position:relative;width:100%;max-width:400px">
<!-- Header: 2 lignes — nav+titre+contrôles | recherche -->
<div class="editor-header" style="display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border-color)">
<!-- Line 1: nav + title + controls -->
<div style="display:flex;align-items:center;gap:6px;min-width:0">
<button class="editor-btn" id="graph-nav-back" title="Retour" style="font-size:0.75rem;padding:2px 4px;opacity:0.3;flex-shrink:0;min-width:22px" disabled>←</button>
<button class="editor-btn" id="graph-nav-fwd" title="Avancer" style="font-size:0.75rem;padding:2px 4px;opacity:0.3;flex-shrink:0;min-width:22px" disabled>→</button>
<button class="editor-btn" id="graph-nav-up" title="Dossier parent" style="font-size:0.65rem;padding:2px 5px;flex-shrink:0;display:none">↑</button>
<div class="editor-title" id="graph-title" style="font-weight:600;font-size:0.85rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Vue Graphique</div>
<button class="editor-btn" id="graph-full-vault" title="Vue complète du vault" style="font-size:0.65rem;padding:3px 6px;flex-shrink:0">🌐 Tout</button>
<span style="font-size:0.6rem;color:var(--text-muted);flex-shrink:0">Prof.</span>
<input type="range" id="graph-depth" min="0" max="3" value="1" style="width:40px;flex-shrink:0" title="Profondeur">
<button class="editor-btn" id="graph-zoom-out" title="Zoom arrière" style="flex-shrink:0"><i data-lucide="zoom-out" style="width:14px;height:14px"></i></button>
<button class="editor-btn" id="graph-zoom-in" title="Zoom avant" style="flex-shrink:0"><i data-lucide="zoom-in" style="width:14px;height:14px"></i></button>
<button class="editor-btn" id="graph-reset" title="Réinitialiser" style="flex-shrink:0"><i data-lucide="maximize" style="width:14px;height:14px"></i></button>
<button class="editor-btn" id="graph-export" title="Exporter PNG" style="flex-shrink:0"><i data-lucide="download" style="width:14px;height:14px"></i></button>
<button class="editor-btn" id="graph-fullscreen" title="Plein écran" style="flex-shrink:0"><i data-lucide="expand" style="width:14px;height:14px"></i></button>
<button class="editor-btn" id="graph-close" title="Fermer" style="flex-shrink:0"><i data-lucide="x" style="width:15px;height:15px"></i></button>
</div>
<!-- Line 2: centered search -->
<div style="display:flex;justify-content:center">
<div style="position:relative;width:100%;max-width:450px">
<i data-lucide="search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-muted);pointer-events:none"></i>
<input type="text" id="graph-search" placeholder="Rechercher ou #tag..." style="width:100%;font-size:0.8rem;padding:6px 12px 6px 32px;border-radius:8px;border:none;background:var(--bg-secondary);color:var(--text-primary);outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)">
<span style="position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:0.6rem;color:var(--text-muted);opacity:0.5;pointer-events:none">Ctrl+survol</span>
<input type="text" id="graph-search" placeholder="Rechercher ou #tag..." style="width:100%;font-size:0.78rem;padding:5px 12px 5px 30px;border-radius:8px;border:none;background:var(--bg-secondary);color:var(--text-primary);outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)">
<span style="position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:0.6rem;color:var(--text-muted);opacity:0.4;pointer-events:none">Ctrl+survol</span>
</div>
</div>
<div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
<button class="editor-btn" id="graph-full-vault" title="Vue complète du vault" style="font-size:0.7rem;padding:4px 8px">🌐 Tout</button>
<span style="font-size:0.65rem;color:var(--text-muted);margin:0 2px">Prof.</span>
<input type="range" id="graph-depth" min="0" max="3" value="1" style="width:50px" title="Profondeur">
<button class="editor-btn" id="graph-zoom-out" title="Zoom arrière"><i data-lucide="zoom-out" style="width:15px;height:15px"></i></button>
<button class="editor-btn" id="graph-zoom-in" title="Zoom avant"><i data-lucide="zoom-in" style="width:15px;height:15px"></i></button>
<button class="editor-btn" id="graph-reset" title="Réinitialiser"><i data-lucide="maximize" style="width:15px;height:15px"></i></button>
<button class="editor-btn" id="graph-export" title="Exporter PNG"><i data-lucide="download" style="width:15px;height:15px"></i></button>
<button class="editor-btn" id="graph-fullscreen" title="Plein écran"><i data-lucide="expand" style="width:15px;height:15px"></i></button>
<button class="editor-btn" id="graph-close" title="Fermer"><i data-lucide="x" style="width:16px;height:16px"></i></button>
</div>
</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>