Bruno Charest
ee3085ce38
- Integrated Unsplash API for image search functionality with environment configuration - Added new Nimbus Editor page component with navigation from sidebar and mobile drawer - Enhanced TOC with highlight animation for editor heading navigation - Improved CDK overlay z-index hierarchy for proper menu layering - Removed obsolete logging validation script
175 lines
4.8 KiB
Markdown
175 lines
4.8 KiB
Markdown
# Redesign de l'Interface Éditeur Nimbus
|
||
|
||
## 📋 Résumé des changements
|
||
|
||
Cette mise à jour refait complètement l'interface utilisateur de l'éditeur Nimbus pour offrir une expérience plus moderne et intuitive, inspirée des meilleurs éditeurs de blocs.
|
||
|
||
## ✨ Nouvelles fonctionnalités
|
||
|
||
### 1. Barre de commande rapide (Editor Toolbar)
|
||
|
||
Remplace le simple placeholder texte par une barre interactive avec:
|
||
- **Placeholder**: "Start writing or type '/' or '@'"
|
||
- **Icônes rapides d'accès**:
|
||
- ✨ Use AI
|
||
- ☑️ Checkbox list
|
||
- 1️⃣ Numbered list
|
||
- • Bullet list
|
||
- ⊞ Table
|
||
- 🖼️ Image
|
||
- 📎 File
|
||
- 🗒️ New Page
|
||
- H<sub>M</sub> Heading 2
|
||
- ⬇️ More items (ouvre le menu)
|
||
|
||
**Fichier**: `src/app/editor/components/toolbar/editor-toolbar.component.ts`
|
||
|
||
### 2. Menu contextuel unifié "Add Block"
|
||
|
||
Nouveau menu avec:
|
||
- **Sections organisées**:
|
||
- BASIC
|
||
- ADVANCED
|
||
- MEDIA
|
||
- INTEGRATIONS
|
||
- VIEW
|
||
- TEMPLATES
|
||
- HELPFUL LINKS
|
||
|
||
- **Fonctionnalités**:
|
||
- Headers de sections sticky lors du scroll
|
||
- Recherche par mot-clé
|
||
- Badge "New" pour nouveaux items
|
||
- Raccourcis clavier affichés
|
||
- Design moderne avec backdrop blur
|
||
|
||
**Fichier**: `src/app/editor/components/palette/block-menu.component.ts`
|
||
|
||
### 3. Nouveaux types de blocs
|
||
|
||
Ajout de 14 nouveaux types de blocs:
|
||
- `link` - Hyperliens
|
||
- `audio` - Enregistrement audio
|
||
- `video` - Enregistrement vidéo
|
||
- `bookmark` - Signets web
|
||
- `unsplash` - Photos gratuites
|
||
- `task-list` - Gestion de tâches avancée
|
||
- `link-page` - Lier à une page
|
||
- `date` - Insertion de date
|
||
- `mention` - Mentionner un membre
|
||
- `collapsible` - Sections repliables (3 tailles)
|
||
- `columns` - Disposition en colonnes
|
||
- `database` - Vue base de données
|
||
- `template` - Templates prédéfinis
|
||
|
||
**Fichier**: `src/app/editor/core/constants/palette-items.ts`
|
||
|
||
## 🎨 Design
|
||
|
||
### Palette de couleurs
|
||
- Fond menu: `bg-neutral-900/95` avec `backdrop-blur-md`
|
||
- Headers sticky: `bg-neutral-900/90` avec `backdrop-blur-md`
|
||
- Hover items: `bg-neutral-800/80`
|
||
- Selection: `bg-purple-600`
|
||
- Bordures: `border-neutral-700`
|
||
|
||
### Typographie
|
||
- Headers de section: `text-xs uppercase tracking-wide`
|
||
- Labels: `font-medium text-gray-200`
|
||
- Descriptions: `text-xs text-gray-400`
|
||
- Raccourcis: `font-mono bg-neutral-700`
|
||
|
||
## 🔧 Intégration
|
||
|
||
### Déclenchement du menu
|
||
|
||
Le menu "Add Block" peut être ouvert de 3 façons:
|
||
1. Clic sur bouton "+ Add block"
|
||
2. Clic sur l'icône flèche vers le bas (⬇️) dans la toolbar
|
||
3. Frappe du caractère "/" dans l'éditeur
|
||
|
||
### Workflow utilisateur
|
||
|
||
```
|
||
Utilisateur tape "/"
|
||
↓
|
||
Menu s'ouvre avec toutes les sections
|
||
↓
|
||
Utilisateur peut:
|
||
- Scroller (headers restent sticky)
|
||
- Chercher par mot-clé
|
||
- Cliquer sur un item
|
||
↓
|
||
Bloc est inséré dans l'éditeur
|
||
```
|
||
|
||
## 📁 Fichiers modifiés
|
||
|
||
### Nouveaux fichiers
|
||
- `src/app/editor/components/toolbar/editor-toolbar.component.ts`
|
||
- `src/app/editor/components/palette/block-menu.component.ts`
|
||
|
||
### Fichiers modifiés
|
||
- `src/app/editor/core/models/block.model.ts` - Ajout nouveaux BlockType
|
||
- `src/app/editor/core/constants/palette-items.ts` - Nouvelles catégories et items
|
||
- `src/app/editor/components/editor-shell/editor-shell.component.ts` - Intégration toolbar et menu
|
||
|
||
## 🧪 Test
|
||
|
||
### Vérifications à effectuer
|
||
|
||
1. **Barre de commande**:
|
||
- [ ] Placeholder s'affiche correctement
|
||
- [ ] Toutes les icônes sont visibles
|
||
- [ ] Hover fonctionne sur chaque icône
|
||
- [ ] Clic sur icône insère le bon type de bloc
|
||
- [ ] Clic sur "⬇️" ouvre le menu
|
||
|
||
2. **Menu contextuel**:
|
||
- [ ] S'ouvre avec "/" ou bouton "+ Add block" ou "⬇️"
|
||
- [ ] Toutes les sections sont présentes
|
||
- [ ] Headers restent sticky au scroll
|
||
- [ ] Recherche filtre correctement
|
||
- [ ] Badge "New" apparaît sur les bons items
|
||
- [ ] Raccourcis clavier affichés
|
||
- [ ] Clic sur item insère le bloc
|
||
|
||
3. **UX globale**:
|
||
- [ ] Transitions fluides
|
||
- [ ] Fermeture du menu sur clic extérieur
|
||
- [ ] Navigation clavier (↑↓ Enter Escape)
|
||
- [ ] Responsive sur mobile
|
||
|
||
## 🚀 Prochaines étapes
|
||
|
||
1. Implémenter les nouveaux types de blocs (audio, video, etc.)
|
||
2. Ajouter l'intégration AI pour le bouton "Use AI"
|
||
3. Créer les templates prédéfinis
|
||
4. Ajouter les animations d'apparition/disparition
|
||
5. Optimiser les performances pour grandes listes
|
||
|
||
## 💡 Notes techniques
|
||
|
||
### Sticky headers
|
||
Les headers de section utilisent `position: sticky` avec `top: 0` et `z-index: 10` pour rester visibles lors du scroll.
|
||
|
||
### Backdrop blur
|
||
L'effet de flou utilise `backdrop-filter: blur()` avec fallback pour navigateurs non supportés.
|
||
|
||
### Recherche
|
||
La recherche filtre en temps réel par:
|
||
- Label du bloc
|
||
- Description
|
||
- Mots-clés (keywords)
|
||
|
||
### Accessibilité
|
||
- Tous les boutons ont des attributs `title`
|
||
- Navigation clavier complète
|
||
- Focus visible sur items sélectionnés
|
||
|
||
---
|
||
|
||
**Date**: 6 novembre 2025
|
||
**Auteur**: Nimbus Team
|
||
**Version**: 2.0
|