From 2da0cfa33a328b04f81b55ec791b565e8f29930a Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Wed, 13 Jan 2016 13:20:36 -0300
Subject: [PATCH] Add activities directive

---
 src/app/components/noosfero-activities/activities.directive.js        |  20 ++++++++++++++++++++
 src/app/components/noosfero-activities/activities.html                |   5 +++++
 src/app/components/noosfero-activities/activities.scss                | 186 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/app/components/noosfero-activities/activity/activity.directive.js |  21 +++++++++++++++++++++
 src/app/components/noosfero-activities/activity/activity.html         |  12 ++++++++++++
 src/app/profile-info/profile-info.html                                |  17 ++---------------
 src/app/profile-info/profile-info.scss                                | 186 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 7 files changed, 246 insertions(+), 201 deletions(-)
 create mode 100644 src/app/components/noosfero-activities/activities.directive.js
 create mode 100644 src/app/components/noosfero-activities/activities.html
 create mode 100644 src/app/components/noosfero-activities/activities.scss
 create mode 100644 src/app/components/noosfero-activities/activity/activity.directive.js
 create mode 100644 src/app/components/noosfero-activities/activity/activity.html
 delete mode 100644 src/app/profile-info/profile-info.scss

diff --git a/src/app/components/noosfero-activities/activities.directive.js b/src/app/components/noosfero-activities/activities.directive.js
new file mode 100644
index 0000000..77fd4ef
--- /dev/null
+++ b/src/app/components/noosfero-activities/activities.directive.js
@@ -0,0 +1,20 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('angular')
+    .directive('noosferoActivities', noosferoActivities);
+
+  /** @ngInject */
+  function noosferoActivities($compile) {
+    var directive = {
+      restrict: 'E',
+      scope: {
+          activities: '=',
+      },
+      templateUrl: 'app/components/noosfero-activities/activities.html'
+    };
+    return directive;
+  }
+
+})();
diff --git a/src/app/components/noosfero-activities/activities.html b/src/app/components/noosfero-activities/activities.html
new file mode 100644
index 0000000..1e80cf6
--- /dev/null
+++ b/src/app/components/noosfero-activities/activities.html
@@ -0,0 +1,5 @@
+<ul class="timeline">
+  <li ng-class-even="'timeline-inverted'" ng-repeat="activity in activities | orderBy: 'created_at':true">
+    <noosfero-activity activity="activity"></noosfero-activity>
+  </li>
+</ul>
diff --git a/src/app/components/noosfero-activities/activities.scss b/src/app/components/noosfero-activities/activities.scss
new file mode 100644
index 0000000..89be104
--- /dev/null
+++ b/src/app/components/noosfero-activities/activities.scss
@@ -0,0 +1,186 @@
+//http://bootsnipp.com/snippets/featured/timeline-responsive
+.timeline {
+  list-style: none;
+  padding: 20px 0 20px;
+  position: relative;
+
+  &:before {
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    content: " ";
+    width: 3px;
+    background-color: #eeeeee;
+    left: 50%;
+    margin-left: -1.5px;
+  }
+
+  > li {
+    margin-bottom: 20px;
+    position: relative;
+
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+
+    &:before, &:after {
+      content: " ";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+
+    .timeline-panel {
+      width: 46%;
+      float: left;
+      border: 1px solid #d4d4d4;
+      border-radius: 2px;
+      padding: 20px;
+      position: relative;
+      -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+    }
+
+    .timeline-panel:before {
+      position: absolute;
+      top: 26px;
+      right: -15px;
+      display: inline-block;
+      border-top: 15px solid transparent;
+      border-left: 15px solid #ccc;
+      border-right: 0 solid #ccc;
+      border-bottom: 15px solid transparent;
+      content: " ";
+    }
+
+    .timeline-panel:after {
+      position: absolute;
+      top: 27px;
+      right: -14px;
+      display: inline-block;
+      border-top: 14px solid transparent;
+      border-left: 14px solid #fff;
+      border-right: 0 solid #fff;
+      border-bottom: 14px solid transparent;
+      content: " ";
+    }
+
+    .timeline-badge {
+      color: #fff;
+      width: 50px;
+      height: 50px;
+      line-height: 50px;
+      font-size: 1.4em;
+      text-align: center;
+      position: absolute;
+      top: 16px;
+      left: 50%;
+      margin-left: -25px;
+      background-color: #999999;
+      z-index: 100;
+      border-top-right-radius: 50%;
+      border-top-left-radius: 50%;
+      border-bottom-right-radius: 50%;
+      border-bottom-left-radius: 50%;
+    }
+
+    &.timeline-inverted .timeline-panel {
+      float: right;
+    }
+
+    &.timeline-inverted .timeline-panel:before {
+      border-left-width: 0;
+      border-right-width: 15px;
+      left: -15px;
+      right: auto;
+    }
+
+    &.timeline-inverted .timeline-panel:after {
+      border-left-width: 0;
+      border-right-width: 14px;
+      left: -14px;
+      right: auto;
+    }
+  }
+
+  .timeline-badge.primary {
+    background-color: #2e6da4;
+  }
+
+  .timeline-badge.success {
+    background-color: #3f903f;
+  }
+
+  .timeline-badge.warning {
+    background-color: #f0ad4e;
+  }
+
+  .timeline-badge.danger {
+    background-color: #d9534f;
+  }
+
+  .timeline-badge.info {
+    background-color: #5bc0de;
+  }
+
+  .timeline-title {
+    margin-top: 0;
+    color: inherit;
+  }
+
+  .timeline-body > p,
+  .timeline-body > ul {
+    margin-bottom: 0;
+  }
+
+  .timeline-body > p + p {
+    margin-top: 5px;
+  }
+  
+  @media (max-width: 767px) {
+
+    &:before {
+        left: 40px;
+    }
+
+    > li {
+      .timeline-panel {
+          width: calc(100% - 90px);
+          width: -moz-calc(100% - 90px);
+          width: -webkit-calc(100% - 90px);
+      }
+
+      .timeline-badge {
+          left: 15px;
+          margin-left: 0;
+          top: 16px;
+      }
+
+      .timeline-panel {
+          float: right;
+      }
+
+      .timeline-panel:before {
+              border-left-width: 0;
+              border-right-width: 15px;
+              left: -15px;
+              right: auto;
+      }
+
+      .timeline-panel:after {
+              border-left-width: 0;
+              border-right-width: 14px;
+              left: -14px;
+              right: auto;
+      }
+    }
+  }
+}
diff --git a/src/app/components/noosfero-activities/activity/activity.directive.js b/src/app/components/noosfero-activities/activity/activity.directive.js
new file mode 100644
index 0000000..7905ec3
--- /dev/null
+++ b/src/app/components/noosfero-activities/activity/activity.directive.js
@@ -0,0 +1,21 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('angular')
+    .directive('noosferoActivity', noosferoActivity);
+
+  /** @ngInject */
+  function noosferoActivity($compile) {
+    var directive = {
+      restrict: 'E',
+      scope: {
+          activity: '=',
+      },
+      templateUrl: 'app/components/noosfero-activities/activity/activity.html',
+      replace: true
+    };
+    return directive;
+  }
+
+})();
diff --git a/src/app/components/noosfero-activities/activity/activity.html b/src/app/components/noosfero-activities/activity/activity.html
new file mode 100644
index 0000000..8662e91
--- /dev/null
+++ b/src/app/components/noosfero-activities/activity/activity.html
@@ -0,0 +1,12 @@
+<div class="activity">
+  <div class="timeline-badge info"><i class="fa fa-check-square-o"></i></div>
+  <div class="timeline-panel">
+    <div class="timeline-heading">
+      <h4 class="timeline-title">{{activity.verb}}</h4>
+      <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="activity.created_at"></span></small></p>
+    </div>
+    <div class="timeline-body">
+      <pre>{{activity}}</pre>
+    </div>
+  </div>
+</div>
diff --git a/src/app/profile-info/profile-info.html b/src/app/profile-info/profile-info.html
index b47fb2f..b1ed0b4 100644
--- a/src/app/profile-info/profile-info.html
+++ b/src/app/profile-info/profile-info.html
@@ -1,19 +1,6 @@
 <h3>{{vm.profile.name}}</h3>
 
 <div class="profile-wall">
-  <h4>Wall</h4>
-  <ul class="timeline">
-    <li ng-class-even="'timeline-inverted'" ng-repeat="activity in vm.activities | orderBy: 'created_at':true">
-      <div class="timeline-badge info"><i class="fa fa-check-square-o"></i></div>
-      <div class="timeline-panel">
-        <div class="timeline-heading">
-          <h4 class="timeline-title">{{activity.verb}}</h4>
-          <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="activity.created_at"></span></small></p>
-        </div>
-        <div class="timeline-body">
-          <pre>{{activity}}</pre>
-        </div>
-      </div>
-    </li>
-  </ul>
+  <h4>Profile Wall</h4>
+  <noosfero-activities activities="vm.activities"></noosfero-activities>
 </div>
diff --git a/src/app/profile-info/profile-info.scss b/src/app/profile-info/profile-info.scss
deleted file mode 100644
index 4ac1025..0000000
--- a/src/app/profile-info/profile-info.scss
+++ /dev/null
@@ -1,186 +0,0 @@
-//http://bootsnipp.com/snippets/featured/timeline-responsive
-.timeline {
-  list-style: none;
-  padding: 20px 0 20px;
-  position: relative;
-
-  &:before {
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    content: " ";
-    width: 3px;
-    background-color: #eeeeee;
-    left: 50%;
-    margin-left: -1.5px;
-  }
-
-  > li {
-    margin-bottom: 20px;
-    position: relative;
-  }
-
-  > li:before,
-  > li:after {
-    content: " ";
-    display: table;
-  }
-
-  > li:after {
-    clear: both;
-  }
-
-  > li:before, > li:after {
-    content: " ";
-    display: table;
-  }
-
-  > li:after {
-    clear: both;
-  }
-
-  > li > .timeline-panel {
-    width: 46%;
-    float: left;
-    border: 1px solid #d4d4d4;
-    border-radius: 2px;
-    padding: 20px;
-    position: relative;
-    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
-    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
-  }
-
-  > li > .timeline-panel:before {
-    position: absolute;
-    top: 26px;
-    right: -15px;
-    display: inline-block;
-    border-top: 15px solid transparent;
-    border-left: 15px solid #ccc;
-    border-right: 0 solid #ccc;
-    border-bottom: 15px solid transparent;
-    content: " ";
-  }
-
-  > li > .timeline-panel:after {
-    position: absolute;
-    top: 27px;
-    right: -14px;
-    display: inline-block;
-    border-top: 14px solid transparent;
-    border-left: 14px solid #fff;
-    border-right: 0 solid #fff;
-    border-bottom: 14px solid transparent;
-    content: " ";
-  }
-
-  > li > .timeline-badge {
-    color: #fff;
-    width: 50px;
-    height: 50px;
-    line-height: 50px;
-    font-size: 1.4em;
-    text-align: center;
-    position: absolute;
-    top: 16px;
-    left: 50%;
-    margin-left: -25px;
-    background-color: #999999;
-    z-index: 100;
-    border-top-right-radius: 50%;
-    border-top-left-radius: 50%;
-    border-bottom-right-radius: 50%;
-    border-bottom-left-radius: 50%;
-  }
-
-  > li.timeline-inverted > .timeline-panel {
-    float: right;
-  }
-
-  > li.timeline-inverted > .timeline-panel:before {
-    border-left-width: 0;
-    border-right-width: 15px;
-    left: -15px;
-    right: auto;
-  }
-
-  > li.timeline-inverted > .timeline-panel:after {
-    border-left-width: 0;
-    border-right-width: 14px;
-    left: -14px;
-    right: auto;
-  }
-
-  .timeline-badge.primary {
-    background-color: #2e6da4;
-  }
-
-  .timeline-badge.success {
-    background-color: #3f903f;
-  }
-
-  .timeline-badge.warning {
-    background-color: #f0ad4e;
-  }
-
-  .timeline-badge.danger {
-    background-color: #d9534f;
-  }
-
-  .timeline-badge.info {
-    background-color: #5bc0de;
-  }
-
-  .timeline-title {
-    margin-top: 0;
-    color: inherit;
-  }
-
-  .timeline-body > p,
-  .timeline-body > ul {
-    margin-bottom: 0;
-  }
-
-  .timeline-body > p + p {
-    margin-top: 5px;
-  }
-  
-  @media (max-width: 767px) {
-
-    &:before {
-        left: 40px;
-    }
-
-    > li {
-      > .timeline-panel {
-          width: calc(100% - 90px);
-          width: -moz-calc(100% - 90px);
-          width: -webkit-calc(100% - 90px);
-      }
-
-      > .timeline-badge {
-          left: 15px;
-          margin-left: 0;
-          top: 16px;
-      }
-
-      > .timeline-panel {
-          float: right;
-      }
-
-      > .timeline-panel:before {
-              border-left-width: 0;
-              border-right-width: 15px;
-              left: -15px;
-              right: auto;
-      }
-
-      > .timeline-panel:after {
-              border-left-width: 0;
-              border-right-width: 14px;
-              left: -14px;
-              right: auto;
-      }
-    }
-  }
-}
--
libgit2 0.21.2