Changement couleurs icônes lexiques

src/assets/lexicon_icon.js

@@ -6,17 +6,24 @@ console.log("lexicon_icon.js chargé");
  */
 function generateRandomColor() {
   const palette = [
-    "#6e76c7", 
-    "#00a0bd", 
-    "#96cd95", 
-    "#ffeac2", 
-    "#fff6ff", 
-    "#e67e22",
-    "#20bad8",
-    "#f290e7",
-    "#f4ab9d",
-    "#f1e87a",
-    "#84e8e6"
+    "#231942",
+    "#5E548E",
+    "#9F86C0",
+    "#BE95C4",
+    "#E0B1CB",
+    "#b7094c",
+    "#a01a58",
+    "#892b64",
+    "#723c70",
+    "#5b4d7c",
+    "#455e89",
+    "#2e6f95",
+    "#1780a1",
+    "#0091ad",
+    "#30343f",
+    "#e4d9ff",
+    "#273469",
+    "#1e2749"
   ];
   const index = Math.floor(Math.random() * palette.length);
   return palette[index];

src/context_menu/custom_context_menu.css

@@ -91,7 +91,7 @@
   width: 150px; 
   font-family: Arial, sans-serif;
   font-size: 10px;
-  display: flex !important;
+  display: flex;
   flex-direction: row !important;
   flex-wrap: wrap !important;    
   align-items: center;
@@ -126,12 +126,11 @@
 
 /* Style pour le cercle de couleur (icône interne) */
 #lexiconPicker .color-circle {
-  width: 28px;  /* ajustez la taille si besoin */
+  width: 28px;  
   height: 28px;
   border-radius: 50%;
   display: inline-block;
-  /* La couleur de fond sera définie dynamiquement via JS */
-  border: 1px solid black; /* optionnel */
+  border: 1px solid black;
 }
 
 /* Style pour le bouton de confirmation */
@@ -141,10 +140,12 @@
   padding: 6px 10px;
   cursor: pointer;
   border: none;
+  align-items: center;
+  text-align: center;
   border-radius: 4px;
   background-color: #323046;
   color: white;
-  flex-basis: 100%; /* force le bouton à occuper toute la largeur et à passer à la ligne */
+  flex-basis: 100%; 
   margin-top: 8px;
 }
 

src/context_menu/custom_context_menu.js

@@ -242,21 +242,26 @@ function createPicker() {
     picker.style.padding = "8px";
     picker.style.borderRadius = "8px";
     picker.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
-    picker.style.width = "220px"; // largeur adaptée pour afficher les icônes sur une ligne
+    picker.style.width = "220px";
     picker.style.fontFamily = "Arial, sans-serif";
     picker.style.fontSize = "10px";
-    // Définir le picker en flex avec direction horizontale
     picker.style.display = "flex";
-    picker.style.flexDirection = "row"; // IMPORTANT : aligne les éléments en ligne
-    picker.style.flexWrap = "wrap";      // autorise le retour à la ligne si nécessaire
+    picker.style.flexDirection = "row";
+    picker.style.flexWrap = "wrap";
     picker.style.alignItems = "center";
     picker.style.justifyContent = "center";
     picker.style.gap = "5px";
+
+    picker.addEventListener("mouseup", (e) => {
+      e.stopPropagation();
+    });
+
     document.body.appendChild(picker);
   }
   return picker;
 }
 
+
 /**
  * Affiche le picker pour choisir le lexique dans lequel ajouter le mot.
  */
@@ -377,7 +382,7 @@ async function showPicker(event, selectedText) {
     // Positionner et afficher le picker
     picker.style.left = event.pageX + "px";
     picker.style.top = event.pageY + "px";
-    picker.style.display = "block";
+    picker.style.display = "flex";
   } catch (error) {
     console.error("❌ Erreur lors de la récupération des lexiques :", error);
     picker.innerHTML = "<p style='color:#333;'>Erreur lors du chargement des lexiques.</p>";
@@ -392,23 +397,18 @@ function hideLexiconPicker() {
   }
 }
 
-
 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))
-  ) {
+  // Masquer whiteBox si le clic est en dehors
+  if (whiteBox && !whiteBox.contains(event.target)) {
     hideWhiteBox();
-    if (picker) picker.style.display = "none";
+  }
+  
+  // Masquer picker si le clic est en dehors
+  if (picker && !picker.contains(event.target)) {
+    hideLexiconPicker();
   }
 
   // Vérifier s'il y a du texte sélectionné