Review fixes.

7 files changed, 52 insertions, 32 deletions

diff --git a/app/assets/javascripts/diffs/components/changed_files.vue b/app/assets/javascripts/diffs/components/changed_files.vue
index c384469db85..69ad22cd845 100644
--- a/app/assets/javascripts/diffs/components/changed_files.vue
+++ b/app/assets/javascripts/diffs/components/changed_files.vue
@@ -55,7 +55,7 @@ export default {
     });
   },
   methods: {
-    ...mapActions(['setDiffViewType']),
+    ...mapActions(['setInlineDiffViewType', 'setParallelDiffViewType']),
     handleScroll() {
       if (!this.$refs.stickyBar) return;
 
@@ -123,7 +123,7 @@ export default {
         </a>
         <div class="btn-group">
           <a
-            @click.prevent="setDiffViewType()"
+            @click.prevent="setInlineDiffViewType"
             :class="{ active: isInlineView }"
             id="inline-diff-btn"
             class="btn"
@@ -133,7 +133,7 @@ export default {
             {{ __('Inline') }}
           </a>
           <a
-            @click.prevent="setDiffViewType(true)"
+            @click.prevent="setParallelDiffViewType"
             :class="{ active: isParallelView }"
             id="parallel-diff-btn"
             class="btn"
diff --git a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
index 4a9aff12ba9..ddec37a97b0 100644
--- a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
 import { MATCH_LINE_TYPE, UNFOLD_COUNT, CONTEXT_LINE_TYPE } from '../constants';
 import * as utils from '../store/utils';
 
@@ -49,6 +50,9 @@ export default {
       default: false,
     },
   },
+  components: {
+    Icon,
+  },
   computed: {
     ...mapState({
       diffViewType: state => state.diffs.diffViewType,
@@ -138,11 +142,10 @@ export default {
         class="add-diff-note js-add-diff-note-button"
         title="Add a comment to this line"
       >
-        <i
-          aria-hidden="true"
-          class="fa fa-comment-o"
-        >
-        </i>
+        <icon
+          name="comment"
+          :size="12"
+        />
       </button>
       <a
         v-if="lineNumber"
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 83dc59851b9..3185c90cecb 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -30,11 +30,14 @@ export const fetchDiffFiles = ({ state, commit }) => {
     .then(handleLocationHash);
 };
 
-export const setDiffViewType = ({ commit }, isParallel) => {
-  const type = isParallel ? PARALLEL_DIFF_VIEW_TYPE : INLINE_DIFF_VIEW_TYPE;
+export const setInlineDiffViewType = ({ commit }) => {
+  commit(types.SET_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE);
+  Cookies.set(DIFF_VIEW_COOKIE_NAME, INLINE_DIFF_VIEW_TYPE);
+};
 
-  commit(types.SET_DIFF_VIEW_TYPE, type);
-  Cookies.set(DIFF_VIEW_COOKIE_NAME, type);
+export const setParallelDiffViewType = ({ commit }) => {
+  commit(types.SET_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE);
+  Cookies.set(DIFF_VIEW_COOKIE_NAME, PARALLEL_DIFF_VIEW_TYPE);
 };
 
 export const showCommentForm = ({ commit }, params) => {
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index dc4bc47ae87..8d7c26ed212 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -8,8 +8,8 @@ export default {
     Object.assign(state, { endpoint });
   },
 
-  [types.SET_LOADING](state, loadingState) {
-    Object.assign(state, { isLoading: loadingState });
+  [types.SET_LOADING](state, isLoading) {
+    Object.assign(state, { isLoading });
   },
 
   [types.SET_DIFF_FILES](state, diffFiles) {
@@ -20,8 +20,8 @@ export default {
     });
   },
 
-  [types.SET_DIFF_VIEW_TYPE](state, type) {
-    Object.assign(state, { diffViewType: type });
+  [types.SET_DIFF_VIEW_TYPE](state, diffViewType) {
+    Object.assign(state, { diffViewType });
   },
 
   [types.ADD_COMMENT_FORM_LINE](state, { diffLines, lineCode, linePosition }) {
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index eeda0602246..9f6af8c7a0d 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -164,8 +164,6 @@ export default class MergeRequestTabs {
       this.resetViewContainer();
       this.destroyPipelinesView();
     } else if (this.isDiffAction(action)) {
-      debugger;
-
       if (bp.getBreakpointSize() !== 'lg') {
         this.shrinkView();
       }
diff --git a/app/assets/javascripts/notes/components/diff_file_header.vue b/app/assets/javascripts/notes/components/diff_file_header.vue
index 7b3b7777e0a..5cc1367600e 100644
--- a/app/assets/javascripts/notes/components/diff_file_header.vue
+++ b/app/assets/javascripts/notes/components/diff_file_header.vue
@@ -43,8 +43,8 @@ export default {
       return !this.diffFile.text;
     },
     replacedFile() {
-      return !(this.diffFile.newFile || this.diffFile.deletedFile)
-    }
+      return !(this.diffFile.newFile || this.diffFile.deletedFile);
+    },
   },
   methods: {
     handleToggle(e, checkTarget) {
@@ -58,7 +58,7 @@ export default {
     },
     truncate(sha) {
       return sha.slice(0, 8);
-    }
+    },
   },
 };
 </script>
@@ -69,11 +69,14 @@ export default {
     ref="header"
     class="file-header-content"
   >
-    <i
+    <icon
       v-if="collapsible"
       @click.stop="handleToggle"
-      class="fa diff-toggle-caret fa-fw fa-caret-down"
-    ></i>
+      name="chevron-down"
+      aria-hidden="true"
+      :size="16"
+      class="diff-toggle-caret"
+    />
     <div
       v-if="diffFile.submodule"
     >
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index a71930cfd46..e62bab3d0c6 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -3,9 +3,15 @@
  */
 
 @-webkit-keyframes targe3-note {
-  from { background: $note-targe3-outside; }
-  50% { background: $note-targe3-inside; }
-  to { background: $note-targe3-outside; }
+  from {
+    background: $note-targe3-outside;
+  }
+  50% {
+    background: $note-targe3-inside;
+  }
+  to {
+    background: $note-targe3-outside;
+  }
 }
 
 ul.notes {
@@ -36,7 +42,8 @@ ul.notes {
     }
   }
 
-  > li { // .timeline-entry
+  > li {
+    // .timeline-entry
     padding: 0;
     display: block;
     position: relative;
@@ -159,7 +166,6 @@ ul.notes {
     }
 
     .note-header {
-
       @include notes-media('max', $screen-xs-min) {
         .inline {
           display: block;
@@ -288,7 +294,10 @@ ul.notes {
             position: absolute;
             left: 0;
             bottom: 0;
-            background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%);
+            background: linear-gradient(
+              rgba($white-light, 0.1) -100px,
+              $white-light 100%
+            );
           }
         }
       }
@@ -672,7 +681,6 @@ ul.notes {
     background-color: $white-light;
   }
 
-
   a {
     color: $gl-link-color;
   }
@@ -751,7 +759,8 @@ ul.notes {
   border: 0;
   outline: 0;
   color: $gray-darkest;
-  transition: color $general-hover-transition-duration $general-hover-transition-curve;
+  transition: color $general-hover-transition-duration
+    $general-hover-transition-curve;
 
   &.is-disabled {
     cursor: default;
@@ -813,4 +822,8 @@ ul.notes {
   .diff-comment-form {
     display: block;
   }
+
+  .add-diff-note svg {
+    margin-top: 4px;
+  }
 }