From 20e07aa933e546b84441d0db3d9ed59ead277f68 Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Mon, 4 Dec 2023 15:59:11 +0000
Subject: [PATCH] Adjust rich text editor toolbar to match markdown
- Reduce spacing between buttons
- Add dividers
---
.../components/formatting_toolbar.vue | 113 ++++++++++--------
.../components/toolbar_attachment_button.vue | 2 +-
.../components/toolbar_button.vue | 2 +-
.../components/toolbar_table_button.vue | 2 +-
.../__snapshots__/toolbar_button_spec.js.snap | 2 +-
5 files changed, 69 insertions(+), 52 deletions(-)
diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index dc27278d2555a..f4c28ff9dda36 100644
--- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -3,6 +3,7 @@ import CommentTemplatesDropdown from '~/vue_shared/components/markdown/comment_t
import { __, sprintf } from '~/locale';
import { getModifierKey } from '~/constants';
import trackUIControl from '../services/track_ui_control';
+import HeaderDivider from '../../vue_shared/components/markdown/header_divider.vue';
import ToolbarButton from './toolbar_button.vue';
import ToolbarAttachmentButton from './toolbar_attachment_button.vue';
import ToolbarTableButton from './toolbar_table_button.vue';
@@ -17,6 +18,7 @@ export default {
ToolbarAttachmentButton,
ToolbarMoreDropdown,
CommentTemplatesDropdown,
+ HeaderDivider,
},
inject: {
newCommentTemplatePath: { default: null },
@@ -76,21 +78,27 @@ export default {
class="gl-w-full gl-display-flex gl-align-items-center gl-flex-wrap gl-border-b gl-border-gray-100 gl-px-3 gl-rounded-top-base gl-justify-content-space-between"
data-testid="formatting-toolbar"
>
- <div class="gl-py-3 gl-display-flex gl-flex-wrap">
- <toolbar-text-style-dropdown
- data-testid="text-styles"
- @execute="trackToolbarControlExecution"
- />
- <toolbar-button
- v-if="codeSuggestionsEnabled"
- data-testid="code-suggestion"
- content-type="codeSuggestion"
- icon-name="doc-code"
- editor-command="insertCodeSuggestion"
- :label="__('Insert suggestion')"
- :show-active-state="false"
- @execute="trackToolbarControlExecution"
- />
+ <div class="gl-py-3 gl-w-full gl-display-flex gl-align-items-flex-start">
+ <div class="gl-display-flex">
+ <toolbar-text-style-dropdown
+ data-testid="text-styles"
+ @execute="trackToolbarControlExecution"
+ />
+ <header-divider />
+ </div>
+ <div v-if="codeSuggestionsEnabled" class="gl-display-flex">
+ <toolbar-button
+ v-if="codeSuggestionsEnabled"
+ data-testid="code-suggestion"
+ content-type="codeSuggestion"
+ icon-name="doc-code"
+ editor-command="insertCodeSuggestion"
+ :label="__('Insert suggestion')"
+ :show-active-state="false"
+ @execute="trackToolbarControlExecution"
+ />
+ <header-divider />
+ </div>
<toolbar-button
data-testid="bold"
content-type="bold"
@@ -107,14 +115,17 @@ export default {
:label="i18n.italic"
@execute="trackToolbarControlExecution"
/>
- <toolbar-button
- data-testid="strike"
- content-type="strike"
- icon-name="strikethrough"
- editor-command="toggleStrike"
- :label="i18n.strike"
- @execute="trackToolbarControlExecution"
- />
+ <div class="gl-display-flex">
+ <toolbar-button
+ data-testid="strike"
+ content-type="strike"
+ icon-name="strikethrough"
+ editor-command="toggleStrike"
+ :label="i18n.strike"
+ @execute="trackToolbarControlExecution"
+ />
+ <header-divider />
+ </div>
<toolbar-button
data-testid="blockquote"
content-type="blockquote"
@@ -157,32 +168,38 @@ export default {
:label="i18n.numberedList"
@execute="trackToolbarControlExecution"
/>
- <toolbar-button
- data-testid="task-list"
- content-type="taskList"
- icon-name="list-task"
- class="gl-display-none gl-sm-display-inline"
- editor-command="toggleTaskList"
- :label="i18n.taskList"
- @execute="trackToolbarControlExecution"
- />
+ <div class="gl-display-flex">
+ <toolbar-button
+ data-testid="task-list"
+ content-type="taskList"
+ icon-name="list-task"
+ class="gl-display-none gl-sm-display-inline"
+ editor-command="toggleTaskList"
+ :label="i18n.taskList"
+ @execute="trackToolbarControlExecution"
+ />
+ <header-divider />
+ </div>
<toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
- <toolbar-attachment-button
- v-if="!hideAttachmentButton"
- data-testid="attachment"
- @execute="trackToolbarControlExecution"
- />
- <!-- TODO Add icon and trigger functionality from here -->
- <toolbar-button
- v-if="supportsQuickActions"
- data-testid="quick-actions"
- content-type="quickAction"
- icon-name="quick-actions"
- class="gl-display-none gl-sm-display-inline"
- editor-command="insertQuickAction"
- :label="__('Add a quick action')"
- @execute="trackToolbarControlExecution"
- />
+ <div class="gl-display-flex">
+ <toolbar-attachment-button
+ v-if="!hideAttachmentButton"
+ data-testid="attachment"
+ @execute="trackToolbarControlExecution"
+ />
+ <!-- TODO Add icon and trigger functionality from here -->
+ <toolbar-button
+ v-if="supportsQuickActions"
+ data-testid="quick-actions"
+ content-type="quickAction"
+ icon-name="quick-actions"
+ class="gl-display-none gl-sm-display-inline"
+ editor-command="insertQuickAction"
+ :label="__('Add a quick action')"
+ @execute="trackToolbarControlExecution"
+ />
+ <header-divider v-if="newCommentTemplatePath" />
+ </div>
<comment-templates-dropdown
v-if="newCommentTemplatePath"
:new-comment-template-path="newCommentTemplatePath"
diff --git a/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue b/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue
index 78a01693f14f4..9093fc323cc11 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue
@@ -47,7 +47,7 @@ export default {
category="tertiary"
icon="paperclip"
size="small"
- class="gl-mr-3"
+ class="gl-mr-2"
lazy
@click="openFileUpload"
/>
diff --git a/app/assets/javascripts/content_editor/components/toolbar_button.vue b/app/assets/javascripts/content_editor/components/toolbar_button.vue
index 60bfaab25a53b..a4c4814fde909 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_button.vue
@@ -87,7 +87,7 @@ export default {
:aria-label="label"
:title="label"
:icon="iconName"
- class="gl-mr-3"
+ class="gl-mr-2"
@click="execute"
/>
</editor-state-observer>
diff --git a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
index ab1546b9016bc..f09d583996c1a 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
@@ -93,7 +93,7 @@ export default {
:aria-label="__('Insert table')"
:toggle-text="__('Insert table')"
positioning-strategy="fixed"
- class="content-editor-table-dropdown gl-mr-3"
+ class="content-editor-table-dropdown gl-mr-2"
text-sr-only
:fluid-width="true"
@shown="setFocus(1, 1)"
diff --git a/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap b/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
index a708f7d5f479d..0fafd42095b85 100644
--- a/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
+++ b/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
@@ -3,7 +3,7 @@
exports[`content_editor/components/toolbar_button displays tertiary, medium button with a provided label and icon 1`] = `
<b-button-stub
aria-label="Bold"
- class="btn-default-tertiary btn-icon gl-button gl-mr-3"
+ class="btn-default-tertiary btn-icon gl-button gl-mr-2"
size="sm"
tag="button"
title="Bold"
--
GitLab