From f4cbe0a237d44225ae7a848b87623e3daec936d1 Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.alcantara@kaleidos.net>
Date: Fri, 8 Aug 2014 13:55:57 +0200
Subject: [PATCH] add comment animation

---
 app/coffee/modules/common.coffee         | 50 ++++++++++++------------
 app/coffee/modules/issues/detail.coffee  |  3 ++
 app/partials/views/modules/comments.jade |  1 +
 app/styles/modules/common/comments.scss  | 14 +++++++
 4 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/app/coffee/modules/common.coffee b/app/coffee/modules/common.coffee
index fb33af7d..3600f4a3 100644
--- a/app/coffee/modules/common.coffee
+++ b/app/coffee/modules/common.coffee
@@ -118,34 +118,34 @@ module.directive("tgTagLine", ["$log", TagLineDirective])
 ChangeDirective = ->
     # TODO: i18n
     commentBaseTemplate = _.template("""
-    <div class="comment-user activity-comment">
-        <a class="avatar" href="" title="<%- userFullName %>">
-            <img src="<%- avatar %>" alt="<%- userFullName %>">
-        </a>
-    </div>
-    <div class="comment-content">
-        <a class="username" href="TODO" title="<%- userFullName %>">
-            <%- userFullName %>
-        </a>
-        <% if(hasChanges){ %>
-        <div class="us-activity">
-            <a class="activity-title" href="" title="Show activity">
-              <span>
-                  <%- changesText %>
-              </span>
-              <span class="icon icon-arrow-up">
-              </span>
+        <div class="comment-user activity-comment">
+            <a class="avatar" href="" title="<%- userFullName %>">
+                <img src="<%- avatar %>" alt="<%- userFullName %>">
             </a>
         </div>
-        <% } %>
+        <div class="comment-content">
+            <a class="username" href="TODO" title="<%- userFullName %>">
+                <%- userFullName %>
+            </a>
+            <% if(hasChanges){ %>
+            <div class="us-activity">
+                <a class="activity-title" href="" title="Show activity">
+                  <span>
+                      <%- changesText %>
+                  </span>
+                  <span class="icon icon-arrow-up">
+                  </span>
+                </a>
+            </div>
+            <% } %>
 
-        <p class="comment">
-            <%- comment %>
-        </p>
-        <p class="date">
-            <%- creationDate %>
-        </p>
-    </div>
+            <p class="comment">
+                <%- comment %>
+            </p>
+            <p class="date">
+                <%- creationDate %>
+            </p>
+        </div>
     """)
     changeBaseTemplate = _.template("""
     <div class="activity-user">
diff --git a/app/coffee/modules/issues/detail.coffee b/app/coffee/modules/issues/detail.coffee
index aa3a75ad..8984d356 100644
--- a/app/coffee/modules/issues/detail.coffee
+++ b/app/coffee/modules/issues/detail.coffee
@@ -160,6 +160,9 @@ IssueDirective = ($tgrepo, $log, $location, $confirm) ->
 
         $el.on "click", ".add-comment a.button-green", (event) ->
             event.preventDefault()
+
+            $el.find(".comment-list").addClass("activeanimation")
+
             onSuccess = ->
                 $ctrl.loadHistory()
 
diff --git a/app/partials/views/modules/comments.jade b/app/partials/views/modules/comments.jade
index 5e237171..3e0fe352 100644
--- a/app/partials/views/modules/comments.jade
+++ b/app/partials/views/modules/comments.jade
@@ -5,6 +5,7 @@ section.us-comments
         textarea(placeholder="Write here a new commet", ng-model="commentModel.comment")
         a.button.button-green(href="", title="Comment") Comment
     div.comment-list
+        //common.coffee
         div.comment-single(tg-change, mode="comment", ng-model="comment", ng-repeat="comment in comments")
 
          //a.more-comments(href="", title="show more comments")
diff --git a/app/styles/modules/common/comments.scss b/app/styles/modules/common/comments.scss
index 6f6d115c..d0459112 100644
--- a/app/styles/modules/common/comments.scss
+++ b/app/styles/modules/common/comments.scss
@@ -92,3 +92,17 @@
         margin-left: .5rem;
     }
 }
+.comment-list.activeanimation {
+    .comment-single.ng-enter:first-child,
+    .comment-single.ng-leave:first-child {
+        @include transition(all .3s ease-in);
+    }
+    .comment-single.ng-enter:first-child,
+    .comment-single.ng-leave.ng-leave-active:first-child {
+        opacity: 0;
+    }
+    .comment-single.ng-leave:first-child,
+    .comment-single.ng-enter.ng-enter-active:first-child {
+        opacity: 1;
+    }
+}