1 files changed, 225 insertions, 103 deletions

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 69a95db6920..0a194f3707f 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -14,60 +14,93 @@ ul.notes {
   margin: 0;
   padding: 0;
 
-  .timeline-icon {
-    float: left;
-
-    svg {
-      width: 16px;
-      height: 16px;
-      fill: $gray-darkest;
-      position: absolute;
-      left: 0;
-      top: 16px;
-    }
-  }
-
-  .timeline-content {
-    margin-left: 55px;
-
-    &.timeline-content-form {
-      @media (max-width: $screen-sm-max) {
-        margin-left: 0;
-      }
-    }
-  }
-
   .note-created-ago,
   .note-updated-at {
     white-space: nowrap;
   }
 
   .discussion-body {
-    padding-top: 15px;
+    padding-top: 8px;
+
+    .panel {
+      margin-bottom: 0;
+    }
   }
 
   .discussion {
-    overflow: hidden;
     display: block;
     position: relative;
+
+    .diff-content {
+      overflow: visible;
+    }
   }
 
-  .note {
+  > li { // .timeline-entry
+    padding: 0;
     display: block;
     position: relative;
-    border-bottom: 1px solid $white-normal;
+    border-bottom: 0;
 
-    &.note-discussion {
-      &.timeline-entry {
-        padding: 14px 10px;
+    @include notes-media('min', $screen-sm-min) {
+      padding-left: $note-icon-gutter-width;
+    }
+
+    .timeline-entry-inner {
+      padding: $gl-padding $gl-btn-padding;
+      border-bottom: 1px solid $white-normal;
+    }
+
+    &:target,
+    &.target {
+      border-bottom: 1px solid $white-normal;
+
+      &:not(:first-child) {
+        border-top: 1px solid $white-normal;
+        margin-top: -1px;
+      }
+
+      .timeline-entry-inner {
+        border-bottom: 0;
+      }
+    }
+
+    .timeline-icon {
+      @include notes-media('min', $screen-sm-min) {
+        margin-left: -$note-icon-gutter-width;
+      }
+    }
+
+    .timeline-content {
+      margin-left: $note-icon-gutter-width;
+
+      @include notes-media('min', $screen-sm-min) {
+        margin-left: 0;
+      }
+    }
+
+    &.being-posted {
+      pointer-events: none;
+      opacity: 0.5;
+
+      .dummy-avatar {
+        background-color: $kdb-border;
+        border: 1px solid darken($kdb-border, 25%);
       }
 
-      .system-note {
-        padding: 0;
+      .note-headline-light,
+      .fa-spinner {
+        margin-left: 3px;
       }
     }
 
-    &.is-editting {
+    &.note-discussion {
+      .timeline-entry-inner {
+        padding: $gl-padding 10px;
+      }
+    }
+
+    &.is-editing {
       .note-header,
       .note-text,
       .edited-text {
@@ -88,33 +121,32 @@ ul.notes {
       overflow-y: hidden;
 
       .note-text {
-        word-wrap: break-word;
         @include md-typography;
         // Reset ul style types since we're nested inside a ul already
         @include bulleted-list;
+        word-wrap: break-word;
+
         ul.task-list {
           ul:not(.task-list) {
             padding-left: 1.3em;
           }
         }
+
+        table {
+          @include markdown-table;
+        }
       }
     }
 
     .note-awards {
       .js-awards-block {
-        margin-bottom: 16px;
+        margin-top: 16px;
       }
     }
 
     .note-header {
-      padding-bottom: 8px;
-      padding-right: 20px;
 
-      @media (min-width: $screen-sm-min) {
-        padding-right: 0;
-      }
-
-      @media (max-width: $screen-xs-min) {
+      @include notes-media('max', $screen-xs-min) {
         .inline {
           display: block;
         }
@@ -143,14 +175,9 @@ ul.notes {
 
   .system-note {
     font-size: 14px;
-    padding: 0;
     clear: both;
 
-    @media (min-width: $screen-sm-min) {
-      margin-left: 65px;
-    }
-
-    .note-header {
+    .note-header-info {
       padding-bottom: 0;
     }
 
@@ -180,11 +207,25 @@ ul.notes {
       }
     }
 
-    .timeline-content {
-      padding: 14px 10px;
+    .timeline-icon {
+      float: left;
+
+      @include notes-media('min', $screen-sm-min) {
+        margin-left: 0;
+        width: auto;
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+        fill: $gray-darkest;
+        margin-top: 2px;
+      }
+    }
 
-      @media (min-width: $screen-sm-min) {
-        margin-left: 20px;
+    .timeline-content {
+      @include notes-media('min', $screen-sm-min) {
+        margin-left: 30px;
       }
     }
 
@@ -210,7 +251,7 @@ ul.notes {
       }
 
       .note-text {
-        & p:first-child {
+        p:first-child {
           display: none;
         }
 
@@ -221,11 +262,6 @@ ul.notes {
 
           ul {
             margin: 3px 0 3px 16px !important;
-
-            .gfm-commit {
-              font-family: $monospace_font;
-              font-size: 12px;
-            }
           }
 
           p:first-child {
@@ -235,7 +271,7 @@ ul.notes {
           &::after {
             content: '';
             width: 100%;
-            height: 67px;
+            height: 70px;
             position: absolute;
             left: 0;
             bottom: 0;
@@ -267,10 +303,6 @@ ul.notes {
     }
   }
 
-  .diff-header > span {
-    margin-right: 10px;
-  }
-
   .line_content {
     white-space: pre-wrap;
   }
@@ -361,16 +393,31 @@ ul.notes {
 .note-header {
   display: flex;
   justify-content: space-between;
+
+  @include notes-media('max', $screen-xs-max) {
+    flex-flow: row wrap;
+  }
 }
 
 .note-header-info {
   min-width: 0;
+  padding-bottom: 8px;
+}
+
+.system-note .note-header-info {
+  padding-bottom: 0;
+}
+
+.note-header-author-name {
+  @include notes-media('max', $screen-xs-max) {
+    display: none;
+  }
 }
 
 .note-headline-light {
   display: inline;
 
-  @media (max-width: $screen-xs-min) {
+  @include notes-media('max', $screen-xs-min) {
     display: block;
   }
 }
@@ -406,48 +453,99 @@ ul.notes {
 }
 
 .note-actions {
+  align-self: flex-start;
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
   // For PhantomJS that does not support flex
   float: right;
   margin-left: 10px;
   color: $gray-darkest;
 
-  .note-action-button {
-    margin-left: 8px;
+  @include notes-media('max', $screen-xs-max) {
+    float: none;
+    margin-left: 0;
+  }
+}
+
+.more-actions {
+  float: right; // phantomjs fallback
+  display: flex;
+  align-items: flex-end;
+
+  .tooltip {
+    white-space: nowrap;
+  }
+}
+
+.more-actions-toggle {
+  &:hover .icon,
+  &:focus .icon {
+    color: $blue-600;
+  }
+}
+
+.more-actions-dropdown {
+  width: 180px;
+  min-width: 180px;
+  margin-top: $gl-btn-padding;
+
+  li > a,
+  li > .btn {
+    color: $gl-text-color;
+    padding: $gl-btn-padding;
+    width: 100%;
+    text-align: left;
+
+    &:hover,
+    &:focus {
+      color: $gl-text-color;
+      background-color: $blue-25;
+      border-radius: $border-radius-default;
+    }
   }
 }
 
 .discussion-actions {
-  @media (max-width: $screen-md-max) {
+  @include notes-media('max', $screen-md-max) {
     float: none;
     margin-left: 0;
-
-    .note-action-button {
-      margin-left: 0;
-    }
   }
 }
 
-.note-action-button {
-  display: inline;
-  line-height: 20px;
+.note-actions-item {
+  margin-left: 15px;
+  display: flex;
+  align-items: center;
 
-  @media (min-width: $screen-sm-min) {
+  &.more-actions {
+    // compensate for narrow icon
     margin-left: 10px;
-    line-height: 24px;
   }
+}
+
+.note-action-button {
+  line-height: 1;
+  padding: 0;
+  min-width: 16px;
+  color: $gray-darkest;
 
   .fa {
-    color: $gray-darkest;
     position: relative;
-    font-size: 17px;
+    font-size: 16px;
   }
 
+
+
   svg {
     height: 16px;
     width: 16px;
-    fill: $gray-darkest;
+    top: 0;
     vertical-align: text-top;
+
+    path {
+      fill: currentColor;
+    }
   }
 
   .award-control-icon-positive,
@@ -520,15 +618,12 @@ ul.notes {
 
 .note-role {
   position: relative;
-  top: -2px;
-  display: inline-block;
-  padding-left: 4px;
-  padding-right: 4px;
+  padding: 0 7px;
   color: $notes-role-color;
   font-size: 12px;
   line-height: 20px;
   border: 1px solid $border-color;
-  border-radius: $border-radius-base;
+  border-radius: $label-border-radius;
 }
 
 
@@ -536,8 +631,14 @@ ul.notes {
  * Line note button on the side of diffs
  */
 
+.line_holder .is-over:not(.no-comment-btn) {
+  .add-diff-note {
+    opacity: 1;
+  }
+}
+
 .add-diff-note {
-  display: none;
+  opacity: 0;
   margin-top: -2px;
   border-radius: 50%;
   background: $white-light;
@@ -550,13 +651,11 @@ ul.notes {
   width: 23px;
   height: 23px;
   border: 1px solid $blue-500;
-  transition: transform .1s ease-in-out;
 
   &:hover {
     background: $blue-500;
     border-color: $blue-600;
     color: $white-light;
-    transform: scale(1.15);
   }
 
   &:active {
@@ -564,6 +663,19 @@ ul.notes {
   }
 }
 
+.discussion-body,
+.diff-file {
+  .notes .note {
+    border-bottom: 1px solid $white-normal;
+
+    .timeline-entry-inner {
+      padding-left: $gl-padding;
+      padding-right: $gl-padding;
+      border-bottom: none;
+    }
+  }
+}
+
 .diff-file {
   .is-over {
     .add-diff-note {
@@ -573,17 +685,11 @@ ul.notes {
 }
 
 .disabled-comment {
-  margin-left: -$gl-padding-top;
-  margin-right: -$gl-padding-top;
   background-color: $gray-light;
   border-radius: $border-radius-base;
   border: 1px solid $border-gray-normal;
   color: $note-disabled-comment-color;
-  line-height: 200px;
-
-  .disabled-comment-text {
-    line-height: normal;
-  }
+  padding: 90px 0;
 
   a {
     color: $gl-link-color;
@@ -591,6 +697,15 @@ ul.notes {
 }
 
 .line-resolve-all-container {
+  @include notes-media('min', $screen-sm-min) {
+    margin-right: 0;
+    padding-left: $gl-padding;
+  }
+
+  > div {
+    white-space: nowrap;
+  }
+
   .btn-group {
     margin-left: -4px;
   }
@@ -624,7 +739,7 @@ ul.notes {
 .line-resolve-all {
   vertical-align: middle;
   display: inline-block;
-  padding: 6px 10px;
+  padding: 5px 10px 6px;
   background-color: $gray-light;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
@@ -637,12 +752,16 @@ ul.notes {
 
   .line-resolve-btn {
     margin-right: 5px;
+
+    svg {
+      vertical-align: middle;
+    }
   }
 }
 
 .line-resolve-btn {
   position: relative;
-  top: 2px;
+  top: 0;
   padding: 0;
   background-color: transparent;
   border: none;
@@ -663,8 +782,8 @@ ul.notes {
 
   svg {
     fill: $gray-darkest;
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
   }
 
   .loading {
@@ -673,6 +792,10 @@ ul.notes {
   }
 }
 
+.line-resolve-text {
+  vertical-align: middle;
+}
+
 .discussion-next-btn {
   svg {
     margin: 0;
@@ -683,13 +806,12 @@ ul.notes {
   }
 }
 
+.discussion-notes .flash-container {
+  margin-bottom: 0;
+}
+
 // Merge request notes in diffs
 .diff-file {
-  // Diff is side by side
-  .notes_content.parallel .note-header .note-headline-light {
-    display: block;
-    position: relative;
-  }
   // Diff is inline
   .notes_content .note-header .note-headline-light {
     display: inline-block;