Download as
Browse Code »

Commit 6d1f74ab60061c5330d9478bc035f5b406a64df9

Authored by Victor Costa
1 parent 93368ef6
Exists in master and in 1 other branch dev-fixes

Add profile info route

Showing 6 changed files with 240 additions and 4 deletions   Show diff stats
bower.json
  Diff comments   View file @6d1f74a
... ... @@ -19,7 +19,8 @@
19 19 "angular": "~1.4.2",
20 20 "font-awesome": "fontawesome#~4.5.0",
21 21 "ngstorage": "~0.3.10",
22   - "bootswatch": "~3.3.6"
  22 + "bootswatch": "~3.3.6",
  23 + "angular-moment": "~0.10.3"
23 24 },
24 25 "devDependencies": {
25 26 "angular-mocks": "~1.4.2"
... ...
src/app/index.module.js
  Diff comments   View file @6d1f74a
... ... @@ -2,6 +2,9 @@
2 2 'use strict';
3 3  
4 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
  Diff comments   View file @6d1f74a
... ... @@ -6,8 +6,6 @@
6 6 .config(routeConfig);
7 7  
8 8 function routeConfig($stateProvider, $urlRouterProvider) {
9   - $urlRouterProvider.when('/profile/:profile', '/:profile');
10   -
11 9 $stateProvider
12 10 .state('main', {
13 11 url: '/',
... ... @@ -26,6 +24,12 @@
26 24 controller: 'ProfileController',
27 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 33 .state('main.profile.page', {
30 34 url: '/{page:.*}',
31 35 templateUrl: 'app/content-viewer/page.html',
... ...
src/app/profile-info/profile-info.controller.js 0 → 100644
  Diff comments   View file @6d1f74a
... ... @@ -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 +})();
... ...
src/app/profile-info/profile-info.html 0 → 100644
  Diff comments   View file @6d1f74a
... ... @@ -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>
... ...
src/app/profile-info/profile-info.scss 0 → 100644
  Diff comments   View file @6d1f74a
... ... @@ -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 +}
... ...