309 lines
8.7 KiB
Markdown
309 lines
8.7 KiB
Markdown
# ✅ Système d'icônes - Prêt à tester !
|
||
|
||
## 🎯 Résumé des modifications
|
||
|
||
Le système de packs d'icônes est maintenant **complètement fonctionnel** et intégré dans toutes les pages.
|
||
|
||
### Problème résolu
|
||
|
||
Les icônes étaient codées en dur avec des emojis dans le HTML. Maintenant, elles sont **dynamiques** et changent selon le pack sélectionné.
|
||
|
||
---
|
||
|
||
## 🔧 Modifications apportées
|
||
|
||
### 1. Boutons HTML mis à jour
|
||
|
||
**Fichiers modifiés** :
|
||
- [frontend/device_detail.html](../frontend/device_detail.html) - Boutons "Rafraîchir", "Supprimer", "Upload", "Ajouter lien"
|
||
- [frontend/devices.html](../frontend/devices.html) - Bouton "Rafraîchir"
|
||
- [frontend/settings.html](../frontend/settings.html) - Tous les boutons (Enregistrer, Réinitialiser, Copier, etc.)
|
||
|
||
**Changement effectué** :
|
||
```html
|
||
<!-- AVANT (emoji codé en dur) -->
|
||
<button class="btn btn-danger" onclick="deleteItem()">
|
||
🗑️ Supprimer
|
||
</button>
|
||
|
||
<!-- APRÈS (icône dynamique) -->
|
||
<button class="btn btn-danger" onclick="deleteItem()" data-icon="delete">
|
||
<span class="btn-icon-wrapper"></span> Supprimer
|
||
</button>
|
||
```
|
||
|
||
### 2. Auto-initialisation des icônes
|
||
|
||
**Fichier modifié** : [frontend/js/icon-manager.js](../frontend/js/icon-manager.js)
|
||
|
||
Le gestionnaire initialise automatiquement **toutes** les icônes au chargement de la page :
|
||
- Scanne tous les `[data-icon]`
|
||
- Injecte l'icône correspondante dans `.btn-icon-wrapper`
|
||
- Re-initialise automatiquement lors du changement de pack
|
||
|
||
### 3. Fonction helper ajoutée
|
||
|
||
**Fichier modifié** : [frontend/js/utils.js](../frontend/js/utils.js)
|
||
|
||
Nouvelle fonction `initializeButtonIcons()` :
|
||
```javascript
|
||
// Initialise tous les boutons avec icônes
|
||
initializeButtonIcons();
|
||
|
||
// Appelée automatiquement par icon-manager.js
|
||
```
|
||
|
||
### 4. Page de test créée
|
||
|
||
**Nouveau fichier** : [frontend/test-icons.html](../frontend/test-icons.html)
|
||
|
||
Page dédiée pour tester les packs d'icônes avec :
|
||
- Sélecteur de pack en temps réel
|
||
- 15 boutons de test couvrant toutes les icônes
|
||
- Informations de debug
|
||
- Application instantanée sans rechargement
|
||
|
||
---
|
||
|
||
## 🧪 Comment tester
|
||
|
||
### Test 1 : Page de test dédiée (RECOMMANDÉ)
|
||
|
||
1. Ouvrir [http://localhost:8087/test-icons.html](http://localhost:8087/test-icons.html)
|
||
2. Sélectionner différents packs dans la liste déroulante
|
||
3. Cliquer sur "Appliquer le pack"
|
||
4. Observer que **tous les boutons** changent d'icônes instantanément
|
||
5. Vérifier la section "Informations de debug" pour voir les détails
|
||
|
||
**Résultat attendu** :
|
||
- Emojis Unicode : ➕ ✏️ 🗑️ 💾
|
||
- FontAwesome Solid : Icônes SVG pleines en blanc
|
||
- FontAwesome Regular : Icônes SVG fines en blanc
|
||
- Icons8 PNG : Mix d'icônes PNG et emojis
|
||
|
||
### Test 2 : Via Settings (test complet)
|
||
|
||
1. Ouvrir [http://localhost:8087/settings.html](http://localhost:8087/settings.html)
|
||
2. Aller dans la section **"Pack d'icônes"**
|
||
3. Sélectionner un pack (ex: FontAwesome Solid)
|
||
4. Observer l'aperçu en temps réel
|
||
5. Cliquer sur **"Appliquer le pack d'icônes"**
|
||
6. La page se recharge automatiquement
|
||
7. Vérifier que **tous les boutons** de Settings utilisent le nouveau pack
|
||
8. Naviguer vers **Device Detail** ou **Devices**
|
||
9. Vérifier que les icônes sont cohérentes partout
|
||
|
||
**Boutons à vérifier dans Settings** :
|
||
- 💾 / SVG - Appliquer le thème
|
||
- 💾 / SVG - Appliquer le pack d'icônes
|
||
- 🔄 / SVG - Réinitialiser
|
||
- 💾 / SVG - Enregistrer les préférences
|
||
- 💾 / SVG - Enregistrer les seuils
|
||
- 📋 / SVG - Copier
|
||
|
||
### Test 3 : Device Detail
|
||
|
||
1. Ouvrir un device : [http://localhost:8087/device_detail.html?id=1](http://localhost:8087/device_detail.html?id=1)
|
||
2. Vérifier les boutons :
|
||
- **🔄 / SVG Rafraîchir** (dans le header)
|
||
- **🗑️ / SVG Supprimer** (à côté du nom)
|
||
- **📤 / SVG Upload** (dans l'onglet Documents)
|
||
- **🔗 / SVG Ajouter lien** (dans l'onglet Liens)
|
||
|
||
**Résultat attendu** : Toutes les icônes correspondent au pack sélectionné.
|
||
|
||
### Test 4 : Changement dynamique
|
||
|
||
1. Avec la console ouverte (F12)
|
||
2. Exécuter :
|
||
```javascript
|
||
// Changer de pack
|
||
window.IconManager.applyPack('fontawesome-solid');
|
||
|
||
// Vérifier le pack actuel
|
||
console.log(window.IconManager.getCurrentPack());
|
||
|
||
// Obtenir une icône
|
||
console.log(window.IconManager.getIcon('delete'));
|
||
```
|
||
|
||
**Résultat attendu** :
|
||
- Les icônes changent instantanément
|
||
- La console affiche le pack actuel
|
||
- L'icône retournée correspond au pack
|
||
|
||
---
|
||
|
||
## 🐛 Debug en cas de problème
|
||
|
||
### Problème : Les icônes ne changent pas
|
||
|
||
**Solution** :
|
||
1. Ouvrir la console (F12)
|
||
2. Vérifier les logs :
|
||
```
|
||
[IconManager] Initialized with pack: emoji
|
||
[initializeButtonIcons] Initialized X button icons
|
||
```
|
||
|
||
3. Vérifier que `icon-manager.js` est chargé :
|
||
```javascript
|
||
console.log(window.IconManager);
|
||
// Devrait afficher l'objet IconManager
|
||
```
|
||
|
||
4. Vérifier que les boutons ont l'attribut `data-icon` :
|
||
```javascript
|
||
console.log(document.querySelectorAll('[data-icon]').length);
|
||
// Devrait afficher un nombre > 0
|
||
```
|
||
|
||
### Problème : Les icônes SVG n'apparaissent pas
|
||
|
||
**Solution** :
|
||
1. Vérifier les fichiers SVG :
|
||
```bash
|
||
ls frontend/icons/svg/fa/solid/ | grep -E "trash|plus|pen|save"
|
||
```
|
||
|
||
2. Ouvrir la console Network (F12 > Network)
|
||
3. Recharger la page
|
||
4. Chercher les erreurs 404 sur les fichiers .svg
|
||
|
||
5. Vérifier les permissions :
|
||
```bash
|
||
chmod 644 frontend/icons/svg/fa/solid/*.svg
|
||
chmod 644 frontend/icons/svg/fa/regular/*.svg
|
||
```
|
||
|
||
### Problème : Le pack ne se sauvegarde pas
|
||
|
||
**Solution** :
|
||
1. Vérifier localStorage :
|
||
```javascript
|
||
console.log(localStorage.getItem('benchtools_icon_pack'));
|
||
```
|
||
|
||
2. Vider le cache du navigateur (Ctrl+Shift+Del)
|
||
3. Tester en navigation privée
|
||
|
||
### Problème : Les icônes sont de la mauvaise couleur
|
||
|
||
**Vérification** :
|
||
Les filtres CSS dans `components.css` doivent être :
|
||
```css
|
||
.btn-primary .btn-icon { filter: brightness(0) invert(1); } /* Blanc */
|
||
.btn-secondary .btn-icon { filter: brightness(0.8); }
|
||
.btn-danger .btn-icon { filter: brightness(0) invert(1); } /* Blanc */
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 Liste complète des boutons mis à jour
|
||
|
||
### device_detail.html (4 boutons)
|
||
- ✅ Rafraîchir (header)
|
||
- ✅ Supprimer device
|
||
- ✅ Upload document
|
||
- ✅ Ajouter lien
|
||
|
||
### devices.html (1 bouton)
|
||
- ✅ Rafraîchir (header)
|
||
|
||
### settings.html (9 boutons)
|
||
- ✅ Appliquer le thème
|
||
- ✅ Appliquer le pack d'icônes
|
||
- ✅ Réinitialiser pack
|
||
- ✅ Enregistrer préférences
|
||
- ✅ Réinitialiser préférences
|
||
- ✅ Enregistrer seuils
|
||
- ✅ Calculer automatiquement
|
||
- ✅ Réinitialiser seuils
|
||
- ✅ Copier token
|
||
|
||
**Total : 14 boutons** mis à jour avec le système dynamique.
|
||
|
||
---
|
||
|
||
## 🎨 Packs disponibles
|
||
|
||
| Pack | Icône Add | Icône Delete | Icône Save | Type |
|
||
|------|-----------|--------------|------------|------|
|
||
| **emoji** | ➕ | 🗑️ | 💾 | Unicode emoji |
|
||
| **fontawesome-solid** |  |  |  | SVG plein |
|
||
| **fontawesome-regular** |  |  |  | SVG fin |
|
||
| **icons8** | ✓ | 🗑️ | 💾 | Mix PNG/emoji |
|
||
|
||
---
|
||
|
||
## 🚀 Prochaines étapes (optionnel)
|
||
|
||
Si vous voulez aller plus loin :
|
||
|
||
### 1. Ajouter plus d'icônes
|
||
|
||
Éditer `icon-manager.js` et ajouter de nouvelles icônes dans `ICON_PACKS` :
|
||
```javascript
|
||
icons: {
|
||
// ... icônes existantes
|
||
'new-icon': '<img src="icons/svg/fa/solid/star.svg" class="btn-icon" alt="Star">'
|
||
}
|
||
```
|
||
|
||
### 2. Créer un nouveau pack personnalisé
|
||
|
||
Ajouter un nouveau pack dans `icon-manager.js` :
|
||
```javascript
|
||
'mon-pack': {
|
||
name: 'Mon Pack Custom',
|
||
description: 'Mon pack personnalisé',
|
||
icons: {
|
||
'add': '➕',
|
||
'delete': '🗑️',
|
||
// ... autres icônes
|
||
}
|
||
}
|
||
```
|
||
|
||
Puis ajouter l'option dans `settings.html`.
|
||
|
||
### 3. Mettre à jour les boutons générés en JavaScript
|
||
|
||
Si vous avez des boutons créés dynamiquement dans vos scripts, utilisez :
|
||
```javascript
|
||
// Au lieu de
|
||
innerHTML = '<button>🗑️ Supprimer</button>';
|
||
|
||
// Utilisez
|
||
innerHTML = createIconButton('delete', 'Supprimer', 'btn btn-danger', 'deleteItem()');
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ Checklist de test
|
||
|
||
- [ ] Ouvrir test-icons.html et tester les 4 packs
|
||
- [ ] Vérifier que l'aperçu fonctionne dans Settings
|
||
- [ ] Appliquer un pack et vérifier le rechargement
|
||
- [ ] Vérifier device_detail.html avec le nouveau pack
|
||
- [ ] Vérifier devices.html avec le nouveau pack
|
||
- [ ] Vérifier settings.html avec le nouveau pack
|
||
- [ ] Tester le changement de pack plusieurs fois
|
||
- [ ] Vérifier que le pack persiste après rechargement
|
||
- [ ] Tester en navigation privée
|
||
- [ ] Vérifier la console pour les erreurs
|
||
|
||
---
|
||
|
||
## 📚 Documentation
|
||
|
||
- [FEATURE_ICON_PACKS.md](FEATURE_ICON_PACKS.md) - Documentation technique complète
|
||
- [GUIDE_ICON_PACKS.md](GUIDE_ICON_PACKS.md) - Guide utilisateur
|
||
- [CHANGELOG.md](../CHANGELOG.md) - Liste des changements
|
||
|
||
---
|
||
|
||
**Statut** : ✅ **PRÊT POUR LES TESTS**
|
||
|
||
Le système est complètement fonctionnel et toutes les icônes sont dynamiques. Vous pouvez maintenant changer de pack d'icônes à votre guise !
|