Commit b6236823 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch '40063-markdown-editor-improvements' into 'master'

Hide toolbar in markdown preview mode

Closes #40063

See merge request gitlab-org/gitlab-ce!15994
parents bc8e328f d40f393d
......@@ -117,12 +117,10 @@
}());
markdownPreview = new window.MarkdownPreview();
previewButtonSelector = '.js-md-preview-button';
writeButtonSelector = '.js-md-write-button';
lastTextareaPreviewed = null;
const markdownToolbar = $('.md-header-toolbar');
$.fn.setupMarkdownPreview = function () {
var $form = $(this);
......@@ -146,6 +144,7 @@
// toggle content
$form.find('.md-write-holder').hide();
$form.find('.md-preview-holder').show();
markdownToolbar.removeClass('active');
markdownPreview.showPreview($form);
});
......@@ -167,6 +166,7 @@
$form.find('.md-write-holder').show();
$form.find('textarea.markdown-area').focus();
$form.find('.md-preview-holder').hide();
markdownToolbar.addClass('active');
markdownPreview.hideReferencedCommands($form);
});
......
......@@ -72,7 +72,9 @@
Preview
</a>
</li>
<li class="md-header-toolbar">
<li
class="md-header-toolbar"
:class="{ active: !previewMarkdown }">
<toolbar-button
tag="**"
button-title="Add bold text"
......
......@@ -74,7 +74,7 @@
}
.md-header-tab {
@media(max-width: $screen-xs-max) {
@media (max-width: $screen-xs-max) {
flex: 1;
width: 100%;
border-bottom: 1px solid $border-color;
......@@ -82,10 +82,15 @@
}
}
.md-header-toolbar {
.nav-links {
li.md-header-toolbar {
margin-left: auto;
display: none;
&.active {
display: block;
@media(max-width: $screen-xs-max) {
@media (max-width: $screen-xs-max) {
flex: none;
display: flex;
justify-content: center;
......@@ -93,6 +98,8 @@
padding-top: $gl-padding-top;
padding-bottom: $gl-padding-top;
}
}
}
}
.referenced-users {
......@@ -175,7 +182,7 @@
margin-left: $gl-padding;
margin-right: -5px;
@media(max-width: $screen-xs-max) {
@media (max-width: $screen-xs-max) {
margin-left: 0;
margin-right: 0;
}
......@@ -239,7 +246,7 @@
}
}
@media(max-width: $screen-xs-max) {
@media (max-width: $screen-xs-max) {
.atwho-view-ul {
width: 350px;
}
......
......@@ -17,7 +17,7 @@
%a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
Preview
%li.md-header-toolbar
%li.md-header-toolbar.active
= markdown_toolbar_button({ icon: "bold", data: { "md-tag" => "**" }, title: "Add bold text" })
= markdown_toolbar_button({ icon: "italic", data: { "md-tag" => "*" }, title: "Add italic text" })
= markdown_toolbar_button({ icon: "quote", data: { "md-tag" => "> ", "md-prepend" => true }, title: "Insert a quote" })
......
---
title: Hide markdown toolbar in preview mode
merge_request:
author:
type: changed
......@@ -66,6 +66,21 @@ describe 'Merge requests > User posts notes', :js do
end
end
describe 'when previewing a note' do
it 'shows the toolbar buttons when editing a note' do
page.within('.js-main-target-form') do
expect(page).to have_css('.md-header-toolbar.active')
end
end
it 'hides the toolbar buttons when previewing a note' do
find('.js-md-preview-button').click
page.within('.js-main-target-form') do
expect(page).not_to have_css('.md-header-toolbar.active')
end
end
end
describe 'when editing a note' do
it 'there should be a hidden edit form' do
is_expected.to have_css('.note-edit-form:not(.mr-note-edit-form)', visible: false, count: 1)
......
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