rfs

gistfile1.txt

<div class="se-well">
  <div ng-click="getThreadDeatils(thread.threadId)" class="threads">
      <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="threadComments === 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="threadComments === true"><small>{{ thread.stage }}</small></span>
  </div>
  <!-- stage -->
  <!-- <div class="panel-thread-holder"></div> -->

<!--   <div ng-show="thread.threadType === 'approval'">
      <div ng-switch on="thread.isApproved">
        <div ng-switch-when="yes">
          Thread Approved.
        </div>
        <div ng-switch-when="no">
          Thread Rejected.
        </div>
        <div ng-switch-defaul>
          Thread Active.
        </div>
      </div>
  </div> -->


  <!-- /stage -->

  <div ng-hide="threadComments === false" class="se-well__thread__comments">
      <div class="">
          <span class="thread__comments_header">
              <small class="thread__comments_header_desc">{{ thread.threadDescription}}</small>
              <span class="pull-right">
                <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'">
          </span>
      <hr>
      <!-- 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">
                  <h4 class="comment__user_name">{{ parentComment.userName }} </h4>
                  <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 }}


                 <!-- Add Child Comments Form -->
                 <div class="row">
                     <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]">
                <div style="background-color: #f4f7f8" class="comment">
                                <span class="comment__user_image">
                                  <img gravatar-src="'{{ childcomment.userEmail }}'" gravatar-size="40">
                                </span>
                                <span class="comment__user_name_time_reply">
                                  <h4 class="comment__user_name">{{ childcomment.userName }} </h4>
                                  <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>
















                </span>
            </div>

      </div> <!-- Parent Comment End -->
    </div>
  </div>
</div>

<style type="text/css">
  .panel-thread-holder{
    display: block;
    position: relative;
    margin-right: 3px;
    margin-top: 2px;
  }
  .panel-thread-label{
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      display: block;
      padding: 3px 5px;
      font-size: 10px;
      color: #777;
      background-color: #E6E8E3;
      border: 1px solid #D7DACF;
      border-radius: 0 4px 0 4px;
      -webkit-user-select: none; /* Chrome/Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+ */

      /* Rules below not implemented in browsers yet */
      -o-user-select: none;
      user-select: none;
  }

.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;
  }
.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: inline-block;
}
.thread__comments_header_desc
{
  display: inline-block;
}
  .comment{
    margin-left: 15px;
    padding: 5px 10px 5px 10px;
    border-left: 2px solid #4285f4;
    margin-bottom: 20px;
    /*border-top: 1px solid #eee;*/
    /*border-bottom: 1px dotted #ccc;*/
    background: #f5f5f5;
  }
  .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;
  }
  .comment__reply
  {
    display: inline-block;
    font-weight: bold;
  }

  .comment__text
  {
    display: block;
    margin-left: 75px;
    /*margin-top: 20px;*/
    margin-bottom: 20px;
  }



  </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 -->