diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index 0927249abd59..30b0de2a49c6 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 7640f15244e0..c48a36c85476 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 df3f756c570e..46ced17cdc95 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 13b28da828d0..7283dab35c02 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();