diff options
author | Phil Hughes <me@iamphill.com> | 2019-06-14 14:01:24 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-06-14 14:01:24 +0100 |
commit | d2fd6bd51036be836c2c793e2bd7a503c7ad9030 (patch) | |
tree | fe86f4b3dca7f33ec37be2c75ea061afafcdb4fe /app/assets/javascripts/vue_shared | |
parent | 577832598f1b35187efafc426068ef7ac36ae09f (diff) | |
download | gitlab-ce-d2fd6bd51036be836c2c793e2bd7a503c7ad9030.tar.gz |
Added diff suggestion popover
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/56523
Diffstat (limited to 'app/assets/javascripts/vue_shared')
3 files changed, 105 insertions, 61 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index 0f3b3568414..3bdc0bb8ebd 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -67,6 +67,11 @@ export default { required: false, default: '', }, + showSuggestPopover: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -194,8 +199,10 @@ export default { :preview-markdown="previewMarkdown" :line-content="lineContent" :can-suggest="canSuggest" + :show-suggest-popover="showSuggestPopover" @preview-markdown="showPreviewTab" @write-markdown="showWriteTab" + @handleSuggestDismissed="() => $emit('handleSuggestDismissed')" /> <div v-show="!previewMarkdown" class="md-write-holder"> <div class="zen-backdrop"> diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index a5a5b2ef415..56a16c9e4d6 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -1,6 +1,6 @@ <script> import $ from 'jquery'; -import { GlTooltipDirective } from '@gitlab/ui'; +import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui'; import ToolbarButton from './toolbar_button.vue'; import Icon from '../icon.vue'; @@ -8,6 +8,8 @@ export default { components: { ToolbarButton, Icon, + GlPopover, + GlButton, }, directives: { GlTooltip: GlTooltipDirective, @@ -27,6 +29,11 @@ export default { required: false, default: true, }, + showSuggestPopover: { + type: Boolean, + required: false, + default: false, + }, }, computed: { mdTable() { @@ -70,6 +77,9 @@ export default { this.$emit('write-markdown'); }, + handleSuggestDismissed() { + this.$emit('handleSuggestDismissed'); + }, }, }; </script> @@ -93,66 +103,92 @@ export default { </button> </li> <li :class="{ active: !previewMarkdown }" class="md-header-toolbar"> - <toolbar-button tag="**" :button-title="__('Add bold text')" icon="bold" /> - <toolbar-button tag="*" :button-title="__('Add italic text')" icon="italic" /> - <toolbar-button - :prepend="true" - tag="> " - :button-title="__('Insert a quote')" - icon="quote" - /> - <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" /> - <toolbar-button - tag="[{text}](url)" - tag-select="url" - :button-title="__('Add a link')" - icon="link" - /> - <toolbar-button - :prepend="true" - tag="* " - :button-title="__('Add a bullet list')" - icon="list-bulleted" - /> - <toolbar-button - :prepend="true" - tag="1. " - :button-title="__('Add a numbered list')" - icon="list-numbered" - /> - <toolbar-button - :prepend="true" - tag="* [ ] " - :button-title="__('Add a task list')" - icon="task-done" - /> - <toolbar-button - :tag="mdTable" - :prepend="true" - :button-title="__('Add a table')" - icon="table" - /> - <toolbar-button - v-if="canSuggest" - :tag="mdSuggestion" - :prepend="true" - :button-title="__('Insert suggestion')" - :cursor-offset="4" - :tag-content="lineContent" - icon="doc-code" - class="qa-suggestion-btn" - /> - <button - v-gl-tooltip - :aria-label="__('Go full screen')" - class="toolbar-btn toolbar-fullscreen-btn js-zen-enter" - data-container="body" - tabindex="-1" - :title="__('Go full screen')" - type="button" - > - <icon name="screen-full" /> - </button> + <div class="d-inline-block"> + <toolbar-button tag="**" :button-title="__('Add bold text')" icon="bold" /> + <toolbar-button tag="*" :button-title="__('Add italic text')" icon="italic" /> + <toolbar-button + :prepend="true" + tag="> " + :button-title="__('Insert a quote')" + icon="quote" + /> + </div> + <div class="d-inline-block ml-md-2 ml-0"> + <template v-if="canSuggest"> + <toolbar-button + ref="suggestButton" + :tag="mdSuggestion" + :prepend="true" + :button-title="__('Insert suggestion')" + :cursor-offset="4" + :tag-content="lineContent" + icon="doc-code" + class="qa-suggestion-btn" + @click="handleSuggestDismissed" + /> + <gl-popover + v-if="showSuggestPopover" + :target="() => $refs.suggestButton" + :css-classes="['diff-suggest-popover']" + placement="bottom" + :show="showSuggestPopover" + > + <strong>{{ __('New! Suggest changes directly') }}</strong> + <p class="mb-2"> + {{ __('Suggest code changes which are immediately applied. Try it out!') }} + </p> + <gl-button variant="primary" size="sm" @click="handleSuggestDismissed"> + {{ __('Got it') }} + </gl-button> + </gl-popover> + </template> + <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" /> + <toolbar-button + tag="[{text}](url)" + tag-select="url" + :button-title="__('Add a link')" + icon="link" + /> + </div> + <div class="d-inline-block ml-md-2 ml-0"> + <toolbar-button + :prepend="true" + tag="* " + :button-title="__('Add a bullet list')" + icon="list-bulleted" + /> + <toolbar-button + :prepend="true" + tag="1. " + :button-title="__('Add a numbered list')" + icon="list-numbered" + /> + <toolbar-button + :prepend="true" + tag="* [ ] " + :button-title="__('Add a task list')" + icon="task-done" + /> + <toolbar-button + :tag="mdTable" + :prepend="true" + :button-title="__('Add a table')" + icon="table" + /> + </div> + <div class="d-inline-block ml-md-2 ml-0"> + <button + v-gl-tooltip + :aria-label="__('Go full screen')" + class="toolbar-btn toolbar-fullscreen-btn js-zen-enter" + data-container="body" + tabindex="-1" + :title="__('Go full screen')" + type="button" + > + <icon name="screen-full" /> + </button> + </div> </li> </ul> </div> diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue index 4572caa907b..94f78c0c085 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue @@ -66,6 +66,7 @@ export default { class="toolbar-btn js-md" tabindex="-1" data-container="body" + @click="() => $emit('click')" > <icon :name="icon" /> </button> |