finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fine tune markdown editor toolbar (#24046)

Browse source 
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
    * https://github.com/github/markdown-toolbar-element/issues/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)
This commit is contained in:
wxiaoguang 2023-04-11 16:36:18 +08:00 • committed by GitHub
parent 91c8261e2c
commit 704f3aa91c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web_src/css/base.css
View file

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

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

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