From 1986af18c2020bc7a77a3b77501176efdf1b5b1c Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Thu, 3 Oct 2024 11:45:13 +0000
Subject: [PATCH] Update haml markdown editor toolbar buttons to match Vue
version
- Adjust spacing between buttons
- Add dividers
- Adjust styling of the "Go full screen" button
- Make sure "Go full screen" button has a tooltip
- Remove unused 'md-toolbar-divider' CSS class from Vue header-divider
component
Changelog: fixed
---
.../components/markdown/header_divider.vue | 2 +-
app/views/shared/_md_preview.html.haml | 8 +++--
.../shared/blob/_markdown_buttons.html.haml | 35 ++++++++++---------
3 files changed, 25 insertions(+), 20 deletions(-)
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header_divider.vue b/app/assets/javascripts/vue_shared/components/markdown/header_divider.vue
index 59d220cc99a10..5225e0b52457d 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header_divider.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header_divider.vue
@@ -2,7 +2,7 @@
export default {};
</script>
<template>
- <div class="md-toolbar-divider gl-flex gl-py-2">
+ <div class="gl-flex gl-py-2">
<div class="gl-border-l gl-ml-2 gl-pl-3"></div>
</div>
</template>
diff --git a/app/views/shared/_md_preview.html.haml b/app/views/shared/_md_preview.html.haml
index 10d1b67677405..7360e6426df7a 100644
--- a/app/views/shared/_md_preview.html.haml
+++ b/app/views/shared/_md_preview.html.haml
@@ -10,13 +10,15 @@
.md-area.position-relative
.md-header.gl-px-3.gl-rounded-t-base.gl-border-b.gl-border-gray-100
- .gl-flex.gl-items-center.gl-flex-wrap.gl-justify-between
+ .gl-flex.gl-items-top.gl-flex-nowrap.gl-justify-between
.md-header-toolbar.gl-flex.gl-py-3.gl-flex-wrap.gl-gap-y-3
= render Pajamas::ButtonComponent.new(category: :tertiary, size: :small, button_options: { class: 'js-md-preview-button', value: 'preview' }) do
= _('Preview')
+ .gl-flex.gl-py-2.haml-markdown-button
+ .gl-border-l.gl-ml-2.gl-pl-3
= render 'shared/blob/markdown_buttons', supports_quick_actions: supports_quick_actions
- .full-screen
- = render Pajamas::ButtonComponent.new(icon: 'maximize', category: :tertiary, size: :small, button_options: { 'tabindex': -1, 'aria-label': _("Go full screen"), class: 'has-tooltip js-zen-enter', data: { container: 'body' } })
+ .full-screen.gl-py-3
+ = render Pajamas::ButtonComponent.new(icon: 'maximize', category: :tertiary, size: :small, button_options: { 'tabindex': -1, 'title': _("Go full screen"), 'aria-label': _("Go full screen"), class: 'has-tooltip js-zen-enter', data: { container: 'body' } })
.md-write-holder
= yield
diff --git a/app/views/shared/blob/_markdown_buttons.html.haml b/app/views/shared/blob/_markdown_buttons.html.haml
index 9c615d52a661b..1d318456c1112 100644
--- a/app/views/shared/blob/_markdown_buttons.html.haml
+++ b/app/views/shared/blob/_markdown_buttons.html.haml
@@ -3,45 +3,48 @@
- supports_quick_actions = local_assigns.fetch(:supports_quick_actions, false)
= markdown_toolbar_button({ icon: "bold",
- css_class: 'haml-markdown-button gl-mr-3',
+ css_class: 'haml-markdown-button gl-mr-2',
data: { "md-tag" => "**", "md-shortcuts": '["mod+b"]' },
title: sprintf(s_("MarkdownEditor|Add bold text (%{modifier_key}B)") % { modifier_key: modifier_key }) })
= markdown_toolbar_button({ icon: "italic",
- css_class: 'haml-markdown-button gl-mr-3',
+ css_class: 'haml-markdown-button gl-mr-2',
data: { "md-tag" => "_", "md-shortcuts": '["mod+i"]' },
title: sprintf(s_("MarkdownEditor|Add italic text (%{modifier_key}I)") % { modifier_key: modifier_key }) })
= markdown_toolbar_button({ icon: "strikethrough",
- css_class: 'haml-markdown-button gl-mr-3',
+ css_class: 'haml-markdown-button gl-mr-2',
data: { "md-tag" => "~~", "md-shortcuts": '["mod+shift+x"]' },
title: sprintf(s_("MarkdownEditor|Add strikethrough text (%{modifier_key}⇧X)") % { modifier_key: modifier_key }) })
-
-= markdown_toolbar_button({ icon: "quote", css_class: 'haml-markdown-button gl-mr-3', data: { "md-tag" => "> ", "md-prepend" => true }, title: _("Insert a quote") })
-= markdown_toolbar_button({ icon: "code", css_class: 'haml-markdown-button gl-mr-3', data: { "md-tag" => "`", "md-block" => "```" }, title: _("Insert code") })
+.gl-flex.gl-py-2.haml-markdown-button
+ .gl-border-l.gl-ml-2.gl-pl-3
+= markdown_toolbar_button({ icon: "quote", css_class: 'haml-markdown-button gl-mr-2', data: { "md-tag" => "> ", "md-prepend" => true }, title: _("Insert a quote") })
+= markdown_toolbar_button({ icon: "code", css_class: 'haml-markdown-button gl-mr-2', data: { "md-tag" => "`", "md-block" => "```" }, title: _("Insert code") })
= markdown_toolbar_button({ icon: "link",
- css_class: 'haml-markdown-button gl-mr-3',
+ css_class: 'haml-markdown-button gl-mr-2',
data: { "md-tag" => "[{text}](url)", "md-select" => "url", "md-shortcuts": '["mod+k"]' },
title: sprintf(s_("MarkdownEditor|Add a link (%{modifier_key}K)") % { modifier_key: modifier_key }) })
-= markdown_toolbar_button({ icon: "list-bulleted", css_class: 'haml-markdown-button gl-mr-3', data: { "md-tag" => "- ", "md-prepend" => true }, title: _("Add a bullet list") })
-= markdown_toolbar_button({ icon: "list-numbered", css_class: 'haml-markdown-button gl-mr-3', data: { "md-tag" => "1. ", "md-prepend" => true }, title: _("Add a numbered list") })
-= markdown_toolbar_button({ icon: "list-task", css_class: 'haml-markdown-button gl-mr-3', data: { "md-tag" => "- [ ] ", "md-prepend" => true }, title: _("Add a checklist") })
+= markdown_toolbar_button({ icon: "list-bulleted", css_class: 'haml-markdown-button gl-mr-2', data: { "md-tag" => "- ", "md-prepend" => true }, title: _("Add a bullet list") })
+= markdown_toolbar_button({ icon: "list-numbered", css_class: 'haml-markdown-button gl-mr-2', data: { "md-tag" => "1. ", "md-prepend" => true }, title: _("Add a numbered list") })
+= markdown_toolbar_button({ icon: "list-task", css_class: 'haml-markdown-button gl-mr-2', data: { "md-tag" => "- [ ] ", "md-prepend" => true }, title: _("Add a checklist") })
= markdown_toolbar_button({ icon: "list-indent",
- css_class: 'gl-hidden gl-mr-3',
+ css_class: 'gl-hidden gl-mr-2',
data: { "md-command" => 'indentLines', "md-shortcuts": '["mod+]"]' },
title: sprintf(s_("MarkdownEditor|Indent line (%{modifier_key}])") % { modifier_key: modifier_key }) })
= markdown_toolbar_button({ icon: "list-outdent",
- css_class: 'gl-hidden gl-mr-3',
+ css_class: 'gl-hidden gl-mr-2',
data: { "md-command" => 'outdentLines', "md-shortcuts": '["mod+["]' },
title: sprintf(s_("MarkdownEditor|Outdent line (%{modifier_key}[)") % { modifier_key: modifier_key }) })
= markdown_toolbar_button({ icon: "details-block",
- css_class: 'haml-markdown-button gl-mr-3',
+ css_class: 'haml-markdown-button gl-mr-2',
data: { "md-tag" => "<details><summary>Click to expand</summary>\n{text}\n</details>", "md-prepend" => true, "md-select" => "Click to expand" },
title: _("Add a collapsible section") })
-= markdown_toolbar_button({ icon: "table", css_class: 'haml-markdown-button gl-mr-3', data: { "md-tag" => "| header | header |\n| ------ | ------ |\n| | |\n| | |", "md-prepend" => true }, title: _("Add a table") })
+.gl-flex.gl-py-2.haml-markdown-button
+ .gl-border-l.gl-ml-2.gl-pl-3
+= markdown_toolbar_button({ icon: "table", css_class: 'haml-markdown-button gl-mr-2', data: { "md-tag" => "| header | header |\n| ------ | ------ |\n| | |\n| | |", "md-prepend" => true }, title: _("Add a table") })
- if supports_file_upload
- = render Pajamas::ButtonComponent.new(icon: 'paperclip', category: :tertiary, size: :small, button_options: { 'aria-label': _("Attach a file or image"), class: 'has-tooltip js-attach-file-button haml-markdown-button gl-mr-3', data: { testid: 'button-attach-file', container: 'body' } })
+ = render Pajamas::ButtonComponent.new(icon: 'paperclip', category: :tertiary, size: :small, button_options: { 'aria-label': _("Attach a file or image"), class: 'has-tooltip js-attach-file-button haml-markdown-button gl-mr-2', data: { testid: 'button-attach-file', container: 'body' } })
- if supports_quick_actions
- = markdown_toolbar_button({ icon: "quick-actions", css_class: 'haml-markdown-button gl-mr-3', data: { "md-tag" => "/", "md-prepend" => true }, title: _("Add a quick action") })
+ = markdown_toolbar_button({ icon: "quick-actions", css_class: 'haml-markdown-button gl-mr-2', data: { "md-tag" => "/", "md-prepend" => true }, title: _("Add a quick action") })
--
GitLab