Visually display that expanded diff lines cant be commented on

Previously you just had to hover over a line to see if it could be commented on, this changes that by changing the background color & borders to show that the line cant have a comment.

Visually display that expanded diff lines cant be commented on
db44e556 · Phil Hughes · 54f6357b · db44e556 · db44e556 · db44e556
Commit db44e556 authored Feb 23, 2017 by Phil Hughes
7 changed files
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -155,6 +155,22 @@ $dark-il: #de935f;
    .line_content.match {
      @include dark-diff-match-line;
    }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid #000;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: #3e3e3e;
+        border-color: #3e3e3e;
+      }
+    }
  }

  // highlight line via anchor

--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -155,6 +155,22 @@ $monokai-gi: #a6e22e;
    .line_content.match {
      @include dark-diff-match-line;
    }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid #000;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: #3e3e3e;
+        border-color: #3e3e3e;
+      }
+    }
  }

  // highlight line via anchor

--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -159,6 +159,22 @@ $solarized-dark-il: #2aa198;
    .line_content.match {
      @include dark-diff-match-line;
    }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid #000;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: #010d10;
+        border-color: #010d10;
+      }
+    }
  }

  // highlight line via anchor

--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -166,6 +166,22 @@ $solarized-light-il: #2aa198;
    .line_content.match {
      @include matchLine;
    }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid #d2cdbd;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: #ece6d4;
+        border-color: #ece6d4;
+      }
+    }
  }

  // highlight line via anchor

--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -140,6 +140,22 @@ $white-gc-bg: #eaf2f5;
      }
    }

+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid #e0e0e0;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: #f7f7f7;
+        border-color: #f7f7f7;
+      }
+    }
+
    .line_content {
      &.old {
        background-color: $line-removed;

--- a/app/views/projects/blob/diff.html.haml
+++ b/app/views/projects/blob/diff.html.haml
@@ -9,7 +9,7 @@
    - line_old = line_new - @form.offset
    - line_content = capture do
      %td.line_content.noteable_line{ class: line_class }==#{' ' * @form.indent}#{line}
-    %tr.line_holder{ id: line_old, class: line_class }
+    %tr.line_holder.diff-expanded{ id: line_old, class: line_class }
      - case diff_view
      - when :inline
        %td.old_line.diff-line-num{ data: { linenumber: line_old } }

--- a/changelogs/unreleased/diff-make-obvious-cant-comment.yml
+++ b/changelogs/unreleased/diff-make-obvious-cant-comment.yml
+---
+title: Visually show expanded diff lines cant have comments
+merge_request:
+author: