add go bench client
This commit is contained in:
Gilles Soulier
339
docs/GUIDE_ICON_PACKS.md
Normal file
339
docs/GUIDE_ICON_PACKS.md
Normal file
@@ -0,0 +1,339 @@
|
||||
# 🎨 Guide d'utilisation des packs d'icônes
|
||||
|
||||
Ce guide vous explique comment utiliser et personnaliser les icônes des boutons d'action dans Linux BenchTools.
|
||||
|
||||
## 📖 Table des matières
|
||||
|
||||
1. [Changer de pack d'icônes](#changer-de-pack-dicônes)
|
||||
2. [Packs disponibles](#packs-disponibles)
|
||||
3. [Icônes supportées](#icônes-supportées)
|
||||
4. [Exemples visuels](#exemples-visuels)
|
||||
5. [Pour les développeurs](#pour-les-développeurs)
|
||||
6. [Dépannage](#dépannage)
|
||||
|
||||
---
|
||||
|
||||
## Changer de pack d'icônes
|
||||
|
||||
### Via l'interface Settings
|
||||
|
||||
1. Ouvrez la page **Settings** : [http://localhost:8087/settings.html](http://localhost:8087/settings.html)
|
||||
2. Dans la section **"Pack d'icônes"**, sélectionnez le pack de votre choix
|
||||
3. Observez l'aperçu en temps réel dans la zone de prévisualisation
|
||||
4. Cliquez sur **"Appliquer le pack d'icônes"**
|
||||
5. La page se recharge automatiquement avec les nouvelles icônes
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Packs disponibles
|
||||
|
||||
### 🌟 Emojis Unicode (par défaut)
|
||||
|
||||
- **Type** : Emojis natifs
|
||||
- **Avantages** :
|
||||
- Colorés et expressifs
|
||||
- Pas de dépendance externe
|
||||
- Compatibilité universelle
|
||||
- Chargement instantané
|
||||
- **Inconvénients** :
|
||||
- Rendu variable selon l'OS et le navigateur
|
||||
- Taille fixe (difficile à ajuster)
|
||||
|
||||
**Exemples d'icônes** :
|
||||
- Ajouter : ➕
|
||||
- Éditer : ✏️
|
||||
- Supprimer : 🗑️
|
||||
- Enregistrer : 💾
|
||||
- Upload : 📤
|
||||
- Image : 🖼️
|
||||
- Fichier : 📄
|
||||
- Lien : 🔗
|
||||
|
||||
### ⚡ FontAwesome Solid
|
||||
|
||||
- **Type** : Icônes SVG pleines
|
||||
- **Avantages** :
|
||||
- Style professionnel et moderne
|
||||
- Taille ajustable (24px par défaut)
|
||||
- Couleur adaptée au bouton
|
||||
- Rendu cohérent sur tous les OS
|
||||
- **Inconvénients** :
|
||||
- Nécessite des fichiers SVG
|
||||
- Monochromes uniquement
|
||||
|
||||
**Utilisation** : Parfait pour un design professionnel et épuré. Les icônes s'adaptent automatiquement à la couleur du bouton.
|
||||
|
||||
### 🎯 FontAwesome Regular
|
||||
|
||||
- **Type** : Icônes SVG fines (outline)
|
||||
- **Avantages** :
|
||||
- Style minimaliste et élégant
|
||||
- Plus léger visuellement que Solid
|
||||
- Même cohérence que Solid
|
||||
- Parfait pour un design épuré
|
||||
- **Inconvénients** :
|
||||
- Moins visible que les versions pleines
|
||||
- Nécessite des fichiers SVG
|
||||
|
||||
**Utilisation** : Idéal pour un design minimaliste ou des interfaces épurées.
|
||||
|
||||
### 🌈 Icons8 PNG
|
||||
|
||||
- **Type** : Mix emojis et PNG
|
||||
- **Avantages** :
|
||||
- Combine icônes colorées et PNG
|
||||
- Utilise les assets existants
|
||||
- Style moderne et coloré
|
||||
- **Inconvénients** :
|
||||
- Mix de styles (peut être incohérent)
|
||||
- Taille fixe des PNG (48px)
|
||||
|
||||
**Utilisation** : Pour ceux qui veulent un mix de styles et utilisent déjà des icônes Icons8.
|
||||
|
||||
---
|
||||
|
||||
## Icônes supportées
|
||||
|
||||
Le système gère actuellement **18 icônes d'action** :
|
||||
|
||||
| Icône | Emoji | FA Solid | FA Regular | Utilisation |
|
||||
|-------|-------|----------|------------|-------------|
|
||||
| `add` | ➕ | plus.svg | square-plus.svg | Ajouter un élément |
|
||||
| `edit` | ✏️ | pen-to-square.svg | pen-to-square.svg | Éditer/Modifier |
|
||||
| `delete` | 🗑️ | trash-can.svg | trash-can.svg | Supprimer |
|
||||
| `save` | 💾 | floppy-disk.svg | floppy-disk.svg | Enregistrer |
|
||||
| `upload` | 📤 | upload.svg | - | Téléverser un fichier |
|
||||
| `download` | 📥 | download.svg | - | Télécharger |
|
||||
| `image` | 🖼️ | image.svg | image.svg | Gestion d'images |
|
||||
| `file` | 📄 | file.svg | file.svg | Gestion de fichiers |
|
||||
| `pdf` | 📕 | file-pdf.svg | file-pdf.svg | Fichiers PDF |
|
||||
| `link` | 🔗 | link.svg | - | Liens/URLs |
|
||||
| `refresh` | 🔄 | arrows-rotate.svg | - | Rafraîchir |
|
||||
| `search` | 🔍 | magnifying-glass.svg | - | Rechercher |
|
||||
| `settings` | ⚙️ | gear.svg | - | Paramètres |
|
||||
| `close` | ❌ | xmark.svg | circle-xmark.svg | Fermer |
|
||||
| `check` | ✅ | check.svg | circle-check.svg | Valider |
|
||||
| `warning` | ⚠️ | triangle-exclamation.svg | - | Avertissement |
|
||||
| `info` | ℹ️ | circle-info.svg | - | Information |
|
||||
| `copy` | 📋 | copy.svg | copy.svg | Copier |
|
||||
|
||||
---
|
||||
|
||||
## Exemples visuels
|
||||
|
||||
### Comparaison des packs
|
||||
|
||||
#### Boutons d'action principaux
|
||||
|
||||
**Emojis Unicode** :
|
||||
```
|
||||
[➕ Ajouter] [✏️ Éditer] [🗑️ Supprimer] [💾 Enregistrer]
|
||||
```
|
||||
|
||||
**FontAwesome Solid** :
|
||||
```
|
||||
[+ Ajouter] [✏ Éditer] [🗑 Supprimer] [💾 Enregistrer]
|
||||
```
|
||||
*(Icônes SVG pleines en blanc sur fond du bouton)*
|
||||
|
||||
**FontAwesome Regular** :
|
||||
```
|
||||
[⊞ Ajouter] [✎ Éditer] [🗑 Supprimer] [💾 Enregistrer]
|
||||
```
|
||||
*(Icônes SVG fines/outline)*
|
||||
|
||||
**Icons8 PNG** :
|
||||
```
|
||||
[✓ Ajouter] [✏ Éditer] [🗑 Supprimer] [💾 Enregistrer]
|
||||
```
|
||||
*(Mix de PNG et emojis)*
|
||||
|
||||
### Boutons dans différents contextes
|
||||
|
||||
#### Page Device Detail
|
||||
|
||||
- **Upload de documents** : Icône `upload` + texte "Upload"
|
||||
- **Ajout de lien** : Icône `link` + texte "Ajouter"
|
||||
- **Suppression de device** : Icône `delete` + texte "Supprimer"
|
||||
|
||||
#### Page Settings
|
||||
|
||||
- **Enregistrement des préférences** : Icône `save` + texte "Enregistrer"
|
||||
- **Réinitialisation** : Icône `refresh` + texte "Réinitialiser"
|
||||
- **Application du thème** : Icône `save` + texte "Appliquer"
|
||||
|
||||
---
|
||||
|
||||
## Pour les développeurs
|
||||
|
||||
### Utiliser les icônes dans votre code
|
||||
|
||||
#### Méthode 1 : Fonction helper (recommandée)
|
||||
|
||||
```javascript
|
||||
// Dans votre code de rendu
|
||||
function renderActionButtons() {
|
||||
const container = document.getElementById('actions');
|
||||
|
||||
// Créer un bouton avec icône
|
||||
const deleteBtn = createIconButton(
|
||||
'delete', // Nom de l'icône
|
||||
'Supprimer', // Texte du bouton
|
||||
'btn btn-danger', // Classes CSS
|
||||
'deleteItem()' // Gestionnaire onclick
|
||||
);
|
||||
|
||||
container.innerHTML = deleteBtn;
|
||||
}
|
||||
```
|
||||
|
||||
#### Méthode 2 : IconManager direct
|
||||
|
||||
```javascript
|
||||
// Récupérer juste l'icône
|
||||
const icon = window.IconManager.getIcon('add');
|
||||
// Retourne: "➕" ou "<img src='...' class='btn-icon'>" selon le pack
|
||||
|
||||
// Créer un bouton complet
|
||||
const btnHtml = window.IconManager.createButton('save', 'Enregistrer', 'btn btn-primary');
|
||||
```
|
||||
|
||||
#### Méthode 3 : HTML + JavaScript
|
||||
|
||||
```html
|
||||
<button class="btn btn-primary" data-icon="add" onclick="addItem()">
|
||||
<span class="btn-icon-wrapper"></span> Ajouter
|
||||
</button>
|
||||
|
||||
<script>
|
||||
// Au chargement de la page
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.IconManager.updateAllButtons();
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### Écouter les changements de pack
|
||||
|
||||
```javascript
|
||||
window.addEventListener('iconPackChanged', (event) => {
|
||||
console.log('Nouveau pack:', event.detail.pack);
|
||||
console.log('Nom du pack:', event.detail.packName);
|
||||
|
||||
// Re-render vos composants
|
||||
renderMyComponent();
|
||||
});
|
||||
```
|
||||
|
||||
### Créer un pack personnalisé
|
||||
|
||||
Voir [FEATURE_ICON_PACKS.md](FEATURE_ICON_PACKS.md#ajouter-un-nouveau-pack) pour les instructions détaillées.
|
||||
|
||||
---
|
||||
|
||||
## Dépannage
|
||||
|
||||
### Les icônes ne changent pas après avoir cliqué sur "Appliquer"
|
||||
|
||||
**Solution** :
|
||||
1. Vérifier que la page se recharge bien
|
||||
2. Vider le cache du navigateur (Ctrl+Shift+Del)
|
||||
3. Vérifier la console (F12) pour voir les erreurs
|
||||
4. Tester en navigation privée
|
||||
|
||||
### Les icônes SVG n'apparaissent pas (pack FontAwesome)
|
||||
|
||||
**Solution** :
|
||||
1. Vérifier que les fichiers SVG existent dans `frontend/icons/svg/fa/`
|
||||
2. Ouvrir la console réseau (F12 > Network) et chercher les erreurs 404
|
||||
3. Vérifier les permissions des fichiers :
|
||||
```bash
|
||||
ls -la frontend/icons/svg/fa/solid/
|
||||
ls -la frontend/icons/svg/fa/regular/
|
||||
```
|
||||
|
||||
### Les icônes sont trop grandes/petites
|
||||
|
||||
**Solution** :
|
||||
1. Aller dans **Settings > Préférences d'affichage**
|
||||
2. Ajuster **"Taille des icônes de bouton"**
|
||||
3. Enregistrer les préférences
|
||||
|
||||
Ou via CSS :
|
||||
```javascript
|
||||
document.documentElement.style.setProperty('--button-icon-size', '20px');
|
||||
```
|
||||
|
||||
### Le pack ne se sauvegarde pas
|
||||
|
||||
**Solution** :
|
||||
1. Vérifier que localStorage est activé dans votre navigateur
|
||||
2. Tester :
|
||||
```javascript
|
||||
console.log(localStorage.getItem('benchtools_icon_pack'));
|
||||
// Devrait retourner: 'emoji', 'fontawesome-solid', etc.
|
||||
```
|
||||
3. Vérifier que vous n'êtes pas en mode navigation privée
|
||||
|
||||
### Les icônes SVG sont de la mauvaise couleur
|
||||
|
||||
**Vérification** : Les filtres CSS s'appliquent automatiquement :
|
||||
- `.btn-primary .btn-icon` : blanc (invert)
|
||||
- `.btn-secondary .btn-icon` : légèrement atténué
|
||||
- `.btn-danger .btn-icon` : blanc (invert)
|
||||
|
||||
**Solution** : Si les couleurs sont incorrectes, vérifier le CSS dans `components.css` :
|
||||
```css
|
||||
.btn-icon {
|
||||
filter: brightness(0) invert(1); /* Blanc par défaut */
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Bonnes pratiques
|
||||
|
||||
### ✅ À faire
|
||||
|
||||
- Utiliser `createIconButton()` pour générer les boutons dynamiquement
|
||||
- Ajouter l'attribut `data-icon` sur les boutons statiques
|
||||
- Écouter `iconPackChanged` pour re-render les composants
|
||||
- Fournir un fallback dans `getIcon(name, fallback)`
|
||||
|
||||
### ❌ À éviter
|
||||
|
||||
- Coder en dur les emojis dans le HTML
|
||||
- Ignorer les changements de pack
|
||||
- Oublier d'ajouter `.btn-icon-wrapper` dans les boutons statiques
|
||||
- Utiliser des chemins d'icônes absolus
|
||||
|
||||
---
|
||||
|
||||
## Ressources
|
||||
|
||||
### Documentation technique
|
||||
|
||||
- [FEATURE_ICON_PACKS.md](FEATURE_ICON_PACKS.md) - Documentation complète du système
|
||||
- [FEATURE_THEME_SYSTEM.md](FEATURE_THEME_SYSTEM.md) - Système de thèmes
|
||||
- [frontend/js/icon-manager.js](../frontend/js/icon-manager.js) - Code source du gestionnaire
|
||||
|
||||
### Bibliothèques d'icônes
|
||||
|
||||
- [FontAwesome Icons](https://fontawesome.com/icons) - Catalogue complet
|
||||
- [Icons8](https://icons8.com/) - Bibliothèque Icons8
|
||||
- [Emojipedia](https://emojipedia.org/) - Référence emojis Unicode
|
||||
|
||||
---
|
||||
|
||||
## Support
|
||||
|
||||
Si vous rencontrez des problèmes ou avez des questions :
|
||||
|
||||
1. Consultez la [documentation technique](FEATURE_ICON_PACKS.md)
|
||||
2. Vérifiez la console du navigateur (F12) pour les erreurs
|
||||
3. Testez avec le pack par défaut (Emojis Unicode)
|
||||
4. Ouvrez une issue sur le dépôt Git si le problème persiste
|
||||
|
||||
Bon usage des icônes ! 🎨
|
||||
Reference in New Issue
Block a user