Changeset - e81498114bc8
[Not reviewed]
stable
0 2 0
Mads Kiilerich - 10 years ago 2015-09-14 23:06:00
madski@unity3d.com
comments: fix comment add button - it is only the button that should be clickable, not the containing div
2 files changed with 5 insertions and 5 deletions:
0 comments (0 inline, 0 general)
kallithea/public/css/style.css
Show inline comments
 
@@ -4216,193 +4216,193 @@ form.comment-form {
 

	
 
.comment .buttons {
 
    float: right;
 
    margin: -1px 0px 0px 0px;
 
}
 

	
 

	
 
.show-inline-comments {
 
    position: relative;
 
    top: 1px
 
}
 

	
 
/** comment inline form **/
 
.comment-inline-form {
 
    margin: 4px;
 
    max-width: 978px;
 
}
 
.comment-inline-form .submitting-overlay {
 
    display: none;
 
    height: 0;
 
    text-align: center;
 
    font-size: 16px;
 
    opacity: 0.5;
 
}
 

	
 
.comment-inline-form .clearfix,
 
.comment-form .clearfix {
 
    background: #EEE;
 
    border-radius: 4px;
 
    padding: 5px;
 
    margin: 0px;
 
}
 

	
 
div.comment-inline-form {
 
    padding: 4px 0px 6px 0px;
 
}
 

	
 
.comment-inline-form textarea {
 
    width: 100%;
 
    height: 100px;
 
    font-family: Lucida Console, Consolas, Monaco, Inconsolata, Liberation Mono, monospace;
 
}
 

	
 
form.comment-inline-form {
 
    margin-top: 10px;
 
    margin-left: 10px;
 
}
 

	
 
.comment-inline-form-submit {
 
    margin-top: 5px;
 
    margin-left: 525px;
 
}
 

	
 
.file-comments {
 
    display: none;
 
}
 

	
 
.comment-inline-form .comment {
 
    margin-left: 10px;
 
}
 

	
 
.comment-inline-form .comment-help {
 
    padding: 5px 5px 5px 5px;
 
    color: #666;
 
}
 

	
 
.comment-inline-form .comment-help .preview-btn,
 
.comment-inline-form .comment-help .edit-btn {
 
    float: right;
 
    margin: -6px 0px 0px 0px;
 
}
 

	
 
.comment-inline-form .comment-button {
 
    padding-top: 5px;
 
}
 

	
 
/** comment inline **/
 
.inline-comments {
 
    padding: 0 20px;
 
}
 

	
 
.inline-comments div.rst-block {
 
    clear: both;
 
    overflow: hidden;
 
    margin: 0;
 
    padding: 0 20px 0px;
 
}
 

	
 
.inline-comments .comment .comment-wrapp {
 
    max-width: 978px;
 
    border: 1px solid #ddd;
 
    border-radius: 4px;
 
    margin: 3px 3px 5px 5px;
 
    background-color: #FAFAFA;
 
}
 

	
 
.inline-comments .add-comment {
 
.inline-comments .add-button-row {
 
    padding: 2px 4px 8px 5px;
 
}
 

	
 
.inline-comments .comment .meta {
 
    background: #f8f8f8;
 
    padding: 4px;
 
    border-bottom: 1px solid #ddd;
 
    min-height: 20px;
 
    overflow: auto;
 
}
 

	
 
.inline-comments .comment .meta img {
 
    vertical-align: middle;
 
}
 

	
 
.inline-comments .comment .meta .user {
 
    font-weight: bold;
 
    float: left;
 
    padding: 3px;
 
}
 

	
 
.inline-comments .comment .meta .date {
 
    float: left;
 
    padding: 3px;
 
}
 

	
 
.inline-comments .comment .text {
 
    background-color: #FAFAFA;
 
}
 

	
 
.inline-comments .comments-number {
 
    padding: 0px 0px 10px 0px;
 
    font-weight: bold;
 
    color: #666;
 
    font-size: 16px;
 
}
 
.inline-comments-button .add-comment {
 
    margin: 2px 0px 8px 5px !important
 
}
 

	
 
input.status_change_radio {
 
    margin: 2px 0 5px 15px;
 
    vertical-align: middle;
 
}
 

	
 
.notification-paginator {
 
    padding: 0px 0px 4px 16px;
 
}
 

	
 
#context-pages .pull-request span,
 
.menu_link_notifications {
 
    padding: 4px 4px !important;
 
    text-align: center;
 
    color: #888 !important;
 
    background-color: #DEDEDE !important;
 
    border-radius: 4px !important;
 
}
 

	
 
#context-pages .forks span,
 
.menu_link_notifications {
 
    padding: 4px 4px !important;
 
    text-align: center;
 
    color: #888 !important;
 
    background-color: #DEDEDE !important;
 
    border-radius: 4px !important;
 
}
 

	
 

	
 
.notification-header {
 
    padding-top: 6px;
 
}
 
.notification-header .desc {
 
    font-size: 16px;
 
    height: 24px;
 
    float: left
 
}
 
.notification-list .container.unread {
 
    background: none repeat scroll 0 0 rgba(255, 255, 180, 0.6);
 
}
 
.notification-header .gravatar {
 
    background: none repeat scroll 0 0 transparent;
 
    padding: 0px 0px 0px 8px;
 
}
 
.notification-list .container .notification-header .desc {
 
    font-weight: bold;
 
    font-size: 17px;
 
}
 
.notification-table {
 
    border: 1px solid #ccc;
 
    border-radius: 6px 6px 6px 6px;
 
    clear: both;
 
    margin: 0px 20px 0px 20px;
 
}
 
.notification-header .delete-notifications {
 
    float: right;
 
    padding-top: 8px;
kallithea/public/js/base.js
Show inline comments
 
@@ -562,213 +562,213 @@ var _close_tooltip = function(e){
 
var q_filter = (function() {
 
    var _namespace = {};
 
    var namespace = function (target) {
 
        if (!(target in _namespace)) {
 
            _namespace[target] = {};
 
        }
 
        return _namespace[target];
 
    };
 
    return function (target, $nodes, display_element) {
 
        var $nodes = $nodes;
 
        var $q_filter_field = $('#' + target);
 
        var F = namespace(target);
 

	
 
        $q_filter_field.keyup(function (e) {
 
            clearTimeout(F.filterTimeout);
 
            F.filterTimeout = setTimeout(F.updateFilter, 600);
 
        });
 

	
 
        F.filterTimeout = null;
 

	
 
        F.updateFilter = function () {
 
            // Reset timeout
 
            F.filterTimeout = null;
 

	
 
            var obsolete = [];
 

	
 
            var req = $q_filter_field.val().toLowerCase();
 

	
 
            var showing = 0;
 
            $nodes.each(function () {
 
                var n = this;
 
                var target_element = display_element(n);
 
                if (req && n.innerHTML.toLowerCase().indexOf(req) == -1) {
 
                    $(target_element).hide();
 
                }
 
                else {
 
                    $(target_element).show();
 
                    showing += 1;
 
                }
 
            });
 

	
 
            $('#repo_count').html(showing);
 
            /* FIXME: don't hardcode */
 
        }
 
    }
 
})();
 

	
 

	
 
/**
 
 * Comment handling
 
 */
 

	
 
// move comments to their right location, inside new trs
 
function move_comments($anchorcomments) {
 
    $anchorcomments.each(function(i, anchorcomment) {
 
        var $anchorcomment = $(anchorcomment);
 
        var target_id = $anchorcomment.data('target-id');
 
        var $comment_div = _get_add_comment_div(target_id);
 
        var f_path = $anchorcomment.data('f_path');
 
        var line_no = $anchorcomment.data('line_no');
 
        if ($comment_div[0]) {
 
            $comment_div.append($anchorcomment.children());
 
            _comment_div_append_add($comment_div, f_path, line_no);
 
        } else {
 
           $anchorcomment.before("Comment to {0} line {1} which is outside the diff context:".format(f_path || '?', line_no || '?'));
 
        }
 
    });
 
    linkInlineComments($('.firstlink'), $('.comment:first-child'));
 
}
 

	
 
// comment bubble was clicked - insert new tr and show form
 
function show_comment_form($bubble) {
 
    var children = $bubble.closest('tr.line').children('[id]');
 
    var line_td_id = children[children.length - 1].id;
 
    var $comment_div = _get_add_comment_div(line_td_id);
 
    var f_path = $bubble.closest('div.full_f_path').data('f_path');
 
    var parts = line_td_id.split('_');
 
    var line_no = parts[parts.length-1];
 
    comment_div_state($comment_div, f_path, line_no, true);
 
}
 

	
 
// return comment div for target_id - add it if it doesn't exist yet
 
function _get_add_comment_div(target_id) {
 
    var comments_box_id = 'comments-' + target_id;
 
    var $comments_box = $('#' + comments_box_id);
 
    if (!$comments_box.length) {
 
        var html = '<tr><td id="{0}" colspan="3" class="inline-comments"></td></tr>'.format(comments_box_id);
 
        $('#' + target_id).closest('tr').after(html);
 
        $comments_box = $('#' + comments_box_id);
 
    }
 
    return $comments_box;
 
}
 

	
 
// set $comment_div state - showing or not showing form and Add button
 
function comment_div_state($comment_div, f_path, line_no, show_form) {
 
    var $forms = $comment_div.children('.comment-inline-form');
 
    var $buttons = $comment_div.children('.add-comment');
 
    var $buttonrow = $comment_div.children('.add-button-row');
 
    var $comments = $comment_div.children('.comment');
 
    if (show_form) {
 
        if (!$forms.length) {
 
            _comment_div_append_form($comment_div, f_path, line_no);
 
        }
 
    } else {
 
        $forms.remove();
 
    }
 
    $buttons.remove();
 
    $buttonrow.remove();
 
    if ($comments.length && !show_form) {
 
        _comment_div_append_add($comment_div, f_path, line_no);
 
    }
 
}
 

	
 
// 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-comment"><span class="btn btn-mini">{0}</span></div>'.format(addlabel));
 
    var $add = $('<div class="add-button-row"><span class="btn btn-mini add-button">{0}</span></div>'.format(addlabel));
 
    $comment_div.append($add);
 
    $add.click(function(e) {
 
    $add.children('.add-button').click(function(e) {
 
        comment_div_state($comment_div, f_path, line_no, true);
 
    });
 
}
 

	
 
// append a comment form to $comment_div
 
function _comment_div_append_form($comment_div, f_path, line_no) {
 
    var $form_div = $($('#comment-inline-form-template').html().format(f_path, line_no))
 
        .addClass('comment-inline-form');
 
    $comment_div.append($form_div);
 
    var $form = $comment_div.find("form");
 

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

	
 
        var text = $('#text_'+line_no).val();
 
        if (!text){
 
            return;
 
        }
 

	
 
        $form.find('.submitting-overlay').show();
 

	
 
        var success = function(json_data) {
 
            $comment_div.append(json_data['rendered_text']);
 
            comment_div_state($comment_div, f_path, line_no, false);
 
            linkInlineComments($('.firstlink'), $('.comment:first-child'));
 
        };
 
        var postData = {
 
            'text': text,
 
            'f_path': f_path,
 
            'line': line_no
 
        };
 
        ajaxPOST(AJAX_COMMENT_URL, postData, success);
 
    });
 

	
 
    $('#preview-btn_'+line_no).click(function(e){
 
        var text = $('#text_'+line_no).val();
 
        if(!text){
 
            return
 
        }
 
        $('#preview-box_'+line_no).addClass('unloaded');
 
        $('#preview-box_'+line_no).html(_TM['Loading ...']);
 
        $('#edit-container_'+line_no).hide();
 
        $('#edit-btn_'+line_no).show();
 
        $('#preview-container_'+line_no).show();
 
        $('#preview-btn_'+line_no).hide();
 

	
 
        var url = pyroutes.url('changeset_comment_preview', {'repo_name': REPO_NAME});
 
        var post_data = {'text': text};
 
        ajaxPOST(url, post_data, function(html) {
 
            $('#preview-box_'+line_no).html(html);
 
            $('#preview-box_'+line_no).removeClass('unloaded');
 
        })
 
    })
 
    $('#edit-btn_'+line_no).click(function(e) {
 
        $('#edit-container_'+line_no).show();
 
        $('#edit-btn_'+line_no).hide();
 
        $('#preview-container_'+line_no).hide();
 
        $('#preview-btn_'+line_no).show();
 
    })
 

	
 
    // create event for hide button
 
    $form.find('.hide-inline-form').click(function(e) {
 
        comment_div_state($comment_div, f_path, line_no, false);
 
    });
 

	
 
    setTimeout(function() {
 
        // callbacks
 
        tooltip_activate();
 
        MentionsAutoComplete($('#text_'+line_no), $('#mentions_container_'+line_no),
 
                             _USERS_AC_DATA);
 
        $('#text_'+line_no).focus();
 
    }, 10);
 
}
 

	
 

	
 
function deleteComment(comment_id) {
 
    var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__', comment_id);
 
    var postData = {'_method': 'delete'};
 
    var success = function(o) {
 
        $('#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
 
 */
 
var linkInlineComments = function($firstlinks, $comments){
 
    if ($comments.length > 0) {
 
        $firstlinks.html('<a href="#{0}">First comment</a>'.format($comments.prop('id')));
 
    }
 
    if ($comments.length <= 1) {
 
        return;
 
    }
0 comments (0 inline, 0 general)