diff --git a/src/context_menu/custom_context_menu.js b/src/context_menu/custom_context_menu.js index 06f253041fbc937078f0f25ff004fda3778a9a50..2e0ea97b79883f1c252381e91ecf7338d6a9c827 100644 --- a/src/context_menu/custom_context_menu.js +++ b/src/context_menu/custom_context_menu.js @@ -97,7 +97,8 @@ function setupWhiteBoxActions() { console.log("🔠Bouton Ajouter au lexique cliqué avec le mot :", selectedText); if (!selectedText) return; if (authToken) { - await showPicker(e, selectedText); + browser.runtime.sendMessage({ action: "openLexiconBlock" }); + showPicker(e, selectedText); } else { alert("Vous devez être connecté pour ajouter un mot."); } @@ -234,20 +235,26 @@ function createPicker() { if (!picker) { picker = document.createElement("div"); picker.id = "lexiconPicker"; - // Styles pour le picker picker.style.position = "absolute"; picker.style.zIndex = "10000"; picker.style.backgroundColor = "rgba(255, 255, 255, 0.95)"; picker.style.border = "1px solid #ccc"; - picker.style.padding = "10px"; + picker.style.padding = "5px"; picker.style.borderRadius = "4px"; picker.style.boxShadow = "0 2px 10px rgba(0,0,0,0.3)"; picker.style.display = "none"; + + picker.style.display = "flex"; + picker.style.flexWrap = "wrap"; + picker.style.gap = "10px"; + picker.style.alignItems = "center"; + document.body.appendChild(picker); } return picker; } + /** * Affiche le picker pour choisir le lexique dans lequel ajouter le mot. * Pour chaque lexique, vérifie si le mot existe déjà dans ce lexique en appelant fetchLexiconDefinitions. @@ -278,9 +285,14 @@ async function showPicker(event, selectedText) { const iconContainer = document.createElement("div"); iconContainer.className = "lexicon-option"; iconContainer.dataset.lexiconId = id; - iconContainer.style.margin = "5px"; + iconContainer.style.margin = "2px"; iconContainer.style.cursor = "pointer"; iconContainer.title = name; + iconContainer.style.display = "inline-flex"; + iconContainer.style.flexDirection = "row"; // Assurez-vous que c'est horizontal + iconContainer.style.alignItems = "center"; // Alignement centré + iconContainer.style.justifyContent = "center"; + // Ajoute le cercle coloré au conteneur iconContainer.appendChild(circleIcon); @@ -323,4 +335,40 @@ async function showPicker(event, selectedText) { } } +function hideLexiconPicker() { + const picker = document.getElementById("lexiconPicker"); + if (picker) { + picker.style.display = "none"; + } +} + +document.addEventListener("mouseup", (event) => { + const whiteBox = document.getElementById(WHITE_BOX_ID); + const picker = document.getElementById("lexiconPicker"); + + if (picker && picker.style.display === "block" && !picker.contains(event.target)) { + hideLexiconPicker(); + } + + // Vérifier si le clic est à l'extérieur des éléments + if ( + whiteBox && whiteBox.style.display === "block" && + !whiteBox.contains(event.target) && + (!picker || !picker.contains(event.target)) + ) { + hideWhiteBox(); + if (picker) picker.style.display = "none"; + } + + // Vérifier s'il y a du texte sélectionné + const selectedText = window.getSelection().toString().trim(); + if (selectedText) { + console.log("Texte sélectionné :", selectedText); + showWhiteBox(event, selectedText); + browser.runtime.sendMessage({ + action: "mot_selectionne", + selectedText, + }); + } +}); diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js index 5d619b55da080914e9e45320d07283f5dc058dfc..0668c86848ace8038a67a24cb5e11d88b3a6eb57 100644 --- a/src/sidebar/sidebar.js +++ b/src/sidebar/sidebar.js @@ -509,6 +509,10 @@ browser.runtime.onMessage.addListener(async (message) => { case "addToLexicon": handleAddWordClick(); break; + + case "openLexiconBlock": + openBlock("menuContent"); + break; case "toggleAuth": break;