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

Correction bouton définition menu contextuel personnalisé

parent 639cb55b
No related branches found
No related tags found
1 merge request!9Affichage stats
@font-face {
font-family: 'Luciole';
src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'),
url('../fonts/Luciole-Regular/Luciole-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* === Conteneur principal du menu contextuel === */
#whiteBox {
position: absolute;
display: none;
min-width: 50px;
max-width: 300px;
background-color: white;
color: #323046;
border: 2px solid #323046;
border-radius: 10px;
padding: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
font-family: Luciole;
z-index: 10000;
}
/* === Titre/texte indiquant le mot sélectionné === */
#whiteBox #selectedWord {
margin: 0;
margin-bottom: 8px;
font-size: 14px;
line-height: 1.3;
color: #323046;
font-weight: bold;
text-align: center;
}
/* === Conteneur des icônes === */
#whiteBox .icon-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 0;
padding: 0;
}
#whiteBox .icon-container:hover {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 6px;
}
/* === Les icônes elles-mêmes === */
#whiteBox .icon {
width: 40px;
height: 40px;
transition: transform 0.2s ease;
margin : 0 auto;
display: block;
}
#whiteBox .icon:hover {
transform: scale(1.15);
}
/* === Message (tooltips) === */
#whiteBox .tooltip {
visibility: hidden;
background-color: #333;
color: #fff;
text-align: center;
padding: 6px;
border-radius: 5px;
position: absolute;
bottom: -34px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-size: 12px;
opacity: 0;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 1000;
}
#whiteBox .icon-container:hover .tooltip {
visibility: visible;
opacity: 1;
}
/* === Style global du lexiconPicker === */
#lexiconPicker {
position: absolute;
z-index: 10000;
background-color: rgba(255, 255, 255, 0.98);
border: 1px solid #ddd;
padding: 4px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: auto;
font-family: Luciole;
font-size: 10px;
display: flex;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center;
justify-content: center;
gap: 2px;
}
/* Style pour les icônes de lexique */
#lexiconPicker .lexicon-option {
cursor: pointer;
display: inline-flex !important;
flex-direction: row !important;
align-items: center;
justify-content: center;
border: 2px solid transparent;
border-radius: 50%;
width: 40px;
height: 40px;
transition: border 0.2s ease;
flex: 0 0 auto;
}
/* Effet au survol pour les icônes */
#lexiconPicker .lexicon-option:hover {
border: 2px solid #6e76c7;
}
/* Classe pour indiquer qu'une icône est sélectionnée */
#lexiconPicker .lexicon-option.selected {
border: 2px solid #323046;
}
/* Style pour le cercle de couleur (icône interne) */
#lexiconPicker .color-circle {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-block;
border: 1px solid black;
}
/* Style pour le bouton de confirmation */
#lexiconPicker button.confirmButton {
font-style: italic;
font-size: 10px;
padding: 6px 10px;
cursor: pointer;
border: none;
align-items: center;
text-align: center;
border-radius: 4px;
background-color: #323046;
color: white;
flex-basis: 100%;
margin-top: 8px;
}
#lexiconPicker p {
font-size: 12px;
font-weight: bold;
text-align: center;
}
......@@ -384,11 +384,23 @@ function hideLexiconPicker() {
// ─────────────────────────────────────────────────────────────────────────────
// ▌ Écouteurs d'événements
// ─────────────────────────────────────────────────────────────────────────────
// Écoute globale pour la sélection de texte
// Écouteur global pour la sélection de texte et la gestion des clics
document.addEventListener("mouseup", (event) => {
const customContextMenu = document.getElementById(CUSTOM_CONTEXT_MENU); // Récupère le menu contextuel
const picker = document.getElementById("lexiconPicker"); // Récupère le sélecteur de lexique
// Vérifie si le clic est à l'intérieur du menu contextuel, si oui, ne fait rien
if (event.target.closest("#customContextMenu")) return;
// Masque le menu contextuel si le clic est en dehors de celui-ci
if (customContextMenu && !customContextMenu.contains(event.target)) {
hideCustomContextMenu();
}
// Masque le sélecteur si le clic est en dehors de celui-ci
if (picker && !picker.contains(event.target)) {
hideLexiconPicker();
}
// Récupère le texte sélectionné
const selectedText = window.getSelection().toString().trim();
if (selectedText) {
......@@ -426,31 +438,4 @@ browser.storage.onChanged.addListener((changes) => {
log("Token modifié dans le stockage, mise à jour du menu contextuel.");
loadAuthToken().then(updateMenuVisibility); // Recharge le token et met à jour la visibilité
}
});
// Écouteur pour masquer le menu contextuel et le sélecteur
document.addEventListener("mouseup", (event) => {
const customContextMenu = document.getElementById(CUSTOM_CONTEXT_MENU); // Récupère le menu contextuel
const picker = document.getElementById("lexiconPicker"); // Récupère le sélecteur de lexique
// Masque le menu contextuel si le clic est en dehors de celui-ci
if (customContextMenu && !customContextMenu.contains(event.target)) {
hideCustomContextMenu();
}
// Masque le sélecteur si le clic est en dehors de celui-ci
if (picker && !picker.contains(event.target)) {
hideLexiconPicker();
}
// Récupère le texte sélectionné
const selectedText = window.getSelection().toString().trim();
if (selectedText) {
log("Texte sélectionné :", selectedText);
showCustomContextMenu(event, selectedText);
// Envoie un message au runtime avec le texte sélectionné
browser.runtime.sendMessage({
action: "mot_selectionne",
selectedText,
});
}
});
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment