Working on dashboard restyle and events refactoring

app/assets/stylesheets/common.scss

@@ -185,36 +185,6 @@ span.update-author {
   }
 }
 
-.event_label {
-  @extend .label;
-  background-color: #999;
-
-  &.pushed {
-    background-color: #4A97BD;
-  }
-
-  &.opened {
-    background-color: #469847;
-  }
-
-  &.closed {
-    background-color: #B94A48;
-  }
-
-  &.merged {
-    background-color: #2A2;
-  }
-
-  &.joined {
-    background-color: #1ca9dd;
-  }
-
-  &.left {
-    background-color: #888;
-    float:none;
-  }
-}
-
 form {
   @extend .form-horizontal;
 
@@ -355,41 +325,6 @@ p.time {
   border:2px solid #ddd;
 }
 
-.event_feed {
-  min-height:40px;
-  border-bottom:1px solid #ddd;
-  .avatar {
-    width:32px;
-  }
-  .event_icon {
-    float:right;
-    margin-right:2px;
-    img {
-      width:20px;
-    }
-  }
-  ul {
-    margin-left:50px;
-    margin-bottom:5px;
-    .avatar {
-      width:24px;
-    }
-  }
-
-  padding: 15px 5px;
-  &:last-child { border:none }
-  .wll:hover { background:none }
-
-  .event_commits {
-    margin-top: 5px;
-
-    li.commit {
-      background: transparent;
-      padding:5px;
-      border:none;
-    }
-  }
-}
 
 .ico {
   background: url("images.png") no-repeat -85px -77px;
@@ -639,22 +574,6 @@ li.note {
   background:#fff;
 }
 
-/**
- * Push event widget
- *
- */
-.event_lp {
-  @extend .ui-box;
-  color:#777;
-  margin-bottom:20px;
-  padding:8px;
-  @include border-radius(4px);
-  min-height:22px;
-
-  .avatar {
-    width:24px;
-  }
-}
 
 .supp_diff_link,
 .mr_show_all_commits {

app/assets/stylesheets/gitlab_bootstrap/lists.scss

@@ -1,6 +1,6 @@
 /** LISTS **/
 
-ul { 
+ul {
   /**
    * List li block element #1
    *
@@ -18,7 +18,7 @@ ul {
     .author { color: #999; }
 
     p {
-      padding-top:5px; 
+      padding-top:5px;
       margin:0;
       color:#222;
       img {

app/assets/stylesheets/main.scss

@@ -143,6 +143,7 @@ $hover: #fdf5d9;
 @import "sections/projects.scss";
 @import "sections/merge_requests.scss";
 @import "sections/graph.scss";
+@import "sections/events.scss";
 
 /**
  * This scss file redefine chozen selectbox styles for

app/assets/stylesheets/sections/commits.scss

@@ -1,7 +1,7 @@
 .commit-box {
   @extend .main_box;
 
-  .commit-head { 
+  .commit-head {
     @extend .top_box_content;
 
     .commit-title {
@@ -29,11 +29,11 @@
 
     .sha-block {
       text-align:right;
-      &:first-child { 
+      &:first-child {
         padding-bottom:6px;
       }
 
-      a { 
+      a {
         border-bottom: 1px solid #aaa;
         margin-left: 9px;
       }
@@ -54,7 +54,7 @@
 }
 
 /**
- * 
+ *
  * COMMIT SHOw
  *
  */
@@ -71,7 +71,7 @@
     background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
     background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
 
-    span { 
+    span {
       font-size:14px;
     }
   }
@@ -111,8 +111,8 @@
       }
     }
 
-    &.img_compared { 
+    &.img_compared {
-      img { 
+      img {
         max-width:300px;
       }
     }
@@ -120,12 +120,12 @@
 }
 
 .diff_file_content{
-  table { 
+  table {
     border:none;
     margin:0px;
     padding:0px;
     tr {
-      td { 
+      td {
         font-size:12px;
       }
     }
@@ -145,29 +145,29 @@
     moz-user-select: none;
     -khtml-user-select: none;
     user-select: none;
-    a { 
+    a {
       float:left;
       width:35px;
       font-weight:normal;
       color:#666;
-      &:hover { 
+      &:hover {
         text-decoration:underline;
       }
     }
   }
-  .line_content { 
+  .line_content {
-    white-space:pre; 
+    white-space:pre;
     height:14px;
     margin:0px;
     padding:0px;
     border:none;
-    &.new { 
+    &.new {
       background: #CFD;
     }
-    &.old { 
+    &.old {
       background: #FDD;
     }
-    &.matched { 
+    &.matched {
       color:#ccc;
       background:#fafafa;
     }
@@ -182,32 +182,32 @@
 
 
 /** COMMIT ROW **/
-.commit { 
+.commit {
   @extend .wll;
 
-  .browse_code_link_holder { 
+  .browse_code_link_holder {
     @extend .span2;
     float:right;
   }
 
-  .committed_ago { 
+  .committed_ago {
     float:right;
     @extend .cgray;
   }
 
-  code { 
+  code {
     background:#FCEEC1;
     color:$style_color;
   }
 
-  .commit_short_id { 
+  .commit_short_id {
     float:left;
     @extend .lined;
     min-width:65px;
     font-family: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono','lucida console',monospace;
   }
-  
+
-  .commit-author-name { 
+  .commit-author-name {
     color: #777;
   }
 }

app/assets/stylesheets/sections/events.scss

@@ -0,0 +1,105 @@
+/**
+ * Events labels
+ *
+ */
+.event_label {
+  /*@extend .label;*/
+  /*background-color: #999;*/
+
+  /*&.pushed {*/
+    /*background-color: #4A97BD;*/
+  /*}*/
+
+  /*&.opened {*/
+    /*background-color: #469847;*/
+  /*}*/
+
+  /*&.closed {*/
+    /*background-color: #B94A48;*/
+  /*}*/
+
+  /*&.merged {*/
+    /*background-color: #2A2;*/
+  /*}*/
+
+  /*&.joined {*/
+    /*background-color: #1ca9dd;*/
+  /*}*/
+
+  /*&.left {*/
+    /*background-color: #888;*/
+    /*float:none;*/
+  /*}*/
+}
+
+/**
+ * Dashboard events feed
+ *
+ */
+.event-item {
+  min-height:40px;
+  border-bottom:1px solid #eee;
+  .event-title {
+    color:#333;
+    font-weight: bold;
+    .author_name {
+      color:#777;
+    }
+  }
+  .event-body {
+    p {
+      color:#666;
+    }
+  }
+  .avatar {
+    width:32px;
+  }
+  .event_icon {
+    float: right;
+    border: 1px solid #EEE;
+    padding: 5px;
+    @include border-radius(5px);
+    background: #F9F9F9;
+    img {
+      width:20px;
+    }
+  }
+  ul {
+    margin-left:50px;
+    margin-bottom:5px;
+    .avatar {
+      width:22px;
+    }
+  }
+
+  padding: 15px 5px;
+  &:last-child { border:none }
+  .wll:hover { background:none }
+
+  .event_commits {
+    margin-top: 5px;
+
+    li.commit {
+      background: transparent;
+      padding:5px;
+      border:none;
+    }
+  }
+}
+
+/**
+ * Push event widget
+ *
+ */
+.event_lp {
+  @extend .ui-box;
+  color:#777;
+  margin-bottom:20px;
+  padding:8px;
+  @include border-radius(4px);
+  min-height:22px;
+
+  .avatar {
+    width:24px;
+  }
+}

app/views/events/_commit.html.haml

@@ -2,7 +2,7 @@
 %li.commit
   %p
     = link_to commit.short_id(8), project_commit_path(project, id: commit.id), class: "commit_short_id"
-    %strong.cdark= commit.author_name
+    %span= commit.author_name
     –
     = image_tag gravatar_icon(commit.author_email), class: "avatar", width: 16
     = gfm escape_once(truncate(commit.title, length: 50)) rescue "--broken encoding"

app/views/events/_event.html.haml

@@ -1,17 +1,18 @@
 - if event.allowed?
-  - if event.issue?
+  %div.event-item
-    .event_feed
+    - if event.issue?
       = render "events/event_issue", event: event
 
-  - elsif event.merge_request?
+    - elsif event.merge_request?
-    .event_feed
       = render "events/event_merge_request", event: event
 
-  - elsif event.push?
+    - elsif event.push?
-    .event_feed
       = render "events/event_push", event: event
 
-  - elsif event.membership_changed?
+    - elsif event.membership_changed?
-    .event_feed
       = render "events/event_membership_changed", event: event
 
+    %span.cgray.right
+      = time_ago_in_words(event.created_at)
+      ago.
+    .clearfix

app/views/events/_event_issue.html.haml

@@ -1,11 +1,9 @@
 = image_tag gravatar_icon(event.author_email), class: "avatar"
-%strong #{event.author_name}
+.event-title
-%span.event_label{class: event.action_name}= event.action_name
+  %strong.author_name #{event.author_name}
-issue
+  %span.event_label{class: event.action_name}= event.action_name
-= link_to project_issue_path(event.project, event.issue) do
+  issue
-  %strong= truncate event.issue_title
+  = link_to project_issue_path(event.project, event.issue) do
-at
+    %strong= truncate event.issue_title
-%strong= link_to event.project.name, event.project
+  at
-%span.cgray
+  %strong= link_to event.project.name, event.project
-  = time_ago_in_words(event.created_at)
-  ago.

app/views/events/_event_membership_changed.html.haml

@@ -1,9 +1,10 @@
 = image_tag gravatar_icon(event.author_email), class: "avatar"
-%strong #{event.author_name}
+.event-title
-%span.event_label{class: event.action_name}= event.action_name
+  %strong.author_name #{event.author_name}
-project
+  %span.event_label{class: event.action_name}= event.action_name
-%strong= link_to event.project_name, event.project
+  project
-%span.cgray
+  %strong= link_to event.project_name, event.project
-  = time_ago_in_words(event.created_at)
+  %span.cgray
-  ago.
+    = time_ago_in_words(event.created_at)
+    ago.
 

app/views/events/_event_merge_request.html.haml

@@ -1,18 +1,16 @@
 - if event.action_name == "merged"
   .event_icon= image_tag "event_mr_merged.png"
 = image_tag gravatar_icon(event.author_email), class: "avatar"
-%strong #{event.author_name}
+.event-title
-%span.event_label{class: event.action_name}= event.action_name
+  %strong.author_name #{event.author_name}
-merge request
+  %span.event_label{class: event.action_name}= event.action_name
-= link_to project_merge_request_path(event.project, event.merge_request) do
+  merge request
-  %strong= truncate event.merge_request_title
+  = link_to project_merge_request_path(event.project, event.merge_request) do
-at
+    %strong= truncate event.merge_request_title
-%strong= link_to event.project.name, event.project
+  at
-%span.cgray
+  %strong= link_to event.project.name, event.project
-  = time_ago_in_words(event.created_at)
+.event-body
-  ago.
+  %span= event.merge_request.source_branch
-%br
+  →
-%span= event.merge_request.source_branch
+  %span= event.merge_request.target_branch
-→
-%span= event.merge_request.target_branch
 

app/views/events/_event_push.html.haml

@@ -1,30 +1,31 @@
 %div
   .event_icon= image_tag "event_push.png"
   = image_tag gravatar_icon(event.author_email), class: "avatar"
-  %strong #{event.author_name}
+
-  %span.event_label.pushed= event.push_action_name
+  .event-title
-  = event.ref_type
+    %strong.author_name #{event.author_name}
-  = link_to project_commits_path(event.project, ref: event.ref_name) do
+    %span.event_label.pushed= event.push_action_name
-    %strong= event.ref_name
+    = event.ref_type
-  at
+    = link_to project_commits_path(event.project, ref: event.ref_name) do
-  %strong= link_to event.project.name, event.project
+      %strong= event.ref_name
-  %span.cgray
+    at
-    = time_ago_in_words(event.created_at)
+    %strong= link_to event.project.name, event.project
-    ago.
+    - if event.push_with_commits?
+      - if event.commits_count > 1
+        = link_to compare_project_commits_path(event.project, from: event.parent_commit.id, to: event.last_commit.id) do
+          %strong #{event.parent_commit.id[0..7]}...#{event.last_commit.id[0..7]}
 
   - if event.push_with_commits?
-    - if event.commits_count > 1
-      = link_to compare_project_commits_path(event.project, from: event.parent_commit.id, to: event.last_commit.id) do
-        %strong #{event.parent_commit.id[0..7]}...#{event.last_commit.id[0..7]}
     - project = event.project
-    %ul.unstyled.event_commits
+    .event-body
-      - if event.commits_count > 3
+      %ul.unstyled.event_commits
-        - event.commits[0...2].each do |commit|
+        - if event.commits_count > 3
-          = render "events/commit", commit: commit, project: project
+          - event.commits[0...2].each do |commit|
-        %li
+            = render "events/commit", commit: commit, project: project
-          %br
+          %li
-          \... and #{event.commits_count - 2} more commits
+            %br
-      - else
+            \... and #{event.commits_count - 2} more commits
-        - event.commits.each do |commit|
+        - else
-          = render "events/commit", commit: commit, project: project
+          - event.commits.each do |commit|
-
+            = render "events/commit", commit: commit, project: project
+  .clearfix