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
429 lines
12 KiB
Markdown
429 lines
12 KiB
Markdown
# Guide Professionnel - Système de Colonnes et Commentaires
|
|
|
|
## 📋 Vue d'Ensemble
|
|
|
|
Le système de colonnes et commentaires offre une solution professionnelle complète pour organiser le contenu en colonnes multiples avec gestion intégrée des commentaires par bloc.
|
|
|
|
## 🎯 Fonctionnalités Principales
|
|
|
|
### 1. Colonnes Multiples Flexibles
|
|
|
|
**Créer des colonnes:**
|
|
- Drag un bloc vers le **bord gauche** d'un autre → Nouvelle colonne à gauche
|
|
- Drag un bloc vers le **bord droit** d'un autre → Nouvelle colonne à droite
|
|
- Drag vers un bloc columns existant → Ajoute une nouvelle colonne
|
|
- **Support illimité**: 2, 3, 4, 5, 6, 7+ colonnes possibles
|
|
- **Redistribution automatique**: Les largeurs s'ajustent automatiquement
|
|
|
|
**Indicateurs visuels:**
|
|
- **Ligne horizontale** (─) avec flèches → Changement de position normale
|
|
- **Ligne verticale** (│) avec flèches → Création/ajout de colonne
|
|
|
|
### 2. Gestion des Commentaires par Bloc
|
|
|
|
**Chaque bloc dispose de:**
|
|
- ✅ Bouton de commentaires indépendant
|
|
- ✅ Badge avec compteur de commentaires
|
|
- ✅ Interface complète de gestion
|
|
|
|
**Actions disponibles:**
|
|
- Ajouter des commentaires
|
|
- Voir tous les commentaires d'un bloc
|
|
- Résoudre un commentaire
|
|
- Supprimer un commentaire
|
|
- Identifier les auteurs
|
|
|
|
### 3. Menu Contextuel par Bloc
|
|
|
|
**Chaque bloc dans les colonnes a:**
|
|
- ✅ Menu contextuel complet (3 points)
|
|
- ✅ Options de formatage
|
|
- ✅ Actions de bloc (copier, supprimer, etc.)
|
|
|
|
## 💡 Guide d'Utilisation
|
|
|
|
### Créer Votre Premier Layout en Colonnes
|
|
|
|
#### Étape 1: Créer les Blocs
|
|
```
|
|
1. Créer 3 blocs H2:
|
|
- "Colonne 1"
|
|
- "Colonne 2"
|
|
- "Colonne 3"
|
|
```
|
|
|
|
#### Étape 2: Organiser en Colonnes
|
|
```
|
|
1. Drag "Colonne 1" → Bord gauche de "Colonne 2"
|
|
→ Crée 2 colonnes
|
|
|
|
2. Drag "Colonne 3" → Bord droit du bloc columns
|
|
→ Ajoute une 3ème colonne
|
|
|
|
Résultat:
|
|
┌───────────┬───────────┬───────────┐
|
|
│ Colonne 1 │ Colonne 2 │ Colonne 3 │
|
|
└───────────┴───────────┴───────────┘
|
|
```
|
|
|
|
### Ajouter des Commentaires
|
|
|
|
#### Via l'Interface
|
|
|
|
**Méthode 1: Clic sur le Badge**
|
|
```
|
|
1. Hover sur un bloc dans une colonne
|
|
2. Cliquer sur le bouton de commentaires (icône bulle 💬)
|
|
3. Taper votre commentaire dans le champ
|
|
4. Cliquer "Add" ou appuyer sur Enter
|
|
```
|
|
|
|
**Actions disponibles dans le panneau:**
|
|
- ✅ **Marquer comme résolu** - Icône checkmark vert
|
|
- ✅ **Supprimer** - Icône poubelle rouge
|
|
- ✅ **Voir l'historique** - Date et auteur de chaque commentaire
|
|
|
|
#### Via la Console (Pour Tester)
|
|
|
|
**Ajouter des commentaires de test:**
|
|
```javascript
|
|
// Ouvrir la console (F12)
|
|
function addTestComments() {
|
|
const appRoot = document.querySelector('app-root');
|
|
const ngContext = appRoot?.__ngContext__;
|
|
|
|
let commentService = null;
|
|
let documentService = null;
|
|
|
|
// Trouver les services
|
|
for (let i = 0; i < 20; i++) {
|
|
if (ngContext[i]?.commentService) commentService = ngContext[i].commentService;
|
|
if (ngContext[i]?.documentService) documentService = ngContext[i].documentService;
|
|
}
|
|
|
|
if (!commentService || !documentService) {
|
|
console.error('Services not found');
|
|
return;
|
|
}
|
|
|
|
// Ajouter des commentaires
|
|
const blocks = documentService.blocks();
|
|
blocks.slice(0, 5).forEach((block, i) => {
|
|
const count = Math.floor(Math.random() * 3);
|
|
for (let j = 0; j < count; j++) {
|
|
commentService.addComment(
|
|
block.id,
|
|
`Test comment ${j + 1}`,
|
|
`User${i + 1}`
|
|
);
|
|
}
|
|
});
|
|
|
|
console.log('✅ Comments added!');
|
|
}
|
|
|
|
addTestComments();
|
|
```
|
|
|
|
### Utiliser le Menu Contextuel
|
|
|
|
```
|
|
1. Hover sur un bloc dans une colonne
|
|
2. Cliquer sur le bouton menu (⋯)
|
|
3. Sélectionner une option:
|
|
- Changer le type de bloc
|
|
- Modifier le style
|
|
- Copier/Dupliquer
|
|
- Supprimer
|
|
- etc.
|
|
```
|
|
|
|
## 🎨 Apparence et UI
|
|
|
|
### Bloc Normal
|
|
```
|
|
┌─────────────────┐
|
|
│ H2 Content │
|
|
└─────────────────┘
|
|
```
|
|
|
|
### Bloc au Hover
|
|
```
|
|
┌─────────────────┐
|
|
│ ⋯ 💬 │ ← Boutons visibles
|
|
│ H2 Content │
|
|
└─────────────────┘
|
|
```
|
|
|
|
### Bloc avec Commentaires
|
|
```
|
|
┌─────────────────┐
|
|
│ ⋯ 💬 3 │ ← Badge avec compteur
|
|
│ H2 Content │
|
|
└─────────────────┘
|
|
```
|
|
|
|
### Layout 3 Colonnes
|
|
```
|
|
┌─────────┬─────────┬─────────┐
|
|
│⋯ 💬1│⋯ │⋯ 💬2│
|
|
│ H2 │ Para │ H1 │
|
|
│ │ │ │
|
|
└─────────┴─────────┴─────────┘
|
|
33% 33% 33%
|
|
```
|
|
|
|
### Layout 4 Colonnes
|
|
```
|
|
┌──────┬──────┬──────┬──────┐
|
|
│⋯ 💬1│⋯ │⋯ │⋯ 💬3│
|
|
│ H2 │ Para │ H1 │ H2 │
|
|
└──────┴──────┴──────┴──────┘
|
|
25% 25% 25% 25%
|
|
```
|
|
|
|
## 🔧 Fonctionnalités Avancées
|
|
|
|
### Redistribution Automatique des Largeurs
|
|
|
|
**2 Colonnes** → 50% / 50%
|
|
**3 Colonnes** → 33.33% / 33.33% / 33.33%
|
|
**4 Colonnes** → 25% / 25% / 25% / 25%
|
|
**5 Colonnes** → 20% / 20% / 20% / 20% / 20%
|
|
|
|
La redistribution se fait automatiquement lors de l'ajout/suppression de colonnes.
|
|
|
|
### Types de Blocs Supportés
|
|
|
|
Dans les colonnes, vous pouvez utiliser:
|
|
- ✅ **Headings** (H1, H2, H3)
|
|
- ✅ **Paragraphs**
|
|
- ✅ **List Items** (checkboxes, bullets, numbered)
|
|
- ✅ **Code Blocks**
|
|
- ✅ Tous les autres types de blocs
|
|
|
|
### Édition en Temps Réel
|
|
|
|
Les blocs restent **complètement éditables** dans les colonnes:
|
|
- ✅ Modifier le texte
|
|
- ✅ Changer le formatage
|
|
- ✅ Ajouter/supprimer du contenu
|
|
- ✅ Les changements persistent automatiquement
|
|
|
|
### Commentaires Résolus
|
|
|
|
Les commentaires résolus:
|
|
- Apparaissent en semi-transparent
|
|
- Affichent un badge vert "Resolved"
|
|
- Ne comptent plus dans le compteur du badge
|
|
- Restent visibles dans l'historique
|
|
|
|
## 📊 Cas d'Usage Professionnels
|
|
|
|
### 1. Documentation Multi-Sections
|
|
|
|
```
|
|
┌─────────────┬─────────────┬─────────────┐
|
|
│ Features │ API Docs │ Examples │
|
|
│ │ │ │
|
|
│ • Feature 1 │ get() │ Code sample │
|
|
│ • Feature 2 │ post() │ Demo │
|
|
│ • Feature 3 │ delete() │ Tutorial │
|
|
└─────────────┴─────────────┴─────────────┘
|
|
```
|
|
|
|
### 2. Revue de Code avec Commentaires
|
|
|
|
```
|
|
┌──────────────┬──────────────┐
|
|
│ Code Block │ Comments 💬3 │
|
|
│ │ │
|
|
│ function(){ │ "Optimize" │
|
|
│ // logic │ "Add tests" │
|
|
│ } │ "Good work!" │
|
|
└──────────────┴──────────────┘
|
|
```
|
|
|
|
### 3. Comparaisons
|
|
|
|
```
|
|
┌──────────┬──────────┬──────────┐
|
|
│ Option A │ Option B │ Option C │
|
|
│ │ │ │
|
|
│ Pros: │ Pros: │ Pros: │
|
|
│ • Fast │ • Cheap │ • Simple │
|
|
│ Cons: │ Cons: │ Cons: │
|
|
│ • $$$ │ • Slow │ • Basic │
|
|
└──────────┴──────────┴──────────┘
|
|
```
|
|
|
|
### 4. Planning et Roadmap
|
|
|
|
```
|
|
┌────────┬────────┬────────┬────────┐
|
|
│ Q1 │ Q2 │ Q3 │ Q4 │
|
|
│ 💬2 │ │ 💬1 │ │
|
|
│ MVP │ Beta │ Launch │ Scale │
|
|
│ Tests │ UX │ Market │ Global │
|
|
└────────┴────────┴────────┴────────┘
|
|
```
|
|
|
|
## 🛠️ Raccourcis et Astuces
|
|
|
|
### Raccourcis Clavier
|
|
|
|
**Dans un bloc:**
|
|
- `Tab` → Augmente l'indentation
|
|
- `Shift+Tab` → Diminue l'indentation
|
|
- `Enter` → Nouveau bloc
|
|
- `/` → Ouvre le menu de blocs
|
|
|
|
**Dans le panneau de commentaires:**
|
|
- `Enter` → Ajouter le commentaire
|
|
- `Esc` → Fermer le panneau
|
|
|
|
### Astuces Productivité
|
|
|
|
1. **Dupliquer une structure:**
|
|
- Créer un layout en colonnes
|
|
- Utiliser le menu contextuel pour dupliquer
|
|
- Modifier le contenu
|
|
|
|
2. **Organisation rapide:**
|
|
- Créer tous vos blocs d'abord
|
|
- Organiser en colonnes ensuite
|
|
- Ajuster au besoin
|
|
|
|
3. **Commentaires collaboratifs:**
|
|
- Ajouter des commentaires avec votre nom
|
|
- Marquer comme résolu après traitement
|
|
- Garder l'historique pour référence
|
|
|
|
## 🔍 Dépannage
|
|
|
|
### Les boutons n'apparaissent pas
|
|
|
|
**Solution:**
|
|
1. Vérifier que vous êtes bien en mode hover
|
|
2. Rafraîchir la page (F5)
|
|
3. Vérifier dans les DevTools console
|
|
|
|
### Les commentaires ne s'affichent pas
|
|
|
|
**Solution:**
|
|
1. Vérifier que des commentaires existent:
|
|
```javascript
|
|
const commentService = /* récupérer */;
|
|
console.log(commentService.getAllComments());
|
|
```
|
|
|
|
2. Rafraîchir la page
|
|
|
|
### Le menu ne s'ouvre pas
|
|
|
|
**Solution:**
|
|
1. Vérifier la console pour erreurs
|
|
2. Essayer sur un autre bloc
|
|
3. Rafraîchir la page
|
|
|
|
## 📚 API Complète
|
|
|
|
### CommentService
|
|
|
|
```typescript
|
|
// Ajouter un commentaire
|
|
commentService.addComment(
|
|
blockId: string,
|
|
text: string,
|
|
author: string
|
|
): void
|
|
|
|
// Obtenir le nombre de commentaires
|
|
commentService.getCommentCount(blockId: string): number
|
|
|
|
// Obtenir tous les commentaires d'un bloc
|
|
commentService.getCommentsForBlock(blockId: string): Comment[]
|
|
|
|
// Supprimer un commentaire
|
|
commentService.deleteComment(commentId: string): void
|
|
|
|
// Résoudre un commentaire
|
|
commentService.resolveComment(commentId: string): void
|
|
|
|
// Obtenir tous les commentaires
|
|
commentService.getAllComments(): Comment[]
|
|
```
|
|
|
|
### Interface Comment
|
|
|
|
```typescript
|
|
interface Comment {
|
|
id: string; // ID unique
|
|
blockId: string; // ID du bloc lié
|
|
author: string; // Nom de l'auteur
|
|
text: string; // Contenu du commentaire
|
|
createdAt: Date; // Date de création
|
|
resolved?: boolean; // Statut résolu
|
|
}
|
|
```
|
|
|
|
## ✅ Checklist de Fonctionnalités
|
|
|
|
### Colonnes
|
|
- [x] Créer 2 colonnes par drag & drop
|
|
- [x] Ajouter des colonnes supplémentaires
|
|
- [x] Redistribution automatique des largeurs
|
|
- [x] Support de tous les types de blocs
|
|
- [x] Indicateurs visuels (vertical/horizontal)
|
|
|
|
### Commentaires
|
|
- [x] Badge avec compteur
|
|
- [x] Panneau de gestion
|
|
- [x] Ajouter des commentaires
|
|
- [x] Supprimer des commentaires
|
|
- [x] Résoudre des commentaires
|
|
- [x] Affichage de l'auteur et date
|
|
- [x] Commentaires indépendants par bloc
|
|
|
|
### Interface
|
|
- [x] Bouton menu (3 points)
|
|
- [x] Bouton commentaires
|
|
- [x] Hover effects
|
|
- [x] Menu contextuel
|
|
- [x] Animations fluides
|
|
- [x] Design responsive
|
|
|
|
## 🚀 Prochaines Évolutions Possibles
|
|
|
|
1. **Drag & Drop dans les colonnes**
|
|
- Déplacer des blocs entre colonnes
|
|
- Réorganiser au sein d'une colonne
|
|
|
|
2. **Redimensionnement manuel**
|
|
- Drag sur la bordure entre colonnes
|
|
- Ajuster les largeurs manuellement
|
|
|
|
3. **Colonnes imbriquées**
|
|
- Blocs columns dans des blocs columns
|
|
- Layouts complexes multi-niveaux
|
|
|
|
4. **Export de layouts**
|
|
- Sauvegarder des templates
|
|
- Réutiliser des structures
|
|
|
|
5. **Notifications**
|
|
- Nouveaux commentaires
|
|
- Mentions d'utilisateurs
|
|
- Commentaires résolus
|
|
|
|
## 💼 Conclusion
|
|
|
|
Le système de colonnes et commentaires offre une solution professionnelle complète pour:
|
|
- ✅ Organisation visuelle du contenu
|
|
- ✅ Collaboration via commentaires
|
|
- ✅ Productivité accrue
|
|
- ✅ Flexibilité maximale
|
|
- ✅ Interface intuitive
|
|
|
|
**Rafraîchissez votre navigateur et commencez à créer des layouts professionnels!**
|