comment-history: UI fixes

rhodecode/public/css/comments.less

@@ -1,629 +1,636 b''
 // comments.less
 // For use in RhodeCode applications;
 // see style guide documentation for guidelines.
 
 
 // Comments
 @comment-outdated-opacity: 0.6;
 
 .comments {
     width: 100%;
 }
 
 .comments-heading {
     margin-bottom: -1px;
     background: @grey6;
     display: block;
     padding: 10px 0px;
     font-size: 18px
 }
 
 #comment-tr-show {
     padding: 5px 0;
 }
 
 tr.inline-comments div {
     max-width: 100%;
 
     p {
         white-space: normal;
     }
 
     code, pre, .code, dd {
         overflow-x: auto;
         width: 1062px;
     }
 
     dd {
         width: auto;
     }
 }
 
 #injected_page_comments {
     .comment-previous-link,
     .comment-next-link,
     .comment-links-divider {
         display: none;
     }
 }
 
 .add-comment {
     margin-bottom: 10px;
 }
 .hide-comment-button .add-comment {
     display: none;
 }
 
 .comment-bubble {
     color: @grey4;
     margin-top: 4px;
     margin-right: 30px;
     visibility: hidden;
 }
 
 .comment-label {
     float: left;
 
     padding: 0.4em 0.4em;
     margin: 3px 5px 0px -10px;
     display: inline-block;
     min-height: 0;
 
     text-align: center;
     font-size: 10px;
     line-height: .8em;
 
     font-family: @text-italic;
     font-style: italic;
     background: #fff none;
     color: @grey4;
     border: 1px solid @grey4;
     white-space: nowrap;
 
     text-transform: uppercase;
     min-width: 40px;
 
     &.todo {
         color: @color5;
         font-style: italic;
         font-weight: @text-bold-italic-weight;
         font-family: @text-bold-italic;
     }
 
     .resolve {
         cursor: pointer;
         text-decoration: underline;
     }
 
     .resolved {
         text-decoration: line-through;
         color: @color1;
     }
     .resolved a {
         text-decoration: line-through;
         color: @color1;
     }
     .resolve-text {
         color: @color1;
         margin: 2px 8px;
         font-family: @text-italic;
         font-style: italic;
     }
 }
 
 .has-spacer-after {
     &:after {
         content: ' | ';
         color: @grey5;
     }
 }
 
 .has-spacer-before {
     &:before {
         content: ' | ';
         color: @grey5;
     }
 }
 
 .comment {
 
     &.comment-general {
         border: 1px solid @grey5;
         padding: 5px 5px 5px 5px;
     }
 
     margin: @padding 0;
     padding: 4px 0 0 0;
     line-height: 1em;
 
     .rc-user {
         min-width: 0;
         margin: 0px .5em 0 0;
 
         .user {
             display: inline;
         }
     }
 
     .meta {
         position: relative;
         width: 100%;
         border-bottom: 1px solid @grey5;
         margin: -5px 0px;
         line-height: 24px;
 
         &:hover .permalink {
             visibility: visible;
             color: @rcblue;
         }
     }
 
     .author,
     .date {
         display: inline;
 
         &:after {
             content: ' | ';
             color: @grey5;
         }
     }
 
     .author-general img {
         top: 3px;
     }
     .author-inline img {
         top: 3px;
     }
 
     .status-change,
     .permalink,
     .changeset-status-lbl {
         display: inline;
     }
 
     .permalink {
         visibility: hidden;
     }
 
     .comment-links-divider {
         display: inline;
     }
 
     .comment-links-block {
         float:right;
         text-align: right;
         min-width: 85px;
 
         [class^="icon-"]:before,
         [class*=" icon-"]:before {
             margin-left: 0;
             margin-right: 0;
         }
     }
 
     .comment-previous-link {
         display: inline-block;
 
         .arrow_comment_link{
             cursor: pointer;
             i {
                 font-size:10px;
             }
         }
         .arrow_comment_link.disabled {
             cursor: default;
             color: @grey5;
         }
     }
 
     .comment-next-link {
         display: inline-block;
 
         .arrow_comment_link{
             cursor: pointer;
             i {
                 font-size:10px;
             }
         }
         .arrow_comment_link.disabled {
             cursor: default;
             color: @grey5;
         }
     }
 
     .delete-comment {
         display: inline-block;
         color: @rcblue;
 
         &:hover {
             cursor: pointer;
         }
     }
 
     .text {
         clear: both;
         .border-radius(@border-radius);
         .box-sizing(border-box);
 
         .markdown-block p,
         .rst-block p {
             margin: .5em 0 !important;
           // TODO: lisa: This is needed because of other rst !important rules :[
         }
     }
 
     .pr-version {
         float: left;
         margin: 0px 4px;
     }
     .pr-version-inline {
         float: left;
         margin: 0px 4px;
     }
     .pr-version-num {
         font-size: 10px;
     }
 }
 
 @comment-padding: 5px;
 
 .general-comments {
     .comment-outdated {
         opacity: @comment-outdated-opacity;
     }
 }
 
 .inline-comments {
     border-radius: @border-radius;
     .comment {
         margin: 0;
         border-radius: @border-radius;
     }
     .comment-outdated {
         opacity: @comment-outdated-opacity;
     }
 
     .comment-inline {
         background: white;
         padding: @comment-padding @comment-padding;
         border: @comment-padding solid @grey6;
 
         .text {
             border: none;
         }
         .meta {
             border-bottom: 1px solid @grey6;
             margin: -5px 0px;
             line-height: 24px;
         }
     }
     .comment-selected {
         border-left: 6px solid @comment-highlight-color;
     }
     .comment-inline-form {
         padding: @comment-padding;
         display: none;
     }
     .cb-comment-add-button {
         margin: @comment-padding;
     }
      /* hide add comment button when form is open */
     .comment-inline-form-open ~ .cb-comment-add-button {
         display: none;
     }
     .comment-inline-form-open {
         display: block;
     }
      /* hide add comment button when form but no comments */
     .comment-inline-form:first-child + .cb-comment-add-button {
         display: none;
     }
      /* hide add comment button when no comments or form */
     .cb-comment-add-button:first-child {
         display: none;
     }
      /* hide add comment button when only comment is being deleted */
     .comment-deleting:first-child + .cb-comment-add-button {
         display: none;
     }
 }
 
 
 .show-outdated-comments {
     display: inline;
     color: @rcblue;
 }
 
 // Comment Form
 div.comment-form {
     margin-top: 20px;
 }
 
 .comment-form strong {
     display: block;
     margin-bottom: 15px;
 }
 
 .comment-form textarea {
     width: 100%;
     height: 100px;
     font-family: @text-monospace;
 }
 
 form.comment-form {
     margin-top: 10px;
     margin-left: 10px;
 }
 
 .comment-inline-form .comment-block-ta,
 .comment-form .comment-block-ta,
 .comment-form .preview-box {
     .border-radius(@border-radius);
     .box-sizing(border-box);
     background-color: white;
 }
 
 .comment-form-submit {
     margin-top: 5px;
     margin-left: 525px;
 }
 
 .file-comments {
     display: none;
 }
 
 .comment-form .preview-box.unloaded,
 .comment-inline-form .preview-box.unloaded {
     height: 50px;
     text-align: center;
     padding: 20px;
     background-color: white;
 }
 
 .comment-footer {
     position: relative;
     width: 100%;
     min-height: 42px;
 
     .status_box,
     .cancel-button {
         float: left;
         display: inline-block;
     }
 
     .status_box {
         margin-left: 10px;
     }
 
     .action-buttons {
         float: left;
         display: inline-block;
     }
 
     .action-buttons-extra {
         display: inline-block;
     }
 }
 
 .comment-form {
 
     .comment {
         margin-left: 10px;
     }
 
     .comment-help {
         color: @grey4;
         padding: 5px 0 5px 0;
     }
 
     .comment-title {
         padding: 5px 0 5px 0;
     }
 
     .comment-button {
         display: inline-block;
     }
 
     .comment-button-input {
         margin-right: 0;
     }
 
     .comment-footer {
         margin-bottom: 50px;
         margin-top: 10px;
     }
 }
 
 
 .comment-form-login {
     .comment-help {
         padding: 0.7em; //same as the button
     }
 
     div.clearfix {
         clear: both;
         width: 100%;
         display: block;
     }
 }
 
+.comment-version-select {
+    margin: 0px;
+    border-radius: inherit;
+    border-color: @grey6;
+    height: 20px;
+}
+
 .comment-type {
     margin: 0px;
     border-radius: inherit;
     border-color: @grey6;
 }
 
 .preview-box {
     min-height: 105px;
     margin-bottom: 15px;
     background-color: white;
     .border-radius(@border-radius);
     .box-sizing(border-box);
 }
 
 .add-another-button {
     margin-left: 10px;
     margin-top: 10px;
     margin-bottom: 10px;
 }
 
 .comment .buttons {
     float: right;
     margin: -1px 0px 0px 0px;
 }
 
 // Inline Comment Form
 .injected_diff .comment-inline-form,
 .comment-inline-form {
     background-color: white;
     margin-top: 10px;
     margin-bottom: 20px;
 }
 
 .inline-form {
     padding: 10px 7px;
 }
 
 .inline-form div {
     max-width: 100%;
 }
 
 .overlay {
     display: none;
     position: absolute;
     width: 100%;
     text-align: center;
     vertical-align: middle;
     font-size: 16px;
     background: none repeat scroll 0 0 white;
 
     &.submitting {
         display: block;
         opacity: 0.5;
         z-index: 100;
     }
 }
 .comment-inline-form .overlay.submitting .overlay-text {
     margin-top: 5%;
 }
 
 .comment-inline-form .clearfix,
 .comment-form .clearfix {
     .border-radius(@border-radius);
     margin: 0px;
 }
 
 .comment-inline-form .comment-footer {
     margin: 10px 0px 0px 0px;
 }
 
 .hide-inline-form-button {
     margin-left: 5px;
 }
 .comment-button .hide-inline-form {
     background: white;
 }
 
 .comment-area {
     padding: 6px 8px;
     border: 1px solid @grey5;
     .border-radius(@border-radius);
 
     .resolve-action {
         padding: 1px 0px 0px 6px;
     }
 
 }
 
 comment-area-text {
     color: @grey3;
 }
 
 .comment-area-header {
     height: 35px;
 }
 
 .comment-area-header .nav-links {
     display: flex;
     flex-flow: row wrap;
     -webkit-flex-flow: row wrap;
     width: 100%;
 }
 
 .comment-area-footer {
     min-height: 30px;
 }
 
 .comment-footer .toolbar {
 
 }
 
 .comment-attachment-uploader {
     border: 1px dashed white;
     border-radius: @border-radius;
     margin-top: -10px;
     line-height: 30px;
     &.dz-drag-hover {
         border-color: @grey3;
     }
 
     .dz-error-message {
         padding-top: 0;
     }
 }
 
 .comment-attachment-text {
     clear: both;
     font-size: 11px;
     color: #8F8F8F;
     width: 100%;
     .pick-attachment {
         color: #8F8F8F;
     }
     .pick-attachment:hover {
         color: @rcblue;
     }
 }
 
 .nav-links {
     padding: 0;
     margin: 0;
     list-style: none;
     height: auto;
     border-bottom: 1px solid @grey5;
 }
 .nav-links li {
     display: inline-block;
     list-style-type: none;
 }
 
 .nav-links li a.disabled {
     cursor: not-allowed;
 }
 
 .nav-links li.active a {
     border-bottom: 2px solid @rcblue;
     color: #000;
     font-weight: 600;
 }
 .nav-links li a {
     display: inline-block;
     padding: 0px 10px 5px 10px;
     margin-bottom: -1px;
     font-size: 14px;
     line-height: 28px;
     color: #8f8f8f;
     border-bottom: 2px solid transparent;
 }
 
 .toolbar-text {
     float: right;
     font-size: 11px;
     color: @grey4;
     text-align: right;
 
     a {
         color: @grey4;
     }
 }
 

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

@@ -1,1202 +1,1200 b''
 // # Copyright (C) 2010-2020 RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # RhodeCode Enterprise Edition, including its added features, Support services,
 // # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 var firefoxAnchorFix = function() {
   // hack to make anchor links behave properly on firefox, in our inline
   // comments generation when comments are injected firefox is misbehaving
   // when jumping to anchor links
   if (location.href.indexOf('#') > -1) {
     location.href += '';
   }
 };
 
 var linkifyComments = function(comments) {
   var firstCommentId = null;
   if (comments) {
       firstCommentId = $(comments[0]).data('comment-id');
   }
 
   if (firstCommentId){
     $('#inline-comments-counter').attr('href', '#comment-' + firstCommentId);
   }
 };
 
 var bindToggleButtons = function() {
   $('.comment-toggle').on('click', function() {
         $(this).parent().nextUntil('tr.line').toggle('inline-comments');
   });
 };
 
 
 
 var _submitAjaxPOST = function(url, postData, successHandler, failHandler) {
     failHandler = failHandler || function() {};
     postData = toQueryString(postData);
     var request = $.ajax({
         url: url,
         type: 'POST',
         data: postData,
         headers: {'X-PARTIAL-XHR': true}
     })
     .done(function (data) {
         successHandler(data);
     })
     .fail(function (data, textStatus, errorThrown) {
         failHandler(data, textStatus, errorThrown)
     });
     return request;
 };
 
 
 
 
 /* Comment form for main and inline comments */
 (function(mod) {
 
     if (typeof exports == "object" && typeof module == "object") {
         // CommonJS
         module.exports = mod();
     }
     else {
         // Plain browser env
         (this || window).CommentForm = mod();
     }
 
 })(function() {
     "use strict";
 
     function CommentForm(formElement, commitId, pullRequestId, lineNo, initAutocompleteActions, resolvesCommentId, edit, comment_id) {
 
         if (!(this instanceof CommentForm)) {
             return new CommentForm(formElement, commitId, pullRequestId, lineNo, initAutocompleteActions, resolvesCommentId, edit, comment_id);
         }
 
         // bind the element instance to our Form
         $(formElement).get(0).CommentForm = this;
 
         this.withLineNo = function(selector) {
             var lineNo = this.lineNo;
             if (lineNo === undefined) {
                 return selector
             } else {
                 return selector + '_' + lineNo;
             }
         };
 
         this.commitId = commitId;
         this.pullRequestId = pullRequestId;
         this.lineNo = lineNo;
         this.initAutocompleteActions = initAutocompleteActions;
 
         this.previewButton = this.withLineNo('#preview-btn');
         this.previewContainer = this.withLineNo('#preview-container');
 
         this.previewBoxSelector = this.withLineNo('#preview-box');
 
         this.editButton = this.withLineNo('#edit-btn');
         this.editContainer = this.withLineNo('#edit-container');
         this.cancelButton = this.withLineNo('#cancel-btn');
         this.commentType = this.withLineNo('#comment_type');
 
         this.resolvesId = null;
         this.resolvesActionId = null;
 
         this.closesPr = '#close_pull_request';
 
         this.cmBox = this.withLineNo('#text');
         this.cm = initCommentBoxCodeMirror(this, this.cmBox, this.initAutocompleteActions);
 
         this.statusChange = this.withLineNo('#change_status');
 
         this.submitForm = formElement;
         this.submitButton = $(this.submitForm).find('input[type="submit"]');
         this.submitButtonText = this.submitButton.val();
 
 
         this.previewUrl = pyroutes.url('repo_commit_comment_preview',
             {'repo_name': templateContext.repo_name,
              'commit_id': templateContext.commit_data.commit_id});
 
         if (edit){
             this.submitButtonText = _gettext('Updated Comment');
             $(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());
         }
 
         if (resolvesCommentId){
             this.resolvesId = '#resolve_comment_{0}'.format(resolvesCommentId);
             this.resolvesActionId = '#resolve_comment_action_{0}'.format(resolvesCommentId);
             $(this.commentType).prop('disabled', true);
             $(this.commentType).addClass('disabled');
 
             // disable select
             setTimeout(function() {
                 $(self.statusChange).select2('readonly', true);
             }, 10);
 
             var resolvedInfo = (
                 '<li class="resolve-action">' +
                 '<input type="hidden" id="resolve_comment_{0}" name="resolve_comment_{0}" value="{0}">' +
                 '<button id="resolve_comment_action_{0}" class="resolve-text btn btn-sm" onclick="return Rhodecode.comments.submitResolution({0})">{1} #{0}</button>' +
                 '</li>'
             ).format(resolvesCommentId, _gettext('resolve comment'));
             $(resolvedInfo).insertAfter($(this.commentType).parent());
         }
 
         // based on commitId, or pullRequestId decide where do we submit
         // out data
         if (this.commitId){
             var pyurl = 'repo_commit_comment_create';
             if(edit){
                 pyurl = 'repo_commit_comment_edit';
             }
             this.submitUrl = pyroutes.url(pyurl,
                 {'repo_name': templateContext.repo_name,
                  'commit_id': this.commitId,
                  'comment_id': comment_id});
             this.selfUrl = pyroutes.url('repo_commit',
                 {'repo_name': templateContext.repo_name,
                  'commit_id': this.commitId});
 
         } else if (this.pullRequestId) {
             var pyurl = 'pullrequest_comment_create';
             if(edit){
                 pyurl = 'pullrequest_comment_edit';
             }
             this.submitUrl = pyroutes.url(pyurl,
                 {'repo_name': templateContext.repo_name,
                  'pull_request_id': this.pullRequestId,
                  'comment_id': comment_id});
             this.selfUrl = pyroutes.url('pullrequest_show',
                 {'repo_name': templateContext.repo_name,
                  'pull_request_id': this.pullRequestId});
 
         } else {
             throw new Error(
                 'CommentForm requires pullRequestId, or commitId to be specified.')
         }
 
         // FUNCTIONS and helpers
         var self = this;
 
         this.isInline = function(){
             return this.lineNo && this.lineNo != 'general';
         };
 
         this.getCmInstance = function(){
             return this.cm
         };
 
         this.setPlaceholder = function(placeholder) {
             var cm = this.getCmInstance();
             if (cm){
                 cm.setOption('placeholder', placeholder);
             }
         };
 
         this.getCommentStatus = function() {
           return $(this.submitForm).find(this.statusChange).val();
         };
         this.getCommentType = function() {
           return $(this.submitForm).find(this.commentType).val();
         };
 
         this.getResolvesId = function() {
             return $(this.submitForm).find(this.resolvesId).val() || null;
         };
 
         this.getClosePr = function() {
             return $(this.submitForm).find(this.closesPr).val() || null;
         };
 
         this.markCommentResolved = function(resolvedCommentId){
             $('#comment-label-{0}'.format(resolvedCommentId)).find('.resolved').show();
             $('#comment-label-{0}'.format(resolvedCommentId)).find('.resolve').hide();
         };
 
         this.isAllowedToSubmit = function() {
           return !$(this.submitButton).prop('disabled');
         };
 
         this.initStatusChangeSelector = function(){
             var formatChangeStatus = function(state, escapeMarkup) {
                 var originalOption = state.element;
                 var tmpl = '<i class="icon-circle review-status-{0}"></i><span>{1}</span>'.format($(originalOption).data('status'), escapeMarkup(state.text));
                 return tmpl
             };
             var formatResult = function(result, container, query, escapeMarkup) {
                 return formatChangeStatus(result, escapeMarkup);
             };
 
             var formatSelection = function(data, container, escapeMarkup) {
                 return formatChangeStatus(data, escapeMarkup);
             };
 
             $(this.submitForm).find(this.statusChange).select2({
                 placeholder: _gettext('Status Review'),
                 formatResult: formatResult,
                 formatSelection: formatSelection,
                 containerCssClass: "drop-menu status_box_menu",
                 dropdownCssClass: "drop-menu-dropdown",
                 dropdownAutoWidth: true,
                 minimumResultsForSearch: -1
             });
             $(this.submitForm).find(this.statusChange).on('change', function() {
                 var status = self.getCommentStatus();
 
                 if (status && !self.isInline()) {
                     $(self.submitButton).prop('disabled', false);
                 }
 
                 var placeholderText = _gettext('Comment text will be set automatically based on currently selected status ({0}) ...').format(status);
                 self.setPlaceholder(placeholderText)
             })
         };
 
         // reset the comment form into it's original state
         this.resetCommentFormState = function(content) {
             content = content || '';
 
             $(this.editContainer).show();
             $(this.editButton).parent().addClass('active');
 
             $(this.previewContainer).hide();
             $(this.previewButton).parent().removeClass('active');
 
             this.setActionButtonsDisabled(true);
             self.cm.setValue(content);
             self.cm.setOption("readOnly", false);
 
             if (this.resolvesId) {
                 // destroy the resolve action
                 $(this.resolvesId).parent().remove();
             }
             // reset closingPR flag
             $('.close-pr-input').remove();
 
             $(this.statusChange).select2('readonly', false);
         };
 
         this.globalSubmitSuccessCallback = function(){
             // default behaviour is to call GLOBAL hook, if it's registered.
             if (window.commentFormGlobalSubmitSuccessCallback !== undefined){
                 commentFormGlobalSubmitSuccessCallback();
             }
         };
 
         this.submitAjaxPOST = function(url, postData, successHandler, failHandler) {
             return _submitAjaxPOST(url, postData, successHandler, failHandler);
         };
 
         // overwrite a submitHandler, we need to do it for inline comments
         this.setHandleFormSubmit = function(callback) {
             this.handleFormSubmit = callback;
         };
 
         // overwrite a submitSuccessHandler
         this.setGlobalSubmitSuccessCallback = function(callback) {
             this.globalSubmitSuccessCallback = callback;
         };
 
         // default handler for for submit for main comments
         this.handleFormSubmit = function() {
             var text = self.cm.getValue();
             var status = self.getCommentStatus();
             var commentType = self.getCommentType();
             var resolvesCommentId = self.getResolvesId();
             var closePullRequest = self.getClosePr();
 
             if (text === "" && !status) {
                 return;
             }
 
             var excludeCancelBtn = false;
             var submitEvent = true;
             self.setActionButtonsDisabled(true, excludeCancelBtn, submitEvent);
             self.cm.setOption("readOnly", true);
 
             var postData = {
                 'text': text,
                 'changeset_status': status,
                 'comment_type': commentType,
                 'csrf_token': CSRF_TOKEN
             };
 
             if (resolvesCommentId) {
                 postData['resolves_comment_id'] = resolvesCommentId;
             }
 
             if (closePullRequest) {
                 postData['close_pull_request'] = true;
             }
 
             var submitSuccessCallback = function(o) {
                 // reload page if we change status for single commit.
                 if (status && self.commitId) {
                     location.reload(true);
                 } else {
                     $('#injected_page_comments').append(o.rendered_text);
                     self.resetCommentFormState();
                     timeagoActivate();
                     tooltipActivate();
 
                     // mark visually which comment was resolved
                     if (resolvesCommentId) {
                         self.markCommentResolved(resolvesCommentId);
                     }
                 }
 
                 // run global callback on submit
                 self.globalSubmitSuccessCallback();
 
             };
             var submitFailCallback = function(jqXHR, textStatus, errorThrown) {
                 var prefix = "Error while submitting comment.\n"
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                 ajaxErrorSwal(message);
                 self.resetCommentFormState(text);
             };
             self.submitAjaxPOST(
                 self.submitUrl, postData, submitSuccessCallback, submitFailCallback);
         };
 
         this.previewSuccessCallback = function(o) {
             $(self.previewBoxSelector).html(o);
             $(self.previewBoxSelector).removeClass('unloaded');
 
             // swap buttons, making preview active
             $(self.previewButton).parent().addClass('active');
             $(self.editButton).parent().removeClass('active');
 
             // unlock buttons
             self.setActionButtonsDisabled(false);
         };
 
         this.setActionButtonsDisabled = function(state, excludeCancelBtn, submitEvent) {
             excludeCancelBtn = excludeCancelBtn || false;
             submitEvent = submitEvent || false;
 
             $(this.editButton).prop('disabled', state);
             $(this.previewButton).prop('disabled', state);
 
             if (!excludeCancelBtn) {
                 $(this.cancelButton).prop('disabled', state);
             }
 
             var submitState = state;
             if (!submitEvent && this.getCommentStatus() && !self.isInline()) {
                 // if the value of commit review status is set, we allow
                 // submit button, but only on Main form, isInline means inline
                 submitState = false
             }
 
             $(this.submitButton).prop('disabled', submitState);
             if (submitEvent) {
               $(this.submitButton).val(_gettext('Submitting...'));
             } else {
               $(this.submitButton).val(this.submitButtonText);
             }
 
         };
 
         // lock preview/edit/submit buttons on load, but exclude cancel button
         var excludeCancelBtn = true;
         this.setActionButtonsDisabled(true, excludeCancelBtn);
 
         // anonymous users don't have access to initialized CM instance
         if (this.cm !== undefined){
             this.cm.on('change', function(cMirror) {
                 if (cMirror.getValue() === "") {
                     self.setActionButtonsDisabled(true, excludeCancelBtn)
                 } else {
                     self.setActionButtonsDisabled(false, excludeCancelBtn)
                 }
             });
         }
 
         $(this.editButton).on('click', function(e) {
             e.preventDefault();
 
             $(self.previewButton).parent().removeClass('active');
             $(self.previewContainer).hide();
 
             $(self.editButton).parent().addClass('active');
             $(self.editContainer).show();
 
         });
 
         $(this.previewButton).on('click', function(e) {
             e.preventDefault();
             var text = self.cm.getValue();
 
             if (text === "") {
                 return;
             }
 
             var postData = {
                 'text': text,
                 'renderer': templateContext.visual.default_renderer,
                 'csrf_token': CSRF_TOKEN
             };
 
             // lock ALL buttons on preview
             self.setActionButtonsDisabled(true);
 
             $(self.previewBoxSelector).addClass('unloaded');
             $(self.previewBoxSelector).html(_gettext('Loading ...'));
 
             $(self.editContainer).hide();
             $(self.previewContainer).show();
 
             // by default we reset state of comment preserving the text
             var previewFailCallback = function(jqXHR, textStatus, errorThrown) {
                 var prefix = "Error while preview of comment.\n"
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                 ajaxErrorSwal(message);
 
                 self.resetCommentFormState(text)
             };
             self.submitAjaxPOST(
                 self.previewUrl, postData, self.previewSuccessCallback,
                 previewFailCallback);
 
             $(self.previewButton).parent().addClass('active');
             $(self.editButton).parent().removeClass('active');
         });
 
         $(this.submitForm).submit(function(e) {
             e.preventDefault();
             var allowedToSubmit = self.isAllowedToSubmit();
             if (!allowedToSubmit){
                return false;
             }
             self.handleFormSubmit();
         });
 
     }
 
     return CommentForm;
 });
 
 /* comments controller */
 var CommentsController = function() {
   var mainComment = '#text';
   var self = this;
 
   this.cancelComment = function (node) {
       var $node = $(node);
       var edit = $(this).attr('edit');
       if (edit) {
           var $general_comments = null;
           var $inline_comments = $node.closest('div.inline-comments');
           if (!$inline_comments.length) {
               $general_comments = $('#comments');
               var $comment = $general_comments.parent().find('div.comment:hidden');
               // show hidden general comment form
               $('#cb-comment-general-form-placeholder').show();
           } else {
               var $comment = $inline_comments.find('div.comment:hidden');
           }
           $comment.show();
       }
       $node.closest('.comment-inline-form').remove();
       return false;
   };
 
    this.showVersion = function (node) {
        var $node = $(node);
        var selectedIndex = $node.context.selectedIndex;
        var option = $node.find('option[value="'+ selectedIndex +'"]');
        var zero_option = $node.find('option[value="0"]');
        if (!option){
            return;
        }
 
        // little trick to cheat onchange and allow to display the same version again
        $node.context.selectedIndex = 0;
        zero_option.text(selectedIndex);
 
        var comment_history_id = option.attr('data-comment-history-id');
        var comment_id = option.attr('data-comment-id');
        var historyViewUrl = pyroutes.url(
            'repo_commit_comment_history_view',
            {
                'repo_name': templateContext.repo_name,
                'commit_id': comment_id,
                'comment_history_id': comment_history_id,
            }
        );
        successRenderCommit = function (data) {
            SwalNoAnimation.fire({
                html: data,
                title: '',
            });
        };
        failRenderCommit = function () {
            SwalNoAnimation.fire({
-               html: 'Error while loading comment',
+               html: 'Error while loading comment history',
                title: '',
            });
        };
        _submitAjaxPOST(
            historyViewUrl, {'csrf_token': CSRF_TOKEN}, successRenderCommit,
            failRenderCommit
        );
    };
 
   this.getLineNumber = function(node) {
       var $node = $(node);
       var lineNo = $node.closest('td').attr('data-line-no');
       if (lineNo === undefined && $node.data('commentInline')){
           lineNo = $node.data('commentLineNo')
       }
 
       return lineNo
   };
 
   this.scrollToComment = function(node, offset, outdated) {
     if (offset === undefined) {
       offset = 0;
     }
     var outdated = outdated || false;
     var klass = outdated ? 'div.comment-outdated' : 'div.comment-current';
 
     if (!node) {
       node = $('.comment-selected');
       if (!node.length) {
         node = $('comment-current')
       }
     }
 
     $wrapper = $(node).closest('div.comment');
 
     // show hidden comment when referenced.
     if (!$wrapper.is(':visible')){
         $wrapper.show();
     }
 
     $comment = $(node).closest(klass);
     $comments = $(klass);
 
     $('.comment-selected').removeClass('comment-selected');
 
     var nextIdx = $(klass).index($comment) + offset;
     if (nextIdx >= $comments.length) {
       nextIdx = 0;
     }
     var $next = $(klass).eq(nextIdx);
 
     var $cb = $next.closest('.cb');
     $cb.removeClass('cb-collapsed');
 
     var $filediffCollapseState = $cb.closest('.filediff').prev();
     $filediffCollapseState.prop('checked', false);
     $next.addClass('comment-selected');
     scrollToElement($next);
     return false;
   };
 
   this.nextComment = function(node) {
     return self.scrollToComment(node, 1);
   };
 
   this.prevComment = function(node) {
     return self.scrollToComment(node, -1);
   };
 
   this.nextOutdatedComment = function(node) {
     return self.scrollToComment(node, 1, true);
   };
 
   this.prevOutdatedComment = function(node) {
     return self.scrollToComment(node, -1, true);
   };
 
   this._deleteComment = function(node) {
       var $node = $(node);
       var $td = $node.closest('td');
       var $comment = $node.closest('.comment');
       var comment_id = $comment.attr('data-comment-id');
       var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__', comment_id);
       var postData = {
         'csrf_token': CSRF_TOKEN
       };
 
       $comment.addClass('comment-deleting');
       $comment.hide('fast');
 
       var success = function(response) {
         $comment.remove();
         return false;
       };
       var failure = function(jqXHR, textStatus, errorThrown) {
         var prefix = "Error while deleting this comment.\n"
         var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
         ajaxErrorSwal(message);
 
         $comment.show('fast');
         $comment.removeClass('comment-deleting');
         return false;
       };
       ajaxPOST(url, postData, success, failure);
   }
 
   this.deleteComment = function(node) {
     var $comment = $(node).closest('.comment');
     var comment_id = $comment.attr('data-comment-id');
 
     SwalNoAnimation.fire({
       title: 'Delete this comment?',
       icon: 'warning',
       showCancelButton: true,
       confirmButtonText: _gettext('Yes, delete comment #{0}!').format(comment_id),
 
     }).then(function(result) {
       if (result.value) {
         self._deleteComment(node);
       }
     })
   };
 
   this.toggleWideMode = function (node) {
       if ($('#content').hasClass('wrapper')) {
           $('#content').removeClass("wrapper");
           $('#content').addClass("wide-mode-wrapper");
           $(node).addClass('btn-success');
           return true
       } else {
           $('#content').removeClass("wide-mode-wrapper");
           $('#content').addClass("wrapper");
           $(node).removeClass('btn-success');
           return false
       }
 
   };
 
   this.toggleComments = function(node, show) {
     var $filediff = $(node).closest('.filediff');
     if (show === true) {
       $filediff.removeClass('hide-comments');
     } else if (show === false) {
       $filediff.find('.hide-line-comments').removeClass('hide-line-comments');
       $filediff.addClass('hide-comments');
     } else {
       $filediff.find('.hide-line-comments').removeClass('hide-line-comments');
       $filediff.toggleClass('hide-comments');
     }
     return false;
   };
 
   this.toggleLineComments = function(node) {
     self.toggleComments(node, true);
     var $node = $(node);
     // mark outdated comments as visible before the toggle;
     $(node.closest('tr')).find('.comment-outdated').show();
     $node.closest('tr').toggleClass('hide-line-comments');
   };
 
   this.createCommentForm = function(formElement, lineno, placeholderText, initAutocompleteActions, resolvesCommentId, edit, comment_id){
       var pullRequestId = templateContext.pull_request_data.pull_request_id;
       var commitId = templateContext.commit_data.commit_id;
 
       var commentForm = new CommentForm(
           formElement, commitId, pullRequestId, lineno, initAutocompleteActions, resolvesCommentId, edit, comment_id);
       var cm = commentForm.getCmInstance();
 
       if (resolvesCommentId){
         var placeholderText = _gettext('Leave a resolution comment, or click resolve button to resolve TODO comment #{0}').format(resolvesCommentId);
       }
 
       setTimeout(function() {
           // callbacks
           if (cm !== undefined) {
               commentForm.setPlaceholder(placeholderText);
               if (commentForm.isInline()) {
                 cm.focus();
                 cm.refresh();
               }
           }
       }, 10);
 
       // trigger scrolldown to the resolve comment, since it might be away
       // from the clicked
       if (resolvesCommentId){
         var actionNode = $(commentForm.resolvesActionId).offset();
 
         setTimeout(function() {
             if (actionNode) {
                 $('body, html').animate({scrollTop: actionNode.top}, 10);
             }
         }, 100);
       }
 
         // add dropzone support
         var insertAttachmentText = function (cm, attachmentName, attachmentStoreUrl, isRendered) {
             var renderer = templateContext.visual.default_renderer;
             if (renderer == 'rst') {
                 var attachmentUrl = '`#{0} <{1}>`_'.format(attachmentName, attachmentStoreUrl);
                 if (isRendered){
                     attachmentUrl = '\n.. image:: {0}'.format(attachmentStoreUrl);
                 }
             } else if (renderer == 'markdown') {
                 var attachmentUrl = '[{0}]({1})'.format(attachmentName, attachmentStoreUrl);
                 if (isRendered){
                     attachmentUrl = '!' + attachmentUrl;
                 }
             } else {
                 var attachmentUrl = '{}'.format(attachmentStoreUrl);
             }
             cm.replaceRange(attachmentUrl+'\n', CodeMirror.Pos(cm.lastLine()));
 
             return false;
         };
 
         //see: https://www.dropzonejs.com/#configuration
         var storeUrl = pyroutes.url('repo_commit_comment_attachment_upload',
             {'repo_name': templateContext.repo_name,
                      'commit_id': templateContext.commit_data.commit_id})
 
         var previewTmpl = $(formElement).find('.comment-attachment-uploader-template').get(0);
         if (previewTmpl !== undefined){
             var selectLink = $(formElement).find('.pick-attachment').get(0);
             $(formElement).find('.comment-attachment-uploader').dropzone({
                 url: storeUrl,
                 headers: {"X-CSRF-Token": CSRF_TOKEN},
                 paramName: function () {
                     return "attachment"
                 }, // The name that will be used to transfer the file
                 clickable: selectLink,
                 parallelUploads: 1,
                 maxFiles: 10,
                 maxFilesize: templateContext.attachment_store.max_file_size_mb,
                 uploadMultiple: false,
                 autoProcessQueue: true, // if false queue will not be processed automatically.
                 createImageThumbnails: false,
                 previewTemplate: previewTmpl.innerHTML,
 
                 accept: function (file, done) {
                     done();
                 },
                 init: function () {
 
                     this.on("sending", function (file, xhr, formData) {
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-text').hide();
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-upload').show();
                     });
 
                     this.on("success", function (file, response) {
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-text').show();
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-upload').hide();
 
                         var isRendered = false;
                         var ext = file.name.split('.').pop();
                         var imageExts = templateContext.attachment_store.image_ext;
                         if (imageExts.indexOf(ext) !== -1){
                             isRendered = true;
                         }
 
                         insertAttachmentText(cm, file.name, response.repo_fqn_access_path, isRendered)
                     });
 
                     this.on("error", function (file, errorMessage, xhr) {
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-upload').hide();
 
                         var error = null;
 
                         if (xhr !== undefined){
                             var httpStatus = xhr.status + " " + xhr.statusText;
                             if (xhr !== undefined && xhr.status >= 500) {
                                 error = httpStatus;
                             }
                         }
 
                         if (error === null) {
                             error = errorMessage.error || errorMessage || httpStatus;
                         }
                         $(file.previewElement).find('.dz-error-message').html('ERROR: {0}'.format(error));
 
                     });
                 }
             });
         }
       return commentForm;
   };
 
   this.createGeneralComment = function (lineNo, placeholderText, resolvesCommentId) {
 
       var tmpl = $('#cb-comment-general-form-template').html();
       tmpl = tmpl.format(null, 'general');
       var $form = $(tmpl);
 
       var $formPlaceholder = $('#cb-comment-general-form-placeholder');
       var curForm = $formPlaceholder.find('form');
       if (curForm){
           curForm.remove();
       }
       $formPlaceholder.append($form);
 
       var _form = $($form[0]);
       var autocompleteActions = ['approve', 'reject', 'as_note', 'as_todo'];
       var edit = false;
       var comment_id = null;
       var commentForm = this.createCommentForm(
           _form, lineNo, placeholderText, autocompleteActions, resolvesCommentId, edit, comment_id);
       commentForm.initStatusChangeSelector();
 
       return commentForm;
   };
   this.editComment = function(node) {
       var $node = $(node);
       var $comment = $(node).closest('.comment');
       var comment_id = $comment.attr('data-comment-id');
       var $form = null
 
       var $comments = $node.closest('div.inline-comments');
       var $general_comments = null;
       var lineno = null;
 
       if($comments.length){
           // inline comments setup
           $form = $comments.find('.comment-inline-form');
           lineno = self.getLineNumber(node)
       }
       else{
           // general comments setup
           $comments = $('#comments');
           $form = $comments.find('.comment-inline-form');
           lineno = $comment[0].id
           $('#cb-comment-general-form-placeholder').hide();
       }
 
       this.edit = true;
 
       if (!$form.length) {
 
           var $filediff = $node.closest('.filediff');
           $filediff.removeClass('hide-comments');
           var f_path = $filediff.attr('data-f-path');
 
           // create a new HTML from template
 
           var tmpl = $('#cb-comment-inline-form-template').html();
           tmpl = tmpl.format(escapeHtml(f_path), lineno);
           $form = $(tmpl);
           $comment.after($form)
 
           var _form = $($form[0]).find('form');
           var autocompleteActions = ['as_note',];
           var commentForm = this.createCommentForm(
               _form, lineno, '', autocompleteActions, resolvesCommentId,
               this.edit, comment_id);
           var old_comment_text_binary = $comment.attr('data-comment-text');
           var old_comment_text = b64DecodeUnicode(old_comment_text_binary);
           commentForm.cm.setValue(old_comment_text);
           $comment.hide();
 
            $.Topic('/ui/plugins/code/comment_form_built').prepareOrPublish({
                form: _form,
                parent: $comments,
                lineno: lineno,
                f_path: f_path}
            );
            // set a CUSTOM submit handler for inline comments.
             commentForm.setHandleFormSubmit(function(o) {
               var text = commentForm.cm.getValue();
               var commentType = commentForm.getCommentType();
               var resolvesCommentId = commentForm.getResolvesId();
 
               if (text === "") {
                 return;
               }
               if (old_comment_text == text) {
                   SwalNoAnimation.fire({
                       title: 'Unable to edit comment',
                       html: _gettext('Comment body was not changed.'),
                   });
                   return;
               }
               var excludeCancelBtn = false;
               var submitEvent = true;
               commentForm.setActionButtonsDisabled(true, excludeCancelBtn, submitEvent);
               commentForm.cm.setOption("readOnly", true);
               var dropDown = $('#comment_history_for_comment_'+comment_id);
 
               var version = dropDown.children().last().val()
               if(!version){
                   version = 0;
               }
               var postData = {
                   'text': text,
                   'f_path': f_path,
                   'line': lineno,
                   'comment_type': commentType,
                   'csrf_token': CSRF_TOKEN,
                   'version': version,
               };
 
               var submitSuccessCallback = function(json_data) {
                 $form.remove();
                 $comment.show();
                 var postData = {
                     'text': text,
                     'renderer': $comment.attr('data-comment-renderer'),
                     'csrf_token': CSRF_TOKEN
                 };
 
                 var updateCommentVersionDropDown = function () {
                     var dropDown = $('#comment_history_for_comment_'+comment_id);
                     $comment.attr('data-comment-text', btoa(text));
                     var version = json_data['comment_version']
                     var option = new Option(version, version);
                     var $option = $(option);
                     $option.attr('data-comment-history-id', json_data['comment_history_id']);
                     $option.attr('data-comment-id', json_data['comment_id']);
                     dropDown.append(option);
                     dropDown.parent().show();
                 }
                 updateCommentVersionDropDown();
                 // by default we reset state of comment preserving the text
                 var failRenderCommit = function(jqXHR, textStatus, errorThrown) {
                     var prefix = "Error while editing of comment.\n"
                     var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                     ajaxErrorSwal(message);
 
                 };
                 var successRenderCommit = function(o){
                     $comment.show();
                     $comment[0].lastElementChild.innerHTML = o;
                 }
                 var previewUrl = pyroutes.url('repo_commit_comment_preview',
                 {'repo_name': templateContext.repo_name,
                 'commit_id': templateContext.commit_data.commit_id});
 
                 _submitAjaxPOST(
                     previewUrl, postData, successRenderCommit,
                     failRenderCommit
                 );
 
                 try {
                   var html = json_data.rendered_text;
                   var lineno = json_data.line_no;
                   var target_id = json_data.target_id;
 
                   $comments.find('.cb-comment-add-button').before(html);
 
                   //mark visually which comment was resolved
                   if (resolvesCommentId) {
                       commentForm.markCommentResolved(resolvesCommentId);
                   }
 
                  //  run global callback on submit
                   commentForm.globalSubmitSuccessCallback();
 
                 } catch (e) {
                   console.error(e);
                 }
 
                 // re trigger the linkification of next/prev navigation
                 linkifyComments($('.inline-comment-injected'));
                 timeagoActivate();
                 tooltipActivate();
 
                 if (window.updateSticky !== undefined) {
                     // potentially our comments change the active window size, so we
                     // notify sticky elements
                     updateSticky()
                 }
 
                 commentForm.setActionButtonsDisabled(false);
 
               };
               var submitFailCallback = function(jqXHR, textStatus, errorThrown) {
                   var prefix = "Error while editing comment.\n"
                   var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                   ajaxErrorSwal(message);
                   commentForm.resetCommentFormState(text)
               };
               commentForm.submitAjaxPOST(
                   commentForm.submitUrl, postData, submitSuccessCallback, submitFailCallback);
             });
       }
 
       $form.addClass('comment-inline-form-open');
   };
   this.createComment = function(node, resolutionComment) {
       var resolvesCommentId = resolutionComment || null;
       var $node = $(node);
       var $td = $node.closest('td');
       var $form = $td.find('.comment-inline-form');
       this.edit = false;
 
       if (!$form.length) {
 
           var $filediff = $node.closest('.filediff');
           $filediff.removeClass('hide-comments');
           var f_path = $filediff.attr('data-f-path');
           var lineno = self.getLineNumber(node);
           // create a new HTML from template
           var tmpl = $('#cb-comment-inline-form-template').html();
           tmpl = tmpl.format(escapeHtml(f_path), lineno);
           $form = $(tmpl);
 
           var $comments = $td.find('.inline-comments');
           if (!$comments.length) {
             $comments = $(
               $('#cb-comments-inline-container-template').html());
             $td.append($comments);
           }
 
           $td.find('.cb-comment-add-button').before($form);
 
           var placeholderText = _gettext('Leave a comment on line {0}.').format(lineno);
           var _form = $($form[0]).find('form');
           var autocompleteActions = ['as_note', 'as_todo'];
           var comment_id=null;
           var commentForm = this.createCommentForm(
               _form, lineno, placeholderText, autocompleteActions, resolvesCommentId, this.edit, comment_id);
 
           $.Topic('/ui/plugins/code/comment_form_built').prepareOrPublish({
               form: _form,
               parent: $td[0],
               lineno: lineno,
               f_path: f_path}
           );
 
           // set a CUSTOM submit handler for inline comments.
           commentForm.setHandleFormSubmit(function(o) {
             var text = commentForm.cm.getValue();
             var commentType = commentForm.getCommentType();
             var resolvesCommentId = commentForm.getResolvesId();
 
             if (text === "") {
               return;
             }
 
             if (lineno === undefined) {
               alert('missing line !');
               return;
             }
             if (f_path === undefined) {
               alert('missing file path !');
               return;
             }
 
             var excludeCancelBtn = false;
             var submitEvent = true;
             commentForm.setActionButtonsDisabled(true, excludeCancelBtn, submitEvent);
             commentForm.cm.setOption("readOnly", true);
             var postData = {
                 'text': text,
                 'f_path': f_path,
                 'line': lineno,
                 'comment_type': commentType,
                 'csrf_token': CSRF_TOKEN
             };
             if (resolvesCommentId){
                 postData['resolves_comment_id'] = resolvesCommentId;
             }
 
             var submitSuccessCallback = function(json_data) {
               $form.remove();
               try {
                 var html = json_data.rendered_text;
                 var lineno = json_data.line_no;
                 var target_id = json_data.target_id;
 
                 $comments.find('.cb-comment-add-button').before(html);
 
                 //mark visually which comment was resolved
                 if (resolvesCommentId) {
                     commentForm.markCommentResolved(resolvesCommentId);
                 }
 
                 // run global callback on submit
                 commentForm.globalSubmitSuccessCallback();
 
               } catch (e) {
                 console.error(e);
               }
 
               // re trigger the linkification of next/prev navigation
               linkifyComments($('.inline-comment-injected'));
               timeagoActivate();
               tooltipActivate();
 
               if (window.updateSticky !== undefined) {
                   // potentially our comments change the active window size, so we
                   // notify sticky elements
                   updateSticky()
               }
 
               commentForm.setActionButtonsDisabled(false);
 
             };
             var submitFailCallback = function(jqXHR, textStatus, errorThrown) {
                 var prefix = "Error while submitting comment.\n"
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                 ajaxErrorSwal(message);
                 commentForm.resetCommentFormState(text)
             };
             commentForm.submitAjaxPOST(
                 commentForm.submitUrl, postData, submitSuccessCallback, submitFailCallback);
           });
       }
 
       $form.addClass('comment-inline-form-open');
   };
 
   this.createResolutionComment = function(commentId){
     // hide the trigger text
     $('#resolve-comment-{0}'.format(commentId)).hide();
 
     var comment = $('#comment-'+commentId);
     var commentData = comment.data();
     if (commentData.commentInline) {
         this.createComment(comment, commentId)
     } else {
         Rhodecode.comments.createGeneralComment('general', "$placeholder", commentId)
     }
 
     return false;
   };
 
   this.submitResolution = function(commentId){
     var form = $('#resolve_comment_{0}'.format(commentId)).closest('form');
     var commentForm = form.get(0).CommentForm;
 
     var cm = commentForm.getCmInstance();
     var renderer = templateContext.visual.default_renderer;
     if (renderer == 'rst'){
         var commentUrl = '`#{0} <{1}#comment-{0}>`_'.format(commentId, commentForm.selfUrl);
     } else if (renderer == 'markdown') {
         var commentUrl = '[#{0}]({1}#comment-{0})'.format(commentId, commentForm.selfUrl);
     } else {
         var commentUrl = '{1}#comment-{0}'.format(commentId, commentForm.selfUrl);
     }
 
     cm.setValue(_gettext('TODO from comment {0} was fixed.').format(commentUrl));
     form.submit();
     return false;
   };
 
 };

rhodecode/templates/changeset/changeset_file_comment.mako

@@ -1,465 +1,467 b''
 ## -*- coding: utf-8 -*-
 ## usage:
 ## <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
 ## ${comment.comment_block(comment)}
 ##
 
 <%!
     from rhodecode.lib import html_filters
 %>
 
 <%namespace name="base" file="/base/base.mako"/>
 <%def name="comment_block(comment, inline=False, active_pattern_entries=None)">
   <% pr_index_ver = comment.get_index_version(getattr(c, 'versions', [])) %>
   <% latest_ver = len(getattr(c, 'versions', [])) %>
   % if inline:
       <% outdated_at_ver = comment.outdated_at_version(getattr(c, 'at_version_num', None)) %>
   % else:
       <% outdated_at_ver = comment.older_than_version(getattr(c, 'at_version_num', None)) %>
   % endif
 
   <div class="comment
              ${'comment-inline' if inline else 'comment-general'}
              ${'comment-outdated' if outdated_at_ver else 'comment-current'}"
        id="comment-${comment.comment_id}"
        line="${comment.line_no}"
        data-comment-id="${comment.comment_id}"
        data-comment-type="${comment.comment_type}"
        data-comment-renderer="${comment.renderer}"
        data-comment-text="${comment.text | html_filters.base64,n}"
        data-comment-line-no="${comment.line_no}"
        data-comment-inline=${h.json.dumps(inline)}
        style="${'display: none;' if outdated_at_ver else ''}">
 
       <div class="meta">
           <div class="comment-type-label">
               <div class="comment-label ${comment.comment_type or 'note'}" id="comment-label-${comment.comment_id}" title="line: ${comment.line_no}">
               % if comment.comment_type == 'todo':
                   % if comment.resolved:
                       <div class="resolved tooltip" title="${_('Resolved by comment #{}').format(comment.resolved.comment_id)}">
                           <a href="#comment-${comment.resolved.comment_id}">${comment.comment_type}</a>
                       </div>
                   % else:
                       <div class="resolved tooltip" style="display: none">
                           <span>${comment.comment_type}</span>
                       </div>
                       <div class="resolve tooltip" onclick="return Rhodecode.comments.createResolutionComment(${comment.comment_id});" title="${_('Click to resolve this comment')}">
                         ${comment.comment_type}
                       </div>
                   % endif
               % else:
                   % if comment.resolved_comment:
                     fix
                     <a href="#comment-${comment.resolved_comment.comment_id}" onclick="Rhodecode.comments.scrollToComment($('#comment-${comment.resolved_comment.comment_id}'), 0, ${h.json.dumps(comment.resolved_comment.outdated)})">
                         <span style="text-decoration: line-through">#${comment.resolved_comment.comment_id}</span>
                     </a>
                   % else:
                     ${comment.comment_type or 'note'}
                   % endif
               % endif
               </div>
           </div>
 
           <div class="author ${'author-inline' if inline else 'author-general'}">
               ${base.gravatar_with_user(comment.author.email, 16, tooltip=True)}
           </div>
           <div class="date">
               ${h.age_component(comment.modified_at, time_is_local=True)}
           </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>
                   </select>
               </div>
           %endif
           % if inline:
               <span></span>
           % else:
               <div class="status-change">
                   % if comment.pull_request:
                       <a href="${h.route_path('pullrequest_show',repo_name=comment.pull_request.target_repo.repo_name,pull_request_id=comment.pull_request.pull_request_id)}">
                           % if comment.status_change:
                               ${_('pull request !{}').format(comment.pull_request.pull_request_id)}:
                           % else:
                               ${_('pull request !{}').format(comment.pull_request.pull_request_id)}
                           % endif
                       </a>
                   % else:
                       % if comment.status_change:
                           ${_('Status change on commit')}:
                       % endif
                   % endif
               </div>
           % endif
 
           % if comment.status_change:
             <i class="icon-circle review-status-${comment.status_change[0].status}"></i>
             <div title="${_('Commit status')}" class="changeset-status-lbl">
                  ${comment.status_change[0].status_lbl}
             </div>
           % endif
 
           <a class="permalink" href="#comment-${comment.comment_id}"> &para;</a>
 
           <div class="comment-links-block">
               % if comment.pull_request and comment.pull_request.author.user_id == comment.author.user_id:
                 <span class="tag authortag tooltip" title="${_('Pull request author')}">
                 ${_('author')}
                 </span>
                 |
               % endif
             % if inline:
                   <div class="pr-version-inline">
                     <a href="${request.current_route_path(_query=dict(version=comment.pull_request_version_id), _anchor='comment-{}'.format(comment.comment_id))}">
                     % if outdated_at_ver:
                         <code class="pr-version-num" title="${_('Outdated comment from pull request version v{0}, latest v{1}').format(pr_index_ver, latest_ver)}">
                             outdated ${'v{}'.format(pr_index_ver)} |
                         </code>
                     % elif pr_index_ver:
                         <code class="pr-version-num" title="${_('Comment from pull request version v{0}, latest v{1}').format(pr_index_ver, latest_ver)}">
                             ${'v{}'.format(pr_index_ver)} |
                         </code>
                     % endif
                     </a>
                   </div>
             % else:
                 % if comment.pull_request_version_id and pr_index_ver:
                     |
                     <div class="pr-version">
                       % if comment.outdated:
                         <a href="?version=${comment.pull_request_version_id}#comment-${comment.comment_id}">
                             ${_('Outdated comment from pull request version v{0}, latest v{1}').format(pr_index_ver, latest_ver)}
                         </a>
                       % else:
                         <div title="${_('Comment from pull request version v{0}, latest v{1}').format(pr_index_ver, latest_ver)}">
                             <a href="${h.route_path('pullrequest_show',repo_name=comment.pull_request.target_repo.repo_name,pull_request_id=comment.pull_request.pull_request_id, version=comment.pull_request_version_id)}">
                             <code class="pr-version-num">
                                 ${'v{}'.format(pr_index_ver)}
                             </code>
                             </a>
                         </div>
                       % endif
                     </div>
                 % endif
             % endif
 
             ## show delete comment if it's not a PR (regular comments) or it's PR that is not closed
             ## only super-admin, repo admin OR comment owner can delete, also hide delete if currently viewed comment is outdated
             %if not outdated_at_ver and (not comment.pull_request or (comment.pull_request and not comment.pull_request.is_closed())):
                ## permissions to delete
                %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>
                     %else:
                         <button class="btn-link" disabled="disabled"> ${_('Edit')}</button>
                     %endif
                        | <a onclick="return Rhodecode.comments.deleteComment(this);"
                           class="delete-comment"> ${_('Delete')}</a>
                %else:
                   <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>
             %endif
 
             % if outdated_at_ver:
                 | <a onclick="return Rhodecode.comments.prevOutdatedComment(this);" class="tooltip prev-comment" title="${_('Jump to the previous outdated comment')}"> <i class="icon-angle-left"></i> </a>
                 | <a onclick="return Rhodecode.comments.nextOutdatedComment(this);" class="tooltip next-comment" title="${_('Jump to the next outdated comment')}"> <i class="icon-angle-right"></i></a>
             % else:
                 | <a onclick="return Rhodecode.comments.prevComment(this);" class="tooltip prev-comment" title="${_('Jump to the previous comment')}"> <i class="icon-angle-left"></i></a>
                 | <a onclick="return Rhodecode.comments.nextComment(this);" class="tooltip next-comment" title="${_('Jump to the next comment')}"> <i class="icon-angle-right"></i></a>
             % endif
 
           </div>
       </div>
       <div class="text">
           ${h.render(comment.text, renderer=comment.renderer, mentions=True, repo_name=getattr(c, 'repo_name', None), active_pattern_entries=active_pattern_entries)}
       </div>
 
   </div>
 </%def>
 
 ## generate main comments
 <%def name="generate_comments(comments, include_pull_request=False, is_pull_request=False)">
   <%
     active_pattern_entries = h.get_active_pattern_entries(getattr(c, 'repo_name', None))
   %>
 
   <div class="general-comments" id="comments">
     %for comment in comments:
         <div id="comment-tr-${comment.comment_id}">
           ## only render comments that are not from pull request, or from
           ## pull request and a status change
           %if not comment.pull_request or (comment.pull_request and comment.status_change) or include_pull_request:
           ${comment_block(comment, active_pattern_entries=active_pattern_entries)}
           %endif
         </div>
     %endfor
     ## to anchor ajax comments
     <div id="injected_page_comments"></div>
   </div>
 </%def>
 
 
 <%def name="comments(post_url, cur_status, is_pull_request=False, is_compare=False, change_status=True, form_extras=None)">
 
 <div class="comments">
     <%
       if is_pull_request:
         placeholder = _('Leave a comment on this Pull Request.')
       elif is_compare:
         placeholder = _('Leave a comment on {} commits in this range.').format(len(form_extras))
       else:
         placeholder = _('Leave a comment on this Commit.')
     %>
 
     % if c.rhodecode_user.username != h.DEFAULT_USER:
     <div class="js-template" id="cb-comment-general-form-template">
         ## template generated for injection
         ${comment_form(form_type='general', review_statuses=c.commit_statuses, form_extras=form_extras)}
     </div>
 
     <div id="cb-comment-general-form-placeholder" class="comment-form ac">
         ## inject form here
     </div>
     <script type="text/javascript">
         var lineNo = 'general';
         var resolvesCommentId = null;
         var generalCommentForm = Rhodecode.comments.createGeneralComment(
             lineNo, "${placeholder}", resolvesCommentId);
 
         // set custom success callback on rangeCommit
         % if is_compare:
             generalCommentForm.setHandleFormSubmit(function(o) {
                 var self = generalCommentForm;
 
                 var text = self.cm.getValue();
                 var status = self.getCommentStatus();
                 var commentType = self.getCommentType();
 
                 if (text === "" && !status) {
                     return;
                 }
 
                 // we can pick which commits we want to make the comment by
                 // selecting them via click on preview pane, this will alter the hidden inputs
                 var cherryPicked = $('#changeset_compare_view_content .compare_select.hl').length > 0;
 
                 var commitIds = [];
                 $('#changeset_compare_view_content .compare_select').each(function(el) {
                     var commitId = this.id.replace('row-', '');
                     if ($(this).hasClass('hl') || !cherryPicked) {
                         $("input[data-commit-id='{0}']".format(commitId)).val(commitId);
                         commitIds.push(commitId);
                     } else {
                         $("input[data-commit-id='{0}']".format(commitId)).val('')
                     }
                 });
 
                 self.setActionButtonsDisabled(true);
                 self.cm.setOption("readOnly", true);
                 var postData = {
                     'text': text,
                     'changeset_status': status,
                     'comment_type': commentType,
                     'commit_ids': commitIds,
                     'csrf_token': CSRF_TOKEN
                 };
 
                 var submitSuccessCallback = function(o) {
                     location.reload(true);
                 };
                 var submitFailCallback = function(){
                     self.resetCommentFormState(text)
                 };
                 self.submitAjaxPOST(
                     self.submitUrl, postData, submitSuccessCallback, submitFailCallback);
             });
         % endif
 
     </script>
     % else:
     ## form state when not logged in
     <div class="comment-form ac">
 
         <div class="comment-area">
             <div class="comment-area-header">
                 <ul class="nav-links clearfix">
                     <li class="active">
                         <a class="disabled" href="#edit-btn" disabled="disabled" onclick="return false">${_('Write')}</a>
                     </li>
                     <li class="">
                         <a class="disabled" href="#preview-btn" disabled="disabled" onclick="return false">${_('Preview')}</a>
                     </li>
                 </ul>
             </div>
 
             <div class="comment-area-write" style="display: block;">
                 <div id="edit-container">
                     <div style="padding: 40px 0">
                       ${_('You need to be logged in to leave comments.')}
                       <a href="${h.route_path('login', _query={'came_from': h.current_route_path(request)})}">${_('Login now')}</a>
                     </div>
                 </div>
                 <div id="preview-container" class="clearfix" style="display: none;">
                     <div id="preview-box" class="preview-box"></div>
                 </div>
             </div>
 
             <div class="comment-area-footer">
                 <div class="toolbar">
                     <div class="toolbar-text">
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="comment-footer">
         </div>
 
     </div>
     % endif
 
     <script type="text/javascript">
         bindToggleButtons();
     </script>
 </div>
 </%def>
 
 
 <%def name="comment_form(form_type, form_id='', lineno_id='{1}', review_statuses=None, form_extras=None)">
 
   ## comment injected based on assumption that user is logged in
   <form ${('id="{}"'.format(form_id) if form_id else '') |n} action="#" method="GET">
 
     <div class="comment-area">
         <div class="comment-area-header">
             <div class="pull-left">
                 <ul class="nav-links clearfix">
                     <li class="active">
                         <a href="#edit-btn" tabindex="-1" id="edit-btn_${lineno_id}">${_('Write')}</a>
                     </li>
                     <li class="">
                         <a href="#preview-btn" tabindex="-1" id="preview-btn_${lineno_id}">${_('Preview')}</a>
                     </li>
                 </ul>
             </div>
             <div class="pull-right">
                 <span class="comment-area-text">${_('Mark as')}:</span>
                 <select class="comment-type" id="comment_type_${lineno_id}" name="comment_type">
                     % for val in c.visual.comment_types:
                         <option value="${val}">${val.upper()}</option>
                     % endfor
                 </select>
             </div>
         </div>
 
         <div class="comment-area-write" style="display: block;">
             <div id="edit-container_${lineno_id}">
                 <textarea id="text_${lineno_id}" name="text" class="comment-block-ta ac-input"></textarea>
             </div>
             <div id="preview-container_${lineno_id}" class="clearfix" style="display: none;">
                 <div id="preview-box_${lineno_id}" class="preview-box"></div>
             </div>
         </div>
 
         <div class="comment-area-footer comment-attachment-uploader">
             <div class="toolbar">
 
                 <div class="comment-attachment-text">
                     <div class="dropzone-text">
                         ${_("Drag'n Drop files here or")} <span class="link pick-attachment">${_('Choose your files')}</span>.<br>
                     </div>
                     <div class="dropzone-upload" style="display:none">
                         <i class="icon-spin animate-spin"></i> ${_('uploading...')}
                     </div>
                 </div>
 
                 ## comments dropzone template, empty on purpose
                 <div style="display: none" class="comment-attachment-uploader-template">
                     <div class="dz-file-preview" style="margin: 0">
                         <div class="dz-error-message"></div>
                     </div>
                 </div>
 
             </div>
         </div>
     </div>
 
     <div class="comment-footer">
 
         ## inject extra inputs into the form
         % if form_extras and isinstance(form_extras, (list, tuple)):
             <div id="comment_form_extras">
                 % for form_ex_el in form_extras:
                     ${form_ex_el|n}
                 % endfor
             </div>
         % endif
 
         <div class="action-buttons">
             % if form_type != 'inline':
                 <div class="action-buttons-extra"></div>
             % endif
 
             <input class="btn btn-success comment-button-input" id="save_${lineno_id}" name="save" type="submit" value="${_('Comment')}">
 
             ## inline for has a file, and line-number together with cancel hide button.
             % if form_type == 'inline':
                 <input type="hidden" name="f_path" value="{0}">
                 <input type="hidden" name="line" value="${lineno_id}">
                 <button type="button" class="cb-comment-cancel" onclick="return Rhodecode.comments.cancelComment(this);">
                 ${_('Cancel')}
                 </button>
             % endif
         </div>
 
         % if review_statuses:
         <div class="status_box">
           <select id="change_status_${lineno_id}" name="changeset_status">
               <option></option> ## Placeholder
               % for status, lbl in review_statuses:
               <option value="${status}" data-status="${status}">${lbl}</option>
                   %if is_pull_request and change_status and status in ('approved', 'rejected'):
                       <option value="${status}_closed" data-status="${status}">${lbl} & ${_('Closed')}</option>
                   %endif
               % endfor
           </select>
         </div>
         % endif
 
         <div class="toolbar-text">
             <% renderer_url = '<a href="%s">%s</a>' % (h.route_url('%s_help' % c.visual.default_renderer), c.visual.default_renderer.upper()) %>
             ${_('Comments parsed using {} syntax.').format(renderer_url)|n} <br/>
             <span class="tooltip" title="${_('Use @username inside this text to send notification to this RhodeCode user')}">@mention</span>
             ${_('and')}
             <span class="tooltip" title="${_('Start typing with / for certain actions to be triggered via text box.')}">`/` autocomplete</span>
             ${_('actions supported.')}
         </div>
     </div>
 
   </form>
 
 </%def>
  No newline at end of file

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