Changeset - 77f13ea8ad3b
[Not reviewed]
default
0 2 0
Thomas De Schampheleire - 8 years ago 2017-10-25 09:10:30
thomas.de.schampheleire@gmail.com
Grafted from: a77373ff8f7b
style: mark failed comment submissions with red panel heading

Make it more obvious to the user that a comment submission failed: mark the
panel of the failed comment as "panel-danger" so the color of the comment panel
heading changes to red.

Previously, only the user and comment text would fade a bit.
2 files changed with 2 insertions and 6 deletions:
0 comments (0 inline, 0 general)
kallithea/front-end/style.less
Show inline comments
 
@@ -471,196 +471,192 @@ div#legend_choices {
 

	
 
#content div.panel ol.lower-roman,
 
#content div.panel ol.upper-roman,
 
#content div.panel ol.lower-alpha,
 
#content div.panel ol.upper-alpha,
 
#content div.panel ol.decimal {
 
  margin: 10px 24px 10px 44px;
 
}
 

	
 
div.form div.form-group div.button input,
 
#content div.panel div.form div.buttons input,
 
div.form div.buttons input,
 
#content div.panel div.action div.button input {
 
  font-size: 11px;
 
  font-weight: 700;
 
  margin: 0;
 
}
 
div.form div.form-group div.highlight,
 
#content div.panel div.form div.buttons div.highlight {
 
  display: inline;
 
}
 
#content div.panel table td.user,
 
#content div.panel table td.address {
 
  width: 10%;
 
  text-align: center;
 
}
 
#content div.panel div.action div.button {
 
  text-align: right;
 
  margin: 6px 0 0;
 
  padding: 0;
 
}
 
.ac .match {
 
  font-weight: 700;
 
  padding-top: 5px;
 
  padding-bottom: 5px;
 
}
 
.q_filter_box {
 
  border-radius: 4px;
 
  border: 0 none;
 
  margin-bottom: -4px;
 
  margin-top: -4px;
 
  padding-left: 3px;
 
}
 
#node_filter {
 
  border: 0px solid #545454;
 
  color: #AAAAAA;
 
  padding-left: 3px;
 
}
 
/** comment main **/
 
.comment .panel,
 
.comment-inline-form {
 
  max-width: 978px;
 
}
 
.comment .panel-body {
 
  background-color: #FAFAFA;
 
}
 
.comments-number {
 
  padding: 10px 0;
 
  color: #666;
 
}
 
.automatic-comment {
 
  font-style: italic;
 
}
 
/** comment form **/
 
.status-block {
 
  margin: 5px;
 
  clear: both;
 
}
 
.panel-heading .pull-left input[type=checkbox],
 
.panel-heading .pull-right input[type=checkbox] {
 
  position: relative;
 
  top: 4px;
 
  margin: -10px 2px 0;
 
}
 
/** indent actual inline comments - not general comments **/
 
td.inline-comments {
 
  padding: @kallithea-panel-margin;
 
}
 
.inline-comments .comments-number {
 
  padding: 0px 0px 10px 0px;
 
}
 
.comment-inline-well {
 
  margin-bottom: @kallithea-panel-margin;
 
}
 
input.status_change_checkbox,
 
input.status_change_radio {
 
  margin: 0 0 5px 15px;
 
}
 
@keyframes animated-comment-background {
 
  0% {
 
    background-position: 0 0;
 
  }
 
  100% {
 
    background-position: 20px 0;
 
  }
 
}
 
.comment-preview.failed .user,
 
.comment-preview.failed .panel-body {
 
  color: #666;
 
}
 
.comment-preview .comment-submission-status {
 
  float: right;
 
}
 
.comment-preview .comment-submission-status .btn-group {
 
  margin-left: 10px;
 
}
 
.comment-preview.submitting .panel-body {
 
  background-image: linear-gradient(-45deg, #FAFAFA, #FAFAFA 25%, #FFF 25%, #FFF 50%, #FAFAFA 50%, #FAFAFA 75%, #FFF 75%, #FFF 100%);
 
  background-size: 20px 20px;
 
  animation: animated-comment-background 0.4s linear infinite;
 
}
 
/****
 
PULL REQUESTS
 
*****/
 
div.pr-details-title.closed {
 
  color: #555;
 
  background: #eee;
 
}
 
div.pr {
 
  margin: 0px 15px;
 
  padding: 4px 4px;
 
}
 
tr.pr-closed td {
 
  background-color: #eee !important;
 
  color: #555 !important;
 
}
 
span.pr-closed-tag {
 
  margin-bottom: 1px;
 
  margin-right: 1px;
 
  padding: 1px 3px;
 
  font-size: 10px;
 
  color: @kallithea-theme-main-color;
 
  white-space: nowrap;
 
  border-radius: 4px;
 
  border: 1px solid #d9e8f8;
 
  line-height: 1.5em;
 
}
 
#s2id_org_ref,
 
#s2id_other_ref,
 
#s2id_org_repo,
 
#s2id_other_repo {
 
  min-width: 150px;
 
  margin: 5px;
 
}
 
#pr-summary > .pr-not-edit {
 
  min-height: 50px !important;
 
}
 
/* make 'next iteration' changeset table smaller and scrollable */
 
#pr-summary #updaterevs {
 
  max-height: 200px;
 
  overflow-y: auto;
 
  overflow-x: hidden;
 
}
 

	
 
/****
 
  PERMS
 
*****/
 
.perm-gravatar-ac {
 
  vertical-align: middle;
 
  padding: 2px;
 
  width: 14px;
 
  height: 14px;
 
}
 

	
 
/* avoid gaps between the navbar and browser */
 
.navbar.mainmenu {
 
  border-top-left-radius: 0;
 
  border-top-right-radius: 0;
 
}
 
.navbar.footer {
 
  border-bottom-left-radius: 0;
 
  border-bottom-right-radius: 0;
 
}
 

	
 
/* show some context of link targets - but only works when the link target
 
   can be extended with any visual difference */
 
div.comment:target:before {
 
  display: block;
 
  height: 100px;
 
  margin: -100px 0 0;
 
  content: "";
 
}
 
div.comment:target > .panel {
 
  border: solid 2px #ee0 !important;
 
}
 
.lineno:target a {
 
  border: solid 2px #ee0 !important;
 
  margin: -2px;
 
}
 
.btn-image-diff-show,
 
.btn-image-diff-swap {
 
  margin: 5px;
 
}
 
.img-diff {
 
  max-width: 45%;
 
  height: auto;
kallithea/public/js/base.js
Show inline comments
 
@@ -574,207 +574,207 @@ function comment_div_state($comment_div,
 
    $forms.remove();
 
    $buttonrow.remove();
 
    if (show_form) {
 
        _comment_div_append_form($comment_div, f_path, line_no);
 
    } else if ($comments.length) {
 
        _comment_div_append_add($comment_div, f_path, line_no);
 
    } else {
 
        $comment_div.parent('tr').remove();
 
    }
 
}
 

	
 
// append an Add button to $comment_div and hook it up to show form
 
function _comment_div_append_add($comment_div, f_path, line_no) {
 
    var addlabel = TRANSLATION_MAP['Add Another Comment'];
 
    var $add = $('<div class="add-button-row"><span class="btn btn-default btn-xs add-button">{0}</span></div>'.format(addlabel));
 
    $comment_div.append($add);
 
    $add.children('.add-button').click(function() {
 
        comment_div_state($comment_div, f_path, line_no, true);
 
    });
 
}
 

	
 
// append a comment form to $comment_div
 
// Note: var AJAX_COMMENT_URL must have been defined before invoking this function
 
function _comment_div_append_form($comment_div, f_path, line_no) {
 
    var $form_div = $('#comment-inline-form-template').children()
 
        .clone()
 
        .addClass('comment-inline-form');
 
    $comment_div.append($form_div);
 
    var $preview = $comment_div.find("div.comment-preview");
 
    var $form = $comment_div.find("form");
 
    var $textarea = $form.find('textarea');
 

	
 
    $form.submit(function(e) {
 
        e.preventDefault();
 

	
 
        var text = $textarea.val();
 
        var review_status = $form.find('input:radio[name=changeset_status]:checked').val();
 
        var pr_close = $form.find('input:checkbox[name=save_close]:checked').length ? 'on' : '';
 
        var pr_delete = $form.find('input:checkbox[name=save_delete]:checked').length ? 'delete' : '';
 

	
 
        if (!text && !review_status && !pr_close && !pr_delete) {
 
            alert("Please provide a comment");
 
            return false;
 
        }
 

	
 
        if (pr_delete) {
 
            if (text || review_status || pr_close) {
 
                alert('Cannot delete pull request while making other changes');
 
                return false;
 
            }
 
            if (!confirm('Confirm to delete this pull request')) {
 
                return false;
 
            }
 
            var comments = $('.comment').length;
 
            if (comments > 0 &&
 
                !confirm('Confirm again to delete this pull request with {0} comments'.format(comments))) {
 
                return false;
 
            }
 
        }
 

	
 
        if (review_status) {
 
            var $review_status = $preview.find('.automatic-comment');
 
            var review_status_lbl = $("#comment-inline-form-template input.status_change_radio[value='" + review_status + "']").parent().text().strip();
 
            $review_status.find('.comment-status-label').text(review_status_lbl);
 
            $review_status.show();
 
        }
 
        $preview.find('.comment-text div').text(text);
 
        $preview.show();
 
        $textarea.val('');
 
        if (f_path && line_no) {
 
            $form.hide();
 
        }
 

	
 
        var postData = {
 
            'text': text,
 
            'f_path': f_path,
 
            'line': line_no,
 
            'changeset_status': review_status,
 
            'save_close': pr_close,
 
            'save_delete': pr_delete
 
        };
 
        function success(json_data) {
 
            if (pr_delete) {
 
                location = json_data['location'];
 
            } else {
 
                $comment_div.append(json_data['rendered_text']);
 
                comment_div_state($comment_div, f_path, line_no);
 
                linkInlineComments($('.firstlink'), $('.comment:first-child'));
 
                if ((review_status || pr_close) && !f_path && !line_no) {
 
                    // Page changed a lot - reload it after closing the submitted form
 
                    comment_div_state($comment_div, f_path, line_no, false);
 
                    location.reload(true);
 
                }
 
            }
 
        }
 
        function failure(x, s, e) {
 
            $preview.removeClass('submitting').addClass('failed');
 
            $preview.removeClass('submitting').children('.panel').addClass('panel-danger');
 
            var $status = $preview.find('.comment-submission-status');
 
            $('<span>', {
 
                'title': e,
 
                text: _TM['Unable to post']
 
            }).replaceAll($status.contents());
 
            $('<div>', {
 
                'class': 'btn-group'
 
            }).append(
 
                $('<button>', {
 
                    'class': 'btn btn-default btn-xs',
 
                    text: _TM['Retry']
 
                }).click(function() {
 
                    $status.text(_TM['Submitting ...']);
 
                    $preview.addClass('submitting').removeClass('failed');
 
                    $preview.addClass('submitting').children('.panel').removeClass('panel-danger');
 
                    ajaxPOST(AJAX_COMMENT_URL, postData, success, failure);
 
                }),
 
                $('<button>', {
 
                    'class': 'btn btn-default btn-xs',
 
                    text: _TM['Cancel']
 
                }).click(function() {
 
                    comment_div_state($comment_div, f_path, line_no);
 
                })
 
            ).appendTo($status);
 
        }
 
        ajaxPOST(AJAX_COMMENT_URL, postData, success, failure);
 
    });
 

	
 
    // add event handler for hide/cancel buttons
 
    $form.find('.hide-inline-form').click(function() {
 
        comment_div_state($comment_div, f_path, line_no);
 
    });
 

	
 
    tooltip_activate();
 
    if ($textarea.length > 0) {
 
        MentionsAutoComplete($textarea);
 
    }
 
    if (f_path) {
 
        $textarea.focus();
 
    }
 
}
 

	
 

	
 
// Note: var AJAX_COMMENT_URL must have been defined before invoking this function
 
function deleteComment(comment_id) {
 
    var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__', comment_id);
 
    var postData = {};
 
    function success() {
 
        $('#comment-'+comment_id).remove();
 
        // Ignore that this might leave a stray Add button (or have a pending form with another comment) ...
 
    }
 
    ajaxPOST(url, postData, success);
 
}
 

	
 

	
 
/**
 
 * Double link comments
 
 */
 
function linkInlineComments($firstlinks, $comments){
 
    if ($comments.length > 0) {
 
        $firstlinks.html('<a href="#{0}">First comment</a>'.format($comments.prop('id')));
 
    }
 
    if ($comments.length <= 1) {
 
        return;
 
    }
 

	
 
    $comments.each(function(i){
 
            var prev = '';
 
            if (i > 0){
 
                var prev_anchor = $($comments.get(i-1)).prop('id');
 
                prev = '<a href="#{0}">Previous comment</a>'.format(prev_anchor);
 
            }
 
            var next = '';
 
            if (i+1 < $comments.length){
 
                var next_anchor = $($comments.get(i+1)).prop('id');
 
                next = '<a href="#{0}">Next comment</a>'.format(next_anchor);
 
            }
 
            $(this).find('.comment-prev-next-links').html(
 
                '<div class="prev-comment">{0}</div>'.format(prev) +
 
                '<div class="next-comment">{0}</div>'.format(next));
 
        });
 
}
 

	
 
/* activate files.html stuff */
 
function fileBrowserListeners(node_list_url, url_base){
 
    var $node_filter = $('#node_filter');
 

	
 
    var filterTimeout = null;
 
    var nodes = null;
 

	
 
    function initFilter(){
 
        $('#node_filter_box_loading').show();
 
        $('#search_activate_id').hide();
 
        $('#add_node_id').hide();
 
        $.ajax({url: node_list_url, headers: {'X-PARTIAL-XHR': '1'}, cache: false})
 
            .done(function(json) {
 
                    nodes = json.nodes;
 
                    $('#node_filter_box_loading').hide();
 
                    $('#node_filter_box').show();
 
                    $node_filter.focus();
 
                    if($node_filter.hasClass('init')){
 
                        $node_filter.val('');
 
                        $node_filter.removeClass('init');
 
                    }
 
                })
 
            .fail(function() {
 
                    console.log('fileBrowserListeners initFilter failed to load');
 
                })
 
        ;
 
    }
 

	
0 comments (0 inline, 0 general)