Commit 63ba17c4 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Redesign activity feed on dashboard and project pages

Signed-off-by: default avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
parent 59d9dc44
class @Activities class @Activities
constructor: -> constructor: ->
Pager.init 20, true Pager.init 20, true
$(".event_filter_link").bind "click", (event) => $(".event-filter .btn").bind "click", (event) =>
event.preventDefault() event.preventDefault()
@toggleFilter($(event.currentTarget)) @toggleFilter($(event.currentTarget))
@reloadActivities() @reloadActivities()
......
...@@ -43,8 +43,9 @@ $font-size-base: $gl-font-size; ...@@ -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). //## 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-vertical: 6px;
$padding-base-horizontal: 14px; $padding-base-horizontal: 18px;
$component-active-color: #fff;
$component-active-bg: $brand-info;
//== Forms //== Forms
// //
...@@ -131,3 +132,10 @@ $code-bg: #f9f2f4; ...@@ -131,3 +132,10 @@ $code-bg: #f9f2f4;
$kbd-color: #fff; $kbd-color: #fff;
$kbd-bg: #333; $kbd-bg: #333;
//== Buttons
//
//##
$btn-default-color: #7f8fa4;
$btn-default-bg: #fff;
$btn-default-border: #e7e9ed;
...@@ -21,7 +21,7 @@ $fixed-layout-width: 1200px; ...@@ -21,7 +21,7 @@ $fixed-layout-width: 1200px;
*/ */
$gl-primary: #446e9b; $gl-primary: #446e9b;
$gl-success: #44c679; $gl-success: #44c679;
$gl-info: #029ACF; $gl-info: #00aaff;
$gl-warning: #EB9532; $gl-warning: #EB9532;
$gl-danger: #d9534f; $gl-danger: #d9534f;
......
...@@ -17,3 +17,12 @@ ...@@ -17,3 +17,12 @@
font-size: 16px; font-size: 16px;
line-height: 36px; 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;
}
...@@ -72,3 +72,19 @@ ...@@ -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;
}
}
}
/**
* 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 * Dashboard events feed
* *
*/ */
.event-item { .event-item {
&:first-child { font-size: 16px;
padding-top: 0; padding: 18px;
} margin: 0 -15px;
border-bottom: 1px solid #f1f2f4;
color: #7f8fa4;
&.event-inline { &.event-inline {
.avatar { .avatar {
...@@ -42,29 +16,35 @@ ...@@ -42,29 +16,35 @@
} }
} }
padding: 12px 0px; a {
border-bottom: 1px solid #eee; color: #4c4e54;
}
.avatar {
margin-right: 15px;
}
.event-title { .event-title {
max-width: 70%;
@include str-truncated(calc(100% - 174px)); @include str-truncated(calc(100% - 174px));
max-width: 70%;
font-weight: 500; font-weight: 500;
font-size: 14px;
.author_name { .author_name {
color: #333; color: #333;
} }
} }
.event-body { .event-body {
font-size: 13px; margin-left: 60px;
margin-left: 35px;
margin-right: 80px; margin-right: 80px;
color: #777;
.event-note { .event-note {
margin-top: 5px; margin-top: 5px;
word-wrap: break-word; word-wrap: break-word;
.md { .md {
font-size: 13px; font-size: 16px;
iframe.twitter-share-button { iframe.twitter-share-button {
vertical-align: bottom; vertical-align: bottom;
...@@ -116,7 +96,7 @@ ...@@ -116,7 +96,7 @@
&:last-child { border:none } &:last-child { border:none }
.event_commits { .event_commits {
margin-top: 5px; margin-top: 9px;
li { li {
&.commit { &.commit {
...@@ -125,10 +105,12 @@ ...@@ -125,10 +105,12 @@
padding-left: 0; padding-left: 0;
border: none; border: none;
.commit-row-title { .commit-row-title {
font-size: 12px; font-size: 16px;
} }
} }
&.commits-stat { &.commits-stat {
margin-top: 3px;
display: block; display: block;
padding: 3px; padding: 3px;
padding-left: 0; padding-left: 0;
...@@ -142,7 +124,6 @@ ...@@ -142,7 +124,6 @@
.event-item-timestamp { .event-item-timestamp {
float: right; float: right;
color: #999;
line-height: 22px; line-height: 22px;
} }
} }
...@@ -186,12 +167,3 @@ ...@@ -186,12 +167,3 @@
} }
} }
} }
.event_filter {
li a {
font-size: 13px;
padding: 5px 10px;
background: $background-color;
margin-left: 4px;
}
}
...@@ -27,16 +27,14 @@ module EventsHelper ...@@ -27,16 +27,14 @@ module EventsHelper
key = key.to_s key = key.to_s
active = 'active' if @event_filter.active?(key) active = 'active' if @event_filter.active?(key)
link_opts = { link_opts = {
class: 'event_filter_link', class: "event-filter-link btn btn-default #{active}",
id: "#{key}_event_filter", id: "#{key}_event_filter",
title: "Filter by #{tooltip.downcase}", title: "Filter by #{tooltip.downcase}",
data: { toggle: 'tooltip', placement: 'top' } data: { toggle: 'tooltip', placement: 'top' }
} }
content_tag :li, class: "filter_icon #{active}" do
link_to request.path, link_opts do link_to request.path, link_opts do
icon(icon_for_event[key]) + content_tag(:span, ' ' + tooltip) content_tag(:span, ' ' + tooltip)
end
end end
end end
......
.hidden-xs .hidden-xs
= render "events/event_last_push", event: @last_push = render "events/event_last_push", event: @last_push
.gray-content-block
- if current_user - if current_user
%ul.nav.nav-pills.event_filter.pull-right %ul.nav.nav-pills.event_filter.pull-right
%li.pull-right %li.pull-right
= link_to dashboard_path(:atom, { private_token: current_user.private_token }), class: 'rss-btn' do = link_to dashboard_path(:atom, { private_token: current_user.private_token }), class: 'rss-btn' do
%i.fa.fa-rss %i.fa.fa-rss
= render 'shared/event_filter' = render 'shared/event_filter'
%hr
.content_list .content_list
= spinner = spinner
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
.event-item-timestamp .event-item-timestamp
#{time_ago_with_tooltip(event.created_at)} #{time_ago_with_tooltip(event.created_at)}
= cache [event, "v1"] do = cache [event, "v2"] do
= image_tag avatar_icon(event.author_email, 24), class: "avatar s24", alt:'' = image_tag avatar_icon(event.author_email, 48), class: "avatar s48", alt:''
- if event.created_project? - if event.created_project?
= render "events/event/created_project", event: event = render "events/event/created_project", event: event
- elsif event.push? - elsif event.push?
......
= render 'projects/last_push' = render 'projects/last_push'
.hidden-xs .gray-content-block
- if current_user - if current_user
%ul.nav.nav-pills.event_filter.pull-right %ul.nav.nav-pills.event_filter.pull-right
%li %li
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
%i.fa.fa-rss %i.fa.fa-rss
= render 'shared/event_filter' = render 'shared/event_filter'
%hr
.content_list{:"data-href" => activity_project_path(@project)} .content_list{:"data-href" => activity_project_path(@project)}
= spinner = spinner
......
%ul.nav.nav-pills.event_filter .btn-group.btn-group-next.event-filter
= event_filter_link EventFilter.push, 'Push events' = event_filter_link EventFilter.push, 'Push events'
= event_filter_link EventFilter.merged, 'Merge events' = event_filter_link EventFilter.merged, 'Merge events'
= event_filter_link EventFilter.comments, 'Comments' = event_filter_link EventFilter.comments, 'Comments'
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment