taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add comment animation

stable
Juanfran 2014-08-08 13:55:57 +02:00
parent 253eeee1a8
commit f4cbe0a237
4 changed files with 43 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/coffee/modules/common.coffee
View File

@ -118,34 +118,34 @@ module.directive("tgTagLine", ["$log", TagLineDirective])
ChangeDirective = -> ChangeDirective = ->
# TODO: i18n # TODO: i18n
commentBaseTemplate = _.template(""" commentBaseTemplate = _.template("""
<div class="comment-user activity-comment"> <div class="comment-user activity-comment">
<a class="avatar" href="" title="<%- userFullName %>"> <a class="avatar" href="" title="<%- userFullName %>">
<img src="<%- avatar %>" alt="<%- 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> </a>
</div> </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"> <p class="comment">
<%- comment %> <%- comment %>
</p> </p>
<p class="date"> <p class="date">
<%- creationDate %> <%- creationDate %>
</p> </p>
</div> </div>
""") """)
changeBaseTemplate = _.template(""" changeBaseTemplate = _.template("""
<div class="activity-user"> <div class="activity-user">

3
app/coffee/modules/issues/detail.coffee
View File

@ -160,6 +160,9 @@ IssueDirective = ($tgrepo, $log, $location, $confirm) ->
$el.on "click", ".add-comment a.button-green", (event) -> $el.on "click", ".add-comment a.button-green", (event) ->
event.preventDefault() event.preventDefault()
$el.find(".comment-list").addClass("activeanimation")
onSuccess = -> onSuccess = ->
$ctrl.loadHistory() $ctrl.loadHistory()

1
app/partials/views/modules/comments.jade
View File

@ -5,6 +5,7 @@ section.us-comments
textarea(placeholder="Write here a new commet", ng-model="commentModel.comment") textarea(placeholder="Write here a new commet", ng-model="commentModel.comment")
a.button.button-green(href="", title="Comment") Comment a.button.button-green(href="", title="Comment") Comment
div.comment-list div.comment-list
//common.coffee
div.comment-single(tg-change, mode="comment", ng-model="comment", ng-repeat="comment in comments") div.comment-single(tg-change, mode="comment", ng-model="comment", ng-repeat="comment in comments")
//a.more-comments(href="", title="show more comments") //a.more-comments(href="", title="show more comments")

14
app/styles/modules/common/comments.scss
View File

@ -92,3 +92,17 @@
margin-left: .5rem; 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;
}
}