Redesign help modal and header dropdown menu with modern card-based UI, enhanced visual hierarchy, and comprehensive user guide sections
This commit is contained in:
+164
-34
@@ -88,27 +88,50 @@
|
||||
<i data-lucide="settings" style="width:18px;height:18px"></i>
|
||||
</button>
|
||||
<div class="header-menu-dropdown" id="header-menu-dropdown">
|
||||
<div class="menu-overview">
|
||||
<div class="menu-overview-badge">⚙️ Réglages rapides</div>
|
||||
<div class="menu-overview-title">Personnalisez votre espace</div>
|
||||
<div class="menu-overview-subtitle">Vault actif, thème et guide d'utilisation en un seul endroit.</div>
|
||||
</div>
|
||||
<div class="menu-section">
|
||||
<div class="menu-label">Vault</div>
|
||||
<select id="vault-filter" class="menu-select">
|
||||
<option value="all">Tous les vaults</option>
|
||||
</select>
|
||||
<div class="menu-field-card">
|
||||
<div class="menu-field-icon">🗂️</div>
|
||||
<div class="menu-field-body">
|
||||
<div class="menu-field-title">Contexte de navigation</div>
|
||||
<select id="vault-filter" class="menu-select">
|
||||
<option value="all">Tous les vaults</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-divider"></div>
|
||||
<div class="menu-section">
|
||||
<div class="menu-label">Thème</div>
|
||||
<button class="menu-theme-btn" id="theme-toggle">
|
||||
<i data-lucide="sun" style="width:16px;height:16px"></i>
|
||||
<span id="theme-label">Clair</span>
|
||||
</button>
|
||||
<div class="menu-field-card">
|
||||
<div class="menu-field-icon">🌗</div>
|
||||
<div class="menu-field-body">
|
||||
<div class="menu-field-title">Apparence</div>
|
||||
<button class="menu-theme-btn" id="theme-toggle">
|
||||
<i data-lucide="sun" style="width:16px;height:16px"></i>
|
||||
<span id="theme-label">Clair</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="menu-field-card">
|
||||
<div class="menu-field-icon">💡</div>
|
||||
<div class="menu-field-body">
|
||||
<div class="menu-field-title">Documentation intégrée</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>
|
||||
</div>
|
||||
@@ -207,34 +230,141 @@
|
||||
</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>
|
||||
<section class="help-hero">
|
||||
<div class="help-hero-copy">
|
||||
<div class="help-kicker">📘 Guide d'utilisation</div>
|
||||
<h1>Bienvenue dans ObsiGate</h1>
|
||||
<p>Explorez vos notes, changez de vault en un clic, filtrez avec les tags et retrouvez immédiatement le bon document grâce à une navigation pensée pour aller vite.</p>
|
||||
<div class="help-badges">
|
||||
<span class="help-badge">⚡ Navigation rapide</span>
|
||||
<span class="help-badge">🗂️ Multi-vault</span>
|
||||
<span class="help-badge">🏷️ Tags intelligents</span>
|
||||
<span class="help-badge">📝 Lecture et édition</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-hero-visual" aria-hidden="true">
|
||||
<div class="help-mini-window">
|
||||
<div class="help-mini-window-bar">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="help-mini-window-body">
|
||||
<div class="help-mini-sidebar"></div>
|
||||
<div class="help-mini-content">
|
||||
<div class="help-mini-line short"></div>
|
||||
<div class="help-mini-line"></div>
|
||||
<div class="help-mini-tags">
|
||||
<span>#docker</span>
|
||||
<span>#infra</span>
|
||||
<span>#linux</span>
|
||||
</div>
|
||||
<div class="help-mini-card"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section class="help-grid">
|
||||
<article class="help-card">
|
||||
<div class="help-card-icon">🔎</div>
|
||||
<h2>Rechercher vite</h2>
|
||||
<p>Utilisez la barre de recherche en haut pour retrouver un mot, un titre ou un contenu dans vos notes.</p>
|
||||
</article>
|
||||
<article class="help-card">
|
||||
<div class="help-card-icon">🗃️</div>
|
||||
<h2>Changer de vault</h2>
|
||||
<p>Le sélecteur de vault vous permet de rester sur <code>Tous les vaults</code> ou de vous concentrer sur un espace précis.</p>
|
||||
</article>
|
||||
<article class="help-card">
|
||||
<div class="help-card-icon">🏷️</div>
|
||||
<h2>Filtrer par tags</h2>
|
||||
<p>Cliquez sur un tag pour affiner les résultats et retrouver rapidement les notes associées.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section class="help-section">
|
||||
<h2>🧭 Comprendre l’interface</h2>
|
||||
<div class="help-feature-list">
|
||||
<div class="help-feature-item">
|
||||
<div class="help-feature-emoji">🧱</div>
|
||||
<div>
|
||||
<h3>En-tête</h3>
|
||||
<p>Il regroupe la recherche globale, le bouton menu des options et l’accès rapide à l’identité de l’application.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-feature-item">
|
||||
<div class="help-feature-emoji">🌲</div>
|
||||
<div>
|
||||
<h3>Sidebar</h3>
|
||||
<p>La barre latérale affiche les vaults, les dossiers, les fichiers et les tags. Elle peut être redimensionnée sur desktop.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-feature-item">
|
||||
<div class="help-feature-emoji">📄</div>
|
||||
<div>
|
||||
<h3>Zone centrale</h3>
|
||||
<p>Elle sert à lire la note, afficher son chemin, voir ses tags et déclencher les actions comme copier, source, télécharger ou éditer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section class="help-section">
|
||||
<h2>🚀 Parcours recommandé</h2>
|
||||
<div class="help-steps">
|
||||
<div class="help-step">
|
||||
<div class="help-step-number">1</div>
|
||||
<div>
|
||||
<h3>Choisissez un contexte</h3>
|
||||
<p>Sélectionnez un vault dans le menu du haut ou dans la sidebar pour réduire le bruit et cibler votre navigation.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-step">
|
||||
<div class="help-step-number">2</div>
|
||||
<div>
|
||||
<h3>Explorez l’arborescence</h3>
|
||||
<p>Dépliez les dossiers, ouvrez une note et utilisez le chemin en haut de page pour revenir visuellement au bon endroit dans la sidebar.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-step">
|
||||
<div class="help-step-number">3</div>
|
||||
<div>
|
||||
<h3>Affinez avec les tags</h3>
|
||||
<p>Ajoutez un ou plusieurs tags pour filtrer vos contenus de façon plus fine et faire émerger les notes pertinentes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section class="help-section">
|
||||
<h2>✨ Actions utiles au quotidien</h2>
|
||||
<div class="help-checklist">
|
||||
<div class="help-check-item"><span>✅</span><p>Basculer entre thème <strong>clair</strong> et <strong>sombre</strong> depuis le menu Options.</p></div>
|
||||
<div class="help-check-item"><span>✅</span><p>Utiliser <code>Tous les vaults</code> pour une vue globale ou cibler un seul vault pour une navigation plus nette.</p></div>
|
||||
<div class="help-check-item"><span>✅</span><p>Cliquer sur un tag dans la note ou dans la sidebar pour lancer un filtrage rapide.</p></div>
|
||||
<div class="help-check-item"><span>✅</span><p>Ouvrir une note puis utiliser <strong>Copier</strong>, <strong>Source</strong>, <strong>Télécharger</strong> ou <strong>Éditer</strong>.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section class="help-section help-tip-panel">
|
||||
<h2>💡 Astuces</h2>
|
||||
<div class="help-tip-grid">
|
||||
<div class="help-tip-card">
|
||||
<h3>Navigation visuelle</h3>
|
||||
<p>Quand vous cliquez sur le chemin d’une note, la sidebar se repositionne automatiquement pour montrer l’élément correspondant.</p>
|
||||
</div>
|
||||
<div class="help-tip-card">
|
||||
<h3>Gestion de l’espace</h3>
|
||||
<p>Réduisez <code>VAULTS</code> ou <code>TAGS</code> pour donner plus d’espace à la section qui vous intéresse le plus.</p>
|
||||
</div>
|
||||
<div class="help-tip-card">
|
||||
<h3>Confort de lecture</h3>
|
||||
<p>Adaptez la largeur de la sidebar et la hauteur de la zone tags sur desktop pour un affichage plus confortable.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user