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 @@
  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 @@
  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 @@
  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 @@
  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 @@
  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 1 <h3>{{vm.profile.name}}</h3>
2 2  
3 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 6 </div>
... ...
src/app/profile-info/profile-info.scss
View file @6d1f74a
... ... @@ -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   -}