Merge branch 'discussion-notes' into 'master'

Discussion notes update

- At the moment discussion notes are rendered in a list but arent actually a list item and that can cause overflow issues
- Moved the dates to be in the header like other notes
- Fixed overlapping issue on mobile

See merge request !3720

6 files changed, 24 insertions, 19 deletions

diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index b91f2f6f898..f0ec250de2b 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -39,8 +39,7 @@
   .diff-file {
     border: 1px solid $border-color;
     border-bottom: none;
-    margin-left: 0;
-    margin-right: 0;
+    margin: 0;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index ce44f5aa13b..a0fbf7d67c5 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -198,6 +198,12 @@ ul.notes {
   color: $notes-light-color;
 }
 
+.discussion-headline-light {
+  a {
+    color: $gl-link-color;
+  }
+}
+
 /**
  * Actions for Discussions/Notes
  */
@@ -209,6 +215,17 @@ ul.notes {
   color: $notes-action-color;
 }
 
+.discussion-actions {
+  @media (max-width: $screen-sm-max) {
+    float: none;
+    margin-left: 0;
+
+    .note-action-button {
+      margin-left: 0;
+    }
+  }
+}
+
 .note-action-button,
 .discussion-action-button {
   display: inline-block;
diff --git a/app/views/projects/notes/_discussion.html.haml b/app/views/projects/notes/_discussion.html.haml
index b8068835b3a..572b00a38c7 100644
--- a/app/views/projects/notes/_discussion.html.haml
+++ b/app/views/projects/notes/_discussion.html.haml
@@ -1,5 +1,5 @@
 - note = discussion_notes.first
-.timeline-entry
+%li.note.note-discussion.timeline-entry
   .timeline-entry-inner
     .timeline-icon
       = link_to user_path(note.author) do
diff --git a/app/views/projects/notes/discussions/_active.html.haml b/app/views/projects/notes/discussions/_active.html.haml
index cd8a5f0bd02..0ea8862a684 100644
--- a/app/views/projects/notes/discussions/_active.html.haml
+++ b/app/views/projects/notes/discussions/_active.html.haml
@@ -6,15 +6,11 @@
       = "#{note.author.to_reference} started a discussion"
       = link_to diffs_namespace_project_merge_request_path(note.project.namespace, note.project, note.noteable, anchor: note.line_code) do
         on the diff
+      = time_ago_with_tooltip(note.created_at, placement: "bottom", html_class: "discussion_updated_ago")
     .discussion-actions
       = link_to "#", class: "discussion-action-button discussion-toggle-button js-toggle-button" do
         %i.fa.fa-chevron-up
         Show/hide discussion
-    .last-update.hide.js-toggle-content
-      - last_note = discussion_notes.last
-      last updated by
-      = link_to_member(@project, last_note.author, avatar: false)
-      #{time_ago_with_tooltip(last_note.updated_at, placement: 'bottom', html_class: 'discussion_updated_ago')}
 
   .discussion-body.js-toggle-content
     = render "projects/notes/discussions/diff", discussion_notes: discussion_notes, note: note
diff --git a/app/views/projects/notes/discussions/_commit.html.haml b/app/views/projects/notes/discussions/_commit.html.haml
index 46f2ba4bbcf..2a2ead58eeb 100644
--- a/app/views/projects/notes/discussions/_commit.html.haml
+++ b/app/views/projects/notes/discussions/_commit.html.haml
@@ -8,21 +8,18 @@
       = "#{note.author.to_reference} started a discussion on #{commit_description}"
       - if commit
         = link_to(commit.short_id, namespace_project_commit_path(note.project.namespace, note.project, note.noteable), class: 'monospace')
+      = time_ago_with_tooltip(note.created_at, placement: "bottom", html_class: "discussion_updated_ago")
     .discussion-actions
       = link_to "#", class: "note-action-button discussion-toggle-button js-toggle-button" do
         %i.fa.fa-chevron-up
         Show/hide discussion
-    .last-update.hide.js-toggle-content
-      - last_note = discussion_notes.last
-      last updated by
-      = link_to_member(@project, last_note.author, avatar: false)
-      #{time_ago_with_tooltip(last_note.updated_at, placement: 'bottom', html_class: 'discussion_updated_ago')}
   .discussion-body.js-toggle-content
     - if note.for_diff_line?
       = render "projects/notes/discussions/diff", discussion_notes: discussion_notes, note: note
     - else
       .panel.panel-default
         .notes{ data: { discussion_id: discussion_notes.first.discussion_id } }
-          = render discussion_notes
+          %ul.notes.timeline
+            = render discussion_notes
         .discussion-reply-holder
           = link_to_reply_diff(discussion_notes.first)
diff --git a/app/views/projects/notes/discussions/_outdated.html.haml b/app/views/projects/notes/discussions/_outdated.html.haml
index f8e000b424f..45141bcd1df 100644
--- a/app/views/projects/notes/discussions/_outdated.html.haml
+++ b/app/views/projects/notes/discussions/_outdated.html.haml
@@ -5,14 +5,10 @@
     .inline.discussion-headline-light
       = "#{note.author.to_reference} started a discussion"
       on the outdated diff
+      = time_ago_with_tooltip(note.created_at, placement: "bottom", html_class: "discussion_updated_ago")
     .discussion-actions
       = link_to "#", class: "note-action-button discussion-toggle-button js-toggle-button" do
         %i.fa.fa-chevron-down
         Show/hide discussion
-    .last-update.hide.js-toggle-content
-      - last_note = discussion_notes.last
-      last updated by
-      = link_to_member(@project, last_note.author, avatar: false)
-      #{time_ago_with_tooltip(last_note.updated_at, placement: 'bottom', html_class: 'discussion_updated_ago')}
   .discussion-body.js-toggle-content.hide
     = render "projects/notes/discussions/diff", discussion_notes: discussion_notes, note: note