Skip to content
Snippets Groups Projects
Commit a989769b authored by Lucie Bader's avatar Lucie Bader
Browse files

Icône BaLex

parent abc92629
No related branches found
No related tags found
1 merge request!9Affichage stats
Hide whitespace changes
Inline Side-by-side
src/css/sidebar.css
+ 17
− 2
View file @ a989769b
......@@ -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 {
......
src/options/options.html deleted 100644 → 0
+ 0
− 38
View file @ abc92629
<!-- <!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> -->
src/options/options.js deleted 100644 → 0
+ 0
− 28
View file @ abc92629
// 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"}.`);
// });
src/plugin/plugin.js
+ 5
− 1
View file @ a989769b
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" });
......
src/sidebar/sidebar.html
+ 1
− 1
View file @ a989769b
......@@ -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>
......
src/utils/definitions.js
+ 60
− 37
View file @ a989769b
......@@ -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;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment