diff options
| -rw-r--r-- | options/locale/locale_en-US.ini | 14 | ||||
| -rw-r--r-- | templates/shared/combomarkdowneditor.tmpl | 29 | ||||
| -rw-r--r-- | web_src/css/base.css | 16 | ||||
| -rw-r--r-- | web_src/css/editor-markdown.css | 3 |
4 files changed, 44 insertions, 18 deletions
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, |