diff --git a/src/popup/popup.html b/src/popup/popup.html
index 59835998a0506b451480faa2fed3a5c69331b207..d3ac82a703c950e8354f85bab792b84d8b1b922e 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -9,7 +9,7 @@
@font-face {
font-family: 'Luciole';
src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'),
- url('../fonts/Luciole-Regular/Luciole-Regular.woff') format('woff');
+ url('../fonts/Luciole-Regular/Luciole-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@@ -28,10 +28,9 @@
max-width: 250px;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
- transition: opacity 0.3s ease, visibility 0.3s ease;
+ transition: visibility 0.3s ease;
}
#extension-notification.hidden {
- opacity: 0;
visibility: hidden;
}
@@ -45,7 +44,6 @@
border-radius: 5px;
font-weight: bold;
}
-
#close-notification:hover {
background-color: #dddedd;
color: #8d5c70;
@@ -83,7 +81,7 @@
width: auto;
display: inline-flex;
padding: 6px 12px;
- font-size: 18px;
+ font-size: 16px;
font-family: Luciole;
background: none;
border: none;
@@ -124,10 +122,8 @@
}
.option-container {
background: #444;
- padding: 12px;
+ padding: 8px;
border-radius: 10px;
- margin-top: 4px;
- margin-bottom: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.option-row {
@@ -136,11 +132,9 @@
justify-content: space-between;
flex-wrap: nowrap;
padding: 12px;
- margin-bottom: 4px;
border-radius: 6px;
background-color: #444;
color: white;
- font-size: 0.6rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.option-row:hover {
@@ -151,10 +145,9 @@
font-weight: lighter;
flex: 1;
margin: 0;
- font-size: 0.9rem;
+ font-size: 13px;
align-items: center;
}
-
.option-row input[type="checkbox"],
.option-row input[type="number"] {
appearance: none;
@@ -166,12 +159,10 @@
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
}
-
.option-row input[type="checkbox"]:checked {
background-color: #8d5c70;
border-color: #8d5c70;
}
-
.toggle-switch {
position: absolute;
display: inline-block;
@@ -191,7 +182,6 @@
transition: 0.4s;
border-radius: 50%;
}
-
.toggle-switch input {
opacity: 0;
width: 0;
@@ -208,15 +198,12 @@
transition: 0.4s;
border-radius: 24px;
}
-
input:checked + .slider {
background-color: #8d5c70;
}
-
input:checked + .slider:before {
transform: translateX(14px);
}
-
.threshold-container input[type="number"] {
width: 45px;
height: 45px;
@@ -224,19 +211,18 @@
text-align: center;
border-radius: 50%;
border: 2px solid #8d5c70;
- font-size: 0.8rem;
+ font-size: 13px;
box-sizing: border-box;
background: #fff;
color: #333;
}
-
#save-options {
border: none;
background: #8d5c70;
border-radius: 6px;
color: white;
padding: 8px 12px;
- font-size: 0.9rem;
+ font-size: 14px;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
@@ -270,7 +256,6 @@
color: white;
border-color: #8d5c70;
}
-
.option-row.auto-add-row {
position: relative;
display: flex;
@@ -282,41 +267,24 @@
border-bottom: 1px solid #555;
}
.option-row.auto-add-row span {
- font-size: 16px;
+ font-size: 14px;
font-weight: lighter;
}
-
.option-row.stopwords {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
- font-size: 0.9rem;
+ font-size: 13px;
font-weight: lighter;
}
-
- /* .option-row.auto-add-row input[type="checkbox"] {
- appearance: none;
- width: 24px;
- margin-left: 10px;
- height: 24px;
- border: 2px solid #8d5c70;
- border-radius: 4px;
- background: #fff;
- cursor: pointer;
- transition: background 0.3s;
- } */
-
- /* .option-row.auto-add-row input[type="checkbox"]:checked {
- background: #8d5c70;
- } */
-
#open-stats {
padding: 6px;
font-weight: lighter;
width: auto;
display: block;
margin: 0 auto;
+ margin-bottom: 10px;
background-color: #525877;
color: white;
border: 2px solid #8d5c70;
@@ -325,6 +293,65 @@
.hidden {
display: none;
}
+ #error-message {
+ font-size: 13px;
+ font-style: italic;
+ text-align: center;
+ color: white;
+ }
+ .tooltip-container {
+ position: relative;
+ display: inline-block;
+ pointer-events: auto !important;
+ }
+ .tooltip {
+ all: unset;
+ display: block;
+ box-sizing: border-box;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ color: #fff !important;
+ font-size: 12px !important;
+ font-weight: lighter !important;
+ padding: 6px 10px;
+ border-radius: 5px;
+ white-space: normal;
+ overflow-wrap: break-word;
+ width: 200px;
+ text-align: center;
+ visibility: hidden;
+ transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
+ pointer-events: none;
+ z-index: 1000;
+ line-height: normal;
+ }
+ /* Règle générique pour les tooltips */
+ .tooltip-container .tooltip {
+ bottom: 120%;
+ transform: translateX(-50%);
+ background-color: rgba(0,0,0,0.9) !important;
+ visibility: hidden;
+ pointer-events: auto !important;
+ }
+ .tooltip-container:hover .tooltip {
+ visibility: visible !important;
+ transform: translateX(-50%) translateY(-5px);
+ pointer-events: auto !important;
+ }
+ /* Style spécifique pour le bouton de connexion */
+ #auth-button .tooltip {
+ top: 120%;
+ bottom: auto;
+ }
+ #auth-button.tooltip-container:hover .tooltip {
+ visibility: visible !important;
+ transform: translateX(-50%) translateY(5px);
+ }
+ /* Permettre l'interaction avec les tooltips même sur les boutons désactivés */
+ button:disabled .tooltip {
+ pointer-events: auto !important;
+ }
</style>
</head>
<body>
@@ -352,38 +379,32 @@
<span class="slider"></span>
</label>
</div>
-
- <div id="auto-add-options" class="hidden">
- <div class="option-row stopwords">
- <span>Inclure mots outils</span>
- <label class="toggle-switch">
- <input type="checkbox" id="include-stopwords" />
- <span class="slider"></span>
- </label>
- </div>
-
-
- <div class="option-row threshold-container">
- <label for="threshold">Seuil d'ajout d'un mot</label>
- <input type="number" id="threshold" value="10" min="1" />
- </div>
-
- <div class="option-row">
- <label>Langues suivies</label>
- <div id="language-selection" class="language-selection">
- <p id="loading-languages" style="color: gray;">Chargement...</p>
+ <div id="auto-add-options" class="hidden">
+ <div class="option-row stopwords">
+ <span>Inclure mots outils</span>
+ <label class="toggle-switch">
+ <input type="checkbox" id="include-stopwords" />
+ <span class="slider"></span>
+ </label>
</div>
+ <div class="option-row threshold-container">
+ <label for="threshold">Seuil d'ajout d'un mot</label>
+ <input type="number" id="threshold" value="10" min="1" />
+ </div>
+ <div class="option-row">
+ <label>Langues suivies</label>
+ <div id="language-selection" class="language-selection">
+ <p id="loading-languages" style="color: gray;">Chargement...</p>
+ </div>
+ </div>
+ <!-- Message d'erreur si aucune langue sélectionnée -->
+ <div id="error-message" class="hidden">
+ <p>Veuillez sélectionner une ou plusieurs langue(s).</p>
+ </div>
+ <button id="save-options" class="hidden">Valider</button>
</div>
-
- <!-- Message d'erreur si on ne sélectionne pas une langue à suivre-->
- <div id="error-message" class="hidden">
- <p>Veuillez sélectionner au moins une langue avant de sauvegarder.</p>
- </div>
- <button id="save-options" class="hidden">Valider</button>
</div>
-
- </div>
-
+
<div id="extension-notification" class="hidden">
<p id="notification-text"></p>
<button id="close-notification">OK</button>
diff --git a/src/popup/popup.js b/src/popup/popup.js
index 334b9b9cba6c06f485a29990f16925613879c0d3..5f83c88347f278d6e3a59f91532b202917f35884 100644
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -22,10 +22,20 @@ async function updateConnectionButton() {
if (accessToken) {
button.textContent = "Se déconnecter";
- button.title = "En vous déconnectant, vous perdrez l'accès à vos lexiques personnels, ainsi que les fonctionnalités d'ajout automatique et de statistiques d'utilisation.";
+ button.style.position = "relative";
+ button.className = "tooltip-container";
+ const tooltip = document.createElement("span");
+ tooltip.className = "tooltip";
+ tooltip.textContent = "En vous déconnectant, vous perdrez l'accès à vos lexiques personnels, ainsi qu'aux fonctionnalités d'ajout automatique et de statistiques d'utilisation.";
+ button.appendChild(tooltip);
} else {
button.textContent = "Se connecter";
- button.title = "En vous connectant, vous pourrez accéder à vos lexiques personnels, ainsi qu'aux fonctionnalités d'ajout automatique et de statistiques d'utilisation.";
+ button.style.position = "relative";
+ button.className = "tooltip-container";
+ const tooltip = document.createElement("span");
+ tooltip.className = "tooltip";
+ tooltip.textContent = "En vous connectant, vous pourrez accéder à vos lexiques personnels, ainsi qu'aux fonctionnalités d'ajout automatique et de statistiques d'utilisation.";
+ button.appendChild(tooltip);
}
button.onclick = async () => {
@@ -106,10 +116,30 @@ async function updateExtension() {
const toggleExtensionBtn = document.getElementById("toggleExtensionBtn");
if (toggleExtensionBtn) {
toggleExtensionBtn.textContent = extensionActive ? "Désactiver l'analyse" : "Activer l'analyse";
- toggleExtensionBtn.style.opacity = isLoggedIn ? "1" : "0.5";
+ toggleExtensionBtn.style.pointerEvents = isLoggedIn ? "auto" : "none";
toggleExtensionBtn.disabled = !isLoggedIn;
- toggleExtensionBtn.title = isLoggedIn ? "" : "Connectez-vous pour activer l'analyse";
- toggleExtensionBtn.onclick = handleToggleExtension; // Ajout de l'écouteur d'événements
+ toggleExtensionBtn.style.position = "relative";
+ toggleExtensionBtn.className = "tooltip-container";
+
+ const existingTooltipExt = toggleExtensionBtn.querySelector('.tooltip');
+ if (existingTooltipExt) {
+ existingTooltipExt.remove();
+ }
+ const tooltipExt = document.createElement("span");
+ tooltipExt.className = "tooltip";
+ tooltipExt.style.opacity = "1 !important";
+ if (!isLoggedIn) {
+ tooltipExt.textContent = "Connectez-vous pour activer l'analyse";
+ tooltipExt.style.display = "block";
+ } else if (!extensionActive) {
+ tooltipExt.textContent = "Activer les fonctionnalités de l'extension : affichage des mots et des définitions de vos lexiques, ajout de mots, etc.";
+ tooltipExt.style.display = "block";
+ } else {
+ tooltipExt.style.display = "none";
+ }
+ toggleExtensionBtn.appendChild(tooltipExt);
+
+ toggleExtensionBtn.onclick = handleToggleExtension;
}
// Mise à jour des options de statistiques
@@ -121,15 +151,34 @@ async function updateExtension() {
statsOptions.style.display = (isLoggedIn && extensionActive) ? "block" : "none";
}
+ // Mise à jour du bouton des statistiques
if (toggleStatsBtn) {
const isEnabled = isLoggedIn && extensionActive;
- toggleStatsBtn.style.opacity = isEnabled ? "1" : "0.5";
- toggleStatsBtn.disabled = !isEnabled;
- toggleStatsBtn.title = !isLoggedIn ? "Connectez-vous pour activer les statistiques" :
- !extensionActive ? "Activez l'analyse pour utiliser les statistiques" : "";
toggleStatsBtn.textContent = isTrackingActive ? "Désactiver les statistiques" : "Activer les statistiques";
+ toggleStatsBtn.style.pointerEvents = isEnabled ? "auto" : "none";
+ toggleStatsBtn.disabled = !isEnabled;
+ toggleStatsBtn.style.position = "relative";
+ toggleStatsBtn.className = "tooltip-container";
+
+ const existingTooltipStats = toggleStatsBtn.querySelector('.tooltip');
+ if (existingTooltipStats) { existingTooltipStats.remove(); }
+
+ const tooltipStats = document.createElement("span");
+ tooltipStats.className = "tooltip";
+ tooltipStats.style.opacity = "1 !important";
+ if (!isLoggedIn) {
+ tooltipStats.textContent = "Connectez-vous pour accéder aux statistiques";
+ tooltipStats.style.display = "block";
+ } else if (!extensionActive) {
+ tooltipStats.textContent = "Veuillez activer l'analyse pour utiliser les statistiques";
+ tooltipStats.style.display = "block";
+ } else {
+ tooltipStats.style.display = "none";
+ }
+ toggleStatsBtn.appendChild(tooltipStats);
}
+
if (openStats) {
openStats.style.display = (isLoggedIn && extensionActive && isTrackingActive) ? "block" : "none";
}
diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html
index daea55d79c41c772a487eeddf7dd90d1de4cddea..06f98b50bed31a02366fe242e4edfe96dd17037e 100644
--- a/src/sidebar/sidebar.html
+++ b/src/sidebar/sidebar.html
@@ -54,7 +54,7 @@
width: auto;
display: inline-flex;
padding: 6px 12px;
- font-size: 18px;
+ font-size: 16px;
font-family: Luciole;
background: none;
border: none;
@@ -150,7 +150,7 @@
font-weight: bold;
color: #323046;
flex-grow: 1;
- font-size: 15px;
+ font-size: 12px;
text-align: center;
}
@@ -183,7 +183,7 @@
transform: translateX(-50%);
background-color: rgba(0,0,0,0.75);
color: #fff;
- font-size: 14px !important;
+ font-size: 12px !important;
font-weight: lighter !important;
padding: 6px 10px;
border-radius: 5px;
diff --git a/src/sidebar/sidebar.js b/src/sidebar/sidebar.js
index fb257195746d627e04290543a4f93b08718f2e1e..0b40b7881febb0f0e60c8e0ed73f1435d2eb7cd7 100644
--- a/src/sidebar/sidebar.js
+++ b/src/sidebar/sidebar.js
@@ -37,9 +37,6 @@ function updateAuthButton(isLoggedIn) {
const authButton = document.getElementById("auth-button");
if (authButton) {
authButton.textContent = isLoggedIn ? "Se déconnecter" : "Se connecter";
- authButton.title = isLoggedIn
- ? "En vous déconnectant, vous perdrez l'accès à vos lexiques personnels ainsi qu'aux fonctionnalités d'ajout automatique et de statistiques d'utilisation."
- : "En vous connectant, vous pourrez accéder à vos lexiques personnels ainsi qu'aux fonctionnalités d'ajout automatique et de statistiques d'utilisation.";
log("🔄 Bouton d'authentification mis à jour :", authButton.textContent);
} else {
console.warn("âš ï¸ Bouton d'authentification (#auth-button) introuvable.");