8.7 KiB
8.7 KiB
✅ 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 - Boutons "Rafraîchir", "Supprimer", "Upload", "Ajouter lien"
- frontend/devices.html - Bouton "Rafraîchir"
- frontend/settings.html - Tous les boutons (Enregistrer, Réinitialiser, Copier, etc.)
Changement effectué :
<!-- 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
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
Nouvelle fonction initializeButtonIcons() :
// 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
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É)
- Ouvrir http://localhost:8087/test-icons.html
- Sélectionner différents packs dans la liste déroulante
- Cliquer sur "Appliquer le pack"
- Observer que tous les boutons changent d'icônes instantanément
- 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)
- Ouvrir http://localhost:8087/settings.html
- Aller dans la section "Pack d'icônes"
- Sélectionner un pack (ex: FontAwesome Solid)
- Observer l'aperçu en temps réel
- Cliquer sur "Appliquer le pack d'icônes"
- La page se recharge automatiquement
- Vérifier que tous les boutons de Settings utilisent le nouveau pack
- Naviguer vers Device Detail ou Devices
- 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
- Ouvrir un device : http://localhost:8087/device_detail.html?id=1
- 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
- Avec la console ouverte (F12)
- Exécuter :
// 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 :
- Ouvrir la console (F12)
- Vérifier les logs :
[IconManager] Initialized with pack: emoji
[initializeButtonIcons] Initialized X button icons
- Vérifier que
icon-manager.jsest chargé :
console.log(window.IconManager);
// Devrait afficher l'objet IconManager
- Vérifier que les boutons ont l'attribut
data-icon:
console.log(document.querySelectorAll('[data-icon]').length);
// Devrait afficher un nombre > 0
Problème : Les icônes SVG n'apparaissent pas
Solution :
- Vérifier les fichiers SVG :
ls frontend/icons/svg/fa/solid/ | grep -E "trash|plus|pen|save"
-
Ouvrir la console Network (F12 > Network)
-
Recharger la page
-
Chercher les erreurs 404 sur les fichiers .svg
-
Vérifier les permissions :
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 :
- Vérifier localStorage :
console.log(localStorage.getItem('benchtools_icon_pack'));
- Vider le cache du navigateur (Ctrl+Shift+Del)
- 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 :
.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 :
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 :
'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 :
// 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 - Documentation technique complète
- GUIDE_ICON_PACKS.md - Guide utilisateur
- 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 !