From 39590dcf2c621b0a042e47dcc52335d930605030 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 10 Apr 2023 18:39:35 +0200 Subject: [PATCH 1/5] Add monospace toggle button to textarea --- options/locale/locale_en-US.ini | 2 ++ templates/shared/combomarkdowneditor.tmpl | 11 +++++++++++ web_src/css/editor-markdown.css | 3 +++ web_src/css/helpers.css | 2 +- web_src/js/features/comp/ComboMarkdownEditor.js | 16 ++++++++++++++-- 5 files changed, 31 insertions(+), 3 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index b5e1c718ee982..2ce09ef00e7a8 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -133,6 +133,8 @@ buttons.list.task.tooltip = Add a list of tasks buttons.mention.tooltip = Mention a user or team buttons.ref.tooltip = Reference an issue or pull request buttons.switch_to_legacy.tooltip = Use the legacy editor instead +buttons.enable_monospace_font = Enable monospace font +buttons.disable_monospace_font = Disable monospace font [filter] string.asc = A - Z diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index 30b0de2a49c67..c877d21253a7c 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -40,12 +40,23 @@ Template Attributes: {{svg "octicon-cross-reference"}}
+
+
{{.locale.Tr "loading"}} diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css index 46ced17cdc954..a777ad628c2fc 100644 --- a/web_src/css/editor-markdown.css +++ b/web_src/css/editor-markdown.css @@ -24,6 +24,9 @@ user-select: none; padding: 5px; cursor: pointer; + border: none; + background: none; + color: var(--color-text); } .combo-markdown-editor .markdown-toolbar-button:hover { diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 834a507b68793..dcec79fcf6f08 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -29,7 +29,7 @@ .gt-mono { font-family: var(--fonts-monospace) !important; - font-size: .9em !important; /* compensate for monospace fonts being usually slightly larger */ + font-size: .95em !important; /* compensate for monospace fonts being usually slightly larger */ } .gt-bold { font-weight: 600 !important; } diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index a7d69af7b4e75..d2dc10ff18577 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -73,8 +73,20 @@ class ComboMarkdownEditor { // upstream bug: The role code is never executed in base MarkdownButtonElement https://github.com/github/markdown-toolbar-element/issues/70 el.setAttribute('role', 'button'); } - this.switchToEasyMDEButton = this.container.querySelector('.markdown-switch-easymde'); - this.switchToEasyMDEButton?.addEventListener('click', async (e) => { + + const monospaceButton = this.container.querySelector('.markdown-switch-monospace'); + monospaceButton?.addEventListener('click', (e) => { + e.preventDefault(); + const enabled = localStorage?.getItem('editor-monospace') !== 'true'; + localStorage.setItem('editor-monospace', String(enabled)); + this.textarea.classList[enabled ? 'add' : 'remove']('gt-mono'); + const text = monospaceButton.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text'); + monospaceButton.setAttribute('data-tooltip-content', text); + monospaceButton.setAttribute('aria-checked', String(enabled)); + }); + + const easymdeButton = this.container.querySelector('.markdown-switch-easymde'); + easymdeButton?.addEventListener('click', async (e) => { e.preventDefault(); this.userPreferredEditor = 'easymde'; await this.switchToEasyMDE(); From 325275effa7adccf43f30bb0b2c882bddc95191a Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 11 Apr 2023 00:48:25 +0200 Subject: [PATCH 2/5] Update web_src/js/features/comp/ComboMarkdownEditor.js Co-authored-by: delvh --- web_src/js/features/comp/ComboMarkdownEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index d2dc10ff18577..604cca3a1c14e 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -79,7 +79,7 @@ class ComboMarkdownEditor { e.preventDefault(); const enabled = localStorage?.getItem('editor-monospace') !== 'true'; localStorage.setItem('editor-monospace', String(enabled)); - this.textarea.classList[enabled ? 'add' : 'remove']('gt-mono'); + this.textarea.classList.toggle('gt-mono', enabled); const text = monospaceButton.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text'); monospaceButton.setAttribute('data-tooltip-content', text); monospaceButton.setAttribute('aria-checked', String(enabled)); From bb936e421435ae9ba9660037e273edcf8994772f Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 12 Apr 2023 14:47:32 +0200 Subject: [PATCH 3/5] remove unneeded rules --- web_src/css/editor-markdown.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css index a777ad628c2fc..7d6c36635dbff 100644 --- a/web_src/css/editor-markdown.css +++ b/web_src/css/editor-markdown.css @@ -24,8 +24,6 @@ user-select: none; padding: 5px; cursor: pointer; - border: none; - background: none; color: var(--color-text); } From 1f8a4457d279c03bfd4fb69b80ae25d196f5cfd3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 12 Apr 2023 14:53:46 +0200 Subject: [PATCH 4/5] reduce inline script, remove global variable --- templates/shared/combomarkdowneditor.tmpl | 7 +------ web_src/js/features/comp/ComboMarkdownEditor.js | 5 +++++ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index c877d21253a7c..981398c2f37ae 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -48,12 +48,7 @@ Template Attributes: diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index 604cca3a1c14e..a62bade76a3ac 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -75,6 +75,11 @@ class ComboMarkdownEditor { } const monospaceButton = this.container.querySelector('.markdown-switch-monospace'); + const monospaceEnabled = localStorage?.getItem('editor-monospace') === 'true'; + const monospaceText = monospaceButton.getAttribute(monospaceEnabled ? 'data-disable-text' : 'data-enable-text'); + monospaceButton.setAttribute('data-tooltip-content', monospaceText); + monospaceButton.setAttribute('aria-checked', String(monospaceEnabled)); + monospaceButton?.addEventListener('click', (e) => { e.preventDefault(); const enabled = localStorage?.getItem('editor-monospace') !== 'true'; From 5cacac7ef5970a680b0a9de8eb5931e3f445ddc7 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 13 Apr 2023 20:31:38 +0200 Subject: [PATCH 5/5] rename localStorage key to markdown-editor-monospace --- templates/shared/combomarkdowneditor.tmpl | 2 +- web_src/js/features/comp/ComboMarkdownEditor.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index 981398c2f37ae..ace9d90815005 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -48,7 +48,7 @@ Template Attributes: diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index a62bade76a3ac..3eb8bf7076b3c 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -75,15 +75,15 @@ class ComboMarkdownEditor { } const monospaceButton = this.container.querySelector('.markdown-switch-monospace'); - const monospaceEnabled = localStorage?.getItem('editor-monospace') === 'true'; + const monospaceEnabled = localStorage?.getItem('markdown-editor-monospace') === 'true'; const monospaceText = monospaceButton.getAttribute(monospaceEnabled ? 'data-disable-text' : 'data-enable-text'); monospaceButton.setAttribute('data-tooltip-content', monospaceText); monospaceButton.setAttribute('aria-checked', String(monospaceEnabled)); monospaceButton?.addEventListener('click', (e) => { e.preventDefault(); - const enabled = localStorage?.getItem('editor-monospace') !== 'true'; - localStorage.setItem('editor-monospace', String(enabled)); + const enabled = localStorage?.getItem('markdown-editor-monospace') !== 'true'; + localStorage.setItem('markdown-editor-monospace', String(enabled)); this.textarea.classList.toggle('gt-mono', enabled); const text = monospaceButton.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text'); monospaceButton.setAttribute('data-tooltip-content', text);