Merge branch 'notes-timeline' into 'master'

Notes timeline

Fixes #1496

![Screenshot 2014-08-26 09.55.27](https://dev.gitlab.org/uploads/gitlab/gitlabhq/07f0eafa78/Screenshot_2014-08-26_09.55.27.png)

See merge request !1023

app/assets/stylesheets/generic/timeline.scss

+.timeline {
+  list-style: none;
+  padding: 20px 0 20px;
+  position: relative;
+
+  &:before {
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    content: " ";
+    width: 3px;
+    background-color: #eeeeee;
+    margin-left: 29px;
+  }
+
+  .timeline-entry {
+    position: relative;
+    margin-top: 5px;
+    margin-left: 30px;
+    margin-bottom: 10px;
+    clear: both;
+
+
+    &:target {
+      .timeline-entry-inner .timeline-content {
+        -webkit-animation:target-note 2s linear;
+        background: $hover;
+      }
+    }
+
+    .timeline-entry-inner {
+      position: relative;
+      margin-left: -20px;
+
+      &:before, &:after {
+        content: " ";
+        display: table;
+      }
+
+      .timeline-icon {
+        margin-top: 2px;
+        background: #fff;
+        color: #737881;
+        float: left;
+        @include border-radius(40px);
+        @include box-shadow(0 0 0 3px #EEE);
+        overflow: hidden;
+
+        .avatar {
+          margin: 0;
+          padding: 0;
+        }
+      }
+
+      .timeline-content {
+        position: relative;
+        background: #f5f5f6;
+        padding: 10px 15px;
+        margin-left: 60px;
+
+        &:after {
+          content: '';
+          display: block;
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-width: 9px 9px 9px 0;
+          border-color: transparent #f5f5f6 transparent transparent;
+          left: 0;
+          top: 10px;
+          margin-left: -9px;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/sections/notes.scss

@@ -17,7 +17,6 @@ ul.notes {
   .discussion-header,
   .note-header {
     @extend .cgray;
-    padding-top: 5px;
     padding-bottom: 15px;
 
     .avatar {
@@ -43,34 +42,20 @@ ul.notes {
   }
 
   .discussion {
-    padding: 10px 0;
     overflow: hidden;
     display: block;
     position:relative;
-    border-bottom: 1px solid #EEE;
-
-    .discussion-body {
-      margin-left: 50px;
-    }
   }
 
   .note {
-    padding: 8px 0;
-    overflow: hidden;
     display: block;
     position:relative;
-    border-bottom: 1px solid #eee;
     p { color: $style_color; }
-
-    .avatar {
-      margin-top: 3px;
-    }
     .attachment {
       font-size: 14px;
     }
     .note-body {
       @include md-typography;
-      margin-left: 43px;
     }
     .note-header {
       padding-bottom: 3px;
@@ -80,11 +65,6 @@ ul.notes {
       border-bottom: none;
     }
   }
-
-  .note:target {
-    -webkit-animation:target-note 2s linear;
-    background: #fffff0;
-  }
 }
 
 .diff-file .notes_holder {
@@ -99,7 +79,7 @@ ul.notes {
     &.notes_line {
       text-align: center;
       padding: 10px 0;
-      background: #eee;
+      background: #FFF;
     }
     &.notes_line2 {
       text-align: center;
@@ -362,3 +342,7 @@ ul.notes {
     border-top: 1px solid #DDD;
   }
 }
+
+.discussion-notes-count {
+  font-size: 16px;
+}

app/views/projects/notes/_diff_notes_with_reply.html.haml

@@ -3,7 +3,7 @@
 - if !defined?(line) || line == note.diff_line
   %tr.notes_holder
     %td.notes_line{ colspan: 2 }
-      %span.btn.disabled
+      %span.discussion-notes-count
         %i.icon-comment
         = notes.count
     %td.notes_content

app/views/projects/notes/_discussion.html.haml

 - note = discussion_notes.first
-- if note.for_merge_request?
-  - if note.outdated?
-    = render "projects/notes/discussions/outdated", discussion_notes: discussion_notes
-  - else
-    = render "projects/notes/discussions/active", discussion_notes: discussion_notes
-- else
-  = render "projects/notes/discussions/commit", discussion_notes: discussion_notes
+.timeline-entry
+  .timeline-entry-inner
+    .timeline-icon
+      = image_tag avatar_icon(note.author_email), class: "avatar s40"
+    .timeline-content
+      - if note.for_merge_request?
+        - if note.outdated?
+          = render "projects/notes/discussions/outdated", discussion_notes: discussion_notes
+        - else
+          = render "projects/notes/discussions/active", discussion_notes: discussion_notes
+      - else
+        = render "projects/notes/discussions/commit", discussion_notes: discussion_notes

app/views/projects/notes/_note.html.haml

-%li{ id: dom_id(note), class: dom_class(note), data: { discussion: note.discussion_id } }
-  .note-header
-    .note-actions
-      = link_to "##{dom_id(note)}", name: dom_id(note) do
-        %i.icon-link
-        Link here
-       
-      - if(note.author_id == current_user.try(:id)) || can?(current_user, :admin_note, @project)
-        = link_to "#", title: "Edit comment", class: "js-note-edit" do
-          %i.icon-edit
-          Edit
-         
-        = link_to project_note_path(@project, note), title: "Remove comment", method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: "danger js-note-delete" do
-          %i.icon-trash.cred
-          Remove
-    = image_tag avatar_icon(note.author_email), class: "avatar s32"
-    = link_to_member(@project, note.author, avatar: false)
-    %span.note-last-update
-      = note_timestamp(note)
+%li.timeline-entry{ id: dom_id(note), class: dom_class(note), data: { discussion: note.discussion_id } }
+  .timeline-entry-inner
+    .timeline-icon
+      = image_tag avatar_icon(note.author_email), class: "avatar s40"
+    .timeline-content
+      .note-header
+        .note-actions
+          = link_to "##{dom_id(note)}", name: dom_id(note) do
+            %i.icon-link
+            Link here
+           
+          - if(note.author_id == current_user.try(:id)) || can?(current_user, :admin_note, @project)
+            = link_to "#", title: "Edit comment", class: "js-note-edit" do
+              %i.icon-edit
+              Edit
+             
+            = link_to project_note_path(@project, note), title: "Remove comment", method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: "danger js-note-delete" do
+              %i.icon-trash.cred
+              Remove
+        = link_to_member(@project, note.author, avatar: false)
+        %span.note-last-update
+          = note_timestamp(note)
 
-    - if note.upvote?
-      %span.vote.upvote.label.label-success
-        %i.icon-thumbs-up
-        \+1
-    - if note.downvote?
-      %span.vote.downvote.label.label-danger
-        %i.icon-thumbs-down
-        \-1
+        - if note.upvote?
+          %span.vote.upvote.label.label-success
+            %i.icon-thumbs-up
+            \+1
+        - if note.downvote?
+          %span.vote.downvote.label.label-danger
+            %i.icon-thumbs-down
+            \-1
 
 
-  .note-body
-    .note-text
-      = preserve do
-        = markdown(note.note, {no_header_anchors: true})
+      .note-body
+        .note-text
+          = preserve do
+            = markdown(note.note, {no_header_anchors: true})
 
-    .note-edit-form
-      = form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f|
-        = f.text_area :note, class: 'note_text js-note-text js-gfm-input turn-on'
+        .note-edit-form
+          = form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f|
+            = f.text_area :note, class: 'note_text js-note-text js-gfm-input turn-on'
 
-        .form-actions.clearfix
-          = f.submit 'Save changes', class: "btn btn-primary btn-save js-comment-button"
+            .form-actions.clearfix
+              = f.submit 'Save changes', class: "btn btn-primary btn-save js-comment-button"
 
-          .note-form-option
-            %a.choose-btn.btn.js-choose-note-attachment-button
-              %i.icon-paper-clip
-              %span Choose File ...
-             
-            %span.file_name.js-attachment-filename File name...
-            = f.file_field :attachment, class: "js-note-attachment-input hidden"
+              .note-form-option
+                %a.choose-btn.btn.js-choose-note-attachment-button
+                  %i.icon-paper-clip
+                  %span Choose File ...
+                 
+                %span.file_name.js-attachment-filename File name...
+                = f.file_field :attachment, class: "js-note-attachment-input hidden"
 
-          = link_to  'Cancel', "#", class: "btn btn-cancel note-edit-cancel"
+              = link_to  'Cancel', "#", class: "btn btn-cancel note-edit-cancel"
 
 
-  - if note.attachment.url
-    .note-attachment
-      - if note.attachment.image?
-        = link_to note.attachment.secure_url, target: '_blank' do
-          = image_tag note.attachment.secure_url, class: 'note-image-attach'
-      .attachment.pull-right
-        = link_to note.attachment.secure_url, target: "_blank" do
-          %i.icon-paper-clip
-          = note.attachment_identifier
-          = link_to delete_attachment_project_note_path(@project, note),
-            title: "Delete this attachment", method: :delete, remote: true, data: { confirm: 'Are you sure you want to remove the attachment?' }, class: "danger js-note-attachment-delete" do
-            %i.icon-trash.cred
-  .clear
+      - if note.attachment.url
+        .note-attachment
+          - if note.attachment.image?
+            = link_to note.attachment.secure_url, target: '_blank' do
+              = image_tag note.attachment.secure_url, class: 'note-image-attach'
+          .attachment.pull-right
+            = link_to note.attachment.secure_url, target: "_blank" do
+              %i.icon-paper-clip
+              = note.attachment_identifier
+              = link_to delete_attachment_project_note_path(@project, note),
+                title: "Delete this attachment", method: :delete, remote: true, data: { confirm: 'Are you sure you want to remove the attachment?' }, class: "danger js-note-attachment-delete" do
+                %i.icon-trash.cred
+      .clear

app/views/projects/notes/_notes_with_form.html.haml

-%ul#notes-list.notes.main-notes-list
+%ul#notes-list.notes.main-notes-list.timeline
   = render "projects/notes/notes"
 .js-notes-busy
 

app/views/projects/notes/discussions/_active.html.haml

@@ -5,7 +5,6 @@
       = link_to "#", class: "js-toggle-button" do
         %i.icon-chevron-up
         Show/hide discussion
-    = image_tag avatar_icon(note.author_email), class: "avatar s32"
     %div
       = link_to_member(@project, note.author, avatar: false)
       started a discussion

app/views/projects/notes/discussions/_commit.html.haml

@@ -5,7 +5,6 @@
       = link_to "#", class: "js-toggle-button" do
         %i.icon-chevron-up
         Show/hide discussion
-    = image_tag avatar_icon(note.author_email), class: "avatar s32"
     %div
       = link_to_member(@project, note.author, avatar: false)
       started a discussion on commit

app/views/projects/notes/discussions/_outdated.html.haml

@@ -5,7 +5,6 @@
       = link_to "#", class: "js-toggle-button" do
         %i.icon-chevron-down
         Show/hide discussion
-    = image_tag avatar_icon(note.author_email), class: "avatar s32"
     %div
       = link_to_member(@project, note.author, avatar: false)
       started a discussion on the