1 files changed, 32 insertions, 21 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 5bf2a90cc3b..70f5fc1d664 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,6 +1,7 @@
 <script>
   import tooltip from '../../directives/tooltip';
   import toolbarButton from './toolbar_button.vue';
+  import icon from '../icon.vue';
 
   export default {
     props: {
@@ -14,25 +15,34 @@
     },
     components: {
       toolbarButton,
+      icon,
     },
     methods: {
-      toggleMarkdownPreview(e, form) {
-        if (form && !form.find('.js-vue-markdown-field').length) {
-          return;
-        } else if (e.target.blur) {
-          e.target.blur();
-        }
+      isMarkdownForm(form) {
+        return form && !form.find('.js-vue-markdown-field').length;
+      },
+
+      previewMarkdownTab(event, form) {
+        if (event.target.blur) event.target.blur();
+        if (this.isMarkdownForm(form)) return;
+
+        this.$emit('preview-markdown');
+      },
+
+      writeMarkdownTab(event, form) {
+        if (event.target.blur) event.target.blur();
+        if (this.isMarkdownForm(form)) return;
 
-        this.$emit('toggle-markdown');
+        this.$emit('write-markdown');
       },
     },
     mounted() {
-      $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
-      $(document).on('markdown-preview:hide.vue', this.toggleMarkdownPreview);
+      $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
+      $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
     },
     beforeDestroy() {
-      $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
-      $(document).off('markdown-preview:hide.vue', this.toggleMarkdownPreview);
+      $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
+      $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
     },
   };
 </script>
@@ -42,17 +52,19 @@
     <ul class="nav-links clearfix">
       <li :class="{ active: !previewMarkdown }">
         <a
+          class="js-write-link"
           href="#md-write-holder"
           tabindex="-1"
-          @click.prevent="toggleMarkdownPreview($event)">
+          @click.prevent="writeMarkdownTab($event)">
           Write
         </a>
       </li>
       <li :class="{ active: previewMarkdown }">
         <a
+          class="js-preview-link"
           href="#md-preview-holder"
           tabindex="-1"
-          @click.prevent="toggleMarkdownPreview($event)">
+          @click.prevent="previewMarkdownTab($event)">
           Preview
         </a>
       </li>
@@ -70,7 +82,7 @@
             tag="> "
             :prepend="true"
             button-title="Insert a quote"
-            icon="quote-right" />
+            icon="quote" />
           <toolbar-button
             tag="`"
             tag-block="```"
@@ -80,17 +92,17 @@
             tag="* "
             :prepend="true"
             button-title="Add a bullet list"
-            icon="list-ul" />
+            icon="list-bulleted" />
           <toolbar-button
             tag="1. "
             :prepend="true"
             button-title="Add a numbered list"
-            icon="list-ol" />
+            icon="list-numbered" />
           <toolbar-button
             tag="* [ ] "
             :prepend="true"
             button-title="Add a task list"
-            icon="check-square-o" />
+            icon="task-done" />
         </div>
         <div class="toolbar-group">
           <button
@@ -101,10 +113,9 @@
             tabindex="-1"
             title="Go full screen"
             type="button">
-            <i
-              aria-hidden="true"
-              class="fa fa-arrows-alt fa-fw">
-            </i>
+            <icon
+              name="screen-full">
+            </icon>
           </button>
         </div>
       </li>