comment-history: UI fixes

rhodecode/public/css/comments.less

@@ -447,6 +447,13 b' form.comment-form {'
     }
 }
 
+.comment-version-select {
+    margin: 0px;
+    border-radius: inherit;
+    border-color: @grey6;
+    height: 20px;
+}
+
 .comment-type {
     margin: 0px;
     border-radius: inherit;

rhodecode/public/js/src/rhodecode/comments.js

@@ -137,9 +137,7 b' var _submitAjaxPOST = function(url, post'
             $(this.commentType).prop('disabled', true);
             $(this.commentType).addClass('disabled');
             var editInfo =
-                '<div class="comment-label note" id="comment-label-6" title="line: ">' +
-                'editing' +
-                '</div>';
+                '';
             $(editInfo).insertBefore($(this.editButton).parent());
         }
 
@@ -554,7 +552,7 b' var CommentsController = function() {'
        };
        failRenderCommit = function () {
            SwalNoAnimation.fire({
-               html: 'Error while loading comment',
+               html: 'Error while loading comment history',
                title: '',
            });
        };

rhodecode/templates/changeset/changeset_file_comment.mako

@@ -68,23 +68,25 b''
           </div>
           % if comment.history:
               <div class="date">
-                  <span class="comment-area-text">${_('Comment version')}:</span>
-                  <select class="comment-type" id="comment_history_for_comment_${comment.comment_id}"
+                  <span class="comment-area-text">${_('Edited')}:</span>
+                  <select class="comment-version-select" id="comment_history_for_comment_${comment.comment_id}"
                           onchange="return Rhodecode.comments.showVersion(this)"
                           name="comment_type">
+
                       <option style="display: none" value="0">---</option>
                       %for comment_history in comment.history:
-                          <option
-                                  data-comment-history-id="${comment_history.comment_history_id}",
-                                  data-comment-id="${comment.comment_id}",
-                                  value="${comment_history.version}">${comment_history.version}</option>
+                          <option data-comment-history-id="${comment_history.comment_history_id}"
+                                  data-comment-id="${comment.comment_id}"
+                                  value="${comment_history.version}">
+                              ${comment_history.version}
+                          </option>
                       %endfor
                   </select>
               </div>
           % else:
               <div class="date" style="display: none">
-                  <span class="comment-area-text">${_('Comment version')}</span>
-                  <select class="comment-type" id="comment_history_for_comment_${comment.comment_id}"
+                  <span class="comment-area-text">${_('Edited')}</span>
+                  <select class="comment-version-select" id="comment_history_for_comment_${comment.comment_id}"
                           onchange="return Rhodecode.comments.showVersion(this)"
                           name="comment_type">
                       <option style="display: none" value="0">---</option>

rhodecode/templates/changeset/comment_history.mako

@@ -1,7 +1,31 b''
 <%namespace name="base" file="/base/base.mako"/>
 
-${c.comment_history.author.email}
+<%
+    active_pattern_entries = h.get_active_pattern_entries(getattr(c, 'repo_name', None))
+%>
+
+## NOTE, inline styles are here to override the default rendering of
+## the swal JS dialog which this template is displayed
+
+<div style="text-align: left;">
+
+    <div style="border-bottom: 1px solid #dbd9da; padding-bottom: 5px; height: 20px">
+
+        <div class="pull-left">
 ${base.gravatar_with_user(c.comment_history.author.email, 16, tooltip=True)}
-${h.age_component(c.comment_history.created_on)}
-${c.comment_history.text}
-${c.comment_history.version}
  No newline at end of file
+        </div>
+
+        <div class="pull-right">
+            <code>edited: ${h.age_component(c.comment_history.created_on)}</code>
+        </div>
+
+    </div>
+
+    <div style="margin: 5px 0px">
+        <code>comment body at v${c.comment_history.version}:</code>
+    </div>
+    <div class="text" style="padding-top: 20px; border: 1px solid #dbd9da">
+      ${h.render(c.comment_history.text, renderer=c.comment_history.comment.renderer, mentions=True, repo_name=getattr(c, 'repo_name', None), active_pattern_entries=active_pattern_entries)}
+    </div>
+
+</div>
  No newline at end of file