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>
-                      %endfor
+                      % 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>
+                      % 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>
@@ -169,19 +171,19 b''
                %if comment.immutable is False and (c.is_super_admin or h.HasRepoPermissionAny('repository.admin')(c.repo_name) or comment.author.user_id == c.rhodecode_user.user_id):
                     %if comment.comment_type == 'note':
                        <a onclick="return Rhodecode.comments.editComment(this);"
-                          class="edit-comment"> ${_('Edit')}</a>
+                          class="edit-comment">${_('Edit')}</a>
                     %else:
-                        <button class="btn-link" disabled="disabled"> ${_('Edit')}</button>
+                        <button class="btn-link" disabled="disabled">${_('Edit')}</button>
                     %endif
                        | <a onclick="return Rhodecode.comments.deleteComment(this);"
-                          class="delete-comment"> ${_('Delete')}</a>
+                          class="delete-comment">${_('Delete')}</a>
                %else:
-                  <button class="btn-link" disabled="disabled"> ${_('Edit')}</button>
-                  | <button class="btn-link" disabled="disabled"> ${_('Delete')}</button>
+                  <button class="btn-link" disabled="disabled">${_('Edit')}</button>
+                  | <button class="btn-link" disabled="disabled">${_('Delete')}</button>
                %endif
             %else:
-               <button class="btn-link" disabled="disabled"> ${_('Edit')}</button>
-               | <button class="btn-link" disabled="disabled"> ${_('Delete')}</button>
+               <button class="btn-link" disabled="disabled">${_('Edit')}</button>
+               | <button class="btn-link" disabled="disabled">${_('Delete')}</button>
             %endif
 
             % if outdated_at_ver:

rhodecode/templates/changeset/comment_history.mako

@@ -1,7 +1,31 b''
 <%namespace name="base" file="/base/base.mako"/>
 
-${c.comment_history.author.email}
-${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
+<%
+    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)}
+        </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