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
@@ -23,7 +23,8 @@ @@ -23,7 +23,8 @@
23 "angular-moment": "~0.10.3", 23 "angular-moment": "~0.10.3",
24 "lodash": "3.10.1", 24 "lodash": "3.10.1",
25 "angular-filter": "~0.5.8", 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 "devDependencies": { 29 "devDependencies": {
29 "angular-mocks": "~1.4.2" 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 <noosfero-activity activity="activity"></noosfero-activity> 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 .comma-separated { 1 .comma-separated {
189 .separated-item { 2 .separated-item {
190 &:after { 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 <h4 class="timeline-title"> 6 <h4 class="timeline-title">
5 <a ui-sref="main.profile.info({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 <span> has joined the community</span> 8 <span> has joined the community</span>
7 </h4> 9 </h4>
8 <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="vm.activity.created_at"></span></small></p> 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 <div class="timeline-body"></div> 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 <h4 class="timeline-title"> 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 <span> has published on </span> 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 <strong ng-bind="vm.activity.target.article.profile.name"></strong></span> 10 <strong ng-bind="vm.activity.target.article.profile.name"></strong></span>
9 </a> 11 </a>
10 </h4> 12 </h4>
11 <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="vm.activity.created_at"></span></small></p> 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 <div class="timeline-body"> 15 <div class="timeline-body">
14 <div class="article"> 16 <div class="article">
15 <div class="title"> 17 <div class="title">
@@ -21,4 +23,4 @@ @@ -21,4 +23,4 @@
21 </div> 23 </div>
22 </div> 24 </div>
23 </div> 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 <h4 class="timeline-title"> 6 <h4 class="timeline-title">
5 <a ui-sref="main.profile.info({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 <span> has made <span ng-bind="vm.activity.params.friend_name.length"></span> new friend(s): </span> 8 <span> has made <span ng-bind="vm.activity.params.friend_name.length"></span> new friend(s): </span>
@@ -11,6 +13,6 @@ @@ -11,6 +13,6 @@
11 </span> 13 </span>
12 </h4> 14 </h4>
13 <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="vm.activity.created_at"></span></small></p> 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 <div class="timeline-body"></div> 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,6 +5,7 @@
5 .module('angular', ['ngAnimate', 'ngCookies', 'ngStorage', 'ngTouch', 5 .module('angular', ['ngAnimate', 'ngCookies', 'ngStorage', 'ngTouch',
6 'ngSanitize', 'ngMessages', 'ngAria', 'restangular', 6 'ngSanitize', 'ngMessages', 'ngAria', 'restangular',
7 'ui.router', 'ui.bootstrap', 'toastr', 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 })();