From 704f3aa91c05aeab7ba18bda62f768ab9233cf6f Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 11 Apr 2023 16:36:18 +0800 Subject: [PATCH] Fine tune markdown editor toolbar (#24046) 1. Remove unnecessary `btn-link` `muted` classes * Link is link, button is button, I can't see a real requirement to make a button like a link. * If anyone insists, please help to show me real example from modern frameworks / websites, how and why they do so. * No need to duplicate a lot of class names on similar elements * Declare styles clearly, for example, `markdown-toolbar` itself should have `display: flex`, but not use `gt-df` to overwrite the `display: block`. 2. Remove unnecessary `role` attribute * https://github.com/github/markdown-toolbar-element/issues/70 * The `markdown-toolbar-element` does want to add `role=button`, but there is a bug. * So we do the similar thing as upstream does (add the role by JS), until they fix their bugs. 3. Indent `markdown-switch-easymde` (before it doesn't have a proper indent) Screenshot: ![image](https://user-images.githubusercontent.com/2114189/231090912-f6ba01cb-d0eb-40ad-bf8c-ffc597d9a778.png) --- templates/shared/combomarkdowneditor.tmpl | 28 +++++++++---------- web_src/css/base.css | 16 +---------- web_src/css/editor-markdown.css | 15 +++++++++- .../js/features/comp/ComboMarkdownEditor.js | 5 +++- 4 files changed, 33 insertions(+), 31 deletions(-) diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index 0927249abd..30b0de2a49 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -19,28 +19,28 @@ Template Attributes: {{end}}
- +
- {{svg "octicon-heading"}} - {{svg "octicon-bold"}} - {{svg "octicon-italic"}} + {{svg "octicon-heading"}} + {{svg "octicon-bold"}} + {{svg "octicon-italic"}}
- {{svg "octicon-quote"}} - {{svg "octicon-code"}} - {{svg "octicon-link"}} + {{svg "octicon-quote"}} + {{svg "octicon-code"}} + {{svg "octicon-link"}}
- {{svg "octicon-list-unordered"}} - {{svg "octicon-list-ordered"}} - {{svg "octicon-tasklist"}} + {{svg "octicon-list-unordered"}} + {{svg "octicon-list-ordered"}} + {{svg "octicon-tasklist"}}
- {{svg "octicon-mention"}} - {{svg "octicon-cross-reference"}} + {{svg "octicon-mention"}} + {{svg "octicon-cross-reference"}}
-
- +
+
diff --git a/web_src/css/base.css b/web_src/css/base.css index 7640f15244..c48a36c854 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -328,27 +328,14 @@ progress::-moz-progress-bar { user-select: none; } -.btn-link { - background: none; - border: none; - color: var(--color-primary); -} - -a:hover, -.btn-link:hover { - text-decoration: underline; -} - a, -.ui.breadcrumb a, -.btn-link { +.ui.breadcrumb a { color: var(--color-primary); cursor: pointer; text-decoration-skip-ink: all; } a.muted, -.btn-link.muted, .muted-links a { color: inherit; } @@ -356,7 +343,6 @@ a.muted, a:hover, a.muted:hover, a.muted:hover [class*="color-text"], -.btn-link.muted:hover, .muted-links a:hover, .ui.breadcrumb a:hover { color: var(--color-primary); diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css index df3f756c57..46ced17cdc 100644 --- a/web_src/css/editor-markdown.css +++ b/web_src/css/editor-markdown.css @@ -4,7 +4,8 @@ .combo-markdown-editor markdown-toolbar { cursor: default; - display: block; + display: flex; + align-items: center; padding-bottom: 10px; } @@ -12,9 +13,21 @@ display: flex; } +.combo-markdown-editor .markdown-toolbar-group:last-child { + flex: 1; + justify-content: flex-end; +} + .combo-markdown-editor .markdown-toolbar-button { + border: none; + background: none; user-select: none; padding: 5px; + cursor: pointer; +} + +.combo-markdown-editor .markdown-toolbar-button:hover { + color: var(--color-primary); } .ui.form .combo-markdown-editor textarea.markdown-text-editor, diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index 13b28da828..7283dab35c 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -70,7 +70,10 @@ class ComboMarkdownEditor { this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar'); this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id); - + for (const el of this.textareaMarkdownToolbar.querySelectorAll('.markdown-toolbar-button')) { + // 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) => { e.preventDefault();