Des tonnes de modifications notamment VIM / Couleurs / typos
This commit is contained in:
388
docs/DAILY_NOTES.md
Normal file
388
docs/DAILY_NOTES.md
Normal file
@ -0,0 +1,388 @@
|
||||
# Daily Notes - Documentation
|
||||
|
||||
Les **Daily Notes** sont des notes quotidiennes permettant une prise de notes rapide et organisée par date. Cette fonctionnalité s'intègre parfaitement dans Project Notes avec un calendrier interactif et des raccourcis clavier.
|
||||
|
||||
## 🎯 Fonctionnalités
|
||||
|
||||
### 1. Accès Rapide
|
||||
- **Bouton dans le header** : Cliquez sur "📅 Note du jour"
|
||||
- **Raccourci clavier** : `Ctrl/Cmd+D` (fonctionne partout dans l'application)
|
||||
- **Création automatique** : La note du jour est créée automatiquement si elle n'existe pas
|
||||
|
||||
### 2. Calendrier Interactif
|
||||
- **Vue mensuelle compacte** dans la sidebar
|
||||
- **Navigation** : Utilisez les flèches `‹` et `›` pour changer de mois
|
||||
- **Indicateurs visuels** :
|
||||
- **Aujourd'hui** : Bordure violette avec fond dégradé
|
||||
- **Notes existantes** : Point bleu (●) sous la date + cliquable
|
||||
- **Jours sans notes** : Grisés (opacité 50%) et non cliquables
|
||||
- **Jours du mois** : Affichés selon leur état
|
||||
- **Autres mois** : Très grisés et non cliquables
|
||||
- **Clic sur une date** : Ouvre la note de ce jour (uniquement si elle existe)
|
||||
|
||||
### 3. Notes Récentes
|
||||
- Liste des **7 dernières daily notes** dans la sidebar
|
||||
- Affichage du jour de la semaine et de la date
|
||||
- Accès rapide par simple clic
|
||||
|
||||
## ✍️ Créer une Nouvelle Daily Note
|
||||
|
||||
**Important** : Seules les notes existantes sont cliquables dans le calendrier. Pour créer une nouvelle daily note :
|
||||
|
||||
### Méthode 1 : Note du Jour
|
||||
- **Bouton** : Cliquez sur "📅 Note du jour" dans le header
|
||||
- **Raccourci** : Appuyez sur `Ctrl/Cmd+D`
|
||||
- **Bouton calendrier** : Cliquez sur le bouton "📅 Aujourd'hui" sous le calendrier
|
||||
|
||||
Ces trois méthodes créent automatiquement la note du jour si elle n'existe pas encore.
|
||||
|
||||
### Méthode 2 : Date Spécifique (API)
|
||||
Pour créer une note à une date spécifique (par exemple pour une note passée oubliée), utilisez l'API :
|
||||
|
||||
```bash
|
||||
# Créer la note du 10 janvier 2025
|
||||
curl http://localhost:8080/api/daily/2025-01-10
|
||||
```
|
||||
|
||||
Ou accédez directement à l'URL dans votre navigateur :
|
||||
```
|
||||
http://localhost:8080/api/daily/2025-01-10
|
||||
```
|
||||
|
||||
### Méthode 3 : Création Manuelle
|
||||
Vous pouvez aussi créer manuellement le fichier :
|
||||
|
||||
1. Créez le dossier : `notes/daily/2025/01/`
|
||||
2. Créez le fichier : `10.md`
|
||||
3. Copiez le template (voir section Template ci-dessous)
|
||||
|
||||
Le calendrier affichera automatiquement la note après actualisation.
|
||||
|
||||
## 📁 Organisation des Fichiers
|
||||
|
||||
### Structure des Dossiers
|
||||
```
|
||||
notes/
|
||||
└── daily/
|
||||
└── 2025/
|
||||
└── 01/
|
||||
├── 01.md
|
||||
├── 02.md
|
||||
├── 11.md
|
||||
└── ...
|
||||
```
|
||||
|
||||
### Format de Fichier
|
||||
- **Nom** : `DD.md` (ex: `11.md` pour le 11 janvier)
|
||||
- **Chemin complet** : `notes/daily/YYYY/MM/DD.md`
|
||||
- **Tag automatique** : `[daily]` pour toutes les daily notes
|
||||
|
||||
## 📝 Template par Défaut
|
||||
|
||||
Chaque nouvelle daily note est créée avec le template suivant :
|
||||
|
||||
```markdown
|
||||
---
|
||||
title: "Daily Note - 2025-01-11"
|
||||
date: "11-01-2025"
|
||||
last_modified: "11-01-2025:14:30"
|
||||
tags: [daily]
|
||||
---
|
||||
|
||||
# 📅 Samedi 11 janvier 2025
|
||||
|
||||
## 🎯 Objectifs du jour
|
||||
-
|
||||
|
||||
## 📝 Notes
|
||||
-
|
||||
|
||||
## ✅ Accompli
|
||||
-
|
||||
|
||||
## 💭 Réflexions
|
||||
-
|
||||
|
||||
## 🔗 Liens
|
||||
-
|
||||
```
|
||||
|
||||
### Sections du Template
|
||||
|
||||
1. **🎯 Objectifs du jour** : Liste des objectifs à accomplir
|
||||
2. **📝 Notes** : Notes libres, idées, observations
|
||||
3. **✅ Accompli** : Ce qui a été fait dans la journée
|
||||
4. **💭 Réflexions** : Pensées, apprentissages, réflexions personnelles
|
||||
5. **🔗 Liens** : Liens vers d'autres notes, ressources, etc.
|
||||
|
||||
## 🎨 Interface Utilisateur
|
||||
|
||||
### Header
|
||||
Le bouton "📅 Note du jour" apparaît dans le header entre "🏠 Accueil" et "✨ Nouvelle note".
|
||||
|
||||
### Sidebar
|
||||
La section "📅 Daily Notes" comprend :
|
||||
- **Calendrier** : Vue mensuelle avec navigation
|
||||
- **Bouton "Aujourd'hui"** : Accès rapide à la note du jour
|
||||
- **Section "Récentes"** : Liste des 7 dernières notes
|
||||
|
||||
### Style du Calendrier
|
||||
- **Grille 7x7** : Jours de la semaine + jours du mois
|
||||
- **En-têtes** : L M M J V S D (Lundi à Dimanche)
|
||||
- **Hover** : Effet de zoom léger (scale 1.05) et bordure bleue
|
||||
- **Responsive** : S'adapte aux petits écrans mobiles
|
||||
|
||||
## 🔧 Endpoints API
|
||||
|
||||
### GET /api/daily/today
|
||||
Ouvre ou crée la note du jour (aujourd'hui).
|
||||
|
||||
**Exemple** :
|
||||
```bash
|
||||
curl http://localhost:8080/api/daily/today
|
||||
```
|
||||
|
||||
**Comportement** :
|
||||
- Crée la note si elle n'existe pas
|
||||
- Redirige vers `/api/notes/daily/2025/01/11.md`
|
||||
|
||||
### GET /api/daily/{YYYY-MM-DD}
|
||||
Ouvre ou crée la note d'une date spécifique.
|
||||
|
||||
**Exemple** :
|
||||
```bash
|
||||
curl http://localhost:8080/api/daily/2025-01-15
|
||||
```
|
||||
|
||||
**Comportement** :
|
||||
- Crée la note si elle n'existe pas
|
||||
- Redirige vers `/api/notes/daily/2025/01/15.md`
|
||||
|
||||
### GET /api/daily/calendar/{YYYY}/{MM}
|
||||
Retourne le HTML du calendrier pour un mois spécifique.
|
||||
|
||||
**Exemple** :
|
||||
```bash
|
||||
curl http://localhost:8080/api/daily/calendar/2025/01
|
||||
```
|
||||
|
||||
**Response** : HTML du calendrier avec navigation et indicateurs
|
||||
|
||||
### GET /api/daily/recent
|
||||
Retourne les 7 dernières daily notes (HTML).
|
||||
|
||||
**Exemple** :
|
||||
```bash
|
||||
curl http://localhost:8080/api/daily/recent
|
||||
```
|
||||
|
||||
**Response** : Liste HTML des notes récentes
|
||||
|
||||
## 💻 Architecture Technique
|
||||
|
||||
### Backend (Go)
|
||||
|
||||
**Fichiers** :
|
||||
- `internal/api/daily_notes.go` : Logique métier des daily notes
|
||||
- `templates/daily-calendar.html` : Template du calendrier
|
||||
- `templates/daily-recent.html` : Template des notes récentes
|
||||
|
||||
**Fonctions clés** :
|
||||
- `getDailyNotePath(date)` : Calcule le chemin d'une daily note
|
||||
- `dailyNoteExists(date)` : Vérifie si une note existe
|
||||
- `createDailyNote(date)` : Crée une note avec le template
|
||||
- `buildCalendarData(year, month)` : Construit les données du calendrier
|
||||
|
||||
**Algorithme du Calendrier** :
|
||||
1. Calcule le premier et dernier jour du mois
|
||||
2. Remplit les jours avant le 1er (mois précédent, grisés)
|
||||
3. Remplit tous les jours du mois
|
||||
4. Remplit les jours après le dernier (mois suivant, grisés)
|
||||
5. Groupe les jours par semaines (lignes de 7 jours)
|
||||
6. Marque aujourd'hui et les jours ayant des notes
|
||||
|
||||
### Frontend (JavaScript)
|
||||
|
||||
**Fichier** : `frontend/src/daily-notes.js`
|
||||
|
||||
**Fonctions clés** :
|
||||
- `initDailyNotesShortcut()` : Raccourci `Ctrl/Cmd+D`
|
||||
- `refreshDailyNotes()` : Rafraîchit le calendrier et les notes récentes
|
||||
- Événements HTMX : Rafraîchissement automatique après sauvegarde
|
||||
|
||||
### Styles (CSS)
|
||||
|
||||
**Fichier** : `static/theme.css`
|
||||
|
||||
**Classes CSS** :
|
||||
- `.daily-calendar` : Conteneur du calendrier
|
||||
- `.calendar-grid` : Grille 7x7
|
||||
- `.calendar-day` : Cellule de jour
|
||||
- `.calendar-day-today` : Style pour aujourd'hui
|
||||
- `.calendar-day-has-note` : Style pour les jours avec notes
|
||||
- `.daily-recent-item` : Élément de la liste récente
|
||||
|
||||
## 🎯 Cas d'Usage
|
||||
|
||||
### 1. Journal Quotidien
|
||||
Utilisez les daily notes comme un journal personnel :
|
||||
- Notez vos objectifs le matin
|
||||
- Ajoutez des notes au fil de la journée
|
||||
- Récapitulez vos accomplissements le soir
|
||||
|
||||
### 2. Suivi de Projet
|
||||
Documentez l'avancement jour par jour :
|
||||
- Objectifs : Tâches du jour
|
||||
- Notes : Progrès et observations
|
||||
- Accompli : Livraisons et jalons
|
||||
- Réflexions : Blocages et solutions
|
||||
|
||||
### 3. Veille Technologique
|
||||
Collectez des informations quotidiennes :
|
||||
- Notes : Articles intéressants
|
||||
- Liens : Ressources découvertes
|
||||
- Réflexions : Apprentissages clés
|
||||
|
||||
### 4. Réunions Quotidiennes (Stand-up)
|
||||
Préparez vos stand-ups :
|
||||
- Accompli : Ce qui a été fait hier
|
||||
- Objectifs : Ce qui sera fait aujourd'hui
|
||||
- Réflexions : Blocages éventuels
|
||||
|
||||
## 🔄 Workflow Recommandé
|
||||
|
||||
### Matin (9h)
|
||||
1. `Ctrl/Cmd+D` pour ouvrir la note du jour
|
||||
2. Remplir la section "🎯 Objectifs du jour"
|
||||
3. Planifier les priorités
|
||||
|
||||
### Journée
|
||||
1. Ajouter des notes au fil de l'eau dans "📝 Notes"
|
||||
2. Capturer les idées importantes
|
||||
3. Ajouter des liens vers d'autres notes
|
||||
|
||||
### Soir (18h)
|
||||
1. Cocher les objectifs accomplis dans "✅ Accompli"
|
||||
2. Noter les réflexions dans "💭 Réflexions"
|
||||
3. Préparer les objectifs du lendemain
|
||||
|
||||
### Revue Hebdomadaire
|
||||
1. Cliquer sur les 7 dernières notes dans "Récentes"
|
||||
2. Synthétiser les accomplissements
|
||||
3. Identifier les patterns et améliorations
|
||||
|
||||
## 🛠️ Personnalisation
|
||||
|
||||
### Modifier le Template
|
||||
|
||||
Éditez `internal/api/daily_notes.go`, fonction `createDailyNote()` :
|
||||
|
||||
```go
|
||||
template := fmt.Sprintf(`---
|
||||
title: "Daily Note - %s"
|
||||
date: "%s"
|
||||
last_modified: "%s"
|
||||
tags: [daily, perso] // Ajoutez des tags personnalisés
|
||||
---
|
||||
|
||||
# 📅 %s %d %s %d
|
||||
|
||||
## Vos sections personnalisées
|
||||
-
|
||||
`, ...)
|
||||
```
|
||||
|
||||
### Changer le Dossier de Stockage
|
||||
|
||||
Modifiez `getDailyNotePath()` :
|
||||
|
||||
```go
|
||||
// Au lieu de notes/daily/2025/01/11.md
|
||||
// Utilisez notes/journal/2025-01-11.md
|
||||
relativePath := filepath.Join("journal", fmt.Sprintf("%s.md", date.Format("2006-01-02")))
|
||||
```
|
||||
|
||||
### Ajuster les Couleurs du Calendrier
|
||||
|
||||
Éditez `static/theme.css` :
|
||||
|
||||
```css
|
||||
/* Aujourd'hui */
|
||||
.calendar-day-today {
|
||||
border-color: #your-color;
|
||||
background: your-gradient;
|
||||
}
|
||||
|
||||
/* Notes existantes */
|
||||
.calendar-day-has-note .calendar-day-number {
|
||||
color: #your-color;
|
||||
}
|
||||
```
|
||||
|
||||
## ⚙️ Configuration Avancée
|
||||
|
||||
### Désactiver l'Auto-création
|
||||
Si vous ne voulez pas créer automatiquement les notes :
|
||||
|
||||
```go
|
||||
// Dans handleDailyToday() et handleDailyDate()
|
||||
// Commentez ces lignes :
|
||||
// if !h.dailyNoteExists(date) {
|
||||
// if err := h.createDailyNote(date); err != nil {
|
||||
// ...
|
||||
// }
|
||||
// }
|
||||
```
|
||||
|
||||
### Changer le Raccourci Clavier
|
||||
Éditez `frontend/src/daily-notes.js` :
|
||||
|
||||
```javascript
|
||||
// Au lieu de Ctrl/Cmd+D, utilisez Ctrl/Cmd+J par exemple
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === 'j') {
|
||||
event.preventDefault();
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## 🐛 Dépannage
|
||||
|
||||
### Le calendrier ne s'affiche pas
|
||||
1. Vérifiez que le serveur a démarré correctement
|
||||
2. Vérifiez la console du navigateur pour des erreurs
|
||||
3. Vérifiez que `/api/daily/calendar/2025/01` retourne du HTML
|
||||
|
||||
### La note du jour ne se crée pas
|
||||
1. Vérifiez les permissions du dossier `notes/`
|
||||
2. Vérifiez les logs du serveur pour des erreurs
|
||||
3. Vérifiez que le dossier `notes/daily/` peut être créé
|
||||
|
||||
### Le raccourci Ctrl/Cmd+D ne fonctionne pas
|
||||
1. Vérifiez que le frontend a été compilé (`npm run build`)
|
||||
2. Vérifiez la console du navigateur pour "Daily notes shortcuts initialized"
|
||||
3. Assurez-vous qu'aucun autre raccourci ne capture Ctrl/Cmd+D
|
||||
|
||||
### Le calendrier ne se rafraîchit pas après sauvegarde
|
||||
1. Vérifiez que le chemin de la note commence par `daily/`
|
||||
2. Vérifiez les événements HTMX dans la console
|
||||
3. Rafraîchissez manuellement en cliquant sur les flèches du calendrier
|
||||
|
||||
## 📚 Ressources
|
||||
|
||||
- [ARCHITECTURE.md](../ARCHITECTURE.md) - Architecture globale
|
||||
- [CLAUDE.md](../CLAUDE.md) - Guide de développement
|
||||
- [API.md](../API.md) - Documentation de l'API REST
|
||||
|
||||
## 🎉 Bonnes Pratiques
|
||||
|
||||
1. **Consistance** : Écrivez chaque jour, même brièvement
|
||||
2. **Honnêteté** : Notez ce qui s'est vraiment passé
|
||||
3. **Liens** : Créez des liens vers d'autres notes
|
||||
4. **Tags** : Ajoutez des tags supplémentaires si nécessaire
|
||||
5. **Revue** : Relisez vos notes passées régulièrement
|
||||
|
||||
---
|
||||
|
||||
**Version** : 1.0.0
|
||||
**Date** : 2025-01-11
|
||||
**Auteur** : Project Notes Team
|
||||
51
docs/GUIDE_THEMES.md
Normal file
51
docs/GUIDE_THEMES.md
Normal file
@ -0,0 +1,51 @@
|
||||
# Guide Rapide : Changer de Thème
|
||||
|
||||
## Étapes
|
||||
|
||||
1. **Ouvrir les paramètres**
|
||||
- Localisez le bouton "⚙️ Paramètres" en bas de la sidebar (barre latérale gauche)
|
||||
- Cliquez dessus
|
||||
|
||||
2. **Choisir un thème**
|
||||
- Une modale s'ouvre avec 6 thèmes disponibles
|
||||
- Chaque thème affiche :
|
||||
- Un nom et une icône
|
||||
- Un aperçu des couleurs principales
|
||||
- Une brève description
|
||||
- Le thème actuellement actif est marqué d'une coche (✓)
|
||||
|
||||
3. **Appliquer le thème**
|
||||
- Cliquez sur la carte du thème souhaité
|
||||
- Le thème s'applique immédiatement
|
||||
- Pas besoin de rechargement de page
|
||||
|
||||
4. **Fermer la modale**
|
||||
- Cliquez sur "Fermer" ou en dehors de la modale
|
||||
- Votre choix est automatiquement sauvegardé
|
||||
|
||||
## Thèmes Disponibles
|
||||
|
||||
| Thème | Icône | Style |
|
||||
|-------|-------|-------|
|
||||
| **Material Dark** | 🌙 | Professionnel, bleu |
|
||||
| **Monokai Dark** | 🎨 | Classique développeur, vert/cyan |
|
||||
| **Dracula** | 🧛 | Élégant, violet/cyan |
|
||||
| **One Dark** | ⚡ | Populaire, doux |
|
||||
| **Solarized Dark** | ☀️ | Optimisé anti-fatigue |
|
||||
| **Nord** | ❄️ | Arctique, apaisant |
|
||||
| **Catppuccin** | 🌸 | Pastel, rose/bleu |
|
||||
| **Everforest** | 🌲 | Naturel, vert/beige |
|
||||
|
||||
## Astuce
|
||||
|
||||
Votre thème préféré est sauvegardé automatiquement. Vous le retrouverez :
|
||||
- À la prochaine connexion
|
||||
- Après fermeture du navigateur
|
||||
- Sur le même ordinateur et navigateur
|
||||
|
||||
## Besoin d'Aide ?
|
||||
|
||||
Consultez la [documentation complète](THEMES.md) pour plus d'informations sur :
|
||||
- L'ajout de nouveaux thèmes personnalisés
|
||||
- Les détails techniques
|
||||
- Le dépannage
|
||||
136
docs/KEYBOARD_SHORTCUTS.md
Normal file
136
docs/KEYBOARD_SHORTCUTS.md
Normal file
@ -0,0 +1,136 @@
|
||||
# ⌨️ Raccourcis Clavier - Project Notes
|
||||
|
||||
Cette documentation liste tous les raccourcis clavier disponibles dans l'application Project Notes.
|
||||
|
||||
## 📋 Liste des Raccourcis
|
||||
|
||||
### Navigation
|
||||
|
||||
| Raccourci | Action | Description |
|
||||
|-----------|--------|-------------|
|
||||
| `Ctrl/Cmd + H` | Accueil | Retourner à la page d'accueil |
|
||||
| `Ctrl/Cmd + D` | Note du jour | Ouvrir la note quotidienne (Daily Note) |
|
||||
| `Ctrl/Cmd + B` | Sidebar | Afficher ou masquer la barre latérale |
|
||||
|
||||
### Création
|
||||
|
||||
| Raccourci | Action | Description |
|
||||
|-----------|--------|-------------|
|
||||
| `Ctrl/Cmd + N` | Nouvelle note | Ouvrir la modale de création de note |
|
||||
| `Ctrl/Cmd + Shift + F` | Nouveau dossier | Ouvrir la modale de création de dossier |
|
||||
|
||||
### Édition
|
||||
|
||||
| Raccourci | Action | Description |
|
||||
|-----------|--------|-------------|
|
||||
| `Ctrl/Cmd + S` | Sauvegarder | Enregistrer la note actuelle |
|
||||
| `Ctrl/Cmd + P` | Prévisualisation | Basculer entre l'éditeur seul et éditeur+preview |
|
||||
|
||||
### Recherche
|
||||
|
||||
| Raccourci | Action | Description |
|
||||
|-----------|--------|-------------|
|
||||
| `Ctrl/Cmd + K` | Recherche | Focus sur le champ de recherche global |
|
||||
|
||||
### Paramètres
|
||||
|
||||
| Raccourci | Action | Description |
|
||||
|-----------|--------|-------------|
|
||||
| `Ctrl/Cmd + ,` | Paramètres | Ouvrir les paramètres (thèmes, polices) |
|
||||
|
||||
### Général
|
||||
|
||||
| Raccourci | Action | Description |
|
||||
|-----------|--------|-------------|
|
||||
| `Escape` | Fermer | Fermer les modales et dialogues ouverts |
|
||||
|
||||
## 🖥️ Notes Spécifiques par Plateforme
|
||||
|
||||
- **Windows/Linux** : Utilisez la touche `Ctrl`
|
||||
- **macOS** : Utilisez la touche `Cmd` (⌘)
|
||||
|
||||
## 🎯 Contexte des Raccourcis
|
||||
|
||||
### Raccourcis Globaux
|
||||
Ces raccourcis fonctionnent partout dans l'application :
|
||||
- `Ctrl/Cmd + K` (Recherche)
|
||||
- `Ctrl/Cmd + D` (Note du jour)
|
||||
- `Ctrl/Cmd + N` (Nouvelle note)
|
||||
- `Ctrl/Cmd + H` (Accueil)
|
||||
- `Ctrl/Cmd + B` (Sidebar)
|
||||
- `Ctrl/Cmd + ,` (Paramètres)
|
||||
- `Escape` (Fermer modales)
|
||||
|
||||
### Raccourcis Contextuels
|
||||
Ces raccourcis fonctionnent uniquement dans certains contextes :
|
||||
- `Ctrl/Cmd + S` : Fonctionne uniquement quand une note est ouverte
|
||||
- `Ctrl/Cmd + /` : Fonctionne uniquement dans l'éditeur
|
||||
|
||||
## 🔧 Implémentation Technique
|
||||
|
||||
Les raccourcis clavier sont gérés par le module `keyboard-shortcuts.js` qui :
|
||||
1. Écoute tous les événements `keydown` au niveau document
|
||||
2. Détecte les combinaisons de touches (Ctrl/Cmd, Shift, etc.)
|
||||
3. Ignore les raccourcis quand l'utilisateur tape dans un champ de saisie (sauf exceptions)
|
||||
4. Exécute l'action correspondante
|
||||
|
||||
## 📝 Ajouter un Nouveau Raccourci
|
||||
|
||||
Pour ajouter un nouveau raccourci, modifiez le fichier `frontend/src/keyboard-shortcuts.js` :
|
||||
|
||||
```javascript
|
||||
this.shortcuts = [
|
||||
// ... raccourcis existants
|
||||
{
|
||||
key: 'nouvelle-touche',
|
||||
ctrl: true,
|
||||
shift: false, // optionnel
|
||||
description: 'Description du raccourci',
|
||||
action: () => this.maFonction()
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
Puis ajoutez la méthode correspondante dans la classe :
|
||||
|
||||
```javascript
|
||||
maFonction() {
|
||||
// Votre code ici
|
||||
console.log('Raccourci exécuté');
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 Affichage dans l'Interface
|
||||
|
||||
Les raccourcis sont affichés :
|
||||
- Dans les **tooltips** des boutons (attribut `title`)
|
||||
- Sur la **page d'accueil** dans la section "⌨️ Raccourcis clavier"
|
||||
- Dans cette **documentation**
|
||||
|
||||
## ⚡ Performances
|
||||
|
||||
Le gestionnaire de raccourcis est optimisé pour :
|
||||
- Écouter un seul événement au niveau document
|
||||
- Utiliser une recherche linéaire rapide (< 1ms)
|
||||
- Ne pas interférer avec les champs de saisie
|
||||
- Supporter les raccourcis multi-plateformes
|
||||
|
||||
## 🐛 Dépannage
|
||||
|
||||
### Le raccourci ne fonctionne pas
|
||||
1. Vérifiez que vous n'êtes pas dans un champ de saisie (input/textarea)
|
||||
2. Vérifiez la console du navigateur pour les messages d'erreur
|
||||
3. Vérifiez que la fonction cible existe et est accessible
|
||||
|
||||
### Conflit avec les raccourcis du navigateur
|
||||
Certains raccourcis peuvent entrer en conflit avec le navigateur :
|
||||
- `Ctrl/Cmd + W` : Fermer l'onglet (réservé au navigateur)
|
||||
- `Ctrl/Cmd + T` : Nouvel onglet (réservé au navigateur)
|
||||
- `Ctrl/Cmd + R` : Recharger (réservé au navigateur)
|
||||
|
||||
Évitez d'utiliser ces combinaisons pour l'application.
|
||||
|
||||
## 📚 Références
|
||||
|
||||
- [MDN - KeyboardEvent](https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent)
|
||||
- [Web Platform Keyboard Shortcuts](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)
|
||||
47
docs/README.md
Normal file
47
docs/README.md
Normal file
@ -0,0 +1,47 @@
|
||||
# Documentation
|
||||
|
||||
Ce dossier contient la documentation détaillée des fonctionnalités de Project Notes.
|
||||
|
||||
## Guides Disponibles
|
||||
|
||||
### [DAILY_NOTES.md](./DAILY_NOTES.md)
|
||||
Guide complet du système de Daily Notes :
|
||||
- Fonctionnalités et utilisation
|
||||
- Organisation des fichiers
|
||||
- Template par défaut
|
||||
- Calendrier interactif
|
||||
- Endpoints API
|
||||
- Architecture technique
|
||||
- Personnalisation et configuration avancée
|
||||
- Dépannage
|
||||
|
||||
## Documentation Principale
|
||||
|
||||
Pour la documentation générale du projet, consultez les fichiers à la racine :
|
||||
|
||||
- **[README.md](../README.md)** - Vue d'ensemble et guide de démarrage
|
||||
- **[ARCHITECTURE.md](../ARCHITECTURE.md)** - Architecture complète du système
|
||||
- **[CLAUDE.md](../CLAUDE.md)** - Guide de développement
|
||||
- **[API.md](../API.md)** - Documentation de l'API REST
|
||||
- **[CHANGELOG.md](../CHANGELOG.md)** - Historique des versions
|
||||
|
||||
## Contribuer
|
||||
|
||||
Pour ajouter de la documentation :
|
||||
|
||||
1. Créez un nouveau fichier `.md` dans ce dossier
|
||||
2. Ajoutez-le à la liste ci-dessus
|
||||
3. Référencez-le dans le README principal si nécessaire
|
||||
|
||||
## Format
|
||||
|
||||
La documentation utilise Markdown avec :
|
||||
- Titres hiérarchiques (`#`, `##`, `###`)
|
||||
- Blocs de code avec syntaxe (` ```language`)
|
||||
- Emojis pour la lisibilité (📅, 🎯, 💻, etc.)
|
||||
- Exemples concrets et cas d'usage
|
||||
- Sections de dépannage
|
||||
|
||||
---
|
||||
|
||||
**Dernière mise à jour** : 2025-01-11
|
||||
206
docs/THEMES.md
Normal file
206
docs/THEMES.md
Normal file
@ -0,0 +1,206 @@
|
||||
# Système de Thèmes
|
||||
|
||||
## Vue d'ensemble
|
||||
|
||||
L'application Project Notes dispose d'un système de thèmes complet permettant aux utilisateurs de personnaliser l'apparence de l'interface. Six thèmes sombres professionnels sont disponibles par défaut.
|
||||
|
||||
## Thèmes Disponibles
|
||||
|
||||
### 🌙 Material Dark (défaut)
|
||||
Thème professionnel inspiré de Material Design avec des accents bleus.
|
||||
- Couleurs principales : Gris foncé, bleu ciel, cyan
|
||||
- Parfait pour un usage quotidien professionnel
|
||||
|
||||
### 🎨 Monokai Dark
|
||||
Palette Monokai classique populaire auprès des développeurs.
|
||||
- Couleurs principales : Vert kaki, cyan cyan, vert lime
|
||||
- Idéal pour ceux qui préfèrent les palettes de code
|
||||
|
||||
### 🧛 Dracula
|
||||
Thème sombre élégant avec des accents violets et cyan.
|
||||
- Couleurs principales : Violet foncé, cyan, violet pastel
|
||||
- Populaire dans la communauté des développeurs
|
||||
|
||||
### ⚡ One Dark
|
||||
Thème populaire d'Atom avec des couleurs douces.
|
||||
- Couleurs principales : Gris-bleu, bleu ciel, violet
|
||||
- Confortable pour de longues sessions
|
||||
|
||||
### ☀️ Solarized Dark
|
||||
Palette scientifiquement optimisée pour réduire la fatigue oculaire.
|
||||
- Couleurs principales : Bleu marine, bleu océan, cyan
|
||||
- Recommandé pour réduire la fatigue visuelle
|
||||
|
||||
### ❄️ Nord
|
||||
Palette arctique apaisante avec des tons bleus froids.
|
||||
- Couleurs principales : Gris nordique, bleu glacier, bleu ciel
|
||||
- Apaisant et minimaliste
|
||||
|
||||
### 🌸 Catppuccin
|
||||
Thème pastel doux et chaleureux inspiré de Catppuccin Mocha.
|
||||
- Couleurs principales : Bleu pastel, rose pastel, texte clair
|
||||
- Moderne et élégant avec des accents pastels
|
||||
|
||||
### 🌲 Everforest
|
||||
Palette naturelle inspirée de la forêt avec des tons verts et beiges.
|
||||
- Couleurs principales : Vert forêt, bleu aqua, beige chaud
|
||||
- Reposant pour les yeux avec des couleurs naturelles
|
||||
|
||||
## Utilisation
|
||||
|
||||
### Changer de thème
|
||||
|
||||
1. Cliquez sur le bouton **Paramètres** (⚙️) en bas de la sidebar
|
||||
2. Une modale s'ouvre avec l'aperçu de tous les thèmes disponibles
|
||||
3. Cliquez sur la carte du thème souhaité
|
||||
4. Le thème s'applique instantanément
|
||||
5. Votre choix est automatiquement sauvegardé
|
||||
|
||||
### Persistance
|
||||
|
||||
Le thème sélectionné est sauvegardé dans le `localStorage` du navigateur, ce qui signifie que votre préférence sera conservée :
|
||||
- Entre les sessions
|
||||
- Après la fermeture du navigateur
|
||||
- Lors du rechargement de la page
|
||||
|
||||
## Architecture Technique
|
||||
|
||||
### Fichiers
|
||||
|
||||
- **`/static/themes.css`** : Définitions des variables CSS pour tous les thèmes
|
||||
- **`/frontend/src/theme-manager.js`** : Gestionnaire JavaScript des thèmes
|
||||
- **`/templates/index.html`** : Modale de sélection de thèmes
|
||||
|
||||
### Variables CSS
|
||||
|
||||
Chaque thème définit un ensemble de variables CSS :
|
||||
|
||||
```css
|
||||
[data-theme="theme-name"] {
|
||||
--bg-primary: #...;
|
||||
--bg-secondary: #...;
|
||||
--text-primary: #...;
|
||||
--accent-primary: #...;
|
||||
/* etc. */
|
||||
}
|
||||
```
|
||||
|
||||
### API JavaScript
|
||||
|
||||
```javascript
|
||||
// Accès au gestionnaire de thèmes
|
||||
window.themeManager
|
||||
|
||||
// Méthodes disponibles
|
||||
themeManager.applyTheme('theme-id') // Appliquer un thème
|
||||
themeManager.getCurrentTheme() // Obtenir le thème actuel
|
||||
themeManager.getThemes() // Liste des thèmes disponibles
|
||||
```
|
||||
|
||||
## Ajouter un Nouveau Thème
|
||||
|
||||
### 1. Définir les variables CSS dans `themes.css`
|
||||
|
||||
```css
|
||||
[data-theme="mon-theme"] {
|
||||
--bg-primary: #...;
|
||||
--bg-secondary: #...;
|
||||
--bg-tertiary: #...;
|
||||
--bg-elevated: #...;
|
||||
|
||||
--border-primary: #...;
|
||||
--border-secondary: #...;
|
||||
|
||||
--text-primary: #...;
|
||||
--text-secondary: #...;
|
||||
--text-muted: #...;
|
||||
|
||||
--accent-primary: #...;
|
||||
--accent-primary-hover: #...;
|
||||
--accent-secondary: #...;
|
||||
--accent-secondary-hover: #...;
|
||||
|
||||
--success: #...;
|
||||
--warning: #...;
|
||||
--error: #...;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Ajouter le thème dans `theme-manager.js`
|
||||
|
||||
```javascript
|
||||
{
|
||||
id: 'mon-theme',
|
||||
name: 'Mon Thème',
|
||||
icon: '🎨',
|
||||
description: 'Description de mon thème'
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Créer la carte de prévisualisation dans `index.html`
|
||||
|
||||
```html
|
||||
<div class="theme-card" data-theme="mon-theme" onclick="selectTheme('mon-theme')">
|
||||
<div class="theme-card-header">
|
||||
<span class="theme-card-icon">🎨</span>
|
||||
<span class="theme-card-name">Mon Thème</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
</div>
|
||||
<p class="theme-description">Description de mon thème</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 4. Définir les couleurs de prévisualisation dans `themes.css`
|
||||
|
||||
```css
|
||||
.theme-card[data-theme="mon-theme"] .theme-preview-color:nth-child(1) { background: #...; }
|
||||
.theme-card[data-theme="mon-theme"] .theme-preview-color:nth-child(2) { background: #...; }
|
||||
.theme-card[data-theme="mon-theme"] .theme-preview-color:nth-child(3) { background: #...; }
|
||||
.theme-card[data-theme="mon-theme"] .theme-preview-color:nth-child(4) { background: #...; }
|
||||
```
|
||||
|
||||
## Responsive Design
|
||||
|
||||
Le système de thèmes est entièrement responsive et fonctionne sur :
|
||||
- Desktop
|
||||
- Tablettes
|
||||
- Smartphones
|
||||
|
||||
Sur mobile, la modale s'adapte automatiquement à la taille de l'écran.
|
||||
|
||||
## Accessibilité
|
||||
|
||||
Tous les thèmes sont conçus avec :
|
||||
- Des contrastes suffisants pour la lisibilité
|
||||
- Des couleurs testées pour l'accessibilité
|
||||
- Une cohérence visuelle à travers l'interface
|
||||
|
||||
## Raccourcis Clavier
|
||||
|
||||
Actuellement, aucun raccourci clavier n'est implémenté pour les thèmes. Cette fonctionnalité pourrait être ajoutée dans une future version.
|
||||
|
||||
## Dépannage
|
||||
|
||||
### Le thème ne se charge pas
|
||||
- Vérifiez que `themes.css` est bien chargé dans le HTML
|
||||
- Vérifiez que `theme-manager.js` est chargé avant les autres scripts
|
||||
- Vérifiez la console du navigateur pour les erreurs
|
||||
|
||||
### Le thème ne persiste pas
|
||||
- Vérifiez que le `localStorage` est activé dans votre navigateur
|
||||
- Vérifiez les paramètres de cookies/stockage du navigateur
|
||||
|
||||
### Le thème s'applique partiellement
|
||||
- Rechargez la page avec Ctrl+Shift+R (cache vidé)
|
||||
- Vérifiez que toutes les variables CSS sont définies
|
||||
|
||||
## Performance
|
||||
|
||||
- Le changement de thème est instantané (pas de rechargement de page)
|
||||
- Les variables CSS sont natives et performantes
|
||||
- Le localStorage est utilisé de manière optimale
|
||||
173
docs/THEMES_CATPPUCCIN_EVERFOREST.md
Normal file
173
docs/THEMES_CATPPUCCIN_EVERFOREST.md
Normal file
@ -0,0 +1,173 @@
|
||||
# Nouveaux Thèmes : Catppuccin et Everforest
|
||||
|
||||
## 🌸 Catppuccin Mocha
|
||||
|
||||
Catppuccin est un thème communautaire populaire avec une palette de couleurs pastels douces et chaleureuses.
|
||||
|
||||
### Caractéristiques
|
||||
|
||||
- **Style** : Pastel, moderne, élégant
|
||||
- **Accents** : Bleu ciel (#89b4fa), Rose pastel (#f5c2e7)
|
||||
- **Philosophie** : Couleurs apaisantes et non agressives pour réduire la fatigue oculaire
|
||||
- **Popularité** : Très populaire dans la communauté des développeurs
|
||||
|
||||
### Palette de Couleurs
|
||||
|
||||
```css
|
||||
--bg-primary: #1e1e2e; /* Base profonde */
|
||||
--bg-secondary: #181825; /* Mantle */
|
||||
--bg-tertiary: #313244; /* Surface 0 */
|
||||
--bg-elevated: #45475a; /* Surface 1 */
|
||||
|
||||
--text-primary: #cdd6f4; /* Text */
|
||||
--text-secondary: #bac2de; /* Subtext 1 */
|
||||
--text-muted: #6c7086; /* Overlay 1 */
|
||||
|
||||
--accent-primary: #89b4fa; /* Blue */
|
||||
--accent-secondary: #f5c2e7; /* Pink */
|
||||
|
||||
--success: #a6e3a1; /* Green */
|
||||
--warning: #f9e2af; /* Yellow */
|
||||
--error: #f38ba8; /* Red */
|
||||
```
|
||||
|
||||
### Recommandé Pour
|
||||
|
||||
- Sessions de travail prolongées
|
||||
- Travail créatif et design
|
||||
- Ceux qui préfèrent les couleurs douces
|
||||
- Alternance avec des thèmes plus contrastés
|
||||
|
||||
### Liens
|
||||
|
||||
- [Catppuccin Official](https://catppuccin.com/)
|
||||
- [GitHub](https://github.com/catppuccin/catppuccin)
|
||||
- [Palettes](https://catppuccin.com/palette)
|
||||
|
||||
---
|
||||
|
||||
## 🌲 Everforest Dark
|
||||
|
||||
Everforest est un thème inspiré de la nature avec une palette de couleurs vertes et beiges confortables.
|
||||
|
||||
### Caractéristiques
|
||||
|
||||
- **Style** : Naturel, organique, reposant
|
||||
- **Accents** : Bleu aqua (#7fbbb3), Vert doux (#a7c080)
|
||||
- **Philosophie** : Inspiré par la forêt, couleurs naturelles et apaisantes
|
||||
- **Contraste** : Moyen, confortable pour les yeux
|
||||
|
||||
### Palette de Couleurs
|
||||
|
||||
```css
|
||||
--bg-primary: #2d353b; /* BG Dim */
|
||||
--bg-secondary: #272e33; /* BG 0 */
|
||||
--bg-tertiary: #343f44; /* BG 1 */
|
||||
--bg-elevated: #3d484d; /* BG 2 */
|
||||
|
||||
--text-primary: #d3c6aa; /* FG */
|
||||
--text-secondary: #b4a990; /* Grey 1 */
|
||||
--text-muted: #7a8478; /* Grey 0 */
|
||||
|
||||
--accent-primary: #7fbbb3; /* Aqua */
|
||||
--accent-secondary: #a7c080; /* Green */
|
||||
|
||||
--success: #a7c080; /* Green */
|
||||
--warning: #dbbc7f; /* Yellow */
|
||||
--error: #e67e80; /* Red */
|
||||
```
|
||||
|
||||
### Recommandé Pour
|
||||
|
||||
- Travail en extérieur ou près de fenêtres
|
||||
- Ceux qui aiment les couleurs naturelles
|
||||
- Lecture et écriture longue durée
|
||||
- Environnement calme et zen
|
||||
|
||||
### Liens
|
||||
|
||||
- [Everforest Official](https://github.com/sainnhe/everforest)
|
||||
- [GitHub](https://github.com/sainnhe/everforest)
|
||||
- [Color Palette](https://github.com/sainnhe/everforest/blob/master/palette.md)
|
||||
|
||||
---
|
||||
|
||||
## Comparaison
|
||||
|
||||
| Aspect | Catppuccin | Everforest |
|
||||
|--------|------------|------------|
|
||||
| **Contraste** | Moyen-élevé | Moyen |
|
||||
| **Saturation** | Moyenne | Basse |
|
||||
| **Ambiance** | Moderne, élégant | Naturel, zen |
|
||||
| **Accents** | Bleu/Rose | Vert/Aqua |
|
||||
| **Popularité** | Très populaire | Populaire |
|
||||
| **Cas d'usage** | Général, design | Lecture, écriture |
|
||||
|
||||
## Installation
|
||||
|
||||
Les deux thèmes sont maintenant disponibles par défaut dans Project Notes !
|
||||
|
||||
### Activation
|
||||
|
||||
1. Cliquez sur "⚙️ Paramètres" en bas de la sidebar
|
||||
2. Sélectionnez **Catppuccin** (🌸) ou **Everforest** (🌲)
|
||||
3. Le thème s'applique instantanément
|
||||
4. Votre choix est sauvegardé automatiquement
|
||||
|
||||
## Personnalisation Avancée
|
||||
|
||||
### Modifier Catppuccin
|
||||
|
||||
Si vous souhaitez utiliser une autre variante de Catppuccin (Latte, Frappé, Macchiato), modifiez `static/themes.css` :
|
||||
|
||||
```css
|
||||
[data-theme="catppuccin"] {
|
||||
/* Exemple : Catppuccin Frappé */
|
||||
--bg-primary: #303446;
|
||||
--bg-secondary: #292c3c;
|
||||
/* ... autres couleurs */
|
||||
}
|
||||
```
|
||||
|
||||
### Modifier Everforest
|
||||
|
||||
Pour ajuster le contraste d'Everforest :
|
||||
|
||||
```css
|
||||
[data-theme="everforest"] {
|
||||
/* Contraste élevé */
|
||||
--bg-primary: #1e2326;
|
||||
--bg-secondary: #272e33;
|
||||
/* ... autres couleurs */
|
||||
}
|
||||
```
|
||||
|
||||
## Intégration avec CodeMirror
|
||||
|
||||
Pour synchroniser CodeMirror avec ces thèmes, ajoutez dans votre code :
|
||||
|
||||
```javascript
|
||||
const codemirrorThemeMap = {
|
||||
'catppuccin': 'catppuccin-mocha', // Nécessite le thème CodeMirror
|
||||
'everforest': 'everforest-dark', // Nécessite le thème CodeMirror
|
||||
// ... autres mappings
|
||||
};
|
||||
```
|
||||
|
||||
## Feedback
|
||||
|
||||
Ces thèmes ont été ajoutés suite aux retours de la communauté. N'hésitez pas à suggérer d'autres thèmes populaires !
|
||||
|
||||
### Thèmes à venir (potentiellement)
|
||||
|
||||
- [ ] Gruvbox Dark
|
||||
- [ ] Tokyo Night
|
||||
- [ ] Rosé Pine
|
||||
- [ ] Ayu Dark
|
||||
- [ ] Kanagawa
|
||||
|
||||
---
|
||||
|
||||
**Date d'ajout** : 11 novembre 2025
|
||||
**Version** : 2.2.0
|
||||
**Total de thèmes** : 8
|
||||
394
docs/THEMES_EXAMPLES.md
Normal file
394
docs/THEMES_EXAMPLES.md
Normal file
@ -0,0 +1,394 @@
|
||||
# Exemples de Code - Système de Thèmes
|
||||
|
||||
Ce document contient des exemples pratiques pour travailler avec le système de thèmes.
|
||||
|
||||
## Exemples Utilisateur
|
||||
|
||||
### Changer de thème via la console du navigateur
|
||||
|
||||
```javascript
|
||||
// Appliquer le thème Dracula
|
||||
window.themeManager.applyTheme('dracula');
|
||||
|
||||
// Appliquer le thème Nord
|
||||
window.themeManager.applyTheme('nord');
|
||||
|
||||
// Obtenir le thème actuel
|
||||
console.log(window.themeManager.getCurrentTheme());
|
||||
|
||||
// Obtenir la liste de tous les thèmes
|
||||
console.log(window.themeManager.getThemes());
|
||||
```
|
||||
|
||||
### Vérifier quel thème est actif
|
||||
|
||||
```javascript
|
||||
// Méthode 1 : Via le ThemeManager
|
||||
const currentTheme = window.themeManager.getCurrentTheme();
|
||||
console.log('Thème actif:', currentTheme);
|
||||
|
||||
// Méthode 2 : Via l'attribut data-theme
|
||||
const themeAttribute = document.documentElement.getAttribute('data-theme');
|
||||
console.log('Thème actif:', themeAttribute);
|
||||
|
||||
// Méthode 3 : Via localStorage
|
||||
const savedTheme = localStorage.getItem('app-theme');
|
||||
console.log('Thème sauvegardé:', savedTheme);
|
||||
```
|
||||
|
||||
## Exemples Développeur
|
||||
|
||||
### Créer un nouveau thème personnalisé
|
||||
|
||||
#### 1. Définir les variables CSS dans `themes.css`
|
||||
|
||||
```css
|
||||
/* ===========================
|
||||
THEME: GITHUB DARK
|
||||
=========================== */
|
||||
[data-theme="github-dark"] {
|
||||
--bg-primary: #0d1117;
|
||||
--bg-secondary: #161b22;
|
||||
--bg-tertiary: #21262d;
|
||||
--bg-elevated: #30363d;
|
||||
|
||||
--border-primary: #30363d;
|
||||
--border-secondary: #21262d;
|
||||
|
||||
--text-primary: #c9d1d9;
|
||||
--text-secondary: #8b949e;
|
||||
--text-muted: #484f58;
|
||||
|
||||
--accent-primary: #58a6ff;
|
||||
--accent-primary-hover: #79c0ff;
|
||||
--accent-secondary: #1f6feb;
|
||||
--accent-secondary-hover: #388bfd;
|
||||
|
||||
--success: #3fb950;
|
||||
--warning: #d29922;
|
||||
--error: #f85149;
|
||||
}
|
||||
|
||||
/* Couleurs de prévisualisation */
|
||||
.theme-card[data-theme="github-dark"] .theme-preview-color:nth-child(1) { background: #0d1117; }
|
||||
.theme-card[data-theme="github-dark"] .theme-preview-color:nth-child(2) { background: #58a6ff; }
|
||||
.theme-card[data-theme="github-dark"] .theme-preview-color:nth-child(3) { background: #1f6feb; }
|
||||
.theme-card[data-theme="github-dark"] .theme-preview-color:nth-child(4) { background: #c9d1d9; }
|
||||
```
|
||||
|
||||
#### 2. Ajouter le thème dans `theme-manager.js`
|
||||
|
||||
```javascript
|
||||
// Dans le constructeur de ThemeManager
|
||||
this.themes = [
|
||||
// ... thèmes existants
|
||||
{
|
||||
id: 'github-dark',
|
||||
name: 'GitHub Dark',
|
||||
icon: '🐙',
|
||||
description: 'Thème inspiré de GitHub avec des tons bleus et gris'
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
#### 3. Ajouter la carte dans `index.html`
|
||||
|
||||
```html
|
||||
<!-- GitHub Dark -->
|
||||
<div class="theme-card" data-theme="github-dark" onclick="selectTheme('github-dark')">
|
||||
<div class="theme-card-header">
|
||||
<span class="theme-card-icon">🐙</span>
|
||||
<span class="theme-card-name">GitHub Dark</span>
|
||||
</div>
|
||||
<div class="theme-preview">
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
<div class="theme-preview-color"></div>
|
||||
</div>
|
||||
<p class="theme-description">Thème inspiré de GitHub avec des tons bleus et gris</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Écouter les changements de thème
|
||||
|
||||
```javascript
|
||||
// Créer un MutationObserver pour détecter les changements de thème
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
|
||||
const newTheme = document.documentElement.getAttribute('data-theme');
|
||||
console.log('Thème changé vers:', newTheme);
|
||||
|
||||
// Faire quelque chose lors du changement de thème
|
||||
// Par exemple, mettre à jour CodeMirror, Highlight.js, etc.
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Observer les changements sur l'élément <html>
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['data-theme']
|
||||
});
|
||||
```
|
||||
|
||||
### Créer un thème dynamique basé sur l'heure
|
||||
|
||||
```javascript
|
||||
function applyTimeBasedTheme() {
|
||||
const hour = new Date().getHours();
|
||||
|
||||
if (hour >= 6 && hour < 18) {
|
||||
// Jour (6h-18h) - utiliser un thème plus lumineux
|
||||
window.themeManager.applyTheme('solarized-dark');
|
||||
} else if (hour >= 18 && hour < 22) {
|
||||
// Soirée (18h-22h) - utiliser un thème doux
|
||||
window.themeManager.applyTheme('one-dark');
|
||||
} else {
|
||||
// Nuit (22h-6h) - utiliser un thème très sombre
|
||||
window.themeManager.applyTheme('material-dark');
|
||||
}
|
||||
}
|
||||
|
||||
// Appliquer au chargement
|
||||
applyTimeBasedTheme();
|
||||
|
||||
// Vérifier toutes les heures
|
||||
setInterval(applyTimeBasedTheme, 3600000);
|
||||
```
|
||||
|
||||
### Thème aléatoire au chargement
|
||||
|
||||
```javascript
|
||||
function applyRandomTheme() {
|
||||
const themes = window.themeManager.getThemes();
|
||||
const randomIndex = Math.floor(Math.random() * themes.length);
|
||||
const randomTheme = themes[randomIndex];
|
||||
|
||||
window.themeManager.applyTheme(randomTheme.id);
|
||||
console.log('Thème aléatoire appliqué:', randomTheme.name);
|
||||
}
|
||||
|
||||
// Utilisation
|
||||
// applyRandomTheme();
|
||||
```
|
||||
|
||||
### Créer un raccourci clavier
|
||||
|
||||
```javascript
|
||||
// Ctrl+T pour ouvrir/fermer la modale de thèmes
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Ctrl+T ou Cmd+T
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 't') {
|
||||
e.preventDefault();
|
||||
|
||||
const modal = document.getElementById('theme-modal');
|
||||
if (modal.style.display === 'flex') {
|
||||
window.closeThemeModal();
|
||||
} else {
|
||||
window.openThemeModal();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Ctrl+Shift+T pour passer au thème suivant
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'T') {
|
||||
e.preventDefault();
|
||||
|
||||
const themes = window.themeManager.getThemes();
|
||||
const currentTheme = window.themeManager.getCurrentTheme();
|
||||
const currentIndex = themes.findIndex(t => t.id === currentTheme);
|
||||
const nextIndex = (currentIndex + 1) % themes.length;
|
||||
|
||||
window.themeManager.applyTheme(themes[nextIndex].id);
|
||||
console.log('Thème suivant:', themes[nextIndex].name);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Adapter CodeMirror au thème
|
||||
|
||||
```javascript
|
||||
// Mapper les thèmes de l'app aux thèmes CodeMirror
|
||||
const codemirrorThemeMap = {
|
||||
'material-dark': 'material-darker',
|
||||
'monokai-dark': 'monokai',
|
||||
'dracula': 'dracula',
|
||||
'one-dark': 'one-dark',
|
||||
'solarized-dark': 'solarized dark',
|
||||
'nord': 'nord'
|
||||
};
|
||||
|
||||
// Observer les changements de thème
|
||||
const observer = new MutationObserver(() => {
|
||||
const currentTheme = window.themeManager.getCurrentTheme();
|
||||
const cmTheme = codemirrorThemeMap[currentTheme] || 'material-darker';
|
||||
|
||||
// Si vous utilisez CodeMirror
|
||||
if (window.editor && typeof window.editor.setOption === 'function') {
|
||||
window.editor.setOption('theme', cmTheme);
|
||||
console.log('CodeMirror thème changé vers:', cmTheme);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['data-theme']
|
||||
});
|
||||
```
|
||||
|
||||
### Exporter/Importer les préférences utilisateur
|
||||
|
||||
```javascript
|
||||
// Exporter les préférences
|
||||
function exportPreferences() {
|
||||
const prefs = {
|
||||
theme: window.themeManager.getCurrentTheme(),
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(prefs, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'project-notes-preferences.json';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// Importer les préférences
|
||||
function importPreferences(file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const prefs = JSON.parse(e.target.result);
|
||||
if (prefs.theme) {
|
||||
window.themeManager.applyTheme(prefs.theme);
|
||||
console.log('Préférences importées:', prefs);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de l\'importation:', error);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
```
|
||||
|
||||
### Créer un prévisualisateur de thème en direct
|
||||
|
||||
```javascript
|
||||
// Créer une fonction pour prévisualiser un thème sans le sauvegarder
|
||||
function previewTheme(themeId) {
|
||||
// Sauvegarder le thème actuel
|
||||
const originalTheme = window.themeManager.getCurrentTheme();
|
||||
|
||||
// Appliquer temporairement le nouveau thème
|
||||
document.documentElement.setAttribute('data-theme', themeId);
|
||||
|
||||
// Retourner une fonction pour annuler
|
||||
return () => {
|
||||
document.documentElement.setAttribute('data-theme', originalTheme);
|
||||
};
|
||||
}
|
||||
|
||||
// Utilisation
|
||||
const cancelPreview = previewTheme('dracula');
|
||||
|
||||
// Après quelques secondes, annuler
|
||||
setTimeout(() => {
|
||||
cancelPreview();
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
## Intégration avec d'autres bibliothèques
|
||||
|
||||
### Highlight.js
|
||||
|
||||
```javascript
|
||||
// Adapter le thème Highlight.js
|
||||
const highlightThemeMap = {
|
||||
'material-dark': 'atom-one-dark',
|
||||
'monokai-dark': 'monokai',
|
||||
'dracula': 'dracula',
|
||||
'one-dark': 'atom-one-dark',
|
||||
'solarized-dark': 'solarized-dark',
|
||||
'nord': 'nord'
|
||||
};
|
||||
|
||||
function updateHighlightTheme(themeId) {
|
||||
const hlTheme = highlightThemeMap[themeId] || 'atom-one-dark';
|
||||
const linkElement = document.querySelector('link[href*="highlight.js"]');
|
||||
|
||||
if (linkElement) {
|
||||
linkElement.href = `https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/${hlTheme}.min.css`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Marked.js (déjà intégré)
|
||||
|
||||
Le système de thèmes fonctionne automatiquement avec Marked.js car il utilise les variables CSS globales.
|
||||
|
||||
## Débogage
|
||||
|
||||
### Afficher toutes les variables CSS actives
|
||||
|
||||
```javascript
|
||||
// Obtenir toutes les variables CSS définies sur :root
|
||||
function getCurrentThemeVariables() {
|
||||
const root = document.documentElement;
|
||||
const styles = getComputedStyle(root);
|
||||
const variables = {};
|
||||
|
||||
// Liste des variables de thème
|
||||
const varNames = [
|
||||
'--bg-primary', '--bg-secondary', '--bg-tertiary', '--bg-elevated',
|
||||
'--border-primary', '--border-secondary',
|
||||
'--text-primary', '--text-secondary', '--text-muted',
|
||||
'--accent-primary', '--accent-secondary',
|
||||
'--success', '--warning', '--error'
|
||||
];
|
||||
|
||||
varNames.forEach(varName => {
|
||||
variables[varName] = styles.getPropertyValue(varName).trim();
|
||||
});
|
||||
|
||||
return variables;
|
||||
}
|
||||
|
||||
// Afficher
|
||||
console.table(getCurrentThemeVariables());
|
||||
```
|
||||
|
||||
### Vérifier si un thème est chargé
|
||||
|
||||
```javascript
|
||||
function isThemeLoaded(themeId) {
|
||||
// Appliquer temporairement le thème
|
||||
const originalTheme = document.documentElement.getAttribute('data-theme');
|
||||
document.documentElement.setAttribute('data-theme', themeId);
|
||||
|
||||
// Vérifier si les variables CSS sont définies
|
||||
const primaryBg = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue('--bg-primary').trim();
|
||||
|
||||
// Restaurer le thème original
|
||||
document.documentElement.setAttribute('data-theme', originalTheme);
|
||||
|
||||
return primaryBg !== '';
|
||||
}
|
||||
|
||||
// Vérifier tous les thèmes
|
||||
window.themeManager.getThemes().forEach(theme => {
|
||||
console.log(theme.name, ':', isThemeLoaded(theme.id) ? '✅' : '❌');
|
||||
});
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
Ces exemples couvrent la plupart des cas d'usage courants. Pour plus d'informations, consultez :
|
||||
- `docs/THEMES.md` - Documentation technique complète
|
||||
- `docs/GUIDE_THEMES.md` - Guide utilisateur
|
||||
- `frontend/src/theme-manager.js` - Code source du gestionnaire
|
||||
Reference in New Issue
Block a user