Simplify Haml template and Scss files for MC UI.

app/assets/stylesheets/pages/merge_conflicts.scss

@@ -19,7 +19,6 @@ $unselected_line:         #f8f8f8;
     min-height: 19px;
   }
 
-
   .header.line_content, .diff-line-num {
     &.origin {
       background-color: $origin_gutter;
@@ -62,65 +61,6 @@ $unselected_line:         #f8f8f8;
     }
   }
 
-
-  .head {
-    .header, .diff-line-num {
-      background-color: $head_gutter;
-    }
-
-    td {
-      background-color: $head_line;
-    }
-
-    &.selected {
-      .header, .diff-line-num {
-        background-color: $selected_head_gutter;
-      }
-
-      td {
-        background-color: $selected_head_line;
-      }
-    }
-  }
-
-  .origin {
-    .header, .diff-line-num {
-      background-color: $origin_gutter;
-    }
-
-    td {
-      background-color: $origin_line;
-    }
-
-    &.selected {
-      .header, .diff-line-num {
-        background-color: $selected_origin_gutter;
-      }
-
-      td {
-        background-color: $selected_origin_line;
-      }
-    }
-  }
-
-  .origin, .head {
-    &.unselected {
-      .header, .diff-line-num {
-        background-color: $unselected_gutter;
-      }
-
-      td {
-        background-color: $unselected_line;
-      }
-    }
-  }
-
-  .parallel .header {
-    button {
-      right: 10px;
-    }
-  }
-
   .line_content.header {
     position: relative;
 
@@ -130,7 +70,7 @@ $unselected_line:         #f8f8f8;
       background: #fff;
       font-size: 10px;
       position: absolute;
-      right: 20px;
+      right: 10px;
       height: 17px;
       line-height: 4px; // FIXME: 4px?
       top: 1px;

app/views/projects/merge_requests/conflicts.html.haml

@@ -7,6 +7,14 @@
 
 = render 'shared/issuable/sidebar', issuable: @merge_request
 
+
+- class_bindings = "{ |
+    'head': line.isHead, |
+    'origin': line.isOrigin, |
+    'match': line.hasMatch, |
+    'selected': line.isSelected, |
+    'unselected': line.isUnselected }"
+
 #conflicts{"v-cloak" => "true"}
   .loading{"v-if" => "isLoading"}
     %i.fa.fa-spinner.fa-spin
@@ -35,6 +43,7 @@
         into
         %strong {{conflictsData.target_branch}}
 
+
   .files-wrapper{"v-if" => "!isLoading && !hasError"}
     .files{"v-show" => "isParallel"}
       .diff-file.file-holder.conflict.parallel-view{"v-for" => "file in conflictsData.files"}
@@ -51,36 +60,19 @@
                 %template{"v-for" => "line in section"}
 
                   %template{"v-if" => "line.isHeader"}
-                    %td.diff-line-num.header{":class" => "{ |
-                      'head': line.isHead, |
-                      'origin': line.isOrigin, |
-                      'selected': line.isSelected, |
-                      'unselected': line.isUnselected}"}
-                    %td.line_content.header{":class" => "{ |
-                      'head': line.isHead, |
-                      'origin': line.isOrigin, |
-                      'selected': line.isSelected, |
-                      'unselected': line.isUnselected}"}
+                    %td.diff-line-num.header{":class" => "#{class_bindings}"}
+                    %td.line_content.header{":class" => "#{class_bindings}"}
                       %strong {{line.richText}}
                       %button.btn{"@click" => "handleSelected(line.id, line.section)"}
                         {{line.buttonTitle}}
 
                   %template{"v-if" => "!line.isHeader"}
-                    %td.diff-line-num.old_line{":class" => "{ |
-                      'head': line.isHead, |
-                      'origin': line.isOrigin, |
-                      'match': line.hasMatch, |
-                      'selected': line.isSelected, |
-                      'unselected': line.isUnselected }"}
+                    %td.diff-line-num.old_line{":class" => "#{class_bindings}"}
                       {{line.lineNumber}}
-                    %td.line_content.parallel{":class" => "{ |
-                      'head': line.isHead, |
-                      'origin': line.isOrigin, |
-                      'match': line.hasMatch, |
-                      'selected': line.isSelected, |
-                      'unselected': line.isUnselected }"}
+                    %td.line_content.parallel{":class" => "#{class_bindings}"}
                       {{{line.richText}}}
 
+
     .files{"v-show" => "!isParallel"}
       .diff-file.file-holder.conflict.inline-view{"v-for" => "file in conflictsData.files"}
         .file-title
@@ -91,32 +83,27 @@
               View file @{{conflictsData.shortCommitSha}}
 
         .diff-content.diff-wrap-lines
-          .diff-wrap-lines.code.file-content.js-syntax-highlight.white
+          .diff-wrap-lines.code.file-content.js-syntax-highlight
             %table
-              %tr.line_holder{"v-for" => "line in file.inlineLines", |
-                ":class" => "{ |
-                  'head': line.isHead, |
-                  'origin': line.isOrigin, |
-                  'match': line.hasMatch, |
-                  'selected': line.isSelected, |
-                  'unselected': line.isUnselected }"}
+              %tr.line_holder.diff-inline{"v-for" => "line in file.inlineLines"}
 
                 %template{"v-if" => "!line.isHeader"}
-                  %td.diff-line-num.new_line
+                  %td.diff-line-num.new_line{":class" => "#{class_bindings}"}
                     %a {{line.new_line}}
-                  %td.diff-line-num.old_line
+                  %td.diff-line-num.old_line{":class" => "#{class_bindings}"}
                     %a {{line.old_line}}
-                  %td.line_content
+                  %td.line_content{":class" => "#{class_bindings}"}
                     {{{line.richText}}}
 
                 %template{"v-if" => "line.isHeader"}
-                  %td.diff-line-num.header
-                  %td.diff-line-num.header
-                  %td.line_content.header
+                  %td.diff-line-num.header{":class" => "#{class_bindings}"}
+                  %td.diff-line-num.header{":class" => "#{class_bindings}"}
+                  %td.line_content.header{":class" => "#{class_bindings}"}
                     %strong {{{line.richText}}}
                     %button.btn{"@click" => "handleSelected(line.id, line.section)"}
                       {{line.buttonTitle}}
 
+
     .content-block.oneline-block.files-changed
       %strong.resolved-count {{resolvedCount}}
       of