pub-solar/forgejo
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add tooltips for MD editor buttons and add muted class for buttons (#23896)

Browse source 
Followup of #23876 according to my unreleased review demanding tooltips.
Additionally
- add a `muted` equivalent for buttons
- convert `switch to legacy` to an actual button
- enroll `switch to legacy` in the builtin pseudo focus cycle
- remove spaces between the buttons

The effect of the `muted` class is what you would expect: The button
loses all of its normal styling, and is defined only by its content instead.
This will help reduce a11y infractions in the future, as that was one of
the major points why people didn't use `<button>` tags and decided on a
bad fix (i.e. through `<div>`s) instead.

## Appearance

![image](https://user-images.githubusercontent.com/51889757/229510842-337378e5-faa5-4886-a910-08614c0c233d.png)

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
delvh 2023-04-11 09:26:18 +02:00 committed by GitHub
parent 7a8a4f5432
commit 91c8261e2c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
options/locale/locale_en-US.ini
View file

@ -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

29
templates/shared/combomarkdowneditor.tmpl
View file

@ -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=": @">

16
web_src/css/base.css
View file

@ -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);

3
web_src/css/editor-markdown.css
View file

@ -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,