diff options
Diffstat (limited to 'app')
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" }) |