Esenjin_Asakha/Lectures
Esenjin_Asakha/Lectures
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases14 Wiki Activity

revue des boutons (partie 2 et fin)

Browse Source
This commit is contained in:
Esenjin 2025-02-24 20:41:42 +01:00
parent 4eb4844dab
commit 1d965ba2d6
12 changed files with 405 additions and 37 deletions

34
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) {

11
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>

22
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>

9
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">

54
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>

27
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>

157
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 */

2
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;

68
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;
}
}

49
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')) {

7
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';
});
});

2
version.txt

@ -1 +1 @@
1.3.0
1.3.1