Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
4fd80c9f
Commit
4fd80c9f
authored
Aug 09, 2021
by
Paul Slaughter
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Revert "Merge branch '329568-update-md-header-buttons' into 'master'"
This reverts merge request !67058
parent
c3be0d38
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
161 additions
and
132 deletions
+161
-132
app/assets/javascripts/vue_shared/components/markdown/header.vue
...ets/javascripts/vue_shared/components/markdown/header.vue
+118
-117
app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
...scripts/vue_shared/components/markdown/toolbar_button.vue
+7
-8
app/assets/stylesheets/framework/markdown_area.scss
app/assets/stylesheets/framework/markdown_area.scss
+32
-3
app/assets/stylesheets/framework/secondary_navigation_elements.scss
.../stylesheets/framework/secondary_navigation_elements.scss
+1
-0
app/assets/stylesheets/pages/note_form.scss
app/assets/stylesheets/pages/note_form.scss
+2
-2
spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js
...end/vue_shared/components/markdown/toolbar_button_spec.js
+1
-2
No files found.
app/assets/javascripts/vue_shared/components/markdown/header.vue
View file @
4fd80c9f
<
script
>
import
{
GlPopover
,
GlButton
,
GlTooltipDirective
}
from
'
@gitlab/ui
'
;
import
{
GlPopover
,
GlButton
,
GlTooltipDirective
,
GlIcon
}
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,6 +10,7 @@ import ToolbarButton from './toolbar_button.vue';
export
default
{
components
:
{
ToolbarButton
,
GlIcon
,
GlPopover
,
GlButton
,
},
...
...
@@ -45,7 +46,6 @@ export default {
data
()
{
return
{
tag
:
'
>
'
,
suggestPopoverVisible
:
false
,
};
},
computed
:
{
...
...
@@ -76,27 +76,15 @@ 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
||
...
...
@@ -165,114 +153,127 @@ export default {
</button>
</li>
<li
:class=
"
{ active: !previewMarkdown }" class="md-header-toolbar">
<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"
>
<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
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"
@
click=
"handleSuggestDismissed"
:tag=
"tag"
:button-title=
"__('Insert a quote')"
icon=
"quote"
@
click=
"handleQuote"
/>
<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"
</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"
@
click=
"handleSuggestDismissed"
/>
<gl-popover
v-if=
"showSuggestPopover && $refs.suggestButton"
:target=
"$refs.suggestButton"
:css-classes=
"['diff-suggest-popover']"
placement=
"bottom"
:show=
"showSuggestPopover"
>
{{
__
(
'
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"
/>
<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>
</li>
</ul>
</div>
...
...
app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
View file @
4fd80c9f
<
script
>
import
{
GlTooltipDirective
,
Gl
Butt
on
}
from
'
@gitlab/ui
'
;
import
{
GlTooltipDirective
,
Gl
Ic
on
}
from
'
@gitlab/ui
'
;
export
default
{
components
:
{
Gl
Butt
on
,
Gl
Ic
on
,
},
directives
:
{
GlTooltip
:
GlTooltipDirective
,
...
...
@@ -19,8 +19,7 @@ export default {
},
tag
:
{
type
:
String
,
required
:
false
,
default
:
''
,
required
:
true
,
},
tagBlock
:
{
type
:
String
,
...
...
@@ -72,7 +71,7 @@ export default {
</
script
>
<
template
>
<
gl-
button
<button
v-gl-tooltip
:data-md-tag=
"tag"
:data-md-cursor-offset=
"cursorOffset"
...
...
@@ -83,11 +82,11 @@ export default {
:data-md-shortcuts=
"shortcutsString"
:title=
"buttonTitle"
:aria-label=
"buttonTitle"
:icon=
"icon"
type=
"button"
category=
"tertiary"
class=
"toolbar-btn js-md"
data-container=
"body"
@
click=
"() => $emit('click')"
/>
>
<gl-icon
:name=
"icon"
/>
</button>
</
template
>
app/assets/stylesheets/framework/markdown_area.scss
View file @
4fd80c9f
...
...
@@ -83,7 +83,6 @@
li
.md-header-toolbar
{
margin-left
:
auto
;
display
:
none
;
padding-bottom
:
$gl-padding-8
;
&
.active
{
display
:
block
;
...
...
@@ -92,9 +91,9 @@
flex
:
none
;
display
:
flex
;
justify-content
:
center
;
flex-wrap
:
wrap
;
margin-top
:
$gl-padding-8
;
width
:
100%
;
padding-top
:
$gl-padding-top
;
padding-bottom
:
$gl-padding-top
;
}
}
}
...
...
@@ -132,6 +131,36 @@
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/assets/stylesheets/framework/secondary_navigation_elements.scss
View file @
4fd80c9f
...
...
@@ -14,6 +14,7 @@
a
,
button
{
padding
:
$gl-padding-8
;
padding-bottom
:
$gl-padding-8
+
1
;
font-size
:
14px
;
line-height
:
28px
;
color
:
$gl-text-color-secondary
;
...
...
app/assets/stylesheets/pages/note_form.scss
View file @
4fd80c9f
...
...
@@ -54,7 +54,7 @@
.common-note-form
{
.md-area
{
padding
:
$gl-padding-
8
$gl-padding
;
padding
:
$gl-padding-
top
$gl-padding
;
border
:
1px
solid
$border-color
;
border-radius
:
$border-radius-base
;
transition
:
border-color
ease-in-out
0
.15s
,
...
...
@@ -323,7 +323,7 @@ table {
}
.comment-toolbar
{
padding-top
:
$gl-padding-
8
;
padding-top
:
$gl-padding-
top
;
color
:
$gl-text-color-secondary
;
border-top
:
1px
solid
$border-color
;
}
...
...
spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js
View file @
4fd80c9f
import
{
GlButton
}
from
'
@gitlab/ui
'
;
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
ToolbarButton
from
'
~/vue_shared/components/markdown/toolbar_button.vue
'
;
...
...
@@ -26,7 +25,7 @@ describe('toolbar_button', () => {
});
const
getButtonShortcutsAttr
=
()
=>
{
return
wrapper
.
find
(
GlButton
).
attributes
(
'
data-md-shortcuts
'
);
return
wrapper
.
find
(
'
button
'
).
attributes
(
'
data-md-shortcuts
'
);
};
describe
(
'
keyboard shortcuts
'
,
()
=>
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment