From ba3a3f15a6f0a0a83555268e595e8ac4e53a399c Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Aug 02 2018 08:56:35 +0000
Subject: update styling for ev issue comments


---

diff --git a/pagure/static/issue_ev.js b/pagure/static/issue_ev.js
index 99b4dc6..4d76862 100644
--- a/pagure/static/issue_ev.js
+++ b/pagure/static/issue_ev.js
@@ -23,9 +23,8 @@ add_tags = function(data, _issues_url) {
   var field = $('#taglist');
   for (i=0; i<data.added_tags.length; i++ ){
     tag = data.added_tags[i]
-    var html = '\n<a id="tag-' + tag + '" class="label label-default" '
-        + 'style="background-color:' + data.added_tags_color[i] + '" '
-        + 'href="' + _issues_url + '?tags=' + tag + '"> ' + tag + ' </a>';
+    var html = '<a id="tag-' + tag + '" title="" style="background-color:' + data.added_tags_color[i] + '; width:100%; display: block;"'
+            + ' class="badge badge-secondary text-left my-1 p-2" href="' + _issues_url + '?tags=' + tag + '">'+tag+'</a>';
     field.append(html);
     if ($select.length) {
       selectize.createItem(tag);
@@ -52,7 +51,6 @@ remove_tags = function(data, _issues_url) {
 
 assigne_issue = function(data, _issues_url) {
   console.log('assigning ' + data.assigned.name);
-
   var field = $('#assignee_plain');
   var _url = '\n<a href="'
         + _issues_url + '?assignee=' + data.assigned.name + '">'
@@ -71,7 +69,12 @@ unassigne_issue = function(data) {
   console.log('un-assigning ');
 
   var field = $('#assignee_plain');
-  field.html('unassigned');
+  var _html = '<div class="text-muted">None';
+  if ( data.comment_user == username) {
+  _html = _html + ' — <a href="javascript:void(0)" id="take-btn" title="assign this issue to you">Take</a>'
+  }
+  _html = _html + '</div>';
+  field.html(_html);
 
   var $select = $('#assignee').selectize();
   var selectize = $select[0].selectize;
@@ -132,58 +135,70 @@ add_comment = function(data, username) {
   console.log('Adding comment ' + data.comment_added);
   var field = $('#comments');
   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 + ' ">seconds ago</span>'
-                + '</div>'
-                + '<small>' + data.comment_added + '</small>'
-              + '</div>'
-            + '</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 {
-    var _data = '<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" \
-          href="#comment-' + data.comment_id + '"> \
-          <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"> \
-          <aside class="issue_action icon pull-xs-right p-b-1"> \
-          <div class="btn-group" aria-label="Basic example" role="group"> \
-          <a class="reply btn btn-secondary btn-sm" title="" data-toggle="tooltip" data-original-title="Reply to this comment - lose formatting"> \
-              <i class="fa fa-share-square-o"></i> \
-          </a>';
-      if ( data.comment_user == username) {
-            _data += '<a class="btn btn-secondary btn-sm" data-objid="' + data.issue_id
-            + '" data-comment="' + data.comment_id
-            + '" href="/' + data.project + '/issue/' + data.issue_id + '/comment/' + data.comment_id + '/edit"> \
-              <i class="fa fa-pencil"></i> \
-            </a> \
-            <button class="btn btn-secondary btn-sm" \
-              title="Remove comment" \
-              name="drop_comment" value="' + data.comment_id + '" type="submit"  \
-              onclick="return confirm(\'Do you really want to remove this comment?\');" \
-              ><i class="fa fa-trash"></i> \
-            </button>';
-      }
-      _data += '</aside> \
-        </div> \
-      </div> \
-      </div>';
+    var _data = '<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>'
   }
 
   field.html(field.html() + _data);
diff --git a/pagure/templates/_formhelper.html b/pagure/templates/_formhelper.html
index ed06d4f..9927051 100644
--- a/pagure/templates/_formhelper.html
+++ b/pagure/templates/_formhelper.html
@@ -111,7 +111,7 @@
 <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>
-        {{ comment.user.default_email | avatar(24) | safe }}
+        {{ comment.user.default_email | avatar(16) | safe }}
         <a href="{{ url_for('ui_ns.view_user', username=comment.user.user)}}"
             title="{{ comment.user.html_title }}"
             class="notblue font-weight-bold text-semimuted">
diff --git a/pagure/templates/issue.html b/pagure/templates/issue.html
index abe2557..3968813 100644
--- a/pagure/templates/issue.html
+++ b/pagure/templates/issue.html
@@ -185,7 +185,7 @@ namespace=repo.namespace, repo=repo.name, issueid=issueid)
         {% if comment.notification %}
           <div class="d-flex align-items-center px-3 py-2 mb-3">
             <div class="">
-                {{ comment.user.default_email | avatar(24) | safe }}
+                {{ comment.user.default_email | avatar(16) | safe }}
             </div>
             <span class="text-semimuted font-size-09 autogenerated-comment pl-4">{{ comment.comment | markdown | noJS | safe }}</span>
             <div class="text-muted ml-auto">

