diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue index f4c28ff9dda36b92d44c29c029e1801868d2b672..c1eae345f7284fe6205a916809547bcac0d67efc 100644 --- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue +++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue @@ -75,137 +75,137 @@ export default { </script> <template> <div - 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" + class="gl-w-full gl-py-3 gl-row-gap-2 gl-display-flex gl-align-items-center gl-flex-wrap gl-border-b gl-border-gray-100 gl-px-3 gl-rounded-top-base" data-testid="formatting-toolbar" > - <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" - icon-name="bold" - editor-command="toggleBold" - :label="i18n.bold" - @execute="trackToolbarControlExecution" - /> - <toolbar-button - data-testid="italic" - content-type="italic" - icon-name="italic" - editor-command="toggleItalic" - :label="i18n.italic" + <div class="gl-display-flex"> + <toolbar-text-style-dropdown + data-testid="text-styles" @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> + <header-divider /> + </div> + <div v-if="codeSuggestionsEnabled" class="gl-display-flex"> <toolbar-button - data-testid="blockquote" - content-type="blockquote" - icon-name="quote" - editor-command="toggleBlockquote" - :label="i18n.quote" + 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" + icon-name="bold" + editor-command="toggleBold" + :label="i18n.bold" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="italic" + content-type="italic" + icon-name="italic" + editor-command="toggleItalic" + :label="i18n.italic" + @execute="trackToolbarControlExecution" + /> + <div class="gl-display-flex"> <toolbar-button - data-testid="code" - content-type="code" - icon-name="code" - editor-command="toggleCode" - :label="i18n.code" + 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" + icon-name="quote" + editor-command="toggleBlockquote" + :label="i18n.quote" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="code" + content-type="code" + icon-name="code" + editor-command="toggleCode" + :label="i18n.code" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="link" + content-type="link" + icon-name="link" + editor-command="editLink" + :label="i18n.link" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="bullet-list" + content-type="bulletList" + icon-name="list-bulleted" + class="gl-display-none gl-sm-display-inline" + editor-command="toggleBulletList" + :label="i18n.bulletList" + @execute="trackToolbarControlExecution" + /> + <toolbar-button + data-testid="ordered-list" + content-type="orderedList" + icon-name="list-numbered" + class="gl-display-none gl-sm-display-inline" + editor-command="toggleOrderedList" + :label="i18n.numberedList" + @execute="trackToolbarControlExecution" + /> + <div class="gl-display-flex"> <toolbar-button - data-testid="link" - content-type="link" - icon-name="link" - editor-command="editLink" - :label="i18n.link" + 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" /> - <toolbar-button - data-testid="bullet-list" - content-type="bulletList" - icon-name="list-bulleted" - class="gl-display-none gl-sm-display-inline" - editor-command="toggleBulletList" - :label="i18n.bulletList" + <div class="gl-display-none gl-sm-display-flex"> + <header-divider /> + </div> + </div> + <toolbar-table-button data-testid="table" @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 - data-testid="ordered-list" - content-type="orderedList" - icon-name="list-numbered" + v-if="supportsQuickActions" + data-testid="quick-actions" + content-type="quickAction" + icon-name="quick-actions" class="gl-display-none gl-sm-display-inline" - editor-command="toggleOrderedList" - :label="i18n.numberedList" + editor-command="insertQuickAction" + :label="__('Add a quick action')" @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" /> - <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" - @select="insertSavedReply" - /> - <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" /> + <header-divider v-if="newCommentTemplatePath" /> </div> + <comment-templates-dropdown + v-if="newCommentTemplatePath" + :new-comment-template-path="newCommentTemplatePath" + @select="insertSavedReply" + /> + <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" /> </div> </template>