Commit 6d1f74ab60061c5330d9478bc035f5b406a64df9
1 parent
93368ef6
Exists in
master
and in
1 other branch
Add profile info route
Showing
6 changed files
with
240 additions
and
4 deletions
Show diff stats
bower.json
@@ -19,7 +19,8 @@ | @@ -19,7 +19,8 @@ | ||
19 | "angular": "~1.4.2", | 19 | "angular": "~1.4.2", |
20 | "font-awesome": "fontawesome#~4.5.0", | 20 | "font-awesome": "fontawesome#~4.5.0", |
21 | "ngstorage": "~0.3.10", | 21 | "ngstorage": "~0.3.10", |
22 | - "bootswatch": "~3.3.6" | 22 | + "bootswatch": "~3.3.6", |
23 | + "angular-moment": "~0.10.3" | ||
23 | }, | 24 | }, |
24 | "devDependencies": { | 25 | "devDependencies": { |
25 | "angular-mocks": "~1.4.2" | 26 | "angular-mocks": "~1.4.2" |
src/app/index.module.js
@@ -2,6 +2,9 @@ | @@ -2,6 +2,9 @@ | ||
2 | 'use strict'; | 2 | 'use strict'; |
3 | 3 | ||
4 | angular | 4 | angular |
5 | - .module('angular', ['ngAnimate', 'ngCookies', 'ngStorage', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'restangular', 'ui.router', 'ui.bootstrap', 'toastr']); | 5 | + .module('angular', ['ngAnimate', 'ngCookies', 'ngStorage', 'ngTouch', |
6 | + 'ngSanitize', 'ngMessages', 'ngAria', 'restangular', | ||
7 | + 'ui.router', 'ui.bootstrap', 'toastr', | ||
8 | + 'angularMoment']); | ||
6 | 9 | ||
7 | })(); | 10 | })(); |
src/app/index.route.js
@@ -6,8 +6,6 @@ | @@ -6,8 +6,6 @@ | ||
6 | .config(routeConfig); | 6 | .config(routeConfig); |
7 | 7 | ||
8 | function routeConfig($stateProvider, $urlRouterProvider) { | 8 | function routeConfig($stateProvider, $urlRouterProvider) { |
9 | - $urlRouterProvider.when('/profile/:profile', '/:profile'); | ||
10 | - | ||
11 | $stateProvider | 9 | $stateProvider |
12 | .state('main', { | 10 | .state('main', { |
13 | url: '/', | 11 | url: '/', |
@@ -26,6 +24,12 @@ | @@ -26,6 +24,12 @@ | ||
26 | controller: 'ProfileController', | 24 | controller: 'ProfileController', |
27 | controllerAs: 'vm' | 25 | controllerAs: 'vm' |
28 | }) | 26 | }) |
27 | + .state('main.profile.info', { | ||
28 | + url: '^/profile/:profile', | ||
29 | + templateUrl: 'app/profile-info/profile-info.html', | ||
30 | + controller: 'ProfileInfoController', | ||
31 | + controllerAs: 'vm' | ||
32 | + }) | ||
29 | .state('main.profile.page', { | 33 | .state('main.profile.page', { |
30 | url: '/{page:.*}', | 34 | url: '/{page:.*}', |
31 | templateUrl: 'app/content-viewer/page.html', | 35 | templateUrl: 'app/content-viewer/page.html', |
@@ -0,0 +1,23 @@ | @@ -0,0 +1,23 @@ | ||
1 | +(function() { | ||
2 | + 'use strict'; | ||
3 | + | ||
4 | + angular | ||
5 | + .module('angular') | ||
6 | + .controller('ProfileInfoController', ProfileInfoController); | ||
7 | + | ||
8 | + | ||
9 | + /** @ngInject */ | ||
10 | + function ProfileInfoController(noosfero, $log, $stateParams, $scope, Restangular) { | ||
11 | + var vm = this; | ||
12 | + vm.profile = null; | ||
13 | + vm.activities = []; | ||
14 | + activate(); | ||
15 | + | ||
16 | + function activate() { | ||
17 | + vm.profile = $scope.vm.owner; | ||
18 | + noosfero.profiles.one(vm.profile.id).one('activities').get().then(function(result) { | ||
19 | + vm.activities = result.activities; | ||
20 | + }); | ||
21 | + } | ||
22 | + } | ||
23 | +})(); |
@@ -0,0 +1,19 @@ | @@ -0,0 +1,19 @@ | ||
1 | +<h3>{{vm.profile.name}}</h3> | ||
2 | + | ||
3 | +<div class="profile-wall"> | ||
4 | + <h4>Wall</h4> | ||
5 | + <ul class="timeline"> | ||
6 | + <li ng-class-even="'timeline-inverted'" ng-repeat="activity in vm.activities | orderBy: 'created_at':true"> | ||
7 | + <div class="timeline-badge info"><i class="fa fa-check-square-o"></i></div> | ||
8 | + <div class="timeline-panel"> | ||
9 | + <div class="timeline-heading"> | ||
10 | + <h4 class="timeline-title">{{activity.verb}}</h4> | ||
11 | + <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="activity.created_at"></span></small></p> | ||
12 | + </div> | ||
13 | + <div class="timeline-body"> | ||
14 | + <pre>{{activity}}</pre> | ||
15 | + </div> | ||
16 | + </div> | ||
17 | + </li> | ||
18 | + </ul> | ||
19 | +</div> |
@@ -0,0 +1,186 @@ | @@ -0,0 +1,186 @@ | ||
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 | + | ||
23 | + > li:before, | ||
24 | + > li:after { | ||
25 | + content: " "; | ||
26 | + display: table; | ||
27 | + } | ||
28 | + | ||
29 | + > li:after { | ||
30 | + clear: both; | ||
31 | + } | ||
32 | + | ||
33 | + > li:before, > li:after { | ||
34 | + content: " "; | ||
35 | + display: table; | ||
36 | + } | ||
37 | + | ||
38 | + > li:after { | ||
39 | + clear: both; | ||
40 | + } | ||
41 | + | ||
42 | + > li > .timeline-panel { | ||
43 | + width: 46%; | ||
44 | + float: left; | ||
45 | + border: 1px solid #d4d4d4; | ||
46 | + border-radius: 2px; | ||
47 | + padding: 20px; | ||
48 | + position: relative; | ||
49 | + -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); | ||
50 | + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); | ||
51 | + } | ||
52 | + | ||
53 | + > li > .timeline-panel:before { | ||
54 | + position: absolute; | ||
55 | + top: 26px; | ||
56 | + right: -15px; | ||
57 | + display: inline-block; | ||
58 | + border-top: 15px solid transparent; | ||
59 | + border-left: 15px solid #ccc; | ||
60 | + border-right: 0 solid #ccc; | ||
61 | + border-bottom: 15px solid transparent; | ||
62 | + content: " "; | ||
63 | + } | ||
64 | + | ||
65 | + > li > .timeline-panel:after { | ||
66 | + position: absolute; | ||
67 | + top: 27px; | ||
68 | + right: -14px; | ||
69 | + display: inline-block; | ||
70 | + border-top: 14px solid transparent; | ||
71 | + border-left: 14px solid #fff; | ||
72 | + border-right: 0 solid #fff; | ||
73 | + border-bottom: 14px solid transparent; | ||
74 | + content: " "; | ||
75 | + } | ||
76 | + | ||
77 | + > li > .timeline-badge { | ||
78 | + color: #fff; | ||
79 | + width: 50px; | ||
80 | + height: 50px; | ||
81 | + line-height: 50px; | ||
82 | + font-size: 1.4em; | ||
83 | + text-align: center; | ||
84 | + position: absolute; | ||
85 | + top: 16px; | ||
86 | + left: 50%; | ||
87 | + margin-left: -25px; | ||
88 | + background-color: #999999; | ||
89 | + z-index: 100; | ||
90 | + border-top-right-radius: 50%; | ||
91 | + border-top-left-radius: 50%; | ||
92 | + border-bottom-right-radius: 50%; | ||
93 | + border-bottom-left-radius: 50%; | ||
94 | + } | ||
95 | + | ||
96 | + > li.timeline-inverted > .timeline-panel { | ||
97 | + float: right; | ||
98 | + } | ||
99 | + | ||
100 | + > li.timeline-inverted > .timeline-panel:before { | ||
101 | + border-left-width: 0; | ||
102 | + border-right-width: 15px; | ||
103 | + left: -15px; | ||
104 | + right: auto; | ||
105 | + } | ||
106 | + | ||
107 | + > li.timeline-inverted > .timeline-panel:after { | ||
108 | + border-left-width: 0; | ||
109 | + border-right-width: 14px; | ||
110 | + left: -14px; | ||
111 | + right: auto; | ||
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 | +} |