Skip to content
代码片段 群组 项目
提交 41e78ef0 编辑于 作者: Chad Lavimoniere's avatar Chad Lavimoniere 提交者： Enrique Alcántara
浏览文件

Adjust styling of md editor header 

- Add dividers between groups of related buttons
- Ensure fullscreen button is in top left corner of header toolbar

Changelog: fixed
上级 fea7a3cc
No related branches found
No related tags found
无相关合并请求
隐藏空白变更内容
行内 左右并排
显示
有 280 个添加 和 240 个删除
app/assets/javascripts/vue_shared/components/markdown/comment_templates_dropdown.vue
+ 1
− 1
浏览文件 @ 41e78ef0
...@@ -88,7 +88,7 @@ export default { ...@@ -88,7 +88,7 @@ export default {
placement="right" placement="right"
searchable searchable
size="small" size="small"
class="comment-template-dropdown gl-mr-3" class="comment-template-dropdown gl-mr-2"
positioning-strategy="fixed" positioning-strategy="fixed"
:searching="$apollo.queries.savedReplies.loading" :searching="$apollo.queries.savedReplies.loading"
@shown="fetchCommentTemplates" @shown="fetchCommentTemplates"
......
app/assets/javascripts/vue_shared/components/markdown/header.vue
+ 261
− 237
浏览文件 @ 41e78ef0
...@@ -21,6 +21,7 @@ import { updateText } from '~/lib/utils/text_markdown'; ...@@ -21,6 +21,7 @@ import { updateText } from '~/lib/utils/text_markdown';
import ToolbarButton from './toolbar_button.vue'; import ToolbarButton from './toolbar_button.vue';
import DrawioToolbarButton from './drawio_toolbar_button.vue'; import DrawioToolbarButton from './drawio_toolbar_button.vue';
import CommentTemplatesDropdown from './comment_templates_dropdown.vue'; import CommentTemplatesDropdown from './comment_templates_dropdown.vue';
import HeaderDivider from './header_divider.vue';
export default { export default {
components: { components: {
...@@ -30,6 +31,7 @@ export default { ...@@ -30,6 +31,7 @@ export default {
DrawioToolbarButton, DrawioToolbarButton,
CommentTemplatesDropdown, CommentTemplatesDropdown,
AiActionsDropdown: () => import('ee_component/ai/components/ai_actions_dropdown.vue'), AiActionsDropdown: () => import('ee_component/ai/components/ai_actions_dropdown.vue'),
HeaderDivider,
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
...@@ -261,249 +263,271 @@ export default { ...@@ -261,249 +263,271 @@ export default {
<div class="gl-display-flex gl-align-items-center gl-flex-wrap"> <div class="gl-display-flex gl-align-items-center gl-flex-wrap">
<div <div
data-testid="md-header-toolbar" data-testid="md-header-toolbar"
class="md-header-toolbar gl-display-flex gl-py-3 gl-flex-wrap gl-row-gap-3" class="md-header-toolbar gl-display-flex gl-py-3 gl-row-gap-2 gl-flex-grow-1 gl-align-items-flex-start"
> >
<gl-button <div class="gl-display-flex gl-flex-wrap gl-row-gap-2">
v-if="enablePreview" <gl-button
data-testid="preview-toggle" v-if="enablePreview"
:value="previewMarkdown ? 'preview' : 'edit'" data-testid="preview-toggle"
:label="$options.i18n.previewTabTitle" :value="previewMarkdown ? 'preview' : 'edit'"
class="js-md-preview-button gl-flex-direction-row-reverse gl-align-items-center gl-font-weight-normal! gl-mr-2" :label="$options.i18n.previewTabTitle"
size="small" class="js-md-preview-button gl-flex-direction-row-reverse gl-align-items-center gl-font-weight-normal!"
category="tertiary" size="small"
@click="switchPreview" category="tertiary"
>{{ previewMarkdown ? $options.i18n.hidePreview : $options.i18n.preview }}</gl-button @click="switchPreview"
> >{{ previewMarkdown ? $options.i18n.hidePreview : $options.i18n.preview }}</gl-button
<template v-if="!previewMarkdown && canSuggest"> >
<template v-if="!previewMarkdown && canSuggest">
<div class="gl-display-flex gl-row-gap-2">
<header-divider :preview-markdown="previewMarkdown" />
<toolbar-button
ref="suggestButton"
:tag="mdSuggestion"
:prepend="true"
:button-title="__('Insert suggestion')"
:cursor-offset="4"
:tag-content="lineContent"
tracking-property="codeSuggestion"
icon="doc-code"
data-testid="suggestion-button"
class="js-suggestion-btn"
@click="handleSuggestDismissed"
/>
<gl-popover
v-if="suggestPopoverVisible"
:target="$refs.suggestButton.$el"
:css-classes="['diff-suggest-popover']"
placement="bottom"
:show="suggestPopoverVisible"
triggers=""
>
<strong>{{ __('New! Suggest changes directly') }}</strong>
<p class="mb-2">
{{
__(
'Suggest code changes which can be immediately applied in one click. Try it out!',
)
}}
</p>
<gl-button
variant="confirm"
category="primary"
size="small"
data-testid="dismiss-suggestion-popover-button"
@click="handleSuggestDismissed"
>
{{ __('Got it') }}
</gl-button>
</gl-popover>
</div>
</template>
<div class="gl-display-flex gl-row-gap-2">
<div
v-if="!previewMarkdown && editorAiActions.length"
class="gl-display-flex gl-row-gap-2"
>
<header-divider :preview-markdown="previewMarkdown" />
<ai-actions-dropdown
:actions="editorAiActions"
@input="insertAIAction"
@replace="replaceTextarea"
/>
</div>
<header-divider :preview-markdown="previewMarkdown" />
</div>
<toolbar-button
v-show="!previewMarkdown"
tag="**"
:button-title="
/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), {
modifierKey,
}) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
"
:shortcuts="$options.shortcuts.bold"
icon="bold"
tracking-property="bold"
/>
<toolbar-button <toolbar-button
ref="suggestButton" v-show="!previewMarkdown"
:tag="mdSuggestion" tag="_"
:button-title="
/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), {
modifierKey,
}) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
"
:shortcuts="$options.shortcuts.italic"
icon="italic"
tracking-property="italic"
/>
<div class="gl-display-flex gl-row-gap-2">
<toolbar-button
v-if="!restrictedToolBarItems.includes('strikethrough')"
v-show="!previewMarkdown"
tag="~~"
:button-title="
/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
sprintf(s__('MarkdownEditor|Add strikethrough text (%{modifierKey}%{shiftKey}X)'), {
modifierKey,
shiftKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
})
"
:shortcuts="$options.shortcuts.strikethrough"
icon="strikethrough"
tracking-property="strike"
/>
<header-divider :preview-markdown="previewMarkdown" />
</div>
<toolbar-button
v-if="!restrictedToolBarItems.includes('quote')"
v-show="!previewMarkdown"
:prepend="true" :prepend="true"
:button-title="__('Insert suggestion')" :tag="tag"
:cursor-offset="4" :button-title="__('Insert a quote')"
:tag-content="lineContent" icon="quote"
tracking-property="codeSuggestion" tracking-property="blockquote"
icon="doc-code" @click="handleQuote"
data-testid="suggestion-button"
class="js-suggestion-btn"
@click="handleSuggestDismissed"
/> />
<gl-popover <toolbar-button
v-if="suggestPopoverVisible" v-show="!previewMarkdown"
:target="$refs.suggestButton.$el" tag="`"
:css-classes="['diff-suggest-popover']" tag-block="```"
placement="bottom" :button-title="__('Insert code')"
:show="suggestPopoverVisible" icon="code"
triggers="" tracking-property="code"
> />
<strong>{{ __('New! Suggest changes directly') }}</strong> <toolbar-button
<p class="mb-2"> v-show="!previewMarkdown"
{{ tag="[{text}](url)"
__( tag-select="url"
'Suggest code changes which can be immediately applied in one click. Try it out!', :button-title="
) /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
}} sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), {
</p> modifierKey,
<gl-button }) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */
variant="confirm" "
category="primary" :shortcuts="$options.shortcuts.link"
size="small" icon="link"
data-testid="dismiss-suggestion-popover-button" tracking-property="link"
@click="handleSuggestDismissed" />
> <toolbar-button
{{ __('Got it') }} v-if="!restrictedToolBarItems.includes('bullet-list')"
</gl-button> v-show="!previewMarkdown"
</gl-popover> :prepend="true"
</template> tag="- "
<ai-actions-dropdown :button-title="__('Add a bullet list')"
v-if="!previewMarkdown && editorAiActions.length" icon="list-bulleted"
:actions="editorAiActions" tracking-property="bulletList"
@input="insertAIAction" />
@replace="replaceTextarea" <toolbar-button
/> v-if="!restrictedToolBarItems.includes('numbered-list')"
<toolbar-button v-show="!previewMarkdown"
v-show="!previewMarkdown" :prepend="true"
tag="**" tag="1. "
:button-title=" :button-title="__('Add a numbered list')"
/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ icon="list-numbered"
sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { tracking-property="orderedList"
modifierKey, />
}) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */ <toolbar-button
" v-if="!restrictedToolBarItems.includes('task-list')"
:shortcuts="$options.shortcuts.bold" v-show="!previewMarkdown"
icon="bold" :prepend="true"
tracking-property="bold" tag="- [ ] "
/> :button-title="__('Add a checklist')"
<toolbar-button icon="list-task"
v-show="!previewMarkdown" tracking-property="taskList"
tag="_" />
:button-title=" <toolbar-button
/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ v-if="!restrictedToolBarItems.includes('indent')"
sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { v-show="!previewMarkdown"
modifierKey, class="gl-display-none"
}) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */ :button-title="
" /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
:shortcuts="$options.shortcuts.italic" sprintf(s__('MarkdownEditor|Indent line (%{modifierKey}])'), {
icon="italic" modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
tracking-property="italic" })
/> "
<toolbar-button :shortcuts="$options.shortcuts.indent"
v-if="!restrictedToolBarItems.includes('strikethrough')" command="indentLines"
v-show="!previewMarkdown" icon="list-indent"
tag="~~" tracking-property="indent"
:button-title=" />
/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ <toolbar-button
sprintf(s__('MarkdownEditor|Add strikethrough text (%{modifierKey}%{shiftKey}X)'), { v-if="!restrictedToolBarItems.includes('outdent')"
modifierKey, v-show="!previewMarkdown"
shiftKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */, class="gl-display-none"
}) :button-title="
" /* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
:shortcuts="$options.shortcuts.strikethrough" sprintf(s__('MarkdownEditor|Outdent line (%{modifierKey}[)'), {
icon="strikethrough" modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
tracking-property="strike" })
/> "
<toolbar-button :shortcuts="$options.shortcuts.outdent"
v-if="!restrictedToolBarItems.includes('quote')" command="outdentLines"
v-show="!previewMarkdown" icon="list-outdent"
:prepend="true" tracking-property="outdent"
:tag="tag" />
:button-title="__('Insert a quote')" <div class="gl-display-flex gl-row-gap-2">
icon="quote" <toolbar-button
tracking-property="blockquote" v-if="!restrictedToolBarItems.includes('collapsible-section')"
@click="handleQuote" v-show="!previewMarkdown"
/> :tag="mdCollapsibleSection"
<toolbar-button :prepend="true"
v-show="!previewMarkdown" tag-select="Click to expand"
tag="`" :button-title="__('Add a collapsible section')"
tag-block="```" icon="details-block"
:button-title="__('Insert code')" tracking-property="details"
icon="code" />
tracking-property="code" <header-divider :preview-markdown="previewMarkdown" />
/> </div>
<toolbar-button <toolbar-button
v-show="!previewMarkdown" v-if="!restrictedToolBarItems.includes('table')"
tag="[{text}](url)" v-show="!previewMarkdown"
tag-select="url" :tag="mdTable"
:button-title=" :prepend="true"
/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ :button-title="__('Add a table')"
sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { icon="table"
modifierKey, tracking-property="table"
}) /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */ />
" <toolbar-button
:shortcuts="$options.shortcuts.link" v-if="!previewMarkdown && !restrictedToolBarItems.includes('attach-file')"
icon="link" data-testid="button-attach-file"
tracking-property="link" data-button-type="attach-file"
/> :button-title="__('Attach a file or image')"
<toolbar-button icon="paperclip"
v-if="!restrictedToolBarItems.includes('bullet-list')" class="gl-mr-2"
v-show="!previewMarkdown" tracking-property="upload"
:prepend="true" @click="handleAttachFile"
tag="- " />
:button-title="__('Add a bullet list')" <drawio-toolbar-button
icon="list-bulleted" v-if="!previewMarkdown && drawioEnabled"
tracking-property="bulletList" :uploads-path="uploadsPath"
/> :markdown-preview-path="markdownPreviewPath"
<toolbar-button />
v-if="!restrictedToolBarItems.includes('numbered-list')" <!-- TODO Add icon and trigger functionality from here -->
v-show="!previewMarkdown" <toolbar-button
:prepend="true" v-if="supportsQuickActions"
tag="1. " v-show="!previewMarkdown"
:button-title="__('Add a numbered list')" :prepend="true"
icon="list-numbered" tag="/"
tracking-property="orderedList" :button-title="__('Add a quick action')"
/> icon="quick-actions"
<toolbar-button tracking-property="quickAction"
v-if="!restrictedToolBarItems.includes('task-list')" />
v-show="!previewMarkdown" <comment-templates-dropdown
:prepend="true" v-if="!previewMarkdown && newCommentTemplatePath"
tag="- [ ] " :new-comment-template-path="newCommentTemplatePath"
:button-title="__('Add a checklist')" @select="insertSavedReply"
icon="list-task" />
tracking-property="taskList" </div>
/> <div
<toolbar-button v-if="!previewMarkdown"
v-if="!restrictedToolBarItems.includes('indent')" class="full-screen gl-flex-grow-1 gl-justify-content-end gl-display-flex"
v-show="!previewMarkdown" >
class="gl-display-none"
:button-title="
/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
sprintf(s__('MarkdownEditor|Indent line (%{modifierKey}])'), {
modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
})
"
:shortcuts="$options.shortcuts.indent"
command="indentLines"
icon="list-indent"
tracking-property="indent"
/>
<toolbar-button
v-if="!restrictedToolBarItems.includes('outdent')"
v-show="!previewMarkdown"
class="gl-display-none"
:button-title="
/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */
sprintf(s__('MarkdownEditor|Outdent line (%{modifierKey}[)'), {
modifierKey /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */,
})
"
:shortcuts="$options.shortcuts.outdent"
command="outdentLines"
icon="list-outdent"
tracking-property="outdent"
/>
<toolbar-button
v-if="!restrictedToolBarItems.includes('collapsible-section')"
v-show="!previewMarkdown"
:tag="mdCollapsibleSection"
:prepend="true"
tag-select="Click to expand"
:button-title="__('Add a collapsible section')"
icon="details-block"
tracking-property="details"
/>
<toolbar-button
v-if="!restrictedToolBarItems.includes('table')"
v-show="!previewMarkdown"
:tag="mdTable"
:prepend="true"
:button-title="__('Add a table')"
icon="table"
tracking-property="table"
/>
<toolbar-button
v-if="!previewMarkdown && !restrictedToolBarItems.includes('attach-file')"
data-testid="button-attach-file"
data-button-type="attach-file"
:button-title="__('Attach a file or image')"
icon="paperclip"
class="gl-mr-3"
tracking-property="upload"
@click="handleAttachFile"
/>
<drawio-toolbar-button
v-if="!previewMarkdown && drawioEnabled"
:uploads-path="uploadsPath"
:markdown-preview-path="markdownPreviewPath"
/>
<!-- TODO Add icon and trigger functionality from here -->
<toolbar-button
v-if="supportsQuickActions"
v-show="!previewMarkdown"
:prepend="true"
tag="/"
:button-title="__('Add a quick action')"
icon="quick-actions"
tracking-property="quickAction"
/>
<comment-templates-dropdown
v-if="!previewMarkdown && newCommentTemplatePath"
:new-comment-template-path="newCommentTemplatePath"
@select="insertSavedReply"
/>
<div v-if="!previewMarkdown" class="full-screen">
<toolbar-button <toolbar-button
v-if="!restrictedToolBarItems.includes('full-screen')" v-if="!restrictedToolBarItems.includes('full-screen')"
class="js-zen-enter" class="js-zen-enter gl-mr-0!"
icon="maximize" icon="maximize"
:button-title="__('Go full screen')" :button-title="__('Go full screen')"
:prepend="true" :prepend="true"
......
app/assets/javascripts/vue_shared/components/markdown/header_divider.vue 0 → 100644
+ 16
− 0
浏览文件 @ 41e78ef0
<script>
export default {
props: {
previewMarkdown: {
type: Boolean,
required: false,
default: false,
},
},
};
</script>
<template>
<div v-if="!previewMarkdown" class="md-toolbar-divider gl-display-flex gl-py-2">
<div class="gl-border-l gl-pl-3 gl-ml-2"></div>
</div>
</template>
app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+ 1
− 1
浏览文件 @ 41e78ef0
...@@ -111,7 +111,7 @@ export default { ...@@ -111,7 +111,7 @@ export default {
type="button" type="button"
category="tertiary" category="tertiary"
size="small" size="small"
class="js-md gl-mr-3" class="js-md gl-mr-2"
data-container="body" data-container="body"
@click="$emit('click', $event)" @click="$emit('click', $event)"
/> />
......
ee/app/assets/javascripts/ai/components/ai_actions_dropdown.vue
+ 1
− 1
浏览文件 @ 41e78ef0
...@@ -178,7 +178,7 @@ export default { ...@@ -178,7 +178,7 @@ export default {
:aria-label="__('AI actions')" :aria-label="__('AI actions')"
category="tertiary" category="tertiary"
size="small" size="small"
class="gl-mr-3 gl-px-2!" class="gl-mr-2 gl-px-2!"
> >
<gl-loading-icon v-if="loading" /> <gl-loading-icon v-if="loading" />
<gl-icon v-else name="tanuki" /> <gl-icon v-else name="tanuki" />
......
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或