Skip to content

Commit 704f3aa

Browse files
wxiaoguangwxiaoguang
authored
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 * github/markdown-toolbar-element#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)
1 parent 91c8261 commit 704f3aa

File tree

4 files changed

+33
-31
lines changed

4 files changed

+33
-31
lines changed

‎templates/shared/combomarkdowneditor.tmpl

+14-14
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,28 @@ Template Attributes:
1919
</div>
2020
{{end}}
2121
<div class="ui tab active" data-tab-panel="markdown-writer">
22-
<markdown-toolbar class="gt-df gt-ac gt-gap-3">
22+
<markdown-toolbar class="gt-gap-3">
2323
<div class="markdown-toolbar-group">
24-
<md-header role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.heading.tooltip"}}">{{svg "octicon-heading"}}</md-header>
25-
<md-bold role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.bold.tooltip"}}">{{svg "octicon-bold"}}</md-bold>
26-
<md-italic role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.italic.tooltip"}}">{{svg "octicon-italic"}}</md-italic>
24+
<md-header class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.heading.tooltip"}}">{{svg "octicon-heading"}}</md-header>
25+
<md-bold class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.bold.tooltip"}}">{{svg "octicon-bold"}}</md-bold>
26+
<md-italic class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.italic.tooltip"}}">{{svg "octicon-italic"}}</md-italic>
2727
</div>
2828
<div class="markdown-toolbar-group">
29-
<md-quote role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.quote.tooltip"}}">{{svg "octicon-quote"}}</md-quote>
30-
<md-code role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.code.tooltip"}}">{{svg "octicon-code"}}</md-code>
31-
<md-link role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.link.tooltip"}}">{{svg "octicon-link"}}</md-link>
29+
<md-quote class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.quote.tooltip"}}">{{svg "octicon-quote"}}</md-quote>
30+
<md-code class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.code.tooltip"}}">{{svg "octicon-code"}}</md-code>
31+
<md-link class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.link.tooltip"}}">{{svg "octicon-link"}}</md-link>
3232
</div>
3333
<div class="markdown-toolbar-group">
34-
<md-unordered-list role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.list.unordered.tooltip"}}">{{svg "octicon-list-unordered"}}</md-unordered-list>
35-
<md-ordered-list role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.list.ordered.tooltip"}}">{{svg "octicon-list-ordered"}}</md-ordered-list>
36-
<md-task-list role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.list.task.tooltip"}}">{{svg "octicon-tasklist"}}</md-task-list>
34+
<md-unordered-list class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.list.unordered.tooltip"}}">{{svg "octicon-list-unordered"}}</md-unordered-list>
35+
<md-ordered-list class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.list.ordered.tooltip"}}">{{svg "octicon-list-ordered"}}</md-ordered-list>
36+
<md-task-list class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.list.task.tooltip"}}">{{svg "octicon-tasklist"}}</md-task-list>
3737
</div>
3838
<div class="markdown-toolbar-group">
39-
<md-mention role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.mention.tooltip"}}">{{svg "octicon-mention"}}</md-mention>
40-
<md-ref role="button" class="markdown-toolbar-button btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.ref.tooltip"}}">{{svg "octicon-cross-reference"}}</md-ref>
39+
<md-mention class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.mention.tooltip"}}">{{svg "octicon-mention"}}</md-mention>
40+
<md-ref class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.ref.tooltip"}}">{{svg "octicon-cross-reference"}}</md-ref>
4141
</div>
42-
<div class="markdown-toolbar-group gt-f1 gt-je">
43-
<button class="markdown-toolbar-button markdown-switch-easymde btn-link muted" data-tooltip-content="{{.locale.Tr "editor.buttons.switch_to_legacy.tooltip"}}">{{svg "octicon-arrow-switch"}}</button>
42+
<div class="markdown-toolbar-group">
43+
<button class="markdown-toolbar-button markdown-switch-easymde" data-tooltip-content="{{.locale.Tr "editor.buttons.switch_to_legacy.tooltip"}}">{{svg "octicon-arrow-switch"}}</button>
4444
</div>
4545
</markdown-toolbar>
4646
<text-expander keys=": @">

‎web_src/css/base.css

+1-15
Original file line numberDiff line numberDiff line change
@@ -328,35 +328,21 @@ progress::-moz-progress-bar {
328328
user-select: none;
329329
}
330330

331-
.btn-link {
332-
background: none;
333-
border: none;
334-
color: var(--color-primary);
335-
}
336-
337-
a:hover,
338-
.btn-link:hover {
339-
text-decoration: underline;
340-
}
341-
342331
a,
343-
.ui.breadcrumb a,
344-
.btn-link {
332+
.ui.breadcrumb a {
345333
color: var(--color-primary);
346334
cursor: pointer;
347335
text-decoration-skip-ink: all;
348336
}
349337

350338
a.muted,
351-
.btn-link.muted,
352339
.muted-links a {
353340
color: inherit;
354341
}
355342

356343
a:hover,
357344
a.muted:hover,
358345
a.muted:hover [class*="color-text"],
359-
.btn-link.muted:hover,
360346
.muted-links a:hover,
361347
.ui.breadcrumb a:hover {
362348
color: var(--color-primary);

‎web_src/css/editor-markdown.css

+14-1
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,30 @@
44

55
.combo-markdown-editor markdown-toolbar {
66
cursor: default;
7-
display: block;
7+
display: flex;
8+
align-items: center;
89
padding-bottom: 10px;
910
}
1011

1112
.combo-markdown-editor .markdown-toolbar-group {
1213
display: flex;
1314
}
1415

16+
.combo-markdown-editor .markdown-toolbar-group:last-child {
17+
flex: 1;
18+
justify-content: flex-end;
19+
}
20+
1521
.combo-markdown-editor .markdown-toolbar-button {
22+
border: none;
23+
background: none;
1624
user-select: none;
1725
padding: 5px;
26+
cursor: pointer;
27+
}
28+
29+
.combo-markdown-editor .markdown-toolbar-button:hover {
30+
color: var(--color-primary);
1831
}
1932

2033
.ui.form .combo-markdown-editor textarea.markdown-text-editor,

‎web_src/js/features/comp/ComboMarkdownEditor.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,10 @@ class ComboMarkdownEditor {
7070

7171
this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
7272
this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id);
73-
73+
for (const el of this.textareaMarkdownToolbar.querySelectorAll('.markdown-toolbar-button')) {
74+
// upstream bug: The role code is never executed in base MarkdownButtonElement https://github.com/github/markdown-toolbar-element/issues/70
75+
el.setAttribute('role', 'button');
76+
}
7477
this.switchToEasyMDEButton = this.container.querySelector('.markdown-switch-easymde');
7578
this.switchToEasyMDEButton?.addEventListener('click', async (e) => {
7679
e.preventDefault();

0 commit comments

Comments
 (0)