diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 08b23e0387..0a10b70d9d 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -120,6 +120,20 @@ footer = Footer
footer.software = About Software
footer.links = Links
+[editor]
+buttons.heading.tooltip = Add heading
+buttons.bold.tooltip = Add bold text
+buttons.italic.tooltip = Add italic text
+buttons.quote.tooltip = Quote text
+buttons.code.tooltip = Add code
+buttons.link.tooltip = Add a link
+buttons.list.unordered.tooltip = Add a bullet list
+buttons.list.ordered.tooltip = Add a numbered list
+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
+
[filter]
string.asc = A - Z
string.desc = Z - A
diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl
index 38c7a48a3a..0927249abd 100644
--- a/templates/shared/combomarkdowneditor.tmpl
+++ b/templates/shared/combomarkdowneditor.tmpl
@@ -19,29 +19,28 @@ Template Attributes:
</div>
{{end}}
<div class="ui tab active" data-tab-panel="markdown-writer">
- <markdown-toolbar class="gt-df">
+ <markdown-toolbar class="gt-df gt-ac gt-gap-3">
<div class="markdown-toolbar-group">
- <md-header class="markdown-toolbar-button">{{svg "octicon-heading"}}</md-header>
- <md-bold class="markdown-toolbar-button">{{svg "octicon-bold"}}</md-bold>
- <md-italic class="markdown-toolbar-button">{{svg "octicon-italic"}}</md-italic>
+ <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>
+ <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>
+ <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>
</div>
<div class="markdown-toolbar-group">
- <md-quote class="markdown-toolbar-button">{{svg "octicon-quote"}}</md-quote>
- <md-code class="markdown-toolbar-button">{{svg "octicon-code"}}</md-code>
- <md-link class="markdown-toolbar-button">{{svg "octicon-link"}}</md-link>
+ <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>
+ <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>
+ <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>
</div>
<div class="markdown-toolbar-group">
- <md-unordered-list class="markdown-toolbar-button">{{svg "octicon-list-unordered"}}</md-unordered-list>
- <md-ordered-list class="markdown-toolbar-button">{{svg "octicon-list-ordered"}}</md-ordered-list>
- <md-task-list class="markdown-toolbar-button">{{svg "octicon-tasklist"}}</md-task-list>
+ <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>
+ <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>
+ <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>
</div>
<div class="markdown-toolbar-group">
- <md-mention class="markdown-toolbar-button">{{svg "octicon-mention"}}</md-mention>
- <md-ref class="markdown-toolbar-button">{{svg "octicon-cross-reference"}}</md-ref>
+ <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>
+ <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>
</div>
- <div class="markdown-toolbar-group gt-f1"></div>
- <div class="markdown-toolbar-group">
- <span class="markdown-toolbar-button markdown-switch-easymde">{{svg "octicon-arrow-switch"}}</span>
+ <div class="markdown-toolbar-group gt-f1 gt-je">
+ <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>
</div>
</markdown-toolbar>
<text-expander keys=": @">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index c48a36c854..7640f15244 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -328,14 +328,27 @@ 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 {
+.ui.breadcrumb a,
+.btn-link {
color: var(--color-primary);
cursor: pointer;
text-decoration-skip-ink: all;
}
a.muted,
+.btn-link.muted,
.muted-links a {
color: inherit;
}
@@ -343,6 +356,7 @@ 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 1a09b5d596..df3f756c57 100644
--- a/web_src/css/editor-markdown.css
+++ b/web_src/css/editor-markdown.css
@@ -9,13 +9,12 @@
}
.combo-markdown-editor .markdown-toolbar-group {
- display: inline-block;
+ display: flex;
}
.combo-markdown-editor .markdown-toolbar-button {
user-select: none;
padding: 5px;
- cursor: pointer;
}
.ui.form .combo-markdown-editor textarea.markdown-text-editor,