From 77b949a3ce2b5453a117381144188c6dc05fa923 Mon Sep 17 00:00:00 2001 From: delvh Date: Mon, 3 Apr 2023 14:28:10 +0200 Subject: [PATCH 1/7] Add tooltips for MD editor buttons Additionally, add a `muted` equivalent for buttons and convert `switch to legacy` to an actual button. --- options/locale/locale_en-US.ini | 14 +++++++++++++ templates/shared/combomarkdowneditor.tmpl | 24 +++++++++++------------ web_src/css/base.css | 6 ++++++ 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 5834703556c29..411d86b993eaf 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -118,6 +118,20 @@ footer = Footer footer.software = About Software footer.links = Links +[editor] +header.tooltip = Add heading +bold.tooltip = Add bold text +italic.tooltip = Add italic text +quote.tooltip = Quote text +code.tooltip = Add code/highlighted text +link.tooltip = Add a link +list.unordered.tooltip = Add a bullet list +list.ordered.tooltip = Add a numbered list +list.task.tooltip = Add a list of tasks +mention.tooltip = Mention a user or team +ref.tooltip = Reference an issue or pull request +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 0027ce84271a9..2fbd1fc46b7bf 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -16,27 +16,27 @@ Template Attributes:
- {{svg "octicon-heading"}} - {{svg "octicon-bold"}} - {{svg "octicon-italic"}} + {{svg "octicon-heading"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-bold"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-italic"}}{{- /*Get rid of spaces between the buttons*/ -}}
- {{svg "octicon-quote"}} - {{svg "octicon-code"}} - {{svg "octicon-link"}} + {{svg "octicon-quote"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-code"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-link"}}{{- /*Get rid of spaces between the buttons*/ -}}
- {{svg "octicon-list-unordered"}} - {{svg "octicon-list-ordered"}} - {{svg "octicon-tasklist"}} + {{svg "octicon-list-unordered"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-list-ordered"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-tasklist"}}{{- /*Get rid of spaces between the buttons*/ -}}
- {{svg "octicon-mention"}} - {{svg "octicon-cross-reference"}} + {{svg "octicon-mention"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-cross-reference"}}{{- /*Get rid of spaces between the buttons*/ -}}
- {{svg "octicon-arrow-switch"}} + {{- /*Get rid of spaces between the buttons*/ -}}
diff --git a/web_src/css/base.css b/web_src/css/base.css index 80eaed724e574..80653ab2df0ea 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -344,6 +344,12 @@ a.muted, color: inherit; } +button.muted, +.muted-buttons button { + background: none; + border: none; +} + a:hover, a.muted:hover, a.muted:hover [class*="color-text"], From e4de1ac0868f6cbb9838e451920d3c6377fa53e8 Mon Sep 17 00:00:00 2001 From: delvh Date: Mon, 3 Apr 2023 17:50:35 +0200 Subject: [PATCH 2/7] Remove unused CSS selector --- web_src/css/base.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 80653ab2df0ea..880514c98d33c 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -344,8 +344,7 @@ a.muted, color: inherit; } -button.muted, -.muted-buttons button { +button.muted { background: none; border: none; } From 10186e7f54a9920fccd98bcf2d3a8ca0ac7aa0a5 Mon Sep 17 00:00:00 2001 From: delvh Date: Mon, 10 Apr 2023 23:50:30 +0200 Subject: [PATCH 3/7] Change tooltip translation keys and simplify not showing spaces --- options/locale/locale_en-US.ini | 24 +++++++++++------------ templates/shared/combomarkdowneditor.tmpl | 24 +++++++++++------------ web_src/css/editor-markdown.css | 2 +- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 411d86b993eaf..b9b9c72a22c96 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -119,18 +119,18 @@ footer.software = About Software footer.links = Links [editor] -header.tooltip = Add heading -bold.tooltip = Add bold text -italic.tooltip = Add italic text -quote.tooltip = Quote text -code.tooltip = Add code/highlighted text -link.tooltip = Add a link -list.unordered.tooltip = Add a bullet list -list.ordered.tooltip = Add a numbered list -list.task.tooltip = Add a list of tasks -mention.tooltip = Mention a user or team -ref.tooltip = Reference an issue or pull request -switch_to_legacy.tooltip = Use the legacy editor instead +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/highlighted text +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 diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index 2fbd1fc46b7bf..6270dac052943 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -16,27 +16,27 @@ Template Attributes:
- {{svg "octicon-heading"}}{{- /*Get rid of spaces between the buttons*/ -}} - {{svg "octicon-bold"}}{{- /*Get rid of spaces between the buttons*/ -}} - {{svg "octicon-italic"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-heading"}} + {{svg "octicon-bold"}} + {{svg "octicon-italic"}}
- {{svg "octicon-quote"}}{{- /*Get rid of spaces between the buttons*/ -}} - {{svg "octicon-code"}}{{- /*Get rid of spaces between the buttons*/ -}} - {{svg "octicon-link"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-quote"}} + {{svg "octicon-code"}} + {{svg "octicon-link"}}
- {{svg "octicon-list-unordered"}}{{- /*Get rid of spaces between the buttons*/ -}} - {{svg "octicon-list-ordered"}}{{- /*Get rid of spaces between the buttons*/ -}} - {{svg "octicon-tasklist"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-list-unordered"}} + {{svg "octicon-list-ordered"}} + {{svg "octicon-tasklist"}}
- {{svg "octicon-mention"}}{{- /*Get rid of spaces between the buttons*/ -}} - {{svg "octicon-cross-reference"}}{{- /*Get rid of spaces between the buttons*/ -}} + {{svg "octicon-mention"}} + {{svg "octicon-cross-reference"}}
- {{- /*Get rid of spaces between the buttons*/ -}} +
diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css index 31ffeb06d044a..8f6cc8643bb6c 100644 --- a/web_src/css/editor-markdown.css +++ b/web_src/css/editor-markdown.css @@ -9,7 +9,7 @@ } .combo-markdown-editor .markdown-toolbar-group { - display: inline-block; + display: flex; } .combo-markdown-editor .markdown-toolbar-button { From 6154f21e9899a4a30f5f6fbed23badb7c1fc0538 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 11 Apr 2023 00:14:32 +0200 Subject: [PATCH 4/7] add button roles, color, hover effect, remove div --- templates/shared/combomarkdowneditor.tmpl | 29 +++++++++++------------ web_src/css/base.css | 5 ---- web_src/css/editor-markdown.css | 7 ++++++ 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index 6270dac052943..3418db97bebe0 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -14,29 +14,28 @@ Template Attributes:
{{end}}
- +
- {{svg "octicon-heading"}} - {{svg "octicon-bold"}} - {{svg "octicon-italic"}} + {{svg "octicon-heading"}} + {{svg "octicon-bold"}} + {{svg "octicon-italic"}}
- {{svg "octicon-quote"}} - {{svg "octicon-code"}} - {{svg "octicon-link"}} + {{svg "octicon-quote"}} + {{svg "octicon-code"}} + {{svg "octicon-link"}}
- {{svg "octicon-list-unordered"}} - {{svg "octicon-list-ordered"}} - {{svg "octicon-tasklist"}} + {{svg "octicon-list-unordered"}} + {{svg "octicon-list-ordered"}} + {{svg "octicon-tasklist"}}
- {{svg "octicon-mention"}} - {{svg "octicon-cross-reference"}} + {{svg "octicon-mention"}} + {{svg "octicon-cross-reference"}}
-
-
- +
+
diff --git a/web_src/css/base.css b/web_src/css/base.css index 880514c98d33c..80eaed724e574 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -344,11 +344,6 @@ a.muted, color: inherit; } -button.muted { - background: none; - border: none; -} - a:hover, a.muted:hover, a.muted:hover [class*="color-text"], diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css index 8f6cc8643bb6c..2843b4f57544d 100644 --- a/web_src/css/editor-markdown.css +++ b/web_src/css/editor-markdown.css @@ -16,6 +16,13 @@ user-select: none; padding: 5px; cursor: pointer; + border: none; + background: none; + color: var(--color-text); +} + +.combo-markdown-editor .markdown-toolbar-button:hover { + color: var(--color-primary); } .combo-markdown-editor .markdown-text-editor { From bbd9f1b3b35746d9d9e15627c70d36aec7c3d5d7 Mon Sep 17 00:00:00 2001 From: delvh Date: Tue, 11 Apr 2023 00:22:47 +0200 Subject: [PATCH 5/7] Describe `` `text` `` as `code` instead of `code/highlighted text` --- options/locale/locale_en-US.ini | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index b9b9c72a22c96..975ae756d300f 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -123,7 +123,7 @@ 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/highlighted 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 From e6864ca367b28b64c5a6b5a9d96aec8e20f3c437 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 11 Apr 2023 00:24:42 +0200 Subject: [PATCH 6/7] add btn-link and apply muted --- templates/shared/combomarkdowneditor.tmpl | 24 +++++++++++------------ web_src/css/base.css | 11 ++++++++++- web_src/css/editor-markdown.css | 8 -------- 3 files changed, 22 insertions(+), 21 deletions(-) diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index 3418db97bebe0..3bab0847e25fd 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -16,26 +16,26 @@ Template Attributes:
- {{svg "octicon-heading"}} - {{svg "octicon-bold"}} - {{svg "octicon-italic"}} + {{svg "octicon-heading"}} + {{svg "octicon-bold"}} + {{svg "octicon-italic"}}
- {{svg "octicon-quote"}} - {{svg "octicon-code"}} - {{svg "octicon-link"}} + {{svg "octicon-quote"}} + {{svg "octicon-code"}} + {{svg "octicon-link"}}
- {{svg "octicon-list-unordered"}} - {{svg "octicon-list-ordered"}} - {{svg "octicon-tasklist"}} + {{svg "octicon-list-unordered"}} + {{svg "octicon-list-ordered"}} + {{svg "octicon-tasklist"}}
- {{svg "octicon-mention"}} - {{svg "octicon-cross-reference"}} + {{svg "octicon-mention"}} + {{svg "octicon-cross-reference"}}
- +
diff --git a/web_src/css/base.css b/web_src/css/base.css index 80eaed724e574..399a302778af3 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -332,14 +332,22 @@ progress::-moz-progress-bar { user-select: none; } +.btn-link { + background: none; + border: none; + color: var(--color-primary); +} + 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; } @@ -347,6 +355,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 2843b4f57544d..2b50ac0839f99 100644 --- a/web_src/css/editor-markdown.css +++ b/web_src/css/editor-markdown.css @@ -15,14 +15,6 @@ .combo-markdown-editor .markdown-toolbar-button { user-select: none; padding: 5px; - cursor: pointer; - border: none; - background: none; - color: var(--color-text); -} - -.combo-markdown-editor .markdown-toolbar-button:hover { - color: var(--color-primary); } .combo-markdown-editor .markdown-text-editor { From 68d99ae59d10a7d5808d70c7983cc09516cd9c57 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 11 Apr 2023 00:38:51 +0200 Subject: [PATCH 7/7] add underline style to btn-link as well --- web_src/css/base.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web_src/css/base.css b/web_src/css/base.css index 399a302778af3..41902a742189b 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -338,6 +338,11 @@ progress::-moz-progress-bar { color: var(--color-primary); } +a:hover, +.btn-link:hover { + text-decoration: underline; +} + a, .ui.breadcrumb a, .btn-link {