Add collapsible sidebar panels, vault quick-select dropdown, help modal, and vault focus feature with improved navigation UX
This commit is contained in:
+76
-6
@@ -102,6 +102,14 @@
|
||||
<span id="theme-label">Clair</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="menu-divider"></div>
|
||||
<div class="menu-section">
|
||||
<div class="menu-label">Aide</div>
|
||||
<button class="menu-theme-btn" id="help-open-btn">
|
||||
<i data-lucide="circle-help" style="width:16px;height:16px"></i>
|
||||
<span>Ouvrir l'aide</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,16 +130,32 @@
|
||||
</div>
|
||||
|
||||
<div class="sidebar-tree" id="sidebar-tree">
|
||||
<div class="sidebar-section-title">Vaults</div>
|
||||
<div id="vault-tree"></div>
|
||||
<div class="sidebar-quick-select">
|
||||
<label class="sr-only" for="vault-quick-select">Sélection rapide des vaults</label>
|
||||
<select id="vault-quick-select" class="menu-select sidebar-quick-select-control">
|
||||
<option value="all">Tous les vaults</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="sidebar-panel-toggle" id="vault-panel-toggle" type="button" aria-expanded="true" aria-controls="vault-panel-content">
|
||||
<span class="sidebar-section-title">Vaults</span>
|
||||
<i data-lucide="chevron-down" style="width:16px;height:16px"></i>
|
||||
</button>
|
||||
<div class="sidebar-panel-content" id="vault-panel-content">
|
||||
<div id="vault-tree"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tag resize handle -->
|
||||
<div class="tag-resize-handle" id="tag-resize-handle"></div>
|
||||
|
||||
<div class="tag-cloud-section" id="tag-cloud-section">
|
||||
<div class="tag-cloud-title">Tags</div>
|
||||
<div class="tag-cloud" id="tag-cloud"></div>
|
||||
<button class="sidebar-panel-toggle" id="tag-panel-toggle" type="button" aria-expanded="true" aria-controls="tag-panel-content">
|
||||
<span class="tag-cloud-title">Tags</span>
|
||||
<i data-lucide="chevron-down" style="width:16px;height:16px"></i>
|
||||
</button>
|
||||
<div class="sidebar-panel-content" id="tag-panel-content">
|
||||
<div class="tag-cloud" id="tag-cloud"></div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -171,6 +195,52 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help Modal -->
|
||||
<div class="editor-modal" id="help-modal">
|
||||
<div class="editor-container help-container">
|
||||
<div class="editor-header">
|
||||
<div class="editor-title" id="help-title">Aide ObsiGate</div>
|
||||
<div class="editor-actions">
|
||||
<button class="editor-btn" id="help-close" title="Fermer l'aide" aria-label="Fermer l'aide">
|
||||
<i data-lucide="x" style="width:16px;height:16px"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-body help-body" id="help-body">
|
||||
<div class="help-content">
|
||||
<h1>Guide d'utilisation</h1>
|
||||
<p>ObsiGate vous permet d'explorer vos notes, de naviguer rapidement entre les vaults et d'utiliser les tags pour filtrer ou retrouver vos contenus.</p>
|
||||
|
||||
<h2>Présentation générale de l'interface</h2>
|
||||
<p>L'application est organisée autour de trois zones principales : l'en-tête avec la recherche et les options, la barre latérale avec les vaults et les tags, et la zone centrale pour consulter, rechercher et modifier les fichiers.</p>
|
||||
|
||||
<h2>Sections principales</h2>
|
||||
<h3>Vaults</h3>
|
||||
<p>La section Vaults regroupe les espaces suivants : Recettes, IT, Main, Workout, Sessions et Bruno. Vous pouvez ouvrir un vault pour explorer son arborescence, puis sélectionner un fichier pour l'afficher.</p>
|
||||
<h3>Tags</h3>
|
||||
<p>La section Tags affiche les étiquettes disponibles comme <code>#serveur</code>, <code>#TDM</code>, <code>#local</code>, <code>#linux</code>, <code>#debian</code>, <code>#docker</code>, <code>#None</code>, <code>#documentation</code>, <code>#network</code>, <code>#fiche-equipement</code>, <code>#fiche-infra</code>, <code>#fiche-reseau</code>, <code>#ssh</code> et <code>#bruno</code>. Cliquez sur un tag pour lancer un filtrage rapide.</p>
|
||||
|
||||
<h2>Éléments interactifs</h2>
|
||||
<h3>Sélection rapide des vaults</h3>
|
||||
<p>Le menu déroulant en haut de l'arborescence vous permet de vous focaliser instantanément sur un vault précis ou de revenir à l'affichage global avec <code>Tous les vaults</code>.</p>
|
||||
<h3>Panneaux réductibles</h3>
|
||||
<p>Les sections Vaults et Tags peuvent être réduites ou développées depuis leur en-tête pour gagner de l'espace dans la barre latérale.</p>
|
||||
|
||||
<h2>Actions courantes</h2>
|
||||
<h3>Créer ou modifier</h3>
|
||||
<p>Ouvrez un fichier puis utilisez l'action d'édition pour modifier son contenu. Le mode source et la sauvegarde sont accessibles depuis la zone de lecture.</p>
|
||||
<h3>Rechercher</h3>
|
||||
<p>Utilisez la barre de recherche en haut pour retrouver des notes par texte. Vous pouvez combiner la recherche avec un vault sélectionné et un ou plusieurs tags.</p>
|
||||
<h3>Naviguer</h3>
|
||||
<p>Dépliez les dossiers et vaults dans la barre latérale, ou utilisez directement la sélection rapide pour aller au bon contexte plus vite.</p>
|
||||
|
||||
<h2>Astuces</h2>
|
||||
<p>Le thème clair/sombre est disponible dans le menu Options. Vous pouvez aussi redimensionner la barre latérale et la zone des tags sur desktop pour adapter l'affichage à votre usage.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user