Download as
Browse Code »

Commit 2da0cfa33a328b04f81b55ec791b565e8f29930a

Authored by Victor Costa
1 parent 6d1f74ab
Exists in master and in 1 other branch dev-fixes

Add activities directive

Showing 7 changed files with 246 additions and 201 deletions   Show diff stats
src/app/components/noosfero-activities/activities.directive.js 0 → 100644
  Diff comments   View file @2da0cfa
@@ -0,0 +1,20 @@ @@ -0,0 +1,20 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('angular')
  6 + .directive('noosferoActivities', noosferoActivities);
  7 +
  8 + /** @ngInject */
  9 + function noosferoActivities($compile) {
  10 + var directive = {
  11 + restrict: 'E',
  12 + scope: {
  13 + activities: '=',
  14 + },
  15 + templateUrl: 'app/components/noosfero-activities/activities.html'
  16 + };
  17 + return directive;
  18 + }
  19 +
  20 +})();
src/app/components/noosfero-activities/activities.html 0 → 100644
  Diff comments   View file @2da0cfa
@@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
  1 +<ul class="timeline">
  2 + <li ng-class-even="'timeline-inverted'" ng-repeat="activity in activities | orderBy: 'created_at':true">
  3 + <noosfero-activity activity="activity"></noosfero-activity>
  4 + </li>
  5 +</ul>
src/app/components/noosfero-activities/activities.scss 0 → 100644
  Diff comments   View file @2da0cfa
@@ -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 + &: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 +}
src/app/components/noosfero-activities/activity/activity.directive.js 0 → 100644
  Diff comments   View file @2da0cfa
@@ -0,0 +1,21 @@ @@ -0,0 +1,21 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('angular')
  6 + .directive('noosferoActivity', noosferoActivity);
  7 +
  8 + /** @ngInject */
  9 + function noosferoActivity($compile) {
  10 + var directive = {
  11 + restrict: 'E',
  12 + scope: {
  13 + activity: '=',
  14 + },
  15 + templateUrl: 'app/components/noosfero-activities/activity/activity.html',
  16 + replace: true
  17 + };
  18 + return directive;
  19 + }
  20 +
  21 +})();
src/app/components/noosfero-activities/activity/activity.html 0 → 100644
  Diff comments   View file @2da0cfa
@@ -0,0 +1,12 @@ @@ -0,0 +1,12 @@
  1 +<div class="activity">
  2 + <div class="timeline-badge info"><i class="fa fa-check-square-o"></i></div>
  3 + <div class="timeline-panel">
  4 + <div class="timeline-heading">
  5 + <h4 class="timeline-title">{{activity.verb}}</h4>
  6 + <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="activity.created_at"></span></small></p>
  7 + </div>
  8 + <div class="timeline-body">
  9 + <pre>{{activity}}</pre>
  10 + </div>
  11 + </div>
  12 +</div>
src/app/profile-info/profile-info.html
  Diff comments   View file @2da0cfa
1 <h3>{{vm.profile.name}}</h3> 1 <h3>{{vm.profile.name}}</h3>
2 2
3 <div class="profile-wall"> 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> 4 + <h4>Profile Wall</h4>
  5 + <noosfero-activities activities="vm.activities"></noosfero-activities>
19 </div> 6 </div>
src/app/profile-info/profile-info.scss
View file @6d1f74a
@@ -1,186 +0,0 @@ @@ -1,186 +0,0 @@
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 -}