Skip to content

G
gitlab-ce
Commit 4bf3cc6e authored by Jarek Ostrowski's avatar Jarek Ostrowski Committed by Enrique Alcántara
Browse files
Options

Migrate Markdown Editor toolbar buttons to GlButton 

Changelog: changed
parent 197b1de0
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 161 deletions
app/assets/javascripts/vue_shared/components/markdown/header.vue
View file @ 4bf3cc6e
<script>
import { GlPopover, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
import $ from 'jquery';
import { keysFor, BOLD_TEXT, ITALIC_TEXT, LINK_TEXT } from '~/behaviors/shortcuts/keybindings';
import { getSelectedFragment } from '~/lib/utils/common_utils';
......@@ -10,7 +10,6 @@ import ToolbarButton from './toolbar_button.vue';
export default {
components: {
ToolbarButton,
GlIcon,
GlPopover,
GlButton,
},
......@@ -46,6 +45,7 @@ export default {
data() {
return {
tag: '> ',
suggestPopoverVisible: false,
};
},
computed: {
......@@ -76,15 +76,27 @@ export default {
return this.isMac ? '⌘' : s__('KeyboardKey|Ctrl+');
},
},
watch: {
showSuggestPopover() {
this.updateSuggestPopoverVisibility();
},
},
mounted() {
$(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
$(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
this.updateSuggestPopoverVisibility();
},
beforeDestroy() {
$(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
$(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
},
methods: {
async updateSuggestPopoverVisibility() {
await this.$nextTick();
this.suggestPopoverVisible = this.showSuggestPopover && this.canSuggest;
},
isValid(form) {
return (
!form ||
......@@ -153,127 +165,114 @@ export default {
</button>
</li>
<li :class="{ active: !previewMarkdown }" class="md-header-toolbar">
<div class="d-inline-block">
<toolbar-button
tag="**"
:button-title="
sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey })
"
:shortcuts="$options.shortcuts.bold"
icon="bold"
/>
<toolbar-button
tag="_"
:button-title="
sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey })
"
:shortcuts="$options.shortcuts.italic"
icon="italic"
/>
<toolbar-button
tag="**"
:button-title="
sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey })
"
:shortcuts="$options.shortcuts.bold"
icon="bold"
/>
<toolbar-button
tag="_"
:button-title="
sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey })
"
: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
ref="suggestButton"
:tag="mdSuggestion"
:prepend="true"
:tag="tag"
:button-title="__('Insert a quote')"
icon="quote"
@click="handleQuote"
:button-title="__('Insert suggestion')"
:cursor-offset="4"
:tag-content="lineContent"
icon="doc-code"
data-qa-selector="suggestion_button"
class="js-suggestion-btn"
@click="handleSuggestDismissed"
/>
</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"
data-qa-selector="suggestion_button"
class="js-suggestion-btn"
<gl-popover
v-if="suggestPopoverVisible"
:target="$refs.suggestButton.$el"
:css-classes="['diff-suggest-popover']"
placement="bottom"
:show="suggestPopoverVisible"
>
<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="info"
category="primary"
size="small"
@click="handleSuggestDismissed"
/>
<gl-popover
v-if="showSuggestPopover && $refs.suggestButton"
: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 can be immediately applied in one click. Try it out!',
)
}}
</p>
<gl-button
variant="info"
category="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="
sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey })
"
:shortcuts="$options.shortcuts.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="list-task"
/>
<toolbar-button
: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>
{{ __('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="
sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey })
"
:shortcuts="$options.shortcuts.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="list-task"
/>
<toolbar-button
: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"
/>
<toolbar-button
class="js-zen-enter"
:prepend="true"
:button-title="__('Go full screen')"
icon="maximize"
/>
</li>
</ul>
</div>
......
app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
View file @ 4bf3cc6e
<script>
import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
export default {
components: {
GlIcon,
GlButton,
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -19,7 +19,8 @@ export default {
},
tag: {
type: String,
required: true,
required: false,
default: '',
},
tagBlock: {
type: String,
......@@ -71,7 +72,7 @@ export default {
</script>
<template>
<button
<gl-button
v-gl-tooltip
:data-md-tag="tag"
:data-md-cursor-offset="cursorOffset"
......@@ -82,11 +83,11 @@ export default {
:data-md-shortcuts="shortcutsString"
:title="buttonTitle"
:aria-label="buttonTitle"
:icon="icon"
type="button"
class="toolbar-btn js-md"
category="tertiary"
class="js-md"
data-container="body"
@click="() => $emit('click')"
>
<gl-icon :name="icon" />
</button>
/>
</template>
app/assets/stylesheets/framework/animations.scss
View file @ 4bf3cc6e
......@@ -98,7 +98,6 @@
}
.note-action-button,
.toolbar-btn,
.dropdown-toggle-caret {
@include transition(color);
}
......
app/assets/stylesheets/framework/markdown_area.scss
View file @ 4bf3cc6e
......@@ -131,36 +131,6 @@
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 {
display: table !important;
border: 1px solid $border-color !important;
......
app/helpers/markup_helper.rb
View file @ 4bf3cc6e
......@@ -250,7 +250,7 @@ module MarkupHelper
data = options[:data].merge({ container: 'body' })
content_tag :button,
type: 'button',
class: 'toolbar-btn js-md has-tooltip',
class: 'gl-button btn btn-default-tertiary btn-icon js-md has-tooltip',
data: data,
title: options[:title],
aria: { label: options[:title] } do
......
app/views/shared/blob/_markdown_buttons.html.haml
View file @ 4bf3cc6e
......@@ -24,5 +24,5 @@
title: _("Add a collapsible section") })
= markdown_toolbar_button({ icon: "table", data: { "md-tag" => "| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |", "md-prepend" => true }, title: _("Add a table") })
- if show_fullscreen_button
%button.toolbar-btn.toolbar-fullscreen-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: _("Go full screen"), data: { container: "body" } }
%button.gl-button.btn.btn-default-tertiary.btn-icon.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: _("Go full screen"), data: { container: "body" } }
= sprite_icon("maximize")
spec/features/projects/tags/user_edits_tags_spec.rb
View file @ 4bf3cc6e
......@@ -55,7 +55,7 @@ RSpec.describe 'Project > Tags', :js do
note_textarea = page.find('.js-gfm-input')
# Click on Bold button
page.find('.md-header-toolbar button.toolbar-btn:first-child').click
page.find('.md-header-toolbar button:first-child').click
expect(note_textarea.value).to eq('****')
end
......
spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js
View file @ 4bf3cc6e
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import ToolbarButton from '~/vue_shared/components/markdown/toolbar_button.vue';
......@@ -25,7 +26,7 @@ describe('toolbar_button', () => {
});
const getButtonShortcutsAttr = () => {
return wrapper.find('button').attributes('data-md-shortcuts');
return wrapper.find(GlButton).attributes('data-md-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