summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
authorFilipa Lacerda <filipa@gitlab.com>2017-12-21 10:00:13 +0000
committerFilipa Lacerda <filipa@gitlab.com>2017-12-21 10:00:13 +0000
commitb62368235b40743e5b010aa8fc6fc2058bf1effa (patch)
treecfe60e41e24d02b659475cd7514e1b6016a780de /app
parentbc8e328fe4df7965e3ad80ee722cceb7c5b16261 (diff)
parentd40f393d2c99e4a36d097471acf9379f12c34f19 (diff)
downloadgitlab-ce-b62368235b40743e5b010aa8fc6fc2058bf1effa.tar.gz
Merge branch '40063-markdown-editor-improvements' into 'master'
Hide toolbar in markdown preview mode Closes #40063 See merge request gitlab-org/gitlab-ce!15994
Diffstat (limited to 'app')
-rw-r--r--app/assets/javascripts/preview_markdown.js6
-rw-r--r--app/assets/javascripts/vue_shared/components/markdown/header.vue4
-rw-r--r--app/assets/stylesheets/framework/markdown_area.scss31
-rw-r--r--app/views/projects/_md_preview.html.haml2
4 files changed, 26 insertions, 17 deletions
diff --git a/app/assets/javascripts/preview_markdown.js b/app/assets/javascripts/preview_markdown.js
index 141333b2b4d..ffaafb3ee9e 100644
--- a/app/assets/javascripts/preview_markdown.js
+++ b/app/assets/javascripts/preview_markdown.js
@@ -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);
});
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 6c575d8eb49..36d2d1dc164 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -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"
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 5389eb0a5f2..6b07ffdbd61 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -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,16 +82,23 @@
}
}
-.md-header-toolbar {
- margin-left: auto;
+.nav-links {
+ li.md-header-toolbar {
+ margin-left: auto;
+ display: none;
- @media(max-width: $screen-xs-max) {
- flex: none;
- display: flex;
- justify-content: center;
- width: 100%;
- padding-top: $gl-padding-top;
- padding-bottom: $gl-padding-top;
+ &.active {
+ display: block;
+
+ @media (max-width: $screen-xs-max) {
+ flex: none;
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ padding-top: $gl-padding-top;
+ padding-bottom: $gl-padding-top;
+ }
+ }
}
}
@@ -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;
}
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index c5e3a7945bd..8212ab9a31e 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -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" })