From 704f3aa91c05aeab7ba18bda62f768ab9233cf6f Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 11 Apr 2023 16:36:18 +0800
Subject: 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
    * 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)
---
 web_src/css/base.css            | 16 +---------------
 web_src/css/editor-markdown.css | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 16 deletions(-)

(limited to 'web_src/css')

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 7640f15244..c48a36c854 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -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);
diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css
index df3f756c57..46ced17cdc 100644
--- a/web_src/css/editor-markdown.css
+++ b/web_src/css/editor-markdown.css
@@ -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,
-- 
cgit v1.2.3