From 1d965ba2d679e647c6c13e184cb0cba407386a41 Mon Sep 17 00:00:00 2001
From: Esenjin <esenjin@sangigi-fuchsia.fr>
Date: Mon, 24 Feb 2025 20:41:42 +0100
Subject: [PATCH] revue des boutons (partie 2 et fin)
---
admin/export-import.php | 34 +++++++--
admin/index.php | 11 ++-
admin/options.php | 22 ++++--
admin/profile.php | 9 ++-
admin/story-edit.php | 54 ++++++++++---
admin/users.php | 27 +++++--
assets/css/buttons.css | 157 ++++++++++++++++++++++++++++++++++++++
assets/css/components.css | 2 +-
assets/css/forms.css | 68 +++++++++++++++++
assets/js/admin.js | 49 ++++++++++++
assets/js/story-edit.js | 7 ++
version.txt | 2 +-
12 files changed, 405 insertions(+), 37 deletions(-)
diff --git a/admin/export-import.php b/admin/export-import.php
index 13907e4..5cb49b2 100644
--- a/admin/export-import.php
+++ b/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="submit" class="button">Exporter la sélection</button>
+ <button type="button" class="button tooltip select-all" data-tooltip="Tout sélectionner">
+ <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>
@@ -114,10 +125,17 @@ $stories = Stories::getAll();
const checkboxes = document.querySelectorAll('input[name="stories[]"]');
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';
- });
+ const allChecked = Array.from(checkboxes).every(cb => cb.checked);
+ checkboxes.forEach(cb => cb.checked = !allChecked);
+
+ // 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
document.getElementById('exportForm').addEventListener('submit', function(e) {
diff --git a/admin/index.php b/admin/index.php
index 2b8687b..6aa4947 100644
--- a/admin/index.php
+++ b/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" id="saveAccess">Enregistrer</button>
+ <button type="button" class="button dark" id="cancelAccess">
+ <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>
diff --git a/admin/options.php b/admin/options.php
index 036b734..2bc41bd 100644
--- a/admin/options.php
+++ b/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>
diff --git a/admin/profile.php b/admin/profile.php
index 7dadcca..4cde145 100644
--- a/admin/profile.php
+++ b/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">
diff --git a/admin/story-edit.php b/admin/story-edit.php
index c57cfcb..2c3b37d 100644
--- a/admin/story-edit.php
+++ b/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="button edit-cover">Couverture</button>
- <button type="button" class="button delete-chapter">Supprimer</button>
+ <button type="button" class="edit-chapter">
+ <i class="fas fa-edit"></i>
+ <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="saveChapter" class="button">Enregistrer</button>
+ <button type="button" id="cancelEdit" class="button dark">
+ <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="deleteCover" class="button delete-story" style="display: none;">Supprimer</button>
- <button type="button" id="saveCover" class="button">Enregistrer</button>
+ <button type="button" id="cancelCoverEdit" class="button dark">
+ <i class="fas fa-times"></i>
+ <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>
diff --git a/admin/users.php b/admin/users.php
index 314ab31..1453165 100644
--- a/admin/users.php
+++ b/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="submit" class="button">Enregistrer</button>
+ <button type="button" class="button dark cancel-btn">
+ <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>
diff --git a/assets/css/buttons.css b/assets/css/buttons.css
index 4c3d4ad..e655093 100644
--- a/assets/css/buttons.css
+++ b/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 */
diff --git a/assets/css/components.css b/assets/css/components.css
index 8defa3a..b6d50d4 100644
--- a/assets/css/components.css
+++ b/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;
diff --git a/assets/css/forms.css b/assets/css/forms.css
index 6c8f0e9..ed9ff93 100644
--- a/assets/css/forms.css
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/assets/js/admin.js b/assets/js/admin.js
index 312ffff..e628796 100644
--- a/assets/js/admin.js
+++ b/assets/js/admin.js
@@ -135,6 +135,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')) {
diff --git a/assets/js/story-edit.js b/assets/js/story-edit.js
index 4565be6..629e09a 100644
--- a/assets/js/story-edit.js
+++ b/assets/js/story-edit.js
@@ -480,4 +480,11 @@ 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';
+ });
});
\ No newline at end of file
diff --git a/version.txt b/version.txt
index 589268e..6261a05 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-1.3.0
\ No newline at end of file
+1.3.1
\ No newline at end of file