diff --git a/src/css/sidebar.css b/src/css/sidebar.css index 76e6dc47dca1b3ee394a2140d59132ae7a59df7e..a1ac92d26da8ba6642bd7dc4e0c0688acf3c4090 100644 --- a/src/css/sidebar.css +++ b/src/css/sidebar.css @@ -231,11 +231,17 @@ button.lexique-highlight-toggle:hover .tooltip { margin-bottom: 10px; } .lexicon-header { - font-weight: bold; - cursor: pointer; + position: relative; padding: 5px; + padding-right: 20px; background-color: #8d5c70; border-radius: 5px; + cursor: pointer; +} +.lexicon-header span { + display: block; + font-size: 13px; + line-height: 1.2; text-align: center; } .lexicon-header:hover { @@ -244,6 +250,7 @@ button.lexique-highlight-toggle:hover .tooltip { } .lexicon-content { margin-top: 5px; + width: auto; } .lexicon-option { margin-right: -10px; @@ -256,6 +263,14 @@ button.lexique-highlight-toggle:hover .tooltip { #mesLexiquesContainer h4 { margin-bottom: 5px; } +.balex-icon { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + cursor: zoom-in; + flex-shrink: 0; +} /* Cases à cocher pour les lexiques */ .lexique-checkbox { diff --git a/src/options/options.html b/src/options/options.html deleted file mode 100644 index 8b2bfa963d5f5369b8b67464fd9ac95a506d4253..0000000000000000000000000000000000000000 --- a/src/options/options.html +++ /dev/null @@ -1,38 +0,0 @@ -<!-- <!DOCTYPE html> -<html lang="fr"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Paramètres ff2BaLex</title> - <script src="../utils/logger.js"></script> - <style> - body { - font-family: Luciole; - padding: 20px; - background-color: #323046; - color: white; - } - button { - width: 100%; - padding: 10px; - margin-bottom: 10px; - font-size: 15px; - color: #94608a; - font-weight: bold; - border: none; - cursor: pointer; - } - button:hover { - background-color: #94608a; - color: white; - } - </style> -</head> -<body> - <h3>Paramètres BaLex</h3> - <button id="connectBtn">Se connecter</button> - <button id="toggleExtensionBtn">Activer/Désactiver l'extension</button> - <button id="toggleStatsBtn">Activer/Désactiver les statistiques</button> - <script src="options.js"></script> -</body> -</html> --> diff --git a/src/options/options.js b/src/options/options.js deleted file mode 100644 index da48f12e80a3aaf985363633861795ef709f6d89..0000000000000000000000000000000000000000 --- a/src/options/options.js +++ /dev/null @@ -1,28 +0,0 @@ -// document.getElementById('connectBtn').addEventListener('click', () => { -// browser.runtime.sendMessage({ action: "openLoginPage" }); -// }); - -// async function disconnectFromLexicalDB() { -// await browser.storage.local.remove("accessToken"); -// log("Token supprimé, déconnexion réussie."); -// alert("Déconnexion réussie."); -// updateContextMenu(); - -// // Envoi d'un message pour mettre à jour l'UI -// browser.runtime.sendMessage({ action: "updateUI" }); -// } - -// document.getElementById("toggleExtensionBtn").addEventListener("click", async () => { -// const { extensionActive } = await browser.storage.local.get("extensionActive"); -// const newState = !extensionActive; -// await browser.storage.local.set({ extensionActive: newState }); -// alert(`Extension ${newState ? "activée" : "désactivée"}.`); -// }); - -// document.getElementById("toggleStatsBtn").addEventListener("click", async () => { -// const { statsActive } = await browser.storage.local.get("statsActive"); -// const newState = !statsActive; -// await browser.storage.local.set({ statsActive: newState }); -// alert(`Statistiques ${newState ? "activées" : "désactivées"}.`); -// }); - diff --git a/src/plugin/plugin.js b/src/plugin/plugin.js index 4e8a0b7a3d708d54b15261b86d26a8b95b353576..af6a599f77a48f686eb3611e4ae522eed9076af5 100644 --- a/src/plugin/plugin.js +++ b/src/plugin/plugin.js @@ -1,4 +1,4 @@ -log("plugin chargé avec succès !"); +log("plugin.js chargé"); // fetchExtensionState() : fonction qui se charge de récupérer les valeurs du local storage // updateUI(): utilise les états récupérés par fetchExtensionState pour appeler d'autres fonctions // ex. actualisation du bouton de connexion, bouton activer l'extension, les stats... @@ -131,6 +131,10 @@ async function handleStatsToggle() { console.log("📊 Nouvel état des statistiques :", newState); // Envoi du message de mise à jour browser.runtime.sendMessage({ command: "toggle-stats", isActive: newState }); + // Ouvrir la page des statistiques si désactivé + if (!newState) { + openStatsPage(); + } // Exécution de Pyodide si nécessaire if (newState) { browser.runtime.sendMessage({ command: "pyodide-simplemma" }); diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html index d11af4608dc03da992f87a6bbd0282d4dbfd6126..62bba510c550df4a77156adbc34494cb79e8f338 100644 --- a/src/sidebar/sidebar.html +++ b/src/sidebar/sidebar.html @@ -63,7 +63,7 @@ <!-- Définitions des lexiques de l'utilisateur --> <div id="mesLexiquesContainer"> <h4>📚 Mes lexiques</h4> - <label style="font-size: small;"> + <label style="font-size: 12px;"> <input type="checkbox" id="toggle-definitions"> Afficher toutes les définitions </label> diff --git a/src/utils/definitions.js b/src/utils/definitions.js index 2612c5cd5411d03a08bd428fda24ac1deaa167c2..4dd21af28afe1da3fcdd923c558fee49b344e9fa 100644 --- a/src/utils/definitions.js +++ b/src/utils/definitions.js @@ -461,31 +461,56 @@ function displayDefinitions(definitions) { // 5. Gestion des groupes de lexiques personnels Object.entries(lexiconGroups).forEach(([lexiconName, definitionItems]) => { - const lexiconContainer = document.createElement("div"); - lexiconContainer.className = "lexicon-section"; - - const lexiconHeader = document.createElement("div"); - lexiconHeader.className = "lexicon-header"; - lexiconHeader.textContent = lexiconName; - lexiconHeader.addEventListener("click", () => { - lexiconContent.classList.toggle("hidden"); - }); - - const lexiconContent = document.createElement("div"); - lexiconContent.className = "lexicon-content hidden"; - - // Ajout du lien vers le site balex ----------------------------------------------- - const balexButton = createBaLexButton(lexiconName, balexIdMap); - if (balexButton) { - lexiconContent.appendChild(balexButton); - } - - definitionItems.forEach(item => lexiconContent.appendChild(item)); - - lexiconContainer.appendChild(lexiconHeader); - lexiconContainer.appendChild(lexiconContent); - mesLexiquesList.appendChild(lexiconContainer); + const lexiconContainer = document.createElement("div"); + lexiconContainer.className = "lexicon-section"; + + // Création d'un conteneur pour l'en-tête et l'icône (l'icône est en dehors de l'en-tête) + const headerContainer = document.createElement("div"); + headerContainer.className = "header-container"; + headerContainer.style.position = "relative"; // Pour positionner l'icône absolument + headerContainer.style.cursor = "pointer"; + + // Création de l'en-tête qui contiendra le titre seul + const lexiconHeader = document.createElement("div"); + lexiconHeader.className = "lexicon-header"; + + // Ajout du titre + const titleSpan = document.createElement("span"); + titleSpan.textContent = lexiconName; + lexiconHeader.appendChild(titleSpan); + + // Ajout de l'en-tête dans le conteneur + headerContainer.appendChild(lexiconHeader); + + // Création de l'icône BaLex en dehors de l'en-tête + const balexButton = createBaLexButton(lexiconName, balexIdMap); + if (balexButton) { + // Positionnement absolu pour que l'icône reste à droite du conteneur + balexButton.style.position = "absolute"; + balexButton.style.top = "50%"; + balexButton.style.transform = "translateY(-50%)"; + balexButton.style.right = "5px"; // Ajustez cet espace si besoin + + // Empêche que le clic sur l'icône ne déclenche le toggle du contenu + balexButton.addEventListener("click", (e) => e.stopPropagation()); + headerContainer.appendChild(balexButton); + } + + // Clic sur le conteneur pour dérouler ou masquer les définitions + headerContainer.addEventListener("click", () => { + lexiconContent.classList.toggle("hidden"); + }); + + // Création du conteneur pour les définitions (contenu déroulant) + const lexiconContent = document.createElement("div"); + lexiconContent.className = "lexicon-content hidden"; + definitionItems.forEach(item => lexiconContent.appendChild(item)); + + lexiconContainer.appendChild(headerContainer); + lexiconContainer.appendChild(lexiconContent); + mesLexiquesList.appendChild(lexiconContainer); }); + // 6. Gestion des sections vides if (!hasLexiconDefinitions && noLexiconDefinitionsContainer) { @@ -689,21 +714,19 @@ function createBaLexButton(lexiconName, balexIdMap) { const balexUrl = `https://${balexServ}/entry/${balex_id}/show`; // Création du bouton - const balexButton = document.createElement("button"); - balexButton.textContent = "Voir dans BaLex 🔗"; - balexButton.style.marginTop = "5px"; - balexButton.style.display = "block"; - balexButton.style.background = "#3a3739"; - balexButton.style.color = "#fff"; - balexButton.style.border = "none"; - balexButton.style.padding = "5px"; - balexButton.style.margin = "5px"; - balexButton.style.borderRadius = "5px"; - balexButton.style.cursor = "pointer"; + const balexButton = document.createElement("img"); + balexButton.src = "../assets/icons/Link_to_balex.svg"; + balexButton.classList.add("balex-icon"); + balexButton.alt = "Icône BaLex"; + balexButton.style.cursor = "help"; + balexButton.style.width = "15px"; + balexButton.style.height = "15px"; + balexButton.style.marginLeft = "10px"; // Ajout du lien - balexButton.addEventListener("click", () => { - window.open(balexUrl, "_blank"); + balexButton.addEventListener("click", (event) => { + event.stopPropagation(); // Pour éviter de déclencher le clic sur le conteneur parent + window.open(balexUrl, "_blank"); }); return balexButton;