Change comment style (#67)

templates/actionbar/list.html

@@ -29,7 +29,7 @@
           </span>
           {% if comment_count %}
             <span style="margin-left: 0.2em">
-              ({{comment_count}})
+              ({{ comment_count }})
             </span>
           {% endif %}
         </span>

templates/comments/content-list.html

@@ -0,0 +1,139 @@
+{% set logged_in = request.user.is_authenticated %}
+{% set profile = request.profile if logged_in else None %}
+{% for node in mptt_tree(comment_list) recursive %}
+<li id="comment-{{ node.id }}" data-revision="{{ node.revisions - 1 }}" data-max-revision="{{ node.revisions - 1 }}"
+    data-revision-ajax="{{ url('comment_revision_ajax', node.id) }}" class="comment">
+    <div class="comment-display{% if node.score <= vote_hide_threshold %} bad-comment{% endif %}">
+        <div class="info">
+            <div class="vote">
+                {% if logged_in %}
+                <a href="javascript:comment_upvote({{ node.id }})"
+                    class="upvote-link fa fa-chevron-up fa-fw{% if node.vote_score == 1 %} voted{% endif %}"></a>
+                {% else %}
+                <a href="javascript:alert('{{ _('Please login to vote')|escapejs }}')"
+                    title="{{ _('Please login to vote') }}" class="upvote-link fa fa-chevron-up fa-fw"></a>
+                {% endif %}
+                <br>
+                <div class="comment-score">{{ node.score }}</div>
+                {% if logged_in %}
+                <a href="javascript:comment_downvote({{ node.id }})"
+                    class="downvote-link fa fa-chevron-down fa-fw{% if node.vote_score == -1 %} voted{% endif %}"></a>
+                {% else %}
+                <a href="javascript:alert('{{ _('Please login to vote')|escapejs }}')"
+                    title="{{ _('Please login to vote') }}" class="downvote-link fa fa-chevron-down fa-fw"></a>
+                {% endif %}
+            </div>
+        </div>
+        <div class="detail">
+            <div class="header">
+                {% with author=node.author, user=node.author.user %}
+                <a href="{{ url('user_page', user.username) }}" class="user comment-img">
+                    <img src="{{ gravatar(author, 135) }}" class="gravatar">
+                </a>
+                {% endwith %}
+                {{ link_user(node.author) }},&nbsp;
+                {{ relative_time(node.time, abs=_('{time}'), rel=_('{time}')) }}
+                <span class="comment-spacer"></span>
+                <span class="comment-operation">
+                    {% if node.revisions > 1 %}
+                    <span class="comment-edits">
+                        <a href="javascript:show_revision({{ node.id }}, -1)" class="previous-revision">&larr;</a>
+                        <span class="comment-edit-text">
+                            {% if node.revisions > 2 %}
+                            {% trans edits=node.revisions - 1 %}edit {{ edits }}{% endtrans %}
+                            {% else %}
+                            {{ _('edited') }}
+                            {% endif %}
+                        </span>
+                        <a href="javascript:show_revision({{ node.id }}, 1)" style="visibility: hidden"
+                            class="next-revision">&rarr;</a>
+                    </span>
+                    {% else %}
+                    <span class="comment-edits"></span>
+                    {% endif %}
+                    <a href="#comment-{{ node.id }}" title="{{ _('Link') }}" class="comment-link">
+                        <i class="fa fa-link fa-fw"></i>
+                    </a>
+                    {% if logged_in and not comment_lock %}
+                    {% set can_edit = node.author.id == profile.id and not profile.mute %}
+                    {% if can_edit %}
+                    <a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
+                        href="{{ url('comment_edit', node.id) }}" title="{{ _('Edit') }}" class="edit-link">
+                        <i class="fa fa-pencil fa-fw"></i>
+                    </a>
+                    {% else %}
+                    <a href="javascript:reply_comment({{ node.id }})" title="{{ _('Reply') }}">
+                        <i class="fa fa-reply fa-fw"></i>
+                    </a>
+                    {% endif %}
+                    {% if perms.judge.change_comment %}
+                    {% if can_edit %}
+                    <a href="javascript:reply_comment({{ node.id }})" title="{{ _('Reply') }}"><i
+                            class="fa fa-reply fa-fw"></i></a>
+                    {% else %}
+                    <a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
+                        href="{{ url('comment_edit', node.id) }}" title="{{ _('Edit') }}" class="edit-link"><i
+                            class="fa fa-pencil fa-fw"></i></a>
+                    {% endif %}
+                    <a href="javascript:" title="{{ _('Hide') }}" data-id="{{ node.id }}" class="hide-comment"><i
+                            class="fa fa-trash fa-fw"></i></a>
+                    <a href="{{ url('admin:judge_comment_change', node.id) }}" title="{{ _('Admin') }}"><i
+                            class="fa fa-cog fa-fw"></i></a>
+                    {% endif %}
+                    {% endif %}
+                </span>
+            </div>
+            <div class="content content-description">
+                <div class="comment-body" {% if node.score <=vote_hide_threshold %} style="display:none" {% endif %}>
+                    {{ node.body|markdown(lazy_load=True)|reference|str|safe }}
+                </div>
+                {% if node.score <= vote_hide_threshold %} <div class="comment-body bad-comment-body">
+                    <p>
+                        {% trans id=node.id %}This comment is hidden due to too much negative feedback. Click <a
+                            href="javascript:comment_show_content({{ id }})">here</a> to view it.{% endtrans %}
+                    </p>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+    </div>
+
+    {% if node.count_replies > 1 %}
+    <a href="javascript:comment_get_replies({{ node.id }}, 0)" class="show_more_reply">  
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"></path>
+         </svg> 
+        {{ node.count_replies }} {{ _('replies') }} </a>
+    {% elif node.count_replies %}
+    <a href="javascript:comment_get_replies({{ node.id }}, 0)" class="show_more_reply"> 
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"></path>
+         </svg>
+        {{ node.count_replies }} {{ _('reply') }} </a>
+    {% endif %}
+</li>
+<ul id="comment-{{ node.id }}-reply" class="reply-comment" hidden></ul>
+<ul id="comment-{{ node.id }}-children" class="comments"> </ul>
+{% endfor %}
+
+
+
+{% set comment_more = comment_count - offset %}
+{% if comment_more == 1 %}
+<a href="javascript:comment_show_more({{ comment_root_id }}, {{ comment_parrent_none }}, {{ offset }}, {{ comment_remove }})" class="show_more_comment">
+    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M6 9l6 6l6 -6"></path>
+     </svg>
+    {{ comment_count - offset }} {{ _('comment more') }}</a>
+{% elif comment_more > 1 %}
+<a href="javascript:comment_show_more({{ comment_root_id }}, {{ comment_parrent_none }}, {{ offset }}, {{ comment_remove }})" class="show_more_comment">
+    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M6 9l6 6l6 -6"></path>
+    </svg>
+    {{ comment_count - offset }} {{ _('comments more') }}</a>
+{% endif %}
+

templates/comments/list.html

@@ -36,14 +36,15 @@
       {% endif %}
     </div>
   {% endif %}
-  {% if has_comments %}
-    <ul class="comments top-level-comments new-comments">
+  {% if has_comments or comment_all_list %}
+    <ul class="comments top-level-comments new-comments" id="comment-0">
       {% set logged_in = request.user.is_authenticated %}
       {% set profile = request.profile if logged_in else None %}
-      {% for node in mptt_tree(comment_list) recursive %}
+      {% if comment_all_list %}
+      {% for node in mptt_tree(comment_all_list) recursive %}
         <li id="comment-{{ node.id }}" data-revision="{{ node.revisions - 1 }}"
-          data-max-revision="{{ node.revisions - 1 }}"
-          data-revision-ajax="{{ url('comment_revision_ajax', node.id) }}" class="comment">
+        data-max-revision="{{ node.revisions - 1 }}"
+        data-revision-ajax="{{ url('comment_revision_ajax', node.id) }}" class="comment">
           <div class="comment-display{% if node.score <= vote_hide_threshold %} bad-comment{% endif %}">
             <div class="info">
               <div class="vote">
@@ -149,6 +150,28 @@
           {% endif %}
         {% endwith %}
       {% endfor %}
+      {% set comment_more = comment_count - offset %}
+      {% if comment_more == 1 %}
+        <a href="javascript:comment_show_more({{ comment_root_id }}, {{ comment_parrent_none }}, {{ offset }}, {{ comment_remove }})" class="show_more_comment">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M6 9l6 6l6 -6"></path>
+          </svg>
+          {{ comment_count - offset }} {{ _('comment more') }}
+        </a>
+      {% elif comment_more > 1 %}
+        <a href="javascript:comment_show_more({{ comment_root_id }}, {{ comment_parrent_none }}, {{ offset }}, {{ comment_remove }})" class="show_more_comment">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M6 9l6 6l6 -6"></path>
+          </svg>
+          {{ comment_count - offset }} {{ _('comments more') }}
+        </a>
+      {% endif %}
+    {% else %}
+      {% include "comments/content-list.html" %}
+    {% endif %}
+
     </ul>
   {% elif not comment_lock %}
     <p class="no-comments-message">{{ _('There are no comments at the moment.') }}</p>

templates/comments/media-js.html

@@ -119,6 +119,77 @@
           }
         });
       }
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      const comment_remove = urlParams.get('comment-id');
+      console.log(comment_remove);
+
+      window.comment_get_replies = function (id, parrent_none) {
+        var $comment_show_btn = $("#comment-" + id  + " .show_more_reply");
+        $comment_show_btn.hide();
+        var $comment = $("#comment-" + id + "-children");
+        $comment.append("<p class='loading'> Loading... </p>");
+        ajax_get_reply('{{ url('comment_get_replies') }}', id, parrent_none);
+      }
+
+      function ajax_get_reply(url, id, parrent_none) {
+        return $.ajax({
+          url: url,
+          type: 'GET',
+          data: {
+            id: id,
+            parrent_none: parrent_none,
+          },
+          success: function(data) {
+            var $comment_loading = $("#comment-" + id + "-children .loading");
+            $comment_loading.hide();
+            var $comment = $("#comment-" + id + "-children");
+            $comment.append(data);
+          }
+        })
+      }
+
+      window.comment_show_more = function (id, parrent_none, offset, comment_remove) {
+        console.log(parrent_none)
+        if (parrent_none == 1) {
+          var $comment_show_btn = $("#comment-0"  + " .show_more_comment");
+          $comment_show_btn.hide();
+          var $comment = $("#comment-0");
+          $comment.append("<p class='loading'> Loading... </p>");
+        } else {
+          var $comment_show_btn = $("#comment-" + id  + "-children" + " .show_more_comment");
+          $comment_show_btn.hide();
+          var $comment = $("#comment-" + id + "-children");
+          $comment.append("<p class='loading'> Loading... </p>");
+        }
+        ajax_comment_show_more('{{ url('comment_show_more') }}', id, parrent_none, offset, comment_remove);
+      }
+
+      function ajax_comment_show_more(url, id, parrent_none, offset, comment_remove) {
+        return $.ajax({
+          url: url,
+          type: 'GET',
+          data: {
+            id: id,
+            parrent_none: parrent_none,
+            offset: offset,
+            comment_remove: comment_remove,
+          },
+          success: function(data) {
+            if (parrent_none == 1) {
+              var $comment_loading = $("#comment-0" + " .loading");
+              $comment_loading.hide();
+              var $comment = $("#comment-0");
+              $comment.append(data);
+            } else {
+              var $comment_loading = $("#comment-" + id + "-children .loading");
+              $comment_loading.hide();
+              var $comment = $("#comment-" + id + "-children");
+              $comment.append(data);
+            }
+          }
+        })
+      }
 
       var get_$votes = function (id) {
         var $comment = $('#comment-' + id);