Created
October 31, 2014 16:06
-
-
Save ayushghosh/c805b7ebe451c629bba6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="se-well" ng-class="{'yesThread' : thread.isApproved === 'yes', 'noThread' : thread.isApproved === 'no', 'naThread' : thread.isApproved === 'N/A' && thread.UI_Thread_Toggle === true, 'activeThread' : thread.UI_Thread_Toggle === true}"> | |
<!-- ng-click="" --> | |
<div ng-click="getThreadDeatils(thread.threadId)" class="threads" ng-class=""> | |
<span class="se-well__thread__isApproved"> | |
<span ng-show="thread.threadType === 'approval'"> | |
<span ng-switch on="thread.isApproved"> | |
<span ng-switch-when="yes"> | |
<i class="mdi-navigation-check"></i> | |
</span> | |
<span ng-switch-when="no"> | |
<i class="mdi-action-close"></i> | |
</span> | |
<span ng-switch-default> | |
<i class="mdi-navigation-more-horiz"></i> | |
</span> | |
</span> | |
</span> | |
</span> | |
<span class="se-well__thread__topic_count"> | |
<span class="se-well__thread__topic">{{ thread.threadTopic }}</span> | |
<span class="se-well__thread__count">({{ thread.commentCount }})</span> | |
</span> | |
<span class="se-well__thread__approval" ng-hide="thread.UI_Thread_Toggle === false || thread.threadType === 'info'" > | |
<button ng-disabled="thread.isApproved != 'N/A'" ng-click="threadApproval(thread, 'yes')" class="btn btn-success">Approve</button> | |
<button ng-disabled="thread.isApproved != 'N/A'" ng-click="threadApproval(thread,'no')" class="btn btn-danger">Reject</button> | |
</span> | |
<span class="se-well__thread__stage text-primary" ng-hide="thread.UI_Thread_Toggle === true"><small>{{ thread.stage }}</small></span> | |
</div> | |
<!-- <span class="se-well__thread__descr">{{ thread.threadDescription | limitTo : 80 }}</span> | |
--> | |
<!-- stage x | |
<div class="panel-thread-holder"><span class="panel-thread-label">{{ thread.stage }}</span></div> | |
-> | |
<!-- /stage --> | |
<div ng-hide="thread.UI_Thread_Toggle === false" class="se-well__thread__comments"> | |
<div class="panel-body"> | |
<span class="thread__comments_header"> | |
<small class="thread__comments_header_desc">{{ thread.threadDescription}}</small> | |
<span class="pull-right" style="display:inline-block;"> | |
<button ng-disabled="thread.isApproved != 'N/A'" ng-click="parentCommentFormShow = !parentCommentFormShow" class="btn btn-default btn-xs"><i class="mdi mdi-content-add"></i>New Comment</button> | |
</span> | |
<div ng-include="'newComment.html'"></div> | |
</span> | |
<!-- Parent comment starts --> | |
<div ng-repeat="parentComment in thread.comments"> | |
<div class="comment"> | |
<span class="comment__user_image"> | |
<img gravatar-src="'{{ parentComment.userEmail }}'" gravatar-size="40"> | |
</span> | |
<span class="comment__user_name_time_reply"> | |
<span class="comment__user_name">{{ parentComment.userName }} </span> | |
<br> | |
<span class="comment__time"> | |
<span am-time-ago="parentComment.created_at"></span> | |
<a ng-disabled="thread.isApproved != 'N/A'" ng-click="parentChildCommentFormShow = !parentChildCommentFormShow" href="javascript:void(0)" class="comment__reply">Reply</a> | |
</span> | |
</span> | |
<span class="comment__text"> | |
{{ parentComment.comment }} | |
</span> | |
<!-- Add Child Comments Form --> | |
<div class="row" style="padding-left:75px;"> | |
<div class="col-md-12"> | |
<br> | |
<form style="background-color:#f1f1f1;padding:15px;" ng-hide="parentChildCommentFormShow"> | |
<div class="form-group"> | |
<label for="childComment" class="control-label">Add Reply</label> | |
<div class="form-control-wrapper"> | |
<textarea id="childComment" autofocus ng-model="childCommentObject.comment" placeholder="Add a new comment." class="form-control" rows="2"></textarea> | |
<span class="material-input"></span> | |
</div> | |
<span class="help-block"></span> | |
<button ng-click="postChildComment(parentComment.commentId,thread.threadId,childCommentObject)" class="btn btn-success btn-xs">Post Comment</button> | |
</div> | |
</form> | |
</div> | |
</div> | |
<!-- / Add Child Comments Form --> | |
<div ng-repeat="childcomment in parentComment.children[0]" class="child_comment_parent"> | |
<div class="comment child_comment"> | |
<span class="comment__user_image"> | |
<img gravatar-src="'{{ childcomment.userEmail }}'" gravatar-size="40"> | |
</span> | |
<span class="comment__user_name_time_reply"> | |
<span class="comment__user_name">{{ childcomment.userName }} </span> | |
<br> | |
<span class="comment__time"> | |
<span am-time-ago="childcomment.created_at"></span> | |
<!-- <a ng-click="parentChildCommentFormShow = !parentChildCommentFormShow" href="javascript:void(0)" class="comment__reply">Reply</a> --> | |
</span> | |
</span> | |
<span class="comment__text"> | |
{{ childcomment.comment }} | |
</span> | |
</div> | |
</div> <!-- Child Comment End --> | |
</div> | |
</div> | |
</div> | |
<style type="text/css"> | |
.se-well{ | |
min-height: 20px; | |
/*padding: 15px 30px;*/ | |
padding: 0px; | |
margin-bottom: 0px; | |
background-color: #fff; | |
border-bottom: 1px solid #ddd; | |
border-radius: 0; | |
color: #222; | |
font-size: 1.1em; | |
letter-spacing: 1.5px; | |
cursor: pointer; | |
} | |
.yesThread | |
{ | |
background: #F5FFFA; | |
} | |
.noThread | |
{ | |
background: #FFE8E1; | |
} | |
.naThread | |
{ | |
background: #fafafa; | |
} | |
.activeThread | |
{ | |
margin: 0px -20px 0px -20px; | |
} | |
.threads | |
{ | |
padding: 15px 30px; | |
} | |
.se-well__thread__isApproved | |
{ | |
/*float: left; | |
font-size: 2em; | |
margin-top: -4px; | |
margin-left: -25px; | |
margin-right: 10px; | |
*/} | |
.se-well__thread__topic_count | |
{ | |
min-width: 400px; | |
display: inline-block; | |
} | |
.se-well__thread__topic{ | |
font-weight: 400; | |
display: inline-block; | |
} | |
.se-well__thread__count{ | |
color: #aaa; | |
margin-left: 5px; | |
width: 50px; | |
display: inline-block; | |
} | |
.se-well__thread__approval | |
{ | |
float: right; | |
} | |
.se-well__thread__stage | |
{ | |
float: right; | |
font-size: 0.9em; | |
margin: -15px -25px; | |
} | |
/*.se-well__thread__comments | |
{ | |
display: block; | |
}*/ | |
.thread__comments_header | |
{ | |
margin:0px 50px 20px 50px; | |
display: block; | |
} | |
.thread__comments_header_desc | |
{ | |
display: inline-block; | |
} | |
.comment{ | |
/*margin-left: 15px;*/ | |
padding: 15px 10px 10px 0px; | |
border-left: 4px solid #64D2ED; | |
margin-bottom: 0px; | |
/*border-top: 1px solid #eee;*/ | |
/*border-bottom: 1px dotted #ccc;*/ | |
background: #fefefe; | |
/*border-top: 1px dashed #ccc;*/ | |
/*border-bottom: 1px dashed #ccc;*/ | |
/*box-shadow: -5px -0px 0 0 #64D2ED;*/ | |
/* -webkit-border-top-right-radius: 4px; | |
-webkit-border-bottom-right-radius: 4px; | |
-moz-border-radius-topright: 4px; | |
-moz-border-radius-bottomright: 4px; | |
border-top-right-radius: 4px; | |
border-bottom-right-radius: 4px; */ | |
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset; | |
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset; | |
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0px rgba(0, 0, 0, 0.1) inset; | |
} | |
.child_comment | |
{ | |
background: #fff; | |
border-left: 4px solid #5BC254; | |
box-shadow: inner 0 0 5px #888; | |
margin-left: 75px; | |
} | |
.child_comment_parent:last-child { | |
margin-bottom: 10px; | |
} | |
.comment__user_image{ | |
display: inline-block; | |
margin-left: 10px; | |
margin-right: 20px; | |
} | |
.comment__user_image img | |
{ | |
border-radius: 40px; | |
height: 40px; | |
width: 40px; | |
vertical-align: super; | |
} | |
.comment__user_name_time_reply | |
{ | |
display: inline-block; | |
font-size: 0.8em; | |
vertical-align: top; | |
} | |
.comment__user_name | |
{ | |
display: inline-block; | |
margin-top: 0px; | |
margin-bottom: 0px; | |
font-weight: bold; | |
font-size: 1.2em; | |
} | |
.comment__reply | |
{ | |
display: inline-block; | |
font-weight: bold; | |
} | |
.comment__text | |
{ | |
display: block; | |
margin-left: 75px; | |
/*margin-top: 20px;*/ | |
margin-bottom: 0px; | |
text-align: justify; | |
} | |
</style> | |
<!-- Add New Comments Form --> | |
<script type="text/ng-template" id="newComment.html"> | |
<div class="row"> | |
<div class="col-md-12"> | |
<form class="" ng-hide="parentCommentFormShow"> | |
<div class="form-group"> | |
<label for="newComment" class="control-label">Add Comment</label> | |
<div class="form-control-wrapper"> | |
<textarea id="newComment" autofocus ng-model="parentCommentObject.comment" placeholder="Add a new comment." class="form-control" rows="2"></textarea> | |
<span class="material-input"></span> | |
</div> | |
<span class="help-block"></span> | |
<button ng-click="postComment($index,parentCommentObject,thread.threadId,thread.threadTopic)" class="btn btn-info btn-xs">Post Comment</button> | |
</div> | |
</form> | |
</div> | |
</div> | |
</script> | |
<!-- / Add New Comments Form --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment