Download as
Browse Code »

Commit 016d2889b590389f62d4cdcb1b34ca735297e4b1

Authored by Victor Costa
1 parent aa8711cd
Exists in master and in 38 other branches activities_block, angular2, btn-new-post, cleaning-the-house, cosmetic_changes_people_and_communities_block, coverage, edit-blocks, edit-header-footer, env-tags-block, forgot_password, header_and_footer, helpers-evolution, layout_support, list_articles_on_blog, loading-indicator-component, login_modal, login_modal_improve, person_info_block, production, profile-article-resolvers, profile-blocks-sass, profile-view, profile_description_block_component, profile_page_improvements, profile_search, recent-activities, remove-article-confirmation, responsive-fixes, seo, signup_page, skin-small-change, staging, tags-block, theme-skin-yellow, translations, typescript, updated_signup_page, users_profile_page

Use angular timeline module

Showing 7 changed files with 32 additions and 210 deletions   Show diff stats
bower.json
  Diff comments   View file @016d288
... ... @@ -23,7 +23,8 @@
23 23 "angular-moment": "~0.10.3",
24 24 "lodash": "3.10.1",
25 25 "angular-filter": "~0.5.8",
26   - "angular-deckgrid": "~0.5.0"
  26 + "angular-deckgrid": "~0.5.0",
  27 + "angular-timeline": "~1.6.2"
27 28 },
28 29 "devDependencies": {
29 30 "angular-mocks": "~1.4.2"
... ...
src/app/components/noosfero-activities/activities.html
  Diff comments   View file @016d288
1   -<ul class="timeline">
2   - <li ng-class-even="'timeline-inverted'" ng-repeat="activity in activities | orderBy: 'created_at':true">
  1 +<timeline>
  2 + <timeline-event ng-repeat="activity in activities | orderBy: 'created_at':true"
  3 + when-visible="animateElementIn" when-not-visible="animateElementOut">
3 4 <noosfero-activity activity="activity"></noosfero-activity>
4   - </li>
5   -</ul>
  5 + </timeline-event>
  6 +</timeline>
... ...
src/app/components/noosfero-activities/activities.scss
  Diff comments   View file @016d288
1   -//http://bootsnipp.com/snippets/featured/timeline-responsive
2   -.timeline {
3   - list-style: none;
4   - padding: 20px 0 20px;
5   - position: relative;
6   -
7   - &:before {
8   - top: 0;
9   - bottom: 0;
10   - position: absolute;
11   - content: " ";
12   - width: 3px;
13   - background-color: #eeeeee;
14   - left: 50%;
15   - margin-left: -1.5px;
16   - }
17   -
18   - > li {
19   - margin-bottom: 20px;
20   - position: relative;
21   -
22   - &:before,
23   - &:after {
24   - content: " ";
25   - display: table;
26   - }
27   -
28   - &:after {
29   - clear: both;
30   - }
31   -
32   - &:before, &:after {
33   - content: " ";
34   - display: table;
35   - }
36   -
37   - &:after {
38   - clear: both;
39   - }
40   -
41   - .timeline-panel {
42   - width: 46%;
43   - float: left;
44   - border: 1px solid #d4d4d4;
45   - border-radius: 2px;
46   - padding: 20px;
47   - position: relative;
48   - -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
49   - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
50   - }
51   -
52   - .timeline-panel:before {
53   - position: absolute;
54   - top: 26px;
55   - right: -15px;
56   - display: inline-block;
57   - border-top: 15px solid transparent;
58   - border-left: 15px solid #ccc;
59   - border-right: 0 solid #ccc;
60   - border-bottom: 15px solid transparent;
61   - content: " ";
62   - }
63   -
64   - .timeline-panel:after {
65   - position: absolute;
66   - top: 27px;
67   - right: -14px;
68   - display: inline-block;
69   - border-top: 14px solid transparent;
70   - border-left: 14px solid #fff;
71   - border-right: 0 solid #fff;
72   - border-bottom: 14px solid transparent;
73   - content: " ";
74   - }
75   -
76   - .timeline-badge {
77   - color: #fff;
78   - width: 50px;
79   - height: 50px;
80   - line-height: 50px;
81   - font-size: 1.4em;
82   - text-align: center;
83   - position: absolute;
84   - top: 16px;
85   - left: 50%;
86   - margin-left: -25px;
87   - background-color: #999999;
88   - z-index: 100;
89   - border-top-right-radius: 50%;
90   - border-top-left-radius: 50%;
91   - border-bottom-right-radius: 50%;
92   - border-bottom-left-radius: 50%;
93   - }
94   -
95   - &.timeline-inverted .timeline-panel {
96   - float: right;
97   - }
98   -
99   - &.timeline-inverted .timeline-panel:before {
100   - border-left-width: 0;
101   - border-right-width: 15px;
102   - left: -15px;
103   - right: auto;
104   - }
105   -
106   - &.timeline-inverted .timeline-panel:after {
107   - border-left-width: 0;
108   - border-right-width: 14px;
109   - left: -14px;
110   - right: auto;
111   - }
112   - }
113   -
114   - .timeline-badge.primary {
115   - background-color: #2e6da4;
116   - }
117   -
118   - .timeline-badge.success {
119   - background-color: #3f903f;
120   - }
121   -
122   - .timeline-badge.warning {
123   - background-color: #f0ad4e;
124   - }
125   -
126   - .timeline-badge.danger {
127   - background-color: #d9534f;
128   - }
129   -
130   - .timeline-badge.info {
131   - background-color: #5bc0de;
132   - }
133   -
134   - .timeline-title {
135   - margin-top: 0;
136   - color: inherit;
137   - }
138   -
139   - .timeline-body > p,
140   - .timeline-body > ul {
141   - margin-bottom: 0;
142   - }
143   -
144   - .timeline-body > p + p {
145   - margin-top: 5px;
146   - }
147   -
148   - @media (max-width: 767px) {
149   -
150   - &:before {
151   - left: 40px;
152   - }
153   -
154   - > li {
155   - .timeline-panel {
156   - width: calc(100% - 90px);
157   - width: -moz-calc(100% - 90px);
158   - width: -webkit-calc(100% - 90px);
159   - }
160   -
161   - .timeline-badge {
162   - left: 15px;
163   - margin-left: 0;
164   - top: 16px;
165   - }
166   -
167   - .timeline-panel {
168   - float: right;
169   - }
170   -
171   - .timeline-panel:before {
172   - border-left-width: 0;
173   - border-right-width: 15px;
174   - left: -15px;
175   - right: auto;
176   - }
177   -
178   - .timeline-panel:after {
179   - border-left-width: 0;
180   - border-right-width: 14px;
181   - left: -14px;
182   - right: auto;
183   - }
184   - }
185   - }
186   -}
187   -
188 1 .comma-separated {
189 2 .separated-item {
190 3 &:after {
... ...
src/app/components/noosfero-activities/activity/add_member_in_community.html
  Diff comments   View file @016d288
1   -<div class="timeline-badge info"><i class="fa fa-user-plus"></i></div>
2   -<div class="timeline-panel">
3   - <div class="timeline-heading">
  1 +<timeline-badge class="info">
  2 + <i class="fa fa-user-plus"></i>
  3 +</timeline-badge>
  4 +<timeline-panel>
  5 + <timeline-heading>
4 6 <h4 class="timeline-title">
5 7 <a ui-sref="main.profile.info({profile: vm.activity.user.identifier})"><strong ng-bind="vm.activity.user.name"></strong></a>
6 8 <span> has joined the community</span>
7 9 </h4>
8 10 <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="vm.activity.created_at"></span></small></p>
9   - </div>
  11 + </timeline-heading>
10 12 <div class="timeline-body"></div>
11   -</div>
  13 +</timeline-panel>
... ...
src/app/components/noosfero-activities/activity/create_article.html
  Diff comments   View file @016d288
1   -<div class="timeline-badge success"><i class="fa fa-file-text"></i></div>
2   -<div class="timeline-panel">
3   - <div class="timeline-heading">
  1 +<timeline-badge class="success">
  2 + <i class="fa fa-file-text"></i>
  3 +</timeline-badge>
  4 +<timeline-panel>
  5 + <timeline-heading>
4 6 <h4 class="timeline-title">
5   - <a ui-sref="main.profile({profile: vm.activity.user.identifier})"><strong ng-bind="vm.activity.user.name"></strong></a>
  7 + <a ui-sref="main.profile.info({profile: vm.activity.user.identifier})"><strong ng-bind="vm.activity.user.name"></strong></a>
6 8 <span> has published on </span>
7   - <a ui-sref="main.profile({profile: vm.activity.target.article.profile.identifier})">
  9 + <a ui-sref="main.profile.info({profile: vm.activity.target.article.profile.identifier})">
8 10 <strong ng-bind="vm.activity.target.article.profile.name"></strong></span>
9 11 </a>
10 12 </h4>
11 13 <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="vm.activity.created_at"></span></small></p>
12   - </div>
  14 + </timeline-heading>
13 15 <div class="timeline-body">
14 16 <div class="article">
15 17 <div class="title">
... ... @@ -21,4 +23,4 @@
21 23 </div>
22 24 </div>
23 25 </div>
24   -</div>
  26 +</timeline-panel>
... ...
src/app/components/noosfero-activities/activity/new_friendship.html
  Diff comments   View file @016d288
1   -<div class="timeline-badge info"><i class="fa fa-user-plus"></i></div>
2   -<div class="timeline-panel">
3   - <div class="timeline-heading">
  1 +<timeline-badge class="info">
  2 + <i class="fa fa-user-plus"></i>
  3 +</timeline-badge>
  4 +<timeline-panel>
  5 + <timeline-heading>
4 6 <h4 class="timeline-title">
5 7 <a ui-sref="main.profile.info({profile: vm.activity.user.identifier})"><strong ng-bind="vm.activity.user.name"></strong></a>
6 8 <span> has made <span ng-bind="vm.activity.params.friend_name.length"></span> new friend(s): </span>
... ... @@ -11,6 +13,6 @@
11 13 </span>
12 14 </h4>
13 15 <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="vm.activity.created_at"></span></small></p>
14   - </div>
  16 + </timeline-heading>
15 17 <div class="timeline-body"></div>
16   -</div>
  18 +</timeline-panel>
... ...
src/app/index.module.js
  Diff comments   View file @016d288
... ... @@ -5,6 +5,7 @@
5 5 .module('angular', ['ngAnimate', 'ngCookies', 'ngStorage', 'ngTouch',
6 6 'ngSanitize', 'ngMessages', 'ngAria', 'restangular',
7 7 'ui.router', 'ui.bootstrap', 'toastr',
8   - 'angularMoment', 'angular.filter', 'akoenig.deckgrid']);
  8 + 'angularMoment', 'angular.filter', 'akoenig.deckgrid',
  9 + 'angular-timeline']);
9 10  
10 11 })();
... ...