Skip to content

G
gitlab-ce
Commit 6b3f774a authored by Enrique Alcántara's avatar Enrique Alcántara
Browse files
Options

Merge branch 'revert-1af970ce' into 'master' 

Revert "Merge branch '329568-update-md-header-buttons' into 'master'"

See merge request gitlab-org/gitlab!67783
parents 363bb59c 4fd80c9f
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 132 deletions
app/assets/javascripts/vue_shared/components/markdown/header.vue
View file @ 6b3f774a
<script> <script>
import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui'; import { GlPopover, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
import $ from 'jquery'; import $ from 'jquery';
import { keysFor, BOLD_TEXT, ITALIC_TEXT, LINK_TEXT } from '~/behaviors/shortcuts/keybindings'; import { keysFor, BOLD_TEXT, ITALIC_TEXT, LINK_TEXT } from '~/behaviors/shortcuts/keybindings';
import { getSelectedFragment } from '~/lib/utils/common_utils'; import { getSelectedFragment } from '~/lib/utils/common_utils';
...@@ -10,6 +10,7 @@ import ToolbarButton from './toolbar_button.vue'; ...@@ -10,6 +10,7 @@ import ToolbarButton from './toolbar_button.vue';
export default { export default {
components: { components: {
ToolbarButton, ToolbarButton,
GlIcon,
GlPopover, GlPopover,
GlButton, GlButton,
}, },
...@@ -45,7 +46,6 @@ export default { ...@@ -45,7 +46,6 @@ export default {
data() { data() {
return { return {
tag: '> ', tag: '> ',
suggestPopoverVisible: false,
}; };
}, },
computed: { computed: {
...@@ -76,27 +76,15 @@ export default { ...@@ -76,27 +76,15 @@ export default {
return this.isMac ? '⌘' : s__('KeyboardKey|Ctrl+'); return this.isMac ? '⌘' : s__('KeyboardKey|Ctrl+');
}, },
}, },
watch: {
showSuggestPopover() {
this.updateSuggestPopoverVisibility();
},
},
mounted() { mounted() {
$(document).on('markdown-preview:show.vue', this.previewMarkdownTab); $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
$(document).on('markdown-preview:hide.vue', this.writeMarkdownTab); $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
this.updateSuggestPopoverVisibility();
}, },
beforeDestroy() { beforeDestroy() {
$(document).off('markdown-preview:show.vue', this.previewMarkdownTab); $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
$(document).off('markdown-preview:hide.vue', this.writeMarkdownTab); $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
}, },
methods: { methods: {
async updateSuggestPopoverVisibility() {
await this.$nextTick();
this.suggestPopoverVisible = this.showSuggestPopover && this.canSuggest;
},
isValid(form) { isValid(form) {
return ( return (
!form || !form ||
...@@ -165,114 +153,127 @@ export default { ...@@ -165,114 +153,127 @@ export default {
</button> </button>
</li> </li>
<li :class="{ active: !previewMarkdown }" class="md-header-toolbar"> <li :class="{ active: !previewMarkdown }" class="md-header-toolbar">
<toolbar-button <div class="d-inline-block">
tag="**" <toolbar-button
:button-title=" tag="**"
sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey }) :button-title="
" sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey })
:shortcuts="$options.shortcuts.bold" "
icon="bold" :shortcuts="$options.shortcuts.bold"
/> icon="bold"
<toolbar-button />
tag="_" <toolbar-button
:button-title=" tag="_"
sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey }) :button-title="
" sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey })
:shortcuts="$options.shortcuts.italic" "
icon="italic" :shortcuts="$options.shortcuts.italic"
/> icon="italic"
<toolbar-button />
:prepend="true"
:tag="tag"
:button-title="__('Insert a quote')"
icon="quote"
@click="handleQuote"
/>
<template v-if="canSuggest">
<toolbar-button <toolbar-button
ref="suggestButton"
:tag="mdSuggestion"
:prepend="true" :prepend="true"
:button-title="__('Insert suggestion')" :tag="tag"
:cursor-offset="4" :button-title="__('Insert a quote')"
:tag-content="lineContent" icon="quote"
icon="doc-code" @click="handleQuote"
data-qa-selector="suggestion_button"
class="js-suggestion-btn"
@click="handleSuggestDismissed"
/> />
<gl-popover </div>
v-if="suggestPopoverVisible" <div class="d-inline-block ml-md-2 ml-0">
:target="$refs.suggestButton.$el" <template v-if="canSuggest">
:css-classes="['diff-suggest-popover']" <toolbar-button
placement="bottom" ref="suggestButton"
:show="suggestPopoverVisible" :tag="mdSuggestion"
> :prepend="true"
<strong>{{ __('New! Suggest changes directly') }}</strong> :button-title="__('Insert suggestion')"
<p class="mb-2"> :cursor-offset="4"
{{ :tag-content="lineContent"
__( icon="doc-code"
'Suggest code changes which can be immediately applied in one click. Try it out!', data-qa-selector="suggestion_button"
) class="js-suggestion-btn"
}}
</p>
<gl-button
variant="info"
category="primary"
size="small"
@click="handleSuggestDismissed" @click="handleSuggestDismissed"
/>
<gl-popover
v-if="showSuggestPopover && $refs.suggestButton"
:target="$refs.suggestButton"
:css-classes="['diff-suggest-popover']"
placement="bottom"
:show="showSuggestPopover"
> >
{{ __('Got it') }} <strong>{{ __('New! Suggest changes directly') }}</strong>
</gl-button> <p class="mb-2">
</gl-popover> {{
</template> __(
<toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" /> 'Suggest code changes which can be immediately applied in one click. Try it out!',
<toolbar-button )
tag="[{text}](url)" }}
tag-select="url" </p>
:button-title=" <gl-button
sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey }) variant="info"
" category="primary"
:shortcuts="$options.shortcuts.link" size="sm"
icon="link" @click="handleSuggestDismissed"
/> >
<toolbar-button {{ __('Got it') }}
:prepend="true" </gl-button>
tag="- " </gl-popover>
:button-title="__('Add a bullet list')" </template>
icon="list-bulleted" <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
/> <toolbar-button
<toolbar-button tag="[{text}](url)"
:prepend="true" tag-select="url"
tag="1. " :button-title="
:button-title="__('Add a numbered list')" sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey })
icon="list-numbered" "
/> :shortcuts="$options.shortcuts.link"
<toolbar-button icon="link"
:prepend="true" />
tag="- [ ] " </div>
:button-title="__('Add a task list')" <div class="d-inline-block ml-md-2 ml-0">
icon="list-task" <toolbar-button
/> :prepend="true"
<toolbar-button tag="- "
:tag="mdCollapsibleSection" :button-title="__('Add a bullet list')"
:prepend="true" icon="list-bulleted"
tag-select="Click to expand" />
:button-title="__('Add a collapsible section')" <toolbar-button
icon="details-block" :prepend="true"
/> tag="1. "
<toolbar-button :button-title="__('Add a numbered list')"
:tag="mdTable" icon="list-numbered"
:prepend="true" />
:button-title="__('Add a table')" <toolbar-button
icon="table" :prepend="true"
/> tag="- [ ] "
<toolbar-button :button-title="__('Add a task list')"
class="js-zen-enter" icon="list-task"
:prepend="true" />
:button-title="__('Go full screen')" <toolbar-button
icon="maximize" :tag="mdCollapsibleSection"
/> :prepend="true"
tag-select="Click to expand"
:button-title="__('Add a collapsible section')"
icon="details-block"
/>
<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"
>
<gl-icon name="maximize" />
</button>
</div>
</li> </li>
</ul> </ul>
</div> </div>
......
app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
View file @ 6b3f774a
<script> <script>
import { GlTooltipDirective, GlButton } from '@gitlab/ui'; import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
export default { export default {
components: { components: {
GlButton, GlIcon,
}, },
directives: { directives: {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
...@@ -19,8 +19,7 @@ export default { ...@@ -19,8 +19,7 @@ export default {
}, },
tag: { tag: {
type: String, type: String,
required: false, required: true,
default: '',
}, },
tagBlock: { tagBlock: {
type: String, type: String,
...@@ -72,7 +71,7 @@ export default { ...@@ -72,7 +71,7 @@ export default {
</script> </script>
<template> <template>
<gl-button <button
v-gl-tooltip v-gl-tooltip
:data-md-tag="tag" :data-md-tag="tag"
:data-md-cursor-offset="cursorOffset" :data-md-cursor-offset="cursorOffset"
...@@ -83,11 +82,11 @@ export default { ...@@ -83,11 +82,11 @@ export default {
:data-md-shortcuts="shortcutsString" :data-md-shortcuts="shortcutsString"
:title="buttonTitle" :title="buttonTitle"
:aria-label="buttonTitle" :aria-label="buttonTitle"
:icon="icon"
type="button" type="button"
category="tertiary"
class="toolbar-btn js-md" class="toolbar-btn js-md"
data-container="body" data-container="body"
@click="() => $emit('click')" @click="() => $emit('click')"
/> >
<gl-icon :name="icon" />
</button>
</template> </template>
app/assets/stylesheets/framework/markdown_area.scss
View file @ 6b3f774a
...@@ -83,7 +83,6 @@ ...@@ -83,7 +83,6 @@
li.md-header-toolbar { li.md-header-toolbar {
margin-left: auto; margin-left: auto;
display: none; display: none;
padding-bottom: $gl-padding-8;
&.active { &.active {
display: block; display: block;
...@@ -92,9 +91,9 @@ ...@@ -92,9 +91,9 @@
flex: none; flex: none;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap;
margin-top: $gl-padding-8;
width: 100%; width: 100%;
padding-top: $gl-padding-top;
padding-bottom: $gl-padding-top;
} }
} }
} }
...@@ -132,6 +131,36 @@ ...@@ -132,6 +131,36 @@
width: 100%; width: 100%;
} }
.toolbar-btn {
float: left;
padding: 0 7px;
background: transparent;
border: 0;
outline: 0;
svg {
width: 14px;
height: 14px;
vertical-align: middle;
fill: $gl-text-color-secondary;
}
&:hover,
&:focus {
svg {
fill: $blue-600;
}
}
}
.toolbar-fullscreen-btn {
margin-right: -5px;
@include media-breakpoint-down(xs) {
margin-right: 0;
}
}
.md-suggestion-diff { .md-suggestion-diff {
display: table !important; display: table !important;
border: 1px solid $border-color !important; border: 1px solid $border-color !important;
......
app/assets/stylesheets/framework/secondary_navigation_elements.scss
View file @ 6b3f774a
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
a, a,
button { button {
padding: $gl-padding-8; padding: $gl-padding-8;
padding-bottom: $gl-padding-8 + 1;
font-size: 14px; font-size: 14px;
line-height: 28px; line-height: 28px;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
......
app/assets/stylesheets/pages/note_form.scss
View file @ 6b3f774a
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
.common-note-form { .common-note-form {
.md-area { .md-area {
padding: $gl-padding-8 $gl-padding; padding: $gl-padding-top $gl-padding;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius-base; border-radius: $border-radius-base;
transition: border-color ease-in-out 0.15s, transition: border-color ease-in-out 0.15s,
...@@ -323,7 +323,7 @@ table { ...@@ -323,7 +323,7 @@ table {
} }
.comment-toolbar { .comment-toolbar {
padding-top: $gl-padding-8; padding-top: $gl-padding-top;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
......
spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js
View file @ 6b3f774a
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import ToolbarButton from '~/vue_shared/components/markdown/toolbar_button.vue'; import ToolbarButton from '~/vue_shared/components/markdown/toolbar_button.vue';
...@@ -26,7 +25,7 @@ describe('toolbar_button', () => { ...@@ -26,7 +25,7 @@ describe('toolbar_button', () => {
}); });
const getButtonShortcutsAttr = () => { const getButtonShortcutsAttr = () => {
return wrapper.find(GlButton).attributes('data-md-shortcuts'); return wrapper.find('button').attributes('data-md-shortcuts');
}; };
describe('keyboard shortcuts', () => { describe('keyboard shortcuts', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7