Index: gc_lang/fr/webext/content_scripts/panel.css ================================================================== --- gc_lang/fr/webext/content_scripts/panel.css +++ gc_lang/fr/webext/content_scripts/panel.css @@ -7,25 +7,28 @@ padding: 0; margin: 0; position: fixed; box-sizing: content-box; z-index: 2147483640; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */ - border: 2px solid hsl(210, 0%, 50%); + border: 2px solid hsl(210, 10%, 50%); border-radius: 10px 10px 10px 10px; - background-color: hsl(210, 20%, 100%); - color: hsl(210, 10%, 4%); + background-color: hsl(210, 0%, 100%); + color: hsl(0, 0%, 0%); font-family: "Trebuchet MS", "Liberation Sans", sans-serif; - box-shadow: 0 0 4px 2px hsl(210, 0%, 50%); + box-shadow: 0 0 2px 1px hsla(210, 50%, 50%, .5); line-height: normal; + text-shadow: unset; + text-decoration: none; } .grammalecte_panel_bar { position: sticky; width: 100%; background-color: hsl(210, 0%, 90%); border-radius: 10px 10px 0 0; border-bottom: 1px solid hsl(210, 10%, 80%); + color: hsl(210, 10%, 4%); font-size: 20px; } .grammalecte_panel_title { padding: 10px 20px; } Index: gc_lang/fr/webext/content_scripts/panel_gc.css ================================================================== --- gc_lang/fr/webext/content_scripts/panel_gc.css +++ gc_lang/fr/webext/content_scripts/panel_gc.css @@ -18,60 +18,20 @@ font-size: 14px; font-family : "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; color: hsl(0, 0%, 0%); } -.grammalecte_paragraph a { - background-color: hsla(210, 50%, 50%, 1); - padding: 1px 5px; - border-radius: 2px; - color: hsla(210, 0%, 96%, 1); - cursor: pointer; - text-decoration: none; -} -.grammalecte_paragraph a:hover { - background-color: hsla(210, 60%, 40%, 1); - color: hsla(0, 0%, 100%, 1); - text-shadow: 0 0 3px hsl(210, 30%, 60%); -} - -.grammalecte_paragraph u { - text-decoration: none; -} - -.grammalecte_paragraph u.corrected, -.grammalecte_paragraph u.ignored { - background-color: hsla(120, 50%, 70%, 1); - color: hsla(0, 0%, 4%, 1); - border-radius: 2px; - text-decoration: none; -} -.grammalecte_paragraph u.ignored { - background-color: hsla(30, 20%, 80%, 1); -} - -.grammalecte_paragraph u.error { - position: relative; - cursor: pointer; - border-radius: 2px; - text-decoration: none; /* to remove for wavy underlines */ -} -.grammalecte_paragraph u.error:hover { - cursor: pointer; -} - /* Action buttons */ - .grammalecte_paragraph_actions { float: right; margin: 0 0 5px 10px; } -.grammalecte_paragraph_actions .button { +.grammalecte_paragraph_button { display: inline-block; background-color: hsl(0, 0%, 50%); text-align: center; margin-left: 2px; padding: 1px 4px 3px 4px; @@ -78,43 +38,31 @@ cursor: pointer; font-size: 14px; color: hsl(0, 0%, 96%); border-radius: 2px; } -.grammalecte_paragraph_actions .button:hover { +.grammalecte_paragraph_button:hover { background-color: hsl(0, 0%, 40%); color: hsl(0, 0%, 100%); } -.grammalecte_paragraph_actions .green { +.grammalecte_paragraph_actions .grammalecte_green { background-color: hsl(120, 30%, 50%); color: hsl(0, 0%, 96%); } -.grammalecte_paragraph_actions .green:hover { +.grammalecte_paragraph_actions .grammalecte_green:hover { background-color: hsl(120, 50%, 40%); color: hsl(0, 0%, 100%); } -.grammalecte_paragraph_actions .red { +.grammalecte_paragraph_actions .grammalecte_red { background-color: hsl(0, 30%, 50%); color: hsl(0, 0%, 96%); } -.grammalecte_paragraph_actions .red:hover { +.grammalecte_paragraph_actions .grammalecte_red:hover { background-color: hsl(0, 50%, 40%); color: hsl(0, 0%, 100%); } -.grammalecte_paragraph_actions .orange { - background-color: hsl(30, 50%, 50%); - color: hsl(30, 0%, 96%); -} -.grammalecte_paragraph_actions .orange:hover { - background-color: hsl(30, 70%, 40%); - color: hsl(30, 0%, 100%); -} -.grammalecte_paragraph_actions .bold { - font-weight: bold; -} - /* TOOLTIP */ @@ -134,11 +82,11 @@ font-size: 12px; line-height: 18px; cursor: default; text-decoration: none; border: 3px solid hsl(210, 50%, 30%); - color: hsla(210, 10%, 20%, 1); + color: hsl(210, 10%, 20%); z-index: 1000; } #grammalecte_tooltip_message_block { margin: 0; @@ -162,34 +110,36 @@ font-size: 15px; margin: 0 0 5px 0; } #grammalecte_tooltip_ignore { display: inline-block; - padding: 2px 5px; - background-color: hsla(30, 30%, 40%, 1); + padding: 1px 5px; + background-color: hsl(30, 30%, 40%); color: hsla(30, 0%, 96%, 1); border-radius: 2px; cursor: pointer; + font-size: 12px; text-decoration: none; } #grammalecte_tooltip_ignore:hover { - background-color: hsla(30, 30%, 50%, 1); + background-color: hsl(30, 30%, 50%); color: hsla(0, 0%, 100%, 1); text-shadow: 0 0 3px hsl(30, 30%, 60%); } #grammalecte_tooltip_url { display: inline-block; - margin: 0 0 0 10px; - padding: 2px 5px; - background-color: hsla(210, 50%, 50%, 1); + margin-left: 10px; + padding: 1px 5px; + background-color: hsl(210, 50%, 50%); color: hsla(210, 0%, 96%, 1); border-radius: 2px; cursor: pointer; + font-size: 12px; text-decoration: none; } #grammalecte_tooltip_url:hover { - background-color: hsla(210, 50%, 60%, 1); + background-color: hsl(210, 50%, 60%); color: hsla(0, 0%, 100%, 1); text-shadow: 0 0 3px hsl(210, 30%, 60%); } #grammalecte_tooltip_sugg_title { padding: 0 10px; @@ -202,165 +152,183 @@ padding: 10px; background-color: hsl(210, 10%, 96%); border-radius: 0 0 2px 2px; line-height: 20px; } -#grammalecte_tooltip_sugg_block a.sugg { +.grammalecte_tooltip_sugg { + display: inline-block; padding: 1px 6px; - background-color: hsla(180, 60%, 40%, 1); - color: hsla(180, 0%, 96%, 1); + background-color: hsl(180, 60%, 40%); + color: hsl(180, 0%, 96%); border-radius: 2px; cursor: pointer; + font-size: 14px; text-decoration: none; } -#grammalecte_tooltip_sugg_block a.sugg:hover { +.grammalecte_tooltip_sugg:hover { background-color: hsla(180, 70%, 45%, 1); color: hsla(0, 0%, 100%, 1); } /* ERRORS */ - -.grammalecte_paragraph .error { +.grammalecte_error { + cursor: pointer; + border-radius: 2px; + text-decoration: none; + text-shadow: unset; /* default color */ background-color: hsl(240, 10%, 50%); color: hsl(240, 0%, 96%); } -.grammalecte_paragraph .error:hover { +.grammalecte_error:hover { background-color: hsl(240, 10%, 40%); color: hsl(240, 0%, 100%); } + +.grammalecte_error_corrected, +.grammalecte_error_ignored { + display: inline-block; + border-radius: 2px; + text-decoration: none; + background-color: hsla(120, 50%, 70%, 1); + color: hsla(0, 0%, 4%, 1); +} +.grammalecte_error_ignored { + background-color: hsla(30, 20%, 80%, 1); +} + /* elems */ -.grammalecte_paragraph .WORD { +.grammalecte_error_WORD { background-color: hsl(0, 50%, 50%); color: hsl(0, 0%, 96%); /*text-decoration: underline wavy hsl(0, 50%, 50%);*/ } -.grammalecte_paragraph .WORD:hover { +.grammalecte_error_WORD:hover { background-color: hsl(0, 60%, 40%); color: hsl(0, 0%, 100%); } /* elems */ -.grammalecte_paragraph .typo, -.grammalecte_paragraph .esp, -.grammalecte_paragraph .nbsp, -.grammalecte_paragraph .eif, -.grammalecte_paragraph .maj, -.grammalecte_paragraph .virg, -.grammalecte_paragraph .tu, -.grammalecte_paragraph .num, -.grammalecte_paragraph .unit, -.grammalecte_paragraph .nf, -.grammalecte_paragraph .liga, -.grammalecte_paragraph .mapos, -.grammalecte_paragraph .chim { +.grammalecte_error_typo, +.grammalecte_error_esp, +.grammalecte_error_nbsp, +.grammalecte_error_eif, +.grammalecte_error_maj, +.grammalecte_error_virg, +.grammalecte_error_tu, +.grammalecte_error_num, +.grammalecte_error_unit, +.grammalecte_error_nf, +.grammalecte_error_liga, +.grammalecte_error_mapos, +.grammalecte_error_chim { background-color: hsl(30, 70%, 50%); color: hsl(30, 10%, 96%); /*text-decoration: underline wavy hsl(30, 70%, 50%);*/ } -.grammalecte_paragraph .typo:hover, -.grammalecte_paragraph .esp:hover, -.grammalecte_paragraph .nbsp:hover, -.grammalecte_paragraph .eif:hover, -.grammalecte_paragraph .maj:hover, -.grammalecte_paragraph .virg:hover, -.grammalecte_paragraph .tu:hover, -.grammalecte_paragraph .num:hover, -.grammalecte_paragraph .unit:hover, -.grammalecte_paragraph .nf:hover, -.grammalecte_paragraph .liga:hover, -.grammalecte_paragraph .mapos:hover, -.grammalecte_paragraph .chim:hover { +.grammalecte_error_typo:hover, +.grammalecte_error_esp:hover, +.grammalecte_error_nbsp:hover, +.grammalecte_error_eif:hover, +.grammalecte_error_maj:hover, +.grammalecte_error_virg:hover, +.grammalecte_error_tu:hover, +.grammalecte_error_num:hover, +.grammalecte_error_unit:hover, +.grammalecte_error_nf:hover, +.grammalecte_error_liga:hover, +.grammalecte_error_mapos:hover, +.grammalecte_error_chim:hover { background-color: hsl(30, 80%, 45%); color: hsl(30, 10%, 96%); } /* elems */ -.grammalecte_paragraph .apos { +.grammalecte_error_apos { background-color: hsl(40, 90%, 50%); color: hsl(40, 10%, 96%); /*text-decoration: underline wavy hsl(40, 70%, 45%);*/ } -.grammalecte_paragraph .apos:hover { +.grammalecte_error_apos:hover { background-color: hsl(40, 100%, 45%); color: hsl(40, 10%, 96%); } /* elems */ -.grammalecte_paragraph .gn, -.grammalecte_paragraph .sgpl { +.grammalecte_error_gn, +.grammalecte_error_sgpl { background-color: hsl(210, 50%, 50%); color: hsl(210, 10%, 96%); /*text-decoration: underline wavy hsl(210, 50%, 50%);*/ } -.grammalecte_paragraph .gn:hover, -.grammalecte_paragraph .sgpl:hover { +.grammalecte_error_gn:hover, +.grammalecte_error_sgpl:hover { background-color: hsl(210, 60%, 40%); color: hsl(210, 10%, 96%); } /* elems */ -.grammalecte_paragraph .conj, -.grammalecte_paragraph .infi, -.grammalecte_paragraph .imp, -.grammalecte_paragraph .inte, -.grammalecte_paragraph .ppas, -.grammalecte_paragraph .vmode { +.grammalecte_error_conj, +.grammalecte_error_infi, +.grammalecte_error_imp, +.grammalecte_error_inte, +.grammalecte_error_ppas, +.grammalecte_error_vmode { background-color: hsl(300, 30%, 40%); color: hsl(300, 10%, 96%); /*text-decoration: underline wavy hsl(300, 40%, 40%);*/ } -.grammalecte_paragraph .conj:hover, -.grammalecte_paragraph .infi:hover, -.grammalecte_paragraph .imp:hover, -.grammalecte_paragraph .inte:hover, -.grammalecte_paragraph .ppas:hover, -.grammalecte_paragraph .vmode:hover { +.grammalecte_error_conj:hover, +.grammalecte_error_infi:hover, +.grammalecte_error_imp:hover, +.grammalecte_error_inte:hover, +.grammalecte_error_ppas:hover, +.grammalecte_error_vmode:hover { background-color: hsl(300, 40%, 30%); color: hsl(300, 10%, 96%); } /* elems */ -.grammalecte_paragraph .conf, -.grammalecte_paragraph .ocr { +.grammalecte_error_conf, +.grammalecte_error_ocr { background-color: hsl(270, 40%, 30%); color: hsl(270, 10%, 96%); /*text-decoration: underline wavy hsl(270, 40%, 30%);*/ } -.grammalecte_paragraph .conf:hover, -.grammalecte_paragraph .ocr:hover { +.grammalecte_error_conf:hover, +.grammalecte_error_ocr:hover { background-color: hsl(270, 50%, 20%); color: hsl(270, 10%, 96%); } /* elems */ -.grammalecte_paragraph .bs, -.grammalecte_paragraph .pleo, -.grammalecte_paragraph .neg, -.grammalecte_paragraph .redon1, -.grammalecte_paragraph .redon2, -.grammalecte_paragraph .mc, -.grammalecte_paragraph .date, -.grammalecte_paragraph .notype { +.grammalecte_error_bs, +.grammalecte_error_pleo, +.grammalecte_error_neg, +.grammalecte_error_redon1, +.grammalecte_error_redon2, +.grammalecte_error_mc, +.grammalecte_error_date, +.grammalecte_error_notype { background-color: hsl(180, 50%, 40%); color: hsl(180, 10%, 96%); /*text-decoration: underline wavy hsl(180, 50%, 40%);*/ } -.grammalecte_paragraph .bs:hover, -.grammalecte_paragraph .pleo:hover, -.grammalecte_paragraph .neg:hover, -.grammalecte_paragraph .redon1:hover, -.grammalecte_paragraph .redon2:hover, -.grammalecte_paragraph .mc:hover, -.grammalecte_paragraph .date:hover, -.grammalecte_paragraph .notype:hover { +.grammalecte_error_bs:hover, +.grammalecte_error_pleo:hover, +.grammalecte_error_neg:hover, +.grammalecte_error_redon1:hover, +.grammalecte_error_redon2:hover, +.grammalecte_error_mc:hover, +.grammalecte_error_date:hover, +.grammalecte_error_notype:hover { background-color: hsl(180, 60%, 30%); color: hsl(180, 10%, 96%); } Index: gc_lang/fr/webext/content_scripts/panel_gc.js ================================================================== --- gc_lang/fr/webext/content_scripts/panel_gc.js +++ gc_lang/fr/webext/content_scripts/panel_gc.js @@ -12,12 +12,13 @@ oGrammalecte.oGCPanel.ignoreError(xElem.id); } else if (xElem.id.startsWith("grammalecte_check")) { oGrammalecte.oGCPanel.recheckParagraph(parseInt(xElem.dataset.para_num)); } else if (xElem.id.startsWith("grammalecte_hide")) { xElem.parentNode.parentNode.style.display = "none"; - } else if (xElem.tagName === "U" && xElem.id.startsWith("grammalecte_err") - && xElem.className !== "corrected" && xElem.className !== "ignored") { + } else if (xElem.id.startsWith("grammalecte_err") + && xElem.className !== "grammalecte_error_corrected" + && xElem.className !== "grammalecte_error_ignored") { oGrammalecte.oGCPanel.oTooltip.show(xElem.id); } else if (xElem.id === "grammalecte_tooltip_url") { oGrammalecte.oGCPanel.openURL(xElem.dataset.url); } else { oGrammalecte.oGCPanel.oTooltip.hide(); @@ -77,16 +78,15 @@ try { if (oResult && oResult.sParagraph.trim() !== "" && (oResult.aGrammErr.length > 0 || oResult.aSpellErr.length > 0)) { let xNodeDiv = createNode("div", {className: "grammalecte_paragraph_block"}); // actions let xActionsBar = createNode("div", {className: "grammalecte_paragraph_actions"}); - xActionsBar.appendChild(createNode("div", {id: "grammalecte_check" + oResult.iParaNum, className: "button green", textContent: "Réanalyser"}, {para_num: oResult.iParaNum})); - xActionsBar.appendChild(createNode("div", {id: "grammalecte_hide" + oResult.iParaNum, className: "button red bold", textContent: "×"})); + xActionsBar.appendChild(createNode("div", {id: "grammalecte_check" + oResult.iParaNum, className: "grammalecte_paragraph_button grammalecte_green", textContent: "Réanalyser"}, {para_num: oResult.iParaNum})); + xActionsBar.appendChild(createNode("div", {id: "grammalecte_hide" + oResult.iParaNum, className: "grammalecte_paragraph_button grammalecte_red", textContent: "×", style: "font-weight: bold;"})); // paragraph - let xParagraph = createNode("p", {id: "grammalecte_paragraph"+oResult.iParaNum, lang: "fr", contentEditable: "true"}, {para_num: oResult.iParaNum}); + let xParagraph = createNode("p", {id: "grammalecte_paragraph"+oResult.iParaNum, className: "grammalecte_paragraph", lang: "fr", contentEditable: "true"}, {para_num: oResult.iParaNum}); xParagraph.setAttribute("spellcheck", "false"); // doesn’t seem possible to use “spellcheck” as a common attribute. - xParagraph.className = (oResult.aGrammErr.length || oResult.aSpellErr.length) ? "grammalecte_paragraph softred" : "grammalecte_paragraph"; xParagraph.addEventListener("keyup", function (xEvent) { this.oTAC.setParagraph(parseInt(xEvent.target.dataset.para_num), this.purgeText(xEvent.target.textContent)); this.oTAC.write(); }.bind(this) , true); @@ -167,11 +167,11 @@ showError(e); } } _createError (sUnderlined, oErr) { - let xNodeErr = document.createElement("u"); + let xNodeErr = document.createElement("mark"); xNodeErr.id = "grammalecte_err" + oErr['sErrorId']; xNodeErr.textContent = sUnderlined; xNodeErr.dataset.error_id = oErr['sErrorId']; xNodeErr.dataset.ignored_key = oErr['sIgnoredKey']; xNodeErr.dataset.error_type = (oErr['sType'] === "WORD") ? "spelling" : "grammar"; @@ -182,11 +182,11 @@ xNodeErr.dataset.line_id = oErr['sLineId']; xNodeErr.dataset.rule_id = oErr['sRuleId']; } xNodeErr.dataset.suggestions = oErr["aSuggestions"].join("|"); } - xNodeErr.className = (this.aIgnoredErrors.has(xNodeErr.dataset.ignored_key)) ? "ignored" : "error " + oErr['sType']; + xNodeErr.className = (this.aIgnoredErrors.has(xNodeErr.dataset.ignored_key)) ? "grammalecte_error_ignored" : "grammalecte_error grammalecte_error_" + oErr['sType']; return xNodeErr; } blockParagraph (xParagraph) { xParagraph.contentEditable = "false"; @@ -202,11 +202,11 @@ try { let sErrorId = document.getElementById(sNodeSuggId).dataset.error_id; //let sParaNum = sErrorId.slice(0, sErrorId.indexOf("-")); let xNodeErr = document.getElementById("grammalecte_err" + sErrorId); xNodeErr.textContent = document.getElementById(sNodeSuggId).textContent; - xNodeErr.className = "corrected"; + xNodeErr.className = "grammalecte_error_corrected"; xNodeErr.removeAttribute("style"); this.oTooltip.hide(); this.recheckParagraph(parseInt(sErrorId.slice(0, sErrorId.indexOf("-")))); } catch (e) { @@ -217,11 +217,11 @@ ignoreError (sIgnoreButtonId) { // ignore try { let sErrorId = document.getElementById(sIgnoreButtonId).dataset.error_id; let xNodeErr = document.getElementById("grammalecte_err" + sErrorId); this.aIgnoredErrors.add(xNodeErr.dataset.ignored_key); - xNodeErr.className = "ignored"; + xNodeErr.className = "grammalecte_error_ignored"; this.oTooltip.hide(); } catch (e) { showError(e); } @@ -365,13 +365,13 @@ this.xTooltipArrow.style.display = "none"; this.xTooltip.style.display = "none"; } _createSuggestion (sErrId, iSugg, sSugg) { - let xNodeSugg = document.createElement("a"); + let xNodeSugg = document.createElement("div"); xNodeSugg.id = "grammalecte_sugg" + sErrId + "--" + iSugg.toString(); - xNodeSugg.className = "sugg"; + xNodeSugg.className = "grammalecte_tooltip_sugg"; xNodeSugg.dataset.error_id = sErrId; xNodeSugg.textContent = sSugg; return xNodeSugg; }