Redesign activity feed on dashboard and project pages

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

11 files changed, 70 insertions, 68 deletions

diff --git a/app/assets/javascripts/activities.js.coffee b/app/assets/javascripts/activities.js.coffee
index 777c62dc1b7..f1afa62f94d 100644
--- a/app/assets/javascripts/activities.js.coffee
+++ b/app/assets/javascripts/activities.js.coffee
@@ -1,7 +1,7 @@
 class @Activities
   constructor: ->
     Pager.init 20, true
-    $(".event_filter_link").bind "click", (event) =>
+    $(".event-filter .btn").bind "click", (event) =>
       event.preventDefault()
       @toggleFilter($(event.currentTarget))
       @reloadActivities()
diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss
index 56f4c794e1b..bb49ed16c8e 100644
--- a/app/assets/stylesheets/base/gl_variables.scss
+++ b/app/assets/stylesheets/base/gl_variables.scss
@@ -43,8 +43,9 @@ $font-size-base:         $gl-font-size;
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
 $padding-base-vertical:     6px;
-$padding-base-horizontal:   14px;
-
+$padding-base-horizontal:   18px;
+$component-active-color:    #fff;
+$component-active-bg:       $brand-info;
 
 //== Forms
 //
@@ -131,3 +132,10 @@ $code-bg:                     #f9f2f4;
 
 $kbd-color:                   #fff;
 $kbd-bg:                      #333;
+
+//== Buttons
+//
+//##
+$btn-default-color:              #7f8fa4;
+$btn-default-bg:                 #fff;
+$btn-default-border:             #e7e9ed;
diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss
index 81c1ab1c385..8c257c5453d 100644
--- a/app/assets/stylesheets/base/variables.scss
+++ b/app/assets/stylesheets/base/variables.scss
@@ -21,7 +21,7 @@ $fixed-layout-width: 1200px;
  */
 $gl-primary: #446e9b;
 $gl-success: #44c679;
-$gl-info: #029ACF;
+$gl-info: #00aaff;
 $gl-warning: #EB9532;
 $gl-danger: #d9534f;
 
diff --git a/app/assets/stylesheets/generic/blocks.scss b/app/assets/stylesheets/generic/blocks.scss
index 3536a68f416..1080bc1baa0 100644
--- a/app/assets/stylesheets/generic/blocks.scss
+++ b/app/assets/stylesheets/generic/blocks.scss
@@ -17,3 +17,12 @@
   font-size: 16px;
   line-height: 36px;
 }
+
+.gray-content-block {
+  margin: -15px;
+  background-color: #f8fafc;
+  padding: 18px;
+  margin-bottom: 0px;
+  border-top: 1px solid #e7e9ed;
+  border-bottom: 1px solid #e7e9ed;
+}
diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
index cd6bf64c0ae..e8237509092 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -72,3 +72,19 @@
     }
   }
 }
+
+.btn-group-next {
+  .btn {
+    padding: 9px 0px;
+    font-size: 15px;
+    color: #7f8fa4;
+    border-color: #e7e9ed;
+    width: 140px;
+
+    &.active {
+      border-color: $gl-info;
+      background: $gl-info;
+      color: #fff;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index d4af7506d5b..c570bb1e430 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -1,39 +1,13 @@
 /**
- * Events labels
- *
- */
-.event_label {
-  &.pushed {
-    padding: 0 2px;
-  }
-
-  &.opened {
-    padding: 0 2px;
-  }
-
-  &.closed {
-    padding: 0 2px;
-  }
-
-  &.merged {
-    padding: 0 2px;
-  }
-
-  &.left,
-  &.joined {
-    padding: 0 2px;
-    float: none;
-  }
-}
-
-/**
  * Dashboard events feed
  *
  */
 .event-item {
-  &:first-child {
-    padding-top: 0;
-  }
+  font-size: 16px;
+  padding: 18px;
+  margin: 0 -15px;
+  border-bottom: 1px solid #f1f2f4;
+  color: #7f8fa4;
 
   &.event-inline {
     .avatar {
@@ -42,29 +16,35 @@
     }
   }
 
-  padding: 12px 0px;
-  border-bottom: 1px solid #eee;
+  a {
+    color: #4c4e54;
+  }
+
+  .avatar {
+    margin-right: 15px;
+  }
+
   .event-title {
-    max-width: 70%;
     @include str-truncated(calc(100% - 174px));
+
+    max-width: 70%;
     font-weight: 500;
-    font-size: 14px;
+
     .author_name {
       color: #333;
     }
   }
+
   .event-body {
-    font-size: 13px;
-    margin-left: 35px;
+    margin-left: 60px;
     margin-right: 80px;
-    color: #777;
 
     .event-note {
       margin-top: 5px;
       word-wrap: break-word;
 
       .md {
-        font-size: 13px;
+        font-size: 16px;
 
         iframe.twitter-share-button {
           vertical-align: bottom;
@@ -116,7 +96,7 @@
   &:last-child { border:none }
 
   .event_commits {
-    margin-top: 5px;
+    margin-top: 9px;
 
     li {
       &.commit {
@@ -125,10 +105,12 @@
         padding-left: 0;
         border: none;
         .commit-row-title {
-          font-size: 12px;
+          font-size: 16px;
         }
       }
+
       &.commits-stat {
+        margin-top: 3px;
         display: block;
         padding: 3px;
         padding-left: 0;
@@ -142,7 +124,6 @@
 
   .event-item-timestamp {
     float: right;
-    color: #999;
     line-height: 22px;
   }
 }
@@ -186,12 +167,3 @@
     }
   }
 }
-
-.event_filter {
-  li a {
-    font-size: 13px;
-    padding: 5px 10px;
-    background: $background-color;
-    margin-left: 4px;
-  }
-}
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index 8428281f8f6..13347b6eec6 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -27,16 +27,14 @@ module EventsHelper
     key = key.to_s
     active = 'active' if @event_filter.active?(key)
     link_opts = {
-      class: 'event_filter_link',
+      class: "event-filter-link btn btn-default #{active}",
       id:    "#{key}_event_filter",
       title: "Filter by #{tooltip.downcase}",
       data:  { toggle: 'tooltip', placement: 'top' }
     }
 
-    content_tag :li, class: "filter_icon #{active}" do
-      link_to request.path, link_opts do
-        icon(icon_for_event[key]) + content_tag(:span, ' ' + tooltip)
-      end
+    link_to request.path, link_opts do
+      content_tag(:span, ' ' + tooltip)
     end
   end
 
@@ -66,7 +64,7 @@ module EventsHelper
       end
       words << "at"
     elsif event.target
-      words << "##{event.target_iid}:" 
+      words << "##{event.target_iid}:"
       words << event.target.title if event.target.respond_to?(:title)
       words << "at"
     end
diff --git a/app/views/dashboard/_activities.html.haml b/app/views/dashboard/_activities.html.haml
index 213b5d65b3c..1db56542afd 100644
--- a/app/views/dashboard/_activities.html.haml
+++ b/app/views/dashboard/_activities.html.haml
@@ -1,13 +1,13 @@
 .hidden-xs
   = render "events/event_last_push", event: @last_push
 
+.gray-content-block
   - if current_user
     %ul.nav.nav-pills.event_filter.pull-right
       %li.pull-right
         = link_to dashboard_path(:atom, { private_token: current_user.private_token }), class: 'rss-btn' do
           %i.fa.fa-rss
-
   = render 'shared/event_filter'
-  %hr
+
 .content_list
 = spinner
diff --git a/app/views/events/_event.html.haml b/app/views/events/_event.html.haml
index 0faab4458e9..3cd65edacbf 100644
--- a/app/views/events/_event.html.haml
+++ b/app/views/events/_event.html.haml
@@ -3,8 +3,8 @@
     .event-item-timestamp
       #{time_ago_with_tooltip(event.created_at)}
 
-    = cache [event, "v1"] do
-      = image_tag avatar_icon(event.author_email, 24), class: "avatar s24", alt:''
+    = cache [event, "v2"] do
+      = image_tag avatar_icon(event.author_email, 48), class: "avatar s48", alt:''
       - if event.created_project?
         = render "events/event/created_project", event: event
       - elsif event.push?
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index ee02b7f6a6c..86133768d77 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -1,5 +1,5 @@
 = render 'projects/last_push'
-.hidden-xs
+.gray-content-block
   - if current_user
     %ul.nav.nav-pills.event_filter.pull-right
       %li
@@ -7,7 +7,6 @@
           %i.fa.fa-rss
 
   = render 'shared/event_filter'
-  %hr
 .content_list{:"data-href" => activity_project_path(@project)}
 = spinner
 
diff --git a/app/views/shared/_event_filter.html.haml b/app/views/shared/_event_filter.html.haml
index 334db60690d..8495774accc 100644
--- a/app/views/shared/_event_filter.html.haml
+++ b/app/views/shared/_event_filter.html.haml
@@ -1,4 +1,4 @@
-%ul.nav.nav-pills.event_filter
+.btn-group.btn-group-next.event-filter
   = event_filter_link EventFilter.push, 'Push events'
   = event_filter_link EventFilter.merged, 'Merge events'
   = event_filter_link EventFilter.comments, 'Comments'