Basic UI implememntation of comments in timeline style

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/generic/timeline.scss

@@ -0,0 +1,64 @@
+.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: 25px;
+  }
+
+  .timeline-entry {
+    position: relative;
+    margin-top: 5px;
+    margin-left: 30px;
+    margin-bottom: 10px;
+    clear: both;
+
+
+    .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(4px);
+        @include box-shadow(0 0 0 3px #EEE);
+      }
+
+      .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

@@ -55,22 +55,18 @@ ul.notes {
   }
 
   .note {
-    padding: 8px 0;
-    overflow: hidden;
     display: block;
     position:relative;
-    border-bottom: 1px solid #eee;
     p { color: $style_color; }
 
     .avatar {
-      margin-top: 3px;
+      margin: 0;
     }
     .attachment {
       font-size: 14px;
     }
     .note-body {
       @include md-typography;
-      margin-left: 43px;
     }
     .note-header {
       padding-bottom: 3px;

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

@@ -1,4 +1,8 @@
-%li{ id: dom_id(note), class: dom_class(note), data: { discussion: note.discussion_id } }
+%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 s32"
+    .timeline-content
       .note-header
         .note-actions
           = link_to "##{dom_id(note)}", name: dom_id(note) do
@@ -13,7 +17,6 @@
             = 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)

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

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