Index: gc_lang/fr/webext/content_scripts/content_panels.css ================================================================== --- gc_lang/fr/webext/content_scripts/content_panels.css +++ gc_lang/fr/webext/content_scripts/content_panels.css @@ -1,50 +1,55 @@ /* CSS Content panels for Grammalecte */ + +/* + Wrapper +*/ +.grammalecte_wrapper { + padding: 5px; + border-radius: 3px; + background-color: hsl(210, 50%, 50%); + font-family: "Trebuchet MS", "Liberation Sans", sans-serif; + color: hsl(210, 10%, 90%); +} + +.grammalecte_wrapper_button { + display: inline-block; + padding: 0 5px; + margin-left: 5px; + background-color: hsl(210, 50%, 60%); + border-radius: 2px; + cursor: pointer; +} + + +/* + Panels +*/ .grammalecte_panel { padding: 0; margin: 0; position: fixed; left: 50%; top: 50%; z-index: 100; - border: 10px solid hsla(210, 20%, 70%, .5); + border: 10px solid hsl(210, 0%, 0%); border-radius: 10px; - background-color: hsl(210, 20%, 90%); + background-color: hsl(210, 20%, 100%); color: hsl(210, 10%, 4%); font-family: "Trebuchet MS", "Liberation Sans", sans-serif; -} - -#gc_panel, #lxg_panel { - width: 400px; - height: 700px; - margin-top: -350px; - margin-left: -200px; -} - -#tf_panel { - width: 800px; - height: 600px; - margin-top: -300px; - margin-left: -400px; -} - -#conj_panel { - width: 700px; - height: 700px; - margin-top: -350px; - margin-left: -350px; + box-shadow: 0 0 4px 2px hsl(210, 0%, 50%); } .grammalecte_title_bar { position: sticky; width: 100%; - background-color: hsl(210, 0%, 100%); - border-bottom: 1px solid hsl(210, 10%, 50%); + background-color: hsl(210, 0%, 90%); + border-bottom: 1px solid hsl(210, 10%, 80%); font-size: 20px; } .grammalecte_title { padding: 10px 20px; } @@ -67,5 +72,106 @@ .grammalecte_panel_content { height: calc(100% - 45px); /* panel height - title_bar */ overflow: auto; } + + +/* + GC Panel & Lexicographer +*/ +#grammalecte_gc_panel, #grammalecte_lxg_panel { + width: 500px; + height: 700px; + margin-top: -350px; + margin-left: -200px; +} + + +/* + Conjugueur +*/ +#grammalecte_conj_panel { + width: 700px; + height: 700px; + margin-top: -350px; + margin-left: -350px; +} + + +/* + Text Formatter +*/ +#grammalecte_tf_panel { + width: 800px; + height: 600px; + margin-top: -300px; + margin-left: -400px; +} + +#grammalecte_tf_options { + display: flex; + padding: 10px; +} +#grammalecte_tf_options .underline:hover { + background-color: hsl(210, 10%, 86%); + border-radius: 2px; +} +.grammalecte_tf_column { + flex-grow: 1; + width: 360px; + padding: 0 5px; +} +#grammalecte_tf_options legend label { + font-size: 20px; + color: hsla(210, 20%, 50%, .8); + font-weight: bold; +} +#grammalecte_tf_options fieldset { + padding: 2px 10px 10px 13px; + margin-bottom: 5px; + background-color: hsl(210, 10%, 96%); + border-color: hsl(210, 20%, 80%); + border-radius: 3px; +} +#grammalecte_tf_options legend .option { + margin: 7px 5px 0 4px; + float: left; +} +#grammalecte_tf_options label { + font-size: 13px; +} +#grammalecte_tf_options .grammalecte_tf_result { + float: right; + font-size: 13px; +} + +#grammalecte_tf_actions { + background-color: hsl(120, 10%, 92%); + padding: 15px; + border-top: 1px solid hsl(120, 20%, 86%); +} + +.grammalecte_button { + display: inline-block; + padding: 5px 10px; + width: 100px; + border-radius: 3px; + font-size: 16px; + font-weight: bold; + text-align: center; + cursor: pointer; +} + +#grammalecte_tf_reset { + background-color: hsl(210, 80%, 50%); + color: hsl(210, 0%, 100%); +} +#grammalecte_tf_apply { + background-color: hsl(150, 80%, 50%); + color: hsl(150, 0%, 100%); +} + +#grammalecte_progressbarbox { + display: inline-block; + padding: 10px 20px; +} Index: gc_lang/fr/webext/content_scripts/modify_page.js ================================================================== --- gc_lang/fr/webext/content_scripts/modify_page.js +++ gc_lang/fr/webext/content_scripts/modify_page.js @@ -34,11 +34,11 @@ function createWrapper (xTextArea) { try { let xParentElement = xTextArea.parentElement; let xWrapper = document.createElement("div"); - xWrapper.style = "padding: 5px; color: hsl(210, 10%, 90%); background-color: hsl(210, 50%, 50%); border-radius: 3px;"; + xWrapper.className = "grammalecte_wrapper"; xWrapper.id = nWrapper + 1; nWrapper += 1; xParentElement.insertBefore(xWrapper, xTextArea); xWrapper.appendChild(xTextArea); // move textarea in wrapper let xToolbar = createWrapperToolbar(xTextArea); @@ -47,12 +47,10 @@ catch (e) { showError(e); } } -let sButtonStyle = "display: inline-block; padding: 0 5px; margin-left: 5px; background-color: hsl(210, 50%, 60%); border-radius: 2px; cursor: pointer;"; - function createWrapperToolbar (xTextArea) { try { let xToolbar = document.createElement("div"); xToolbar.style = "display: flex; justify-content: flex-end; margin-top: 5px; padding: 5px 10px;"; /*let xLogo = document.createElement("img"); @@ -60,32 +58,32 @@ xTitle.appendChild(xLogo);*/ xToolbar.appendChild(document.createTextNode("Grammalecte")); let xConjButton = document.createElement("div"); xConjButton.textContent = "Conjuguer"; - xConjButton.style = sButtonStyle; + xConjButton.className = "grammalecte_wrapper_button"; xConjButton.onclick = function() { createConjPanel(); }; xToolbar.appendChild(xConjButton); let xTFButton = document.createElement("div"); xTFButton.textContent = "Formater"; - xTFButton.style = sButtonStyle; + xTFButton.className = "grammalecte_wrapper_button"; xTFButton.onclick = function() { createTFPanel(xTextArea); }; xToolbar.appendChild(xTFButton); let xLxgButton = document.createElement("div"); xLxgButton.textContent = "Analyser"; - xLxgButton.style = sButtonStyle; + xLxgButton.className = "grammalecte_wrapper_button"; xLxgButton.onclick = function() { createLxgPanel(xTextArea); }; xToolbar.appendChild(xLxgButton); let xGCButton = document.createElement("div"); xGCButton.textContent = "Corriger"; - xGCButton.style = sButtonStyle; + xGCButton.className = "grammalecte_wrapper_button"; xGCButton.onclick = function() { xPort.postMessage({sCommand: "parseAndSpellcheck", dParam: {sText: xTextArea.value, sCountry: "FR", bDebug: false, bContext: false}, dInfo: {sTextAreaId: xTextArea.id}}); }; xToolbar.appendChild(xGCButton); return xToolbar; @@ -99,11 +97,11 @@ console.log("Conjugueur"); if (xConjPanel !== null) { xConjPanel.style.display = "block"; } else { // create the panel - xConjPanel = createPanelFrame("conj_panel", "Conjugueur"); + xConjPanel = createPanelFrame("grammalecte_conj_panel", "Conjugueur"); document.body.appendChild(xConjPanel); } } function createTFPanel (xTextArea) { @@ -110,23 +108,23 @@ console.log("Formateur de texte"); if (xTFPanel !== null) { xTFPanel.style.display = "block"; } else { // create the panel - xTFPanel = createPanelFrame("tf_panel", "Formateur de texte"); + xTFPanel = createPanelFrame("grammalecte_tf_panel", "Formateur de texte"); document.body.appendChild(xTFPanel); - document.getElementById("tf_panel_content").appendChild(createTextFormatter(xTextArea)); + document.getElementById("grammalecte_tf_panel_content").appendChild(createTextFormatter(xTextArea)); } } function createLxgPanel (xTextArea) { console.log("Lexicographe"); if (xLxgPanel !== null) { xLxgPanel.style.display = "block"; } else { // create the panel - xLxgPanel = createPanelFrame("lxg_panel", "Lexicographe"); + xLxgPanel = createPanelFrame("grammalecte_lxg_panel", "Lexicographe"); document.body.appendChild(xLxgPanel); } } function createGCPanel (oErrors) { @@ -133,13 +131,13 @@ console.log("Correction grammaticale"); if (xGCPanel !== null) { xGCPanel.style.display = "block"; } else { // create the panel - xGCPanel = createPanelFrame("gc_panel", "Correcteur"); + xGCPanel = createPanelFrame("grammalecte_gc_panel", "Correcteur"); document.body.appendChild(xGCPanel); - document.getElementById("gc_panel_content").appendChild(document.createTextNode(JSON.stringify(oErrors))); + document.getElementById("grammalecte_gc_panel_content").appendChild(document.createTextNode(JSON.stringify(oErrors))); } } /* Index: gc_lang/fr/webext/content_scripts/text_formatter.js ================================================================== --- gc_lang/fr/webext/content_scripts/text_formatter.js +++ gc_lang/fr/webext/content_scripts/text_formatter.js @@ -5,11 +5,12 @@ function createTextFormatter (xTextArea) { let xTFNode = document.createElement("div"); try { // Options - let xOptions = createNode("div", {id: "tf_options"}); + let xOptions = createNode("div", {id: "grammalecte_tf_options"}); + let xColumn1 = createNode("div", {className: "grammalecte_tf_column"}); let xSSP = createFieldset("group_ssp", true, "Espaces surnuméraires"); xSSP.appendChild(createOptionInputAndLabel("o_start_of_paragraph", true, "En début de paragraphe")); xSSP.appendChild(createOptionInputAndLabel("o_end_of_paragraph", true, "En fin de paragraphe")); xSSP.appendChild(createOptionInputAndLabel("o_between_words", true, "Entre les mots")); xSSP.appendChild(createOptionInputAndLabel("o_before_punctuation", true, "Avant les points (.), les virgules (,)")); @@ -25,10 +26,11 @@ xNBSP.appendChild(createOptionInputAndLabel("o_nbsp_before_symbol", true, "Avant % ‰ € $ £ ¥ ˚C")); xNBSP.appendChild(createOptionInputAndLabel("o_nbsp_within_numbers", true, "À l’intérieur des nombres")); xNBSP.appendChild(createOptionInputAndLabel("o_nbsp_before_units", true, "Avant les unités de mesure")); let xDelete = createFieldset("group_delete", true, "Suppressions"); xDelete.appendChild(createOptionInputAndLabel("o_erase_non_breaking_hyphens", true, "Tirets conditionnels")); + let xColumn2 = createNode("div", {className: "grammalecte_tf_column"}); let xTypo = createFieldset("group_typo", true, "Signes typographiques"); xTypo.appendChild(createOptionInputAndLabel("o_ts_apostrophe", true, "Apostrophe (’)")); xTypo.appendChild(createOptionInputAndLabel("o_ts_ellipsis", true, "Points de suspension (…)")); xTypo.appendChild(createOptionInputAndLabel("o_ts_dash_middle", true, "Tirets d’incise :")); xTypo.appendChild(createOptionInputAndLabel("o_ts_dash_start", true, "Tirets en début de paragraphe :")); @@ -42,24 +44,26 @@ xMisc.appendChild(createOptionInputAndLabel("o_missing_hyphens", true, "Traits d’union manquants")); xMisc.appendChild(createOptionInputAndLabel("o_ma_word", true, "Apostrophes manquantes")); let xStruct = createFieldset("group_struct", false, "Restructuration [!]"); xStruct.appendChild(createOptionInputAndLabel("o_remove_hyphens_at_end_of_paragraphs", false, "Enlever césures en fin de ligne/paragraphe [!]")); xStruct.appendChild(createOptionInputAndLabel("o_merge_contiguous_paragraphs", false, "Fusionner les paragraphes contigus [!]")); - xOptions.appendChild(xSSP); - xOptions.appendChild(xSpace); - xOptions.appendChild(xNBSP); - xOptions.appendChild(xDelete); - xOptions.appendChild(xTypo); - xOptions.appendChild(xMisc); - xOptions.appendChild(xStruct); + xColumn1.appendChild(xSSP); + xColumn1.appendChild(xSpace); + xColumn1.appendChild(xNBSP); + xColumn1.appendChild(xDelete); + xColumn2.appendChild(xTypo); + xColumn2.appendChild(xMisc); + xColumn2.appendChild(xStruct); + xOptions.appendChild(xColumn1); + xOptions.appendChild(xColumn2); // Actions - let xActions = createNode("div", {id: "tf_actions"}); - xActions.appendChild(createNode("div", {id: "tf_reset", textContent: "Par défaut", className: "button blue"})); - xActions.appendChild(createNode("progress", {id: "progressbar", style: "width: 25px"})); - xActions.appendChild(createNode("span", {id: "time_res"})); - xActions.appendChild(createNode("div", {id: "tf_apply", textContent: "Appliquer", className: "button green"})); - xActions.appendChild(createNode("div", {id: "infomsg", textContent: "blabla"})); + let xActions = createNode("div", {id: "grammalecte_tf_actions"}); + xActions.appendChild(createNode("div", {id: "grammalecte_tf_reset", textContent: "Par défaut", className: "grammalecte_button", style: "background-color: hsl(210, 50%, 50%)"})); + xActions.appendChild(createNode("progress", {id: "grammalecte_progressbar", style: "width: 25px"})); + xActions.appendChild(createNode("span", {id: "grammalecte_time_res"})); + xActions.appendChild(createNode("div", {id: "grammalecte_tf_apply", textContent: "Appliquer", className: "grammalecte_button", style: "background-color: hsl(180, 50%, 50%)"})); + //xActions.appendChild(createNode("div", {id: "grammalecte_infomsg", textContent: "blabla"})); // create result xTFNode.appendChild(xOptions); xTFNode.appendChild(xActions); } catch (e) { @@ -83,11 +87,11 @@ function createOptionInputAndLabel (sId, bDefault, sLabel) { let xOption = createNode("div", {className: "blockopt underline"}); let xInput = createCheckbox(sId, bDefault, "option"); let xLabel = createLabel(sId, sLabel, "opt_lbl largew"); - let xResult = createNode("div", {id: "res_"+sId, className: "result fright"}); + let xResult = createNode("div", {id: "res_"+sId, className: "grammalecte_tf_result", textContent: "9999"}); // create result xOption.appendChild(xResult); xOption.appendChild(xInput); xOption.appendChild(xLabel); return xOption;