138 lines
4.3 KiB
Markdown
138 lines
4.3 KiB
Markdown
# Corrections i18n - Résumé des changements
|
|
|
|
## Problème identifié
|
|
Beaucoup d'éléments de l'interface restaient en français car ils étaient codés en dur dans le HTML sans système de traduction dynamique.
|
|
|
|
## Solution implémentée
|
|
|
|
### 1. Système d'attributs `data-i18n`
|
|
Ajout d'attributs `data-i18n` sur les éléments HTML statiques pour permettre la traduction automatique :
|
|
|
|
```html
|
|
<!-- Avant -->
|
|
<button onclick="showNewNoteModal()">✨ Nouvelle note</button>
|
|
|
|
<!-- Après -->
|
|
<button onclick="showNewNoteModal()" data-i18n="menu.newNote">✨ Nouvelle note</button>
|
|
```
|
|
|
|
### 2. Amélioration de `translateStaticUI()`
|
|
|
|
La fonction `translateStaticUI()` dans `frontend/src/language-manager.js` a été améliorée pour :
|
|
|
|
1. **Traduire automatiquement tous les éléments avec `data-i18n`** :
|
|
```javascript
|
|
const elementsWithI18n = document.querySelectorAll('[data-i18n]');
|
|
elementsWithI18n.forEach(element => {
|
|
const key = element.getAttribute('data-i18n');
|
|
const translation = t(key);
|
|
if (translation && translation !== key) {
|
|
element.textContent = translation;
|
|
}
|
|
});
|
|
```
|
|
|
|
2. **Gérer les attributs spéciaux** :
|
|
- `data-i18n-placeholder` : pour traduire les placeholders d'input
|
|
- `data-i18n-title` : pour traduire les attributs title (tooltips)
|
|
|
|
3. **Préserver les emojis** : détecte les emojis en début de texte et les conserve lors de la traduction
|
|
|
|
### 3. Éléments HTML mis à jour
|
|
|
|
#### Header (`templates/index.html`)
|
|
- ✅ Bouton "Accueil" → `data-i18n="menu.home"`
|
|
- ✅ Bouton "Nouvelle note" → `data-i18n="menu.newNote"`
|
|
- ✅ Input de recherche → `data-i18n-placeholder="search.placeholder"`
|
|
|
|
#### Sidebar
|
|
- ✅ Bouton "Nouveau dossier" → `data-i18n="fileTree.newFolder"`
|
|
- ✅ Bouton "Paramètres" → `data-i18n="settings.title"` sur le span
|
|
- ✅ Section "⭐ Favoris" → `data-i18n="sidebar.favorites"`
|
|
- ✅ Section "📅 Daily Notes" → `data-i18n="sidebar.daily"`
|
|
|
|
#### Modals (traduites dynamiquement)
|
|
- ✅ Modal "Nouvelle note" (titre, label, boutons)
|
|
- ✅ Modal "Nouveau dossier" (titre, label, boutons)
|
|
- ✅ Modal "Paramètres" (titre, onglets, boutons)
|
|
|
|
#### Selection Toolbar (traduit dynamiquement)
|
|
- ✅ Bouton "Supprimer"
|
|
- ✅ Bouton "Annuler"
|
|
|
|
### 4. Nouvelles clés de traduction ajoutées
|
|
|
|
**Fichiers : `locales/en.json` et `locales/fr.json`**
|
|
|
|
```json
|
|
{
|
|
"fileTree": {
|
|
"newFolder": "New Folder" / "Nouveau Dossier"
|
|
},
|
|
"tabs": {
|
|
"themes": "Themes" / "Thèmes",
|
|
"fonts": "Fonts" / "Polices",
|
|
"shortcuts": "Shortcuts" / "Raccourcis",
|
|
"other": "Other" / "Autre"
|
|
},
|
|
"newNoteModal": {
|
|
"title": "New Note" / "Nouvelle Note",
|
|
"label": "Note name" / "Nom de la note",
|
|
"placeholder": "my-note.md" / "ma-note.md",
|
|
"create": "Create / Open" / "Créer / Ouvrir",
|
|
"cancel": "Cancel" / "Annuler"
|
|
},
|
|
"newFolderModal": {
|
|
"title": "New Folder" / "Nouveau Dossier",
|
|
"label": "Folder name" / "Nom du dossier",
|
|
"placeholder": "my-folder" / "mon-dossier",
|
|
"create": "Create" / "Créer",
|
|
"cancel": "Cancel" / "Annuler"
|
|
},
|
|
"selectionToolbar": {
|
|
"delete": "Delete" / "Supprimer",
|
|
"cancel": "Cancel" / "Annuler"
|
|
},
|
|
"sidebar": {
|
|
"files": "Files" / "Fichiers",
|
|
"favorites": "Favorites" / "Favoris",
|
|
"daily": "Daily Notes" / "Notes Quotidiennes",
|
|
"search": "Search" / "Recherche"
|
|
}
|
|
}
|
|
```
|
|
|
|
## Prochaines étapes
|
|
|
|
1. **Builder le frontend** :
|
|
```bash
|
|
cd frontend
|
|
npm run build
|
|
```
|
|
|
|
2. **Tester** :
|
|
- Lancer le serveur : `go run ./cmd/server`
|
|
- Ouvrir http://localhost:8080
|
|
- Changer la langue dans Settings > Autre
|
|
- Vérifier que tous les éléments se traduisent
|
|
|
|
## Éléments encore à traduire (optionnel)
|
|
|
|
Pour une traduction complète à 100%, il faudrait aussi traduire :
|
|
|
|
- Les messages d'erreur JavaScript (alert, confirm)
|
|
- Les commentaires HTML (peu visible par l'utilisateur)
|
|
- Les tooltips (attributs `title`)
|
|
- Les templates dynamiques (file-tree, favorites, daily-notes, etc.)
|
|
|
|
Ces éléments peuvent être ajoutés progressivement avec le même système `data-i18n`.
|
|
|
|
## Conclusion
|
|
|
|
Le système i18n est maintenant fonctionnel avec :
|
|
- ✅ Support automatique des attributs `data-i18n`
|
|
- ✅ Traduction des éléments principaux de l'interface
|
|
- ✅ Sélecteur de langue fonctionnel
|
|
- ✅ Persistance de la préférence utilisateur
|
|
- ✅ Structure extensible pour ajouter facilement de nouvelles langues
|