Changeset - 329c0584cba8
[Not reviewed]
default
0 3 0
Thomas De Schampheleire - 10 years ago 2015-06-18 08:46:07
thomas.de.schampheleire@gmail.com
comments: remove dysfunctional comment bubble on compare and file views (issue #84)

Several compare and file views would show a comment bubble when hovering
code lines, even though clicking on this bubble would not do anything.

Instead, make sure that the bubble only appears when the diff block is in a
class 'commentable-diff', which can be set from the appropriate places
(changeset and pullrequest views) where a click handler is also attached.
3 files changed with 8 insertions and 5 deletions:
0 comments (0 inline, 0 general)
kallithea/public/css/style.css
Show inline comments
 
@@ -4987,51 +4987,52 @@ table.code-difftable .add .code pre:befo
 
    position: relative;
 
    width: 0;
 
}
 

	
 
table.code-difftable .unmod .code pre:before {
 
    content: " ";
 
    float: left;
 
    left: -1em;
 
    position: relative;
 
    width: 0;
 
}
 

	
 
.add-bubble {
 
    position: relative;
 
    display: none;
 
    float: left;
 
    width: 0px;
 
    height: 0px;
 
    left: -8px;
 
    -webkit-box-sizing: border-box;
 
    -moz-box-sizing: border-box;
 
    box-sizing: border-box;
 
}
 

	
 
tr.line.add:hover td .add-bubble,
 
tr.line.del:hover td .add-bubble,
 
tr.line.unmod:hover td .add-bubble {
 
/* comment bubble, only visible when in a commentable diff */
 
.commentable-diff tr.line.add:hover td .add-bubble,
 
.commentable-diff tr.line.del:hover td .add-bubble,
 
.commentable-diff tr.line.unmod:hover td .add-bubble {
 
    display: block;
 
    z-index: 1;
 
}
 

	
 
.add-bubble div {
 
    background: #577632;
 
    width: 16px;
 
    height: 16px;
 
    cursor: pointer;
 
    padding: 0 2px 2px 0.5px;
 
    border: 1px solid #577632;
 
    border-radius: 3px;
 
    -webkit-box-sizing: border-box;
 
    -moz-box-sizing: border-box;
 
    box-sizing: border-box;
 
}
 

	
 
.add-bubble div:before {
 
    font-size: 14px;
 
    color: #ffffff;
 
    font-family: "kallithea";
 
    content: '\1f5ea';
 
}
 

	
kallithea/templates/changeset/changeset.html
Show inline comments
 
@@ -137,55 +137,56 @@ ${self.repo_context_bar('changelog', c.c
 
            ${ungettext('%s file changed','%s files changed',len(c.changeset.affected_files)) % (len(c.changeset.affected_files))}:
 
            % else:
 
            ${ungettext('%s file changed with %s insertions and %s deletions','%s files changed with %s insertions and %s deletions', len(c.changeset.affected_files)) % (len(c.changeset.affected_files),c.lines_added,c.lines_deleted)}:
 
            %endif
 
            </div>
 
            <div class="cs_files">
 
              %for FID, (cs1, cs2, change, path, diff, stats) in c.changes[c.changeset.raw_id].iteritems():
 
                  <div class="cs_${change}">
 
                        <div class="node">
 
                            <i class="icon-diff-${change}"></i>
 
                            <a href="#${FID}">${h.safe_unicode(path)}</a>
 
                        </div>
 
                    <div class="changes">${h.fancy_file_stats(stats)}</div>
 
                  </div>
 
              %endfor
 
              % if c.limited_diff:
 
                <h5>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h5>
 
              % endif
 
            </div>
 
        </div>
 

	
 
    </div>
 

	
 
    ## diff block
 
    <div class="commentable-diff">
 
    <%namespace name="diff_block" file="/changeset/diff_block.html"/>
 
    ${diff_block.diff_block_js()}
 
    ${diff_block.diff_block(c.changes[c.changeset.raw_id])}
 

	
 
    % if c.limited_diff:
 
      <h4>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h4>
 
    % endif
 
    </div>
 

	
 
    ## template for inline comment form
 
    ${comment.comment_inline_form()}
 

	
 
    ## render comments and inlines
 
    ${comment.generate_comments()}
 

	
 
    ## main comment form and it status
 
    ${comment.comments(h.url('changeset_comment', repo_name=c.repo_name, revision=c.changeset.raw_id),
 
                       h.changeset_status(c.db_repo, c.changeset.raw_id))}
 

	
 
    ## FORM FOR MAKING JS ACTION AS CHANGESET COMMENTS
 
    <script type="text/javascript">
 
      $(document).ready(function(){
 
          $('.show-inline-comments').change(function(e){
 
              var target = e.currentTarget;
 
              if(target == null){
 
                  target = this;
 
              }
 
              var boxid = $(target).attr('id_for');
 
              if(target.checked){
 
                  $('#{0} .inline-comments'.format(boxid)).show();
 
                  $('#{0} .inline-comments-button'.format(boxid)).show();
 
              }else{
kallithea/templates/pullrequests/pullrequest_show.html
Show inline comments
 
@@ -320,57 +320,58 @@ ${self.repo_context_bar('showpullrequest
 
                          ${h.link_to(h.safe_unicode(f),'#' + fid)}
 
                      </div>
 
                      <div class="changes">${h.fancy_file_stats(stat)}</div>
 
                    </div>
 
                %endfor
 
              </div>
 
              % if c.limited_diff:
 
                <h5>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h5>
 
              % endif
 
          </div>
 
    </div>
 
    <script>
 
    var _USERS_AC_DATA = ${c.users_array|n};
 
    var _GROUPS_AC_DATA = ${c.user_groups_array|n};
 
    // TODO: switch this to pyroutes
 
    AJAX_COMMENT_URL = "${url('pullrequest_comment',repo_name=c.repo_name,pull_request_id=c.pull_request.pull_request_id)}";
 
    AJAX_COMMENT_DELETE_URL = "${url('pullrequest_comment_delete',repo_name=c.repo_name,comment_id='__COMMENT_ID__')}";
 

	
 
    pyroutes.register('pullrequest_comment', "${url('pullrequest_comment',repo_name='%(repo_name)s',pull_request_id='%(pull_request_id)s')}", ['repo_name', 'pull_request_id']);
 
    pyroutes.register('pullrequest_comment_delete', "${url('pullrequest_comment_delete',repo_name='%(repo_name)s',comment_id='%(comment_id)s')}", ['repo_name', 'comment_id']);
 

	
 
    </script>
 

	
 
    ## diff block
 
    <div class="commentable-diff">
 
    <%namespace name="diff_block" file="/changeset/diff_block.html"/>
 
    ${diff_block.diff_block_js()}
 
    %for fid, change, f, stat in c.files:
 
      ${diff_block.diff_block_simple([c.changes[fid]])}
 
    %endfor
 
    % if c.limited_diff:
 
      <h4>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h4>
 
    % endif
 

	
 
    </div>
 

	
 
    ## template for inline comment form
 
    ${comment.comment_inline_form()}
 

	
 
    ## render comments and inlines
 
    ${comment.generate_comments()}
 

	
 
    ## main comment form and it status
 
    ${comment.comments(h.url('pullrequest_comment', repo_name=c.repo_name,
 
                              pull_request_id=c.pull_request.pull_request_id),
 
                       c.current_voting_result,
 
                       is_pr=True, change_status=c.allowed_to_change_status)}
 

	
 
    <script type="text/javascript">
 
      $(document).ready(function(){
 
          PullRequestAutoComplete('user', 'reviewers_container', _USERS_AC_DATA, _GROUPS_AC_DATA);
 

	
 
          $('.add-bubble').click(function(e){
 
              var tr = e.currentTarget;
 
              injectInlineForm(tr.parentNode.parentNode);
 
          });
 

	
 
          var avail_jsdata = ${c.avail_jsdata|n};
 
          var avail_r = new BranchRenderer('avail_graph_canvas', 'updaterevs-table', 'chg_available_');
0 comments (0 inline, 0 general)