From 1fa495df2d8ddc7094af4f5194db9ba3450b3d67 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Aug 16 2018 09:56:25 +0000
Subject: fix ev comments for pull-requests


Fixes #3433

Signed-off-by: Ryan Lerch <rlerch@redhat.com>

---

diff --git a/pagure/static/request_ev.js b/pagure/static/request_ev.js
index ff96c30..fc2631d 100644
--- a/pagure/static/request_ev.js
+++ b/pagure/static/request_ev.js
@@ -18,111 +18,94 @@ add_comment = function(data, username) {
   }
 
   if (data.notification){
-      var _data = '<div class="card"> \
-            <div class="card-header"> \
-              <div> \
-                <div class="pull-xs-right text-muted"> \
-                  <span title="' + data.comment_date + '">\
-                    Just now</span></div>\
-                </div> \
-                <small>' + emojione.toImage(data.comment_added) + '</small>\
-            </div> \
-          </div>';
+    var _data = '<div class="d-flex align-items-center px-3 py-2 mb-3">'
+                +'<div class="">'
+                + '<img src="'+data.avatar_url+'"/>'
+                +'</div>'
+                +'<span class="text-semimuted font-size-09 autogenerated-comment pl-4">'
+                + data.comment_added
+                +'</span>'
+                +'<div class="text-muted ml-auto">'
+                + '<span title="'+data.comment_date+'">'
+                + 'seconds ago</span>'
+                +'</div>'
+               +'</div>'
 
-  } else if (inline) {
-    var _data = '<tr class="inline-pr-comment"><td></td> \
-        <td colspan="2"> \
-        <div class="card clearfix m-x-1 "> \
-        <div class="card-block"> \
-        <small><div id="comment-' + data.comment_id + '"> \
-        <img class="avatar circle" src="' + data.avatar_url + '"/> \
-        <a href="/user/' + data.comment_user + '"> ' + data.comment_user + '</a> commented  \
-        <a class="headerlink" title="Permalink to this headline" \
-        href="#comment-' + data.comment_id + '"> \
-        <span title="' + data.comment_date + '">Just now</span> \
-        </a></div></small> \
-        <section class="issue_comment"> \
-        <div class="comment_body"> \
-        ' + emojione.toImage(data.comment_added) + ' \
-        </div> \
-        </section> \
-        <div class="issue_actions m-t-2"> \
-          <aside class="btn-group issue_action icon pull-xs-right p-b-1"> \
-          <div class="btn-group" role="group" aria-label="Basic example">';
-        if (data.comment_id) {
-            _data += '\
-              <a class="reply btn btn-secondary btn-sm" data-toggle="tooltip" title="Reply to this comment - lose formatting"> \
-                <i class="fa fa-share-square-o"></i> \
-              </a>';
-        }
-        if ( data.comment_user == username && data.comment_id) {
-          _data += edit_btn +
-              '<button class="btn btn-secondary btn-sm" type="submit" name="drop_comment" value="' + data.comment_id + '" \
-                  onclick="return confirm(\'Do you really want to remove this comment?\');" \
-                  title="Remove comment"> \
-                  <i class="fa fa-trash"></i> \
-                </button>';
-            }
-        _data += '</div> \
-        </aside> \
-        </div></div></div> \
-        </td></tr>';
   } else {
     var _csrf = $('#csrf_token').clone();
     var _data = '<form action="/' + data.project + '/pull-request/' +  data.request_id
-        + '/comment/drop" method="post" onsubmit="return try_async_comment(this, null)"> \
-        <div class="card clearfix"> \
-            <div id="comment-' + data.comment_id + '" class="card-header"> \
-            <img class="avatar circle" src="' + data.avatar_url + '"/> \
-            <a href="/user/' + data.comment_user + '"> ' + data.comment_user + '\
-              </a> \
-              <a class="headerlink pull-xs-right" title="Permalink to this headline"';
-            if (data.comment_id) {
-                _data += 'href="#comment-' + data.comment_id + '">';
-            }
-            _data += '\
-                <span title="">seconds ago</span> \
-               </a> \
-            </div>\
-            <div class="card-block">\
-              <section class="issue_comment"> \
-                <div class="comment_body"> \
-                  <span class="edit_date" title=""> \
-                  </span>'
-                + emojione.toImage(data.comment_added) + '\
-                </div> \
-              </section> \
-              <div class="issue_actions m-t-2"> \
-                <div class="issue_action icon pull-xs-right p-b-1"> \
-                  <div class="btn-group" role="group" aria-label="Basic example">';
-            if (data.comment_id) {
-                _data += '\
-                    <a class="reply btn btn-secondary btn-sm" data-toggle="tooltip" title="Reply to this comment - lose formatting"> \
-                      <i class="fa fa-share-square-o"></i> \
-                    </a>';
-            }
-            if ( data.comment_user == username && data.comment_id) {
-                _data += edit_btn +
-                    '<button class="btn btn-secondary btn-sm" type="submit" name="drop_comment" value="' + data.comment_id + '" \
-                        onclick="return confirm(\'Do you really want to remove this comment?\');" \
-                        title="Remove comment"> \
-                        <i class="fa fa-trash"></i> \
-                    </button>';
-            }
-            _data += '</div> \
-                </div> \
-            </div> \
-        <input id="csrf_token" name="csrf_token" value="' + _csrf.val() + '" type="hidden"> \
-        </form>';
+    + '/comment/drop" method="post" onsubmit="return try_async_comment(this, null)">'
+    + '<div class="card mb-4 clearfix">'
+    + '  <div id="comment-' + data.comment_id + '" class="card-header bg-light d-flex align-items-center px-3 py-2">'
+    + '    <div>'
+    + '        <img class="avatar circle" src="' + data.avatar_url + '"/>'
+    + '        <a href="/user/' + data.comment_user + '"'
+    + '            class="notblue font-weight-bold text-semimuted">'+data.comment_user+'</a>'
+    + '        <a class="notblue text-semimuted" title="Permalink to this headline"'
+    + '           href="#comment-' + data.comment_id + '">'
+    + '          <span>commented seconds ago</span>'
+    + '        </a>'
+    + '    </div>'
+    + '    <div class="issue_actions ml-auto">'
+    + '        <div class="issue_action icon">'
+    + '          <div class="btn-group" role="group" aria-label="Basic example">'
+    + '              <a class="reply btn btn-outline-primary border-0" data-toggle="tooltip"'
+    + '                  title="Reply to this comment - lose formatting" href="javascript:void(0)">'
+    + '                <span class="fa fa-share-square-o" title="Reply to this comment"></span>'
+    + '              </a>';
+    if ( data.comment_user == username) {
+
+      _data = _data+ '<a class="btn btn-outline-primary border-0 edit_btn"'
+      + '                href="/' + data.project + '/issue/' + data.issue_id + '/comment/' + data.comment_id + '/edit"'
+      + '                data-comment="'+data.comment_id+'" data-objid="'+data.issue_id+'">'
+      + '              <i class="fa fa-pencil"  title="Edit comment"></i>'
+      + '            </a>'
+      + '            <button class="btn btn-outline-primary border-0" type="submit"'
+      + '                name="drop_comment" value="'+data.comment_id+'"'
+      + '                onclick="return confirm(\'Do you really want to remove this comment?\');"'
+      + '                title="Remove comment">'
+      + '              <i class="fa fa-trash"></i>'
+      + '            </button>'
+    }
+
+    _data = _data + '          </div>'
+    + '        </div>'
+    + '      </div>'
+    + '  </div>'
+    + '  <div class="card-body pb-1">'
+    + '    <section class="issue_comment">'
+    + '      <div>'
+    + '        <span class="edit_date" title="">'
+    + '        </span>'
+    + '        <span class="comment_text comment_body">'
+    + emojione.toImage(data.comment_added)
+    + '        </span>'
+    + '      </div>'
+    + '    </section>'
+    + '  </div>'
+    + '  <div class="card-footer bg-transparent d-flex align-items-center border-0 p-0">'
+    + '  </div>'
+    + '</div>'
+    + '<input id="csrf_token" name="csrf_token" value="' + _csrf.val() + '" type="hidden">'
+    + '</form>'
+
   }
 
   if (inline){
     // Inline comment
     console.log('Inline');
+
+    //add comment to files changed tab
     var field = $('[data-commit="' + data.commit_id + '"]').parent();
     var id = field.children().children().attr('id').split('_')[0];
     var row = $('#' + id + '_' + (parseInt(data.line) + 1)).parent().parent();
-    row.before(_data);
+    row.after('<tr><td colspan="2" class="pl-3">'+_data+'</td></tr>');
+    console.log(row);
+
+    //add comment to comments tab
+    var cfield = $('#request_comment');
+    cfield.html(cfield.html() + _data);
+
   } else {
     // Generic comment
     console.log('generic');
diff --git a/pagure/templates/_formhelper.html b/pagure/templates/_formhelper.html
index 9927051..4afdb6c 100644
--- a/pagure/templates/_formhelper.html
+++ b/pagure/templates/_formhelper.html
@@ -107,7 +107,7 @@
 {% endmacro %}
 
 
-{% macro show_comment(comment, id, repo, username, issueid, form) %}
+{% macro show_comment(comment, id, repo, username, issueid, form, PRinline=False) %}
 <div class="card mb-4 clearfix">
   <div id="comment-{{ id }}" class="card-header bg-light d-flex align-items-center px-3 py-2">
     <div>
@@ -121,7 +121,13 @@
           href="#comment-{{ id }}">
           <span title="{{
             comment.date_created | format_datetime
-            }}">commented {{ comment.date_created | humanize}}</span>
+            }}">commented
+            {% if PRinline %}
+            on <a href="#c-{{ comment.commit_id }}-{{ comment.line }}"
+                        onclick="showTab()">{{
+                        comment.line }} of {{ comment.filename }}</a>
+            {% endif %}
+            {{ comment.date_created | humanize}}</span>
         </a>
     </div>
     <div class="issue_actions ml-auto">
diff --git a/pagure/templates/repo_pull_request.html b/pagure/templates/repo_pull_request.html
index ae882d1..ade3190 100644
--- a/pagure/templates/repo_pull_request.html
+++ b/pagure/templates/repo_pull_request.html
@@ -366,23 +366,8 @@
 
       {% for comment in pull_request.comments %}
         {% if comment.commit_id %}
-          <div class="card">
-            <div class="card-header">
-              <div>
-                {{ comment.user.user }} commented on line
-                    <a href="#c-{{ comment.commit_id }}-{{ comment.line }}"
-                        onclick="showTab()">{{
-                        comment.line }} of {{ comment.filename }}</a>.
-                <div class="pull-xs-right text-muted">
-                    <span title="{{ comment.date_created | format_datetime }}">{{
-                        comment.date_created | humanize }}</span></div>
-              </div>
-                (<a class="inline-btn small" data-id="{{ loop.index }}">Hide</a>)
-                <div class="inline-comments" id="inline-comment-{{ loop.index }}">
-                  {{ comment.comment }}
-                </div>
-            </div>
-          </div>
+        {{ show_comment(comment, comment.id, repo, username,
+          requestid, form, PRinline=True) }}
         {% elif comment.notification %}
           <div class="d-flex align-items-center px-3 py-2 mb-3">
             <div class="">
diff --git a/pagure/ui/filters.py b/pagure/ui/filters.py
index 01df37f..33bb6d6 100644
--- a/pagure/ui/filters.py
+++ b/pagure/ui/filters.py
@@ -171,14 +171,15 @@ def format_loc(loc, commit=None, filename=None, tree_id=None, prequest=None,
         output.append('</tr>')
 
         tpl_edit = '<a href="%(edit_url)s" ' \
-            'class="btn btn-secondary btn-sm" data-comment="%(commentid)s" ' \
+            'class="btn btn-outline-primary border-0" '\
+            'data-comment="%(commentid)s" ' \
             'data-objid="%(requestid)s">' \
             '<i class="fa fa-pencil"></i>' \
             '</a>'
         tpl_edited = '<small class="text-muted" title="%(edit_date)s"> ' \
             'Edited %(human_edit_date)s by %(user)s </small>'
 
-        tpl_delete = '<button class="btn btn-secondary btn-sm" '\
+        tpl_delete = '<button class="btn btn-outline-primary border-0" '\
             'title="Remove comment" '\
             'name="drop_comment" value="%(commentid)s" type="submit" ' \
             'onclick="return confirm(\'Do you really want to remove this' \
@@ -219,31 +220,34 @@ def format_loc(loc, commit=None, filename=None, tree_id=None, prequest=None,
                     })
 
                 output.append(
-                    '<tr class="inline-pr-comment"><td></td>'
-                    '<td colspan="2">'
-                    '<div class="card clearfix m-x-1 ">'
-                    '<div class="card-block">'
-                    '<small><div id="comment-%(commentid)s">'
+                    '<tr class="inline-pr-comment">'
+                    '<td colspan="3">'
+                    '<div class="card clearfix mb-4 ">'
+                    '<div class="card-header bg-light d-flex '
+                    'align-items-center px-3 py-2">'
+                    '<div>'
+                    '<div id="comment-%(commentid)s">'
                     '<img class="avatar circle" src="%(avatar_url)s"/>'
                     '<a href="%(url)s" title="%(user_html)s">'
                     '%(user)s</a> commented '
                     '<a class="headerlink" title="Permalink '
                     'to this headline" href="#comment-%(commentid)s">'
                     '<span title="%(date)s">%(human_date)s</span>'
-                    '</a></div></small>'
+                    '</a></div>'
+                    '</div>'
+                    '<div>'
+                    '%(templ_edit)s'
+                    '%(templ_delete)s'
+                    '</div>'
+                    '</div>'
+                    '<div class="card-block">'
+                    '<small></small>'
                     '<section class="issue_comment">'
                     '<div class="comment_body">'
                     '%(comment)s'
                     '</div>'
                     '</section>'
-                    '<div class="issue_actions m-t-2">'
-                    '%(templ_edited)s'
-                    '<aside class="btn-group issue_action icon '
-                    'pull-xs-right p-b-1">'
-                    '%(templ_edit)s'
-                    '%(templ_delete)s'
-                    '</aside>'
-                    '</div></div></div>'
+                    '</div></div>'
                     '</td></tr>' % (
                         {
                             'url': flask.url_for(

