Commenting on image diffs

1 files changed, 165 insertions, 3 deletions

diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index fb23343b966..ffb5fc94475 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -297,6 +297,7 @@
         .drag-track {
           display: block;
           position: absolute;
+          top: 0;
           left: 12px;
           height: 10px;
           width: 276px;
@@ -547,16 +548,23 @@
 }
 
 .diff-notes-collapse {
-  width: 19px;
-  height: 19px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
   padding: 0;
   transition: transform .1s ease-out;
   z-index: 100;
 
+  .collapse-icon {
+    height: 50%;
+    width: 100%;
+  }
+
   svg {
-    vertical-align: text-top;
+    vertical-align: middle;
   }
 
+  .collapse-icon,
   path {
     fill: $white-light;
   }
@@ -644,3 +652,157 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.note-container {
+  background-color: $gray-light;
+  border-top: 1px solid $white-normal;
+
+  // double jagged line divider
+  .discussion-notes + .discussion-notes::before,
+  .discussion-notes + .discussion-form::before {
+    content: '';
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 10px;
+    background-color: $white-light;
+    background-image: linear-gradient(45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
+      linear-gradient(225deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
+      linear-gradient(135deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
+      linear-gradient(-45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%);
+    background-position: 5px 5px,0 5px,0 5px,5px 5px;
+    background-size: 10px 10px;
+    background-repeat: repeat;
+  }
+
+  .notes {
+    position: relative;
+  }
+
+  .diff-notes-collapse {
+    position: absolute;
+    left: -12px;
+  }
+}
+
+.diff-file .note-container > .new-note,
+.note-container .discussion-notes {
+  margin-left: 100px;
+  border-left: 1px solid $white-normal;
+}
+
+.notes.active {
+  .diff-file .note-container > .new-note,
+  .note-container .discussion-notes {
+    // Override our margin and border (set for diff tab)
+    // when user is on the discussion tab for MR
+    margin-left: inherit;
+    border-left: inherit;
+  }
+}
+
+.files:not([data-can-create-note]) .frame {
+  cursor: auto;
+}
+
+.frame.click-to-comment {
+  position: relative;
+  cursor: url(icon_image_comment.svg)
+    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+
+  // Retina cursor
+  cursor: -webkit-image-set(url(icon_image_comment.svg) 1x, url(icon_image_comment@2x.svg) 2x)
+    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+
+  .comment-indicator {
+    position: absolute;
+    padding: 0;
+    width: (2px * $image-comment-cursor-left-offset);
+    height: (1px * $image-comment-cursor-top-offset);
+    // center the indicator to match the top left click region
+    margin-top: (-1px * $image-comment-cursor-top-offset) + 2;
+    margin-left: (-1px * $image-comment-cursor-left-offset) + 1;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.frame .badge,
+.image-diff-avatar-link .badge,
+.notes > .badge {
+  position: absolute;
+  background-color: $blue-400;
+  color: $white-light;
+  border: $white-light 1px solid;
+  min-height: $gl-padding;
+  padding: 5px 8px;
+  border-radius: 12px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.frame .badge,
+.frame .image-comment-badge {
+  // Center align badges on the frame
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.image-comment-badge {
+  @include btn-comment-icon;
+  position: absolute;
+
+  &.inverted {
+    border-color: $white-light;
+  }
+}
+
+.image-diff-avatar-link {
+  position: relative;
+
+  .badge,
+  .image-comment-badge {
+    top: 25px;
+    right: 8px;
+  }
+}
+
+.notes > .badge {
+  display: none;
+  left: -13px;
+}
+
+.discussion-notes {
+  min-height: 35px;
+
+  &:first-child {
+    // First child does not have the jagged borders
+    min-height: 25px;
+  }
+
+  &.collapsed {
+    background-color: $white-light;
+
+    .diff-notes-collapse,
+    .note,
+    .discussion-reply-holder, {
+      display: none;
+    }
+
+    .notes > .badge {
+      display: block;
+    }
+  }
+}
+
+.discussion-body .image .frame {
+  position: relative;
+}