revue des boutons (partie 2 et fin)

admin/export-import.php

@@ -49,7 +49,9 @@ $stories = Stories::getAll();
             <span>Administration</span>
         </div>
         <div class="nav-menu">
-            <a href="index.php" class="button">Retour</a>
+            <a href="index.php" class="button tooltip" data-tooltip="Retour">
+                <i class="fas fa-arrow-left"></i>
+            </a>
         </div>
     </nav>
 
@@ -80,8 +82,14 @@ $stories = Stories::getAll();
                 </div>
                 
                 <div class="form-actions">
-                    <button type="button" class="button select-all">Tout sélectionner</button>
+                    <button type="button" class="button tooltip select-all" data-tooltip="Tout sélectionner">
-                    <button type="submit" class="button">Exporter la sélection</button>
+                        <i class="fas fa-check-square"></i>
+                        <span class="tooltip-text">Tout sélectionner</span>
+                    </button>
+                    <button type="submit" class="button tooltip" data-tooltip="Exporter">
+                        <i class="fas fa-upload"></i>
+                        <span class="tooltip-text">Exporter</span>
+                    </button>
                 </div>
             </form>
         </section>
@@ -102,7 +110,10 @@ $stories = Stories::getAll();
                     </label>
                 </div>
                 
-                <button type="submit" class="button">Importer</button>
+                <button type="submit" class="button tooltip" data-tooltip="Importer">
+                    <i class="fas fa-download"></i>
+                    <span class="tooltip-text">Importer</span>
+                </button>
             </form>
         </section>
     </main>
@@ -116,7 +127,14 @@ $stories = Stories::getAll();
         selectAllBtn.addEventListener('click', function() {
         const allChecked = Array.from(checkboxes).every(cb => cb.checked);
         checkboxes.forEach(cb => cb.checked = !allChecked);
-            this.textContent = allChecked ? 'Tout sélectionner' : 'Tout désélectionner';
+        
+        // Mise à jour du texte de la tooltip et non du contenu du bouton
+        const tooltipText = this.querySelector('.tooltip-text');
+        if (tooltipText) {
+            tooltipText.textContent = allChecked ? 'Tout sélectionner' : 'Tout désélectionner';
+        }
+        // Mise à jour de l'attribut data-tooltip pour que le survol affiche le bon texte
+        this.setAttribute('data-tooltip', allChecked ? 'Tout sélectionner' : 'Tout désélectionner');
     });
 
         // Validation du formulaire d'export

admin/index.php

@@ -31,7 +31,6 @@ $users = Auth::getAllUsers(false);
         <link rel="icon" type="image/png" href="../assets/images/site/favicon.png">
     <?php endif; ?>
     <link rel="stylesheet" href="../assets/css/main.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <style>
         .version-banner {
             position: fixed;
@@ -151,8 +150,14 @@ $users = Auth::getAllUsers(false);
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="button dark" id="cancelAccess">Annuler</button>
+                <button type="button" class="button dark" id="cancelAccess">
-                <button type="button" class="button" id="saveAccess">Enregistrer</button>
+                    <i class="fas fa-times"></i>
+                    <span class="button-text">Annuler</span>
+                </button>
+                <button type="button" class="button" id="saveAccess">
+                    <i class="fas fa-save"></i>
+                    <span class="button-text">Enregistrer</span>
+                </button>
             </div>
         </div>
     </div>

admin/options.php

@@ -90,7 +90,9 @@ $config = Config::load();
             <span>Administration</span>
         </div>
         <div class="nav-menu">
-            <a href="index.php" class="button">Retour</a>
+        <a href="index.php" class="button tooltip" data-tooltip="Retour">
+            <i class="fas fa-arrow-left"></i>
+        </a>
         </div>
     </nav>
 
@@ -204,20 +206,30 @@ $config = Config::load();
                                         Ouvrir dans un nouvel onglet
                                     </label>
                                 </div>
-                                <button type="button" class="button delete-story">Supprimer ce lien</button>
+                                <button type="button" class="button dark tooltip remove-link" data-tooltip="Supprimer ce lien">
+                                    <i class="fas fa-trash-alt"></i>
+                                </button>
                             </div>
                         <?php
                             }
                         }
                         ?>
                     </div>
-                    <button type="button" id="addLink" class="button">Ajouter un lien</button>
+                    <button type="button" id="addLink" class="button tooltip" data-tooltip="Ajouter un lien">
+                        <i class="fas fa-plus"></i>
+                    </button>
                     <br />
-                    <button type="submit" class="button submit-button">Enregistrer les modifications</button>
+                    <button type="submit" class="button tooltip submit-button" data-tooltip="Enregistrer">
+                        <i class="fas fa-save"></i>
+                        <span class="tooltip-text">Enregistrer les modifications</span>
+                    </button>
                     <!-- Section Nettoyage des médias -->
                     <h2>Maintenance</h2>
                     <div class="maintenance-actions">
-                        <button type="button" id="cleanMedia" class="button">Nettoyer les médias inutilisés</button>
+                    <button type="button" id="cleanMedia" class="button tooltip" data-tooltip="Nettoyer">
+                        <i class="fas fa-broom"></i>
+                        <span class="tooltip-text">Nettoyer les médias inutilisés</span>
+                    </button>
                         <small>Supprime les images qui ne sont plus utilisées dans les romans et chapitres.</small>
                     </div>
                 </form>

admin/profile.php

@@ -96,7 +96,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
             <span>Administration</span>
         </div>
         <div class="nav-menu">
-            <a href="index.php" class="button">Retour</a>
+            <a href="index.php" class="button tooltip" data-tooltip="Retour">
+                <i class="fas fa-arrow-left"></i>
+            </a>
         </div>
     </nav>
 
@@ -135,7 +137,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                 <input type="password" id="confirm_password" name="confirm_password">
             </div>
             
-            <button type="submit" class="button">Enregistrer les modifications</button>
+            <button type="submit" class="button tooltip" data-tooltip="Enregistrer">
+                <i class="fas fa-save"></i>
+                <span class="tooltip-text">Enregistrer</span>
+            </button>
         </form>
     </main>
     <link rel="stylesheet" href="../assets/css/dialog.css">

admin/story-edit.php

@@ -102,7 +102,9 @@ function generateSlug($title) {
             <span>Administration</span>
         </div>
         <div class="nav-menu">
-            <a href="index.php" class="button">Retour</a>
+            <a href="index.php" class="button tooltip" data-tooltip="Retour">
+                <i class="fas fa-arrow-left"></i>
+            </a>
         </div>
     </nav>
 
@@ -143,13 +145,19 @@ function generateSlug($title) {
                 <input type="file" id="cover" name="cover" accept="image/*">
             </div>
 
-            <button type="submit" class="button">Enregistrer</button>
+            <button type="submit" class="button tooltip" data-tooltip="Enregistrer">
+                <i class="fas fa-save"></i>
+                <span class="tooltip-text">Enregistrer</span>
+            </button>
         </form>
 
         <?php if ($story): ?>
             <section class="chapters-section">
                 <h2>Chapitres</h2>
-                <button type="button" id="addChapter" class="button">Ajouter un chapitre</button>
+                <button type="button" id="addChapter" class="button">
+                    <i class="fas fa-plus"></i>
+                    <span class="button-text">Ajouter un chapitre</span>
+                </button>
                 
                 <div id="chaptersList" class="chapters-list">
                     <?php foreach ($story['chapters'] ?? [] as $index => $chapter): ?>
@@ -157,9 +165,18 @@ function generateSlug($title) {
                             <span class="chapter-number"><?= $index + 1 ?></span>
                             <h3 class="chapter-title"><?= htmlspecialchars($chapter['title']) ?></h3>
                             <div class="chapter-actions">
-                                <button type="button" class="button edit-chapter">Éditer</button>
+                                <button type="button" class="edit-chapter">
-                                <button type="button" class="button edit-cover">Couverture</button>
+                                    <i class="fas fa-edit"></i>
-                                <button type="button" class="button delete-chapter">Supprimer</button>
+                                    <span class="button-text">Éditer</span>
+                                </button>
+                                <button type="button" class="edit-cover">
+                                    <i class="fas fa-image"></i>
+                                    <span class="button-text">Couverture</span>
+                                </button>
+                                <button type="button" class="delete-chapter">
+                                    <i class="fas fa-trash-alt"></i>
+                                    <span class="button-text">Supprimer</span>
+                                </button>
                             </div>
                         </div>
                     <?php endforeach; ?>
@@ -182,8 +199,14 @@ function generateSlug($title) {
                     </div>
                     
                     <div class="modal-footer">
-                        <button type="button" id="cancelEdit" class="button dark">Annuler</button>
+                        <button type="button" id="cancelEdit" class="button dark">
-                        <button type="button" id="saveChapter" class="button">Enregistrer</button>
+                            <i class="fas fa-times"></i>
+                            <span class="button-text">Annuler</span>
+                        </button>
+                        <button type="button" id="saveChapter" class="button">
+                            <i class="fas fa-save"></i>
+                            <span class="button-text">Enregistrer</span>
+                        </button>
                     </div>
                 </div>
             </div>
@@ -207,9 +230,18 @@ function generateSlug($title) {
                 </div>
                 
                 <div class="modal-footer">
-                    <button type="button" id="cancelCoverEdit" class="button dark">Annuler</button>
+                    <button type="button" id="cancelCoverEdit" class="button dark">
-                    <button type="button" id="deleteCover" class="button delete-story" style="display: none;">Supprimer</button>
+                        <i class="fas fa-times"></i>
-                    <button type="button" id="saveCover" class="button">Enregistrer</button>
+                        <span class="button-text">Annuler</span>
+                    </button>
+                    <button type="button" id="deleteCover" class="button delete-story" style="display: none;">
+                        <i class="fas fa-trash-alt"></i>
+                        <span class="button-text">Supprimer</span>
+                    </button>
+                    <button type="button" id="saveCover" class="button">
+                        <i class="fas fa-save"></i>
+                        <span class="button-text">Enregistrer</span>
+                    </button>
                 </div>
             </div>
         </div>

admin/users.php

@@ -175,7 +175,9 @@ $config = Config::load();
             <span>Administration</span>
         </div>
         <div class="nav-menu">
-            <a href="index.php" class="button">Retour</a>
+        <a href="index.php" class="button tooltip" data-tooltip="Retour">
+            <i class="fas fa-arrow-left"></i>
+        </a>
         </div>
     </nav>
 
@@ -206,16 +208,23 @@ $config = Config::load();
                         <?php endif; ?>
                     </div>
                     <div class="user-actions">
-                        <button type="button" class="button edit-user" data-user-id="<?= htmlspecialchars($user['id']) ?>" data-user-comment="<?= htmlspecialchars($user['comment'] ?? '') ?>" data-user-role="<?= htmlspecialchars($user['role'] ?? 'editor') ?>">Modifier</button>
+                        <button type="button" class="button tooltip edit-user" data-tooltip="Modifier" data-user-id="<?= htmlspecialchars($user['id']) ?>" data-user-comment="<?= htmlspecialchars($user['comment'] ?? '') ?>" data-user-role="<?= htmlspecialchars($user['role'] ?? 'editor') ?>">
+                            <i class="fas fa-edit"></i>
+                        </button>
                         <?php if ($index !== 0): ?>
-                        <button type="button" class="button delete-user" data-user-id="<?= htmlspecialchars($user['id']) ?>">Supprimer</button>
+                        <button type="button" class="button tooltip delete-user" data-tooltip="Supprimer" data-user-id="<?= htmlspecialchars($user['id']) ?>">
+                            <i class="fas fa-trash-alt"></i>
+                        </button>
                         <?php endif; ?>
                     </div>
                 </div>
                 <?php endforeach; ?>
             </div>
             
-            <button type="button" id="addUserBtn" class="button">Ajouter un utilisateur</button>
+            <button type="button" id="addUserBtn" class="button tooltip" data-tooltip="Ajouter un utilisateur">
+                <i class="fas fa-user-plus"></i>
+                <span class="tooltip-text">Ajouter un utilisateur</span>
+            </button>
         </section>
         
         <!-- Formulaire d'ajout d'utilisateur (modal) -->
@@ -297,8 +306,14 @@ $config = Config::load();
                     </div>
                     
                     <div class="modal-footer">
-                        <button type="button" class="button dark cancel-btn">Annuler</button>
+                        <button type="button" class="button dark cancel-btn">
-                        <button type="submit" class="button">Enregistrer</button>
+                            <i class="fas fa-times"></i>
+                            <span class="button-text">Annuler</span>
+                        </button>
+                        <button type="submit" class="button">
+                            <i class="fas fa-save"></i>
+                            <span class="button-text">Enregistrer</span>
+                        </button>
                     </div>
                 </form>
             </div>

assets/css/buttons.css

@@ -1,3 +1,5 @@
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css";
+
 /* buttons.css - Styles pour les boutons, tooltips et menu */
 
 /* Styles pour les boutons avec icônes */
@@ -135,6 +137,148 @@
     color: var(--text-tertiary);
 }
 
+/* Styles pour les boutons modaux */
+.modal-footer .button {
+    width: auto;
+    padding: var(--spacing-sm) var(--spacing-md);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.modal-footer .button i,
+.modal-footer .button .button-text {
+    pointer-events: none; /* Solution au problème de clic */
+}
+
+/* Styles pour afficher du texte dans les boutons */
+.button-text {
+    margin-left: var(--spacing-sm);
+}
+
+/* Styles pour les boutons avec texte intégré */
+.button.with-text {
+    width: auto;
+    padding: var(--spacing-sm) var(--spacing-md);
+    justify-content: flex-start;
+}
+
+.button.with-text i {
+    margin-right: var(--spacing-sm);
+}
+
+/* Styles pour les boutons de formulaire */
+.submit-button, 
+#cleanMedia,
+#addUserBtn {
+    width: auto;
+    padding: var(--spacing-sm) var(--spacing-md);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+/* Solution globale pour les problèmes de clic sur les boutons */
+button i, 
+button span, 
+.button i, 
+.button span {
+    pointer-events: none;
+}
+
+/* Styles pour les boutons d'action de chapitre */
+.chapter-actions .button {
+    padding: 0;
+    width: 40px;
+    height: 40px;
+}
+
+.chapter-actions .edit-chapter {
+    background-color: var(--accent-primary);
+}
+
+.chapter-actions .edit-cover {
+    background-color: var(--bg-secondary);
+}
+
+.chapter-actions .delete-chapter {
+    background-color: var(--bg-secondary);
+}
+
+.chapter-actions .delete-chapter:hover {
+    background-color: var(--error-color);
+}
+
+/* Styles pour les boutons de formulaire */
+.form-actions .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+}
+
+.form-actions .button i {
+    font-size: 1.2rem;
+}
+
+/* Bouton d'ajout */
+.button.add-button {
+    background-color: var(--accent-primary);
+    color: var(--text-tertiary);
+}
+
+.button.add-button:hover {
+    background-color: var(--accent-secondary);
+}
+
+.chapter-actions .edit-chapter,
+.chapter-actions .edit-cover,
+.chapter-actions .delete-chapter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border-radius: var(--radius-sm);
+    transition: var(--transition-fast);
+    position: relative;
+    border: none;
+    cursor: pointer;
+}
+
+.chapter-actions .edit-chapter i,
+.chapter-actions .edit-cover i,
+.chapter-actions .delete-chapter i {
+    font-size: 1.2rem;
+}
+
+.chapter-actions .button-text {
+    display: none;
+}
+
+.chapter-actions .edit-chapter {
+    background-color: var(--accent-primary);
+    color: var(--text-tertiary);
+}
+
+.chapter-actions .edit-cover,
+.chapter-actions .delete-chapter {
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+.chapter-actions .delete-chapter:hover {
+    background-color: var(--error-color);
+}
+
+.chapter-actions .edit-chapter i,
+.chapter-actions .edit-cover i,
+.chapter-actions .delete-chapter i,
+.chapter-actions .button-text {
+    pointer-events: none;
+}
+
 /* Media queries pour le menu mobile */
 @media (max-width: 768px) {
     .menu-toggle {
@@ -206,6 +350,19 @@
         width: auto;
         padding: var(--spacing-xs) var(--spacing-sm);
     }
+
+    .chapter-actions.active .edit-chapter,
+    .chapter-actions.active .edit-cover,
+    .chapter-actions.active .delete-chapter {
+        width: 100%;
+        justify-content: flex-start;
+        padding: var(--spacing-sm) var(--spacing-md);
+    }
+    
+    .chapter-actions.active .button-text {
+        display: inline-block;
+        margin-left: var(--spacing-sm);
+    }
 }
 
 /* Pour les très petits écrans */

assets/css/components.css

@@ -93,7 +93,7 @@
 
 .chapter-number {
     background: var(--accent-primary);
-    color: var(--text-primary);
+    color: var(--text-tertiary);
     width: 40px;
     height: 40px;
     display: flex;

assets/css/forms.css

@@ -204,6 +204,69 @@
     color: var(--text-secondary);
 }
 
+/* Style pour les sélecteurs (dropdowns) */
+select {
+    width: 100%;
+    padding: var(--spacing-sm);
+    background-color: var(--input-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: 1rem;
+    transition: border-color var(--transition-fast);
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 0h12L6 6 0 0z' fill='%23d2a679'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--spacing-sm) center;
+    background-size: 12px;
+    padding-right: 30px;
+}
+
+select:focus {
+    border-color: var(--accent-primary);
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(210, 166, 121, 0.2);
+}
+
+select option {
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+    padding: var(--spacing-sm);
+}
+
+/* Style pour les sélecteurs dans les formulaires modaux */
+.modal-content select {
+    max-width: 100%;
+    margin-bottom: var(--spacing-md);
+}
+
+/* Style pour le sélecteur désactivé (pour le premier utilisateur admin) */
+select:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    background-color: var(--bg-secondary);
+}
+
+/* Styles spécifiques pour les sélecteurs dans users.php */
+#role, #edit_role {
+    width: auto;
+    min-width: 180px;
+    background-color: var(--input-bg);
+}
+
+/* Style visuel différent pour les options */
+#role option[value="admin"],
+#edit_role option[value="admin"] {
+    font-weight: bold;
+    color: var(--accent-primary);
+}
+
+#role option[value="editor"],
+#edit_role option[value="editor"] {
+    font-weight: normal;
+    color: var(--text-secondary);
+}
+
 /* Responsive */
 @media (max-width: 768px) {
     .options-section {
@@ -213,4 +276,9 @@
     .link-item {
         padding: var(--spacing-md);
     }
+
+    select {
+        width: 100%;
+        max-width: none;
+    }
 }

assets/js/admin.js

@@ -136,6 +136,55 @@ document.addEventListener('DOMContentLoaded', function() {
     // Gestion du menu mobile
     const navMenu = document.querySelector('.nav-menu');
 
+    function initializeTooltips() {
+        // Ajouter le texte des tooltips à côté des icônes pour mobile
+        document.querySelectorAll('.tooltip:not(.tooltip-initialized)').forEach(button => {
+            if (!button.querySelector('.tooltip-text')) {
+                const tooltip = button.getAttribute('data-tooltip');
+                if (tooltip) {
+                    const tooltipSpan = document.createElement('span');
+                    tooltipSpan.className = 'tooltip-text';
+                    tooltipSpan.textContent = tooltip;
+                    button.appendChild(tooltipSpan);
+                    button.classList.add('tooltip-initialized');
+                }
+            }
+        });
+    }
+    
+    // Observer les changements du DOM pour initialiser les nouveaux tooltips
+    const tooltipObserver = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                initializeTooltips();
+            }
+        });
+    });
+    
+    // Initialiser les tooltips existants et commencer l'observation
+    document.addEventListener('DOMContentLoaded', function() {
+        initializeTooltips();
+        tooltipObserver.observe(document.body, { childList: true, subtree: true });
+        
+        // Vérifier le mode mobile au chargement et au redimensionnement
+        function checkMobileMode() {
+            const isMobile = window.innerWidth <= 768;
+            
+            // Gestion des conteneurs d'actions
+            const actionContainers = document.querySelectorAll('.story-actions, .chapter-actions, .user-actions');
+            actionContainers.forEach(container => {
+                if (isMobile) {
+                    container.classList.add('active');
+                } else {
+                    container.classList.remove('active');
+                }
+            });
+        }
+        
+        checkMobileMode();
+        window.addEventListener('resize', checkMobileMode);
+    });
+    
     // Créer le bouton hamburger s'il n'existe pas déjà
     if (!document.querySelector('.menu-toggle')) {
         const menuToggle = document.createElement('button');

assets/js/story-edit.js

@@ -481,3 +481,10 @@ document.addEventListener('DOMContentLoaded', function() {
     // Initialisation
     detectUnsavedChanges();
 });
+
+document.addEventListener('DOMContentLoaded', function() {
+    // S'assurer que les clics sur les icônes se propagent correctement
+    document.querySelectorAll('.chapter-actions button i, .chapter-actions button .button-text').forEach(element => {
+        element.style.pointerEvents = 'none';
+    });
+});

version.txt

@@ -1 +1 @@
-1.3.0
+1.3.1