pull-requests: expose TODO box in dedicated panel

- TODOs are important for merging and code-review we make them important now and shown next to votes for reviewers.
- fixed some scrollToComment logic
- small UI fixes

rhodecode/public/css/helpers.less

@@ -52,6 +52,16 b' a { cursor: pointer; }'
     }
 }
 
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
 //--- DEVICE-SPECIFIC CLASSES ---------------//
 //regular tablet and up
 @media (min-width:768px) {

rhodecode/public/css/main.less

@@ -434,7 +434,8 b' ul.auth_plugins {'
   input {
     border: 1px transparent;
     color: black;
-    opacity: 1
+    opacity: 1;
+    background: #fff;
   }
 }
 
@@ -507,13 +508,21 b' ul.auth_plugins {'
     vertical-align: top;
 }
 
+#open_edit_pullrequest {
+  padding: 0;
+}
+
 #close_edit_pullrequest {
-    padding-left: 1em
+
 }
 
 #delete_pullrequest {
     clear: inherit;
-    padding: 0
+
+  form {
+      display: inline;
+  }
+
 }
 
 .perms_section_head {
@@ -820,6 +829,11 b' label {'
         padding: 0 0 0 .17em;
         line-height: 1em;
     }
+
+    & + .no-margin {
+      margin: 0
+    }
+
 }
 
 .user-inline-data {
@@ -836,7 +850,7 b' label {'
     max-width: 200px;
     min-height: (@gravatar-size + @border-thickness * 2); // account for border
     display: block;
-    padding: 0 0 0 (@gravatar-size  + @basefontsize/2 + @border-thickness * 2);
+    padding: 0 0 0 (@gravatar-size  + @basefontsize/4);
 
 
     .gravatar {
@@ -1566,14 +1580,52 b' table.integrations {'
     }
 }
 .pr-details-content {
-    margin-top: @textmargin;
-    margin-bottom: @textmargin;
+    margin-top: @textmargin - 5;
+    margin-bottom: @textmargin - 5;
 }
 
 .pr-reviewer-rules {
    padding: 10px 0px 20px 0px;
 }
 
+.todo-resolved {
+  text-decoration: line-through;
+}
+
+.todo-table {
+  width: 100%;
+
+  td {
+    padding: 5px 0px;
+  }
+
+  .td-todo-number {
+    text-align: left;
+    white-space: nowrap;
+    width: 15%;
+  }
+
+  .td-todo-gravatar {
+    width: 5%;
+
+    img {
+      margin: -3px 0;
+    }
+  }
+
+}
+
+.todo-comment-text-wrapper {
+  display: inline-grid;
+}
+
+.todo-comment-text {
+  margin-left: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .group_members {
     margin-top: 0;
     padding: 0;

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

@@ -511,15 +511,17 b' var CommentsController = function() {'
         node = $('comment-current')
       }
     }
+
     $wrapper = $(node).closest('div.comment');
-    $comment = $(node).closest(klass);
-    $comments = $(klass);
 
     // 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;
@@ -629,7 +631,7 b' var CommentsController = function() {'
       var cm = commentForm.getCmInstance();
 
       if (resolvesCommentId){
-        var placeholderText = _gettext('Leave a comment, or click resolve button to resolve TODO comment #{0}').format(resolvesCommentId);
+        var placeholderText = _gettext('Leave a resolution comment, or click resolve button to resolve TODO comment #{0}').format(resolvesCommentId);
       }
 
       setTimeout(function() {

rhodecode/templates/base/base.mako

@@ -198,7 +198,7 b''
 
 </%def>
 
-<%def name="gravatar(email, size=16, tooltip=False, tooltip_alt=None, user=None)">
+<%def name="gravatar(email, size=16, tooltip=False, tooltip_alt=None, user=None, extra_class=None)">
   <%
     if size > 16:
         gravatar_class = ['gravatar','gravatar-large']
@@ -210,7 +210,8 b''
 
     if tooltip:
         gravatar_class += ['tooltip-hovercard']
-
+    if extra_class:
+        gravatar_class += extra_class
     if tooltip and user:
         if user.username == h.DEFAULT_USER:
             gravatar_class.pop(-1)

rhodecode/templates/codeblocks/diffs.mako

@@ -50,7 +50,10 b" return '%s_%s_%i' % (h.md5_safe(commit+f"
     inline_comments=None,
 
     # additional menu for PRs
-    pull_request_menu=None
+    pull_request_menu=None,
+
+    # show/hide todo next to comments
+    show_todos=True,
 
 )">
 
@@ -128,12 +131,12 b" return '%s_%s_%i' % (h.md5_safe(commit+f"
         </div>
 
         ## todos
-        % if getattr(c, 'at_version', None):
+        % if show_todos and getattr(c, 'at_version', None):
         <div class="pull-right">
             <i class="icon-flag-filled" style="color: #949494">TODOs:</i>
              ${_('not available in this view')}
         </div>
-        % else:
+        % elif show_todos:
         <div class="pull-right">
             <div class="comments-number" style="padding-left: 10px">
                 % if hasattr(c, 'unresolved_comments') and hasattr(c, 'resolved_comments'):
@@ -310,7 +313,7 b" return '%s_%s_%i' % (h.md5_safe(commit+f"
                     <td colspan="3"></td>
                     <td>
                         <div>
-                        ${_('Unmatched inline comments below')}
+                        ${_('Unmatched/outdated inline comments below')}
                         </div>
                     </td>
                 </tr>
@@ -329,13 +332,13 b" return '%s_%s_%i' % (h.md5_safe(commit+f"
                     <td colspan="2"></td>
                     <td class="cb-line">
                         <div>
-                        ${_('Unmatched inline comments below')}
+                        ${_('Unmatched/outdated inline comments below')}
                         </div>
                     </td>
                     <td colspan="2"></td>
                     <td class="cb-line">
                         <div>
-                        ${_('Unmatched comments below')}
+                        ${_('Unmatched/outdated comments below')}
                         </div>
                     </td>
                 </tr>

rhodecode/templates/pullrequests/pullrequest_show.mako

@@ -59,19 +59,22 b''
         </div>
 
         %if c.allowed_to_update:
-          <div id="delete_pullrequest" class="pull-right action_button ${('' if c.allowed_to_delete else 'disabled' )}" >
+          <div class="pull-right">
+              <div id="edit_pull_request" class="action_button pr-save" style="display: none;">${_('Update title & description')}</div>
+              <div id="delete_pullrequest" class="action_button pr-save ${('' if c.allowed_to_delete else 'disabled' )}" style="display: none;">
               % if c.allowed_to_delete:
                   ${h.secure_form(h.route_path('pullrequest_delete', repo_name=c.pull_request.target_repo.repo_name, pull_request_id=c.pull_request.pull_request_id), request=request)}
-                      ${h.submit('remove_%s' % c.pull_request.pull_request_id, _('Delete'),
+                          ${h.submit('remove_%s' % c.pull_request.pull_request_id, _('Delete pull request'),
                     class_="btn btn-link btn-danger no-margin",onclick="return confirm('"+_('Confirm to delete this pull request')+"');")}
                   ${h.end_form()}
               % else:
-                ${_('Delete')}
+                    <span class="tooltip" title="${_('Not allowed to delete this pull request')}">${_('Delete pull request')}</span>
               % endif
           </div>
-          <div id="open_edit_pullrequest" class="pull-right action_button">${_('Edit')}</div>
-          <div id="close_edit_pullrequest" class="pull-right action_button" style="display: none;">${_('Cancel')}</div>
-          <div id="edit_pull_request" class="pull-right action_button pr-save" style="display: none;">${_('Save Changes')}</div>
+              <div id="open_edit_pullrequest" class="action_button">${_('Edit')}</div>
+              <div id="close_edit_pullrequest" class="action_button" style="display: none;">${_('Cancel')}</div>
+          </div>
+
         %endif
     </div>
 
@@ -266,7 +269,7 b''
                    </tr>
                </table>
            % else:
-               <div class="input">
+               <div>
                ${_('Pull request versions not available')}.
                </div>
            % endif
@@ -350,20 +353,82 b''
         %endif
     </div>
 
-##     ## TODOs will be listed here
-##     <div class="reviewers-title block-right">
-##       <div class="pr-details-title">
-##           ${_('TODOs')}
-##       </div>
-##     </div>
-##     <div class="block-right pr-details-content reviewers">
-##         <ul class="group_members">
-##           <li>
-##             XXXX
-##           </li>
-##         </ul>
-##     </div>
-##   </div>
+    ## TODOs will be listed here
+    <div class="reviewers-title block-right">
+      <div class="pr-details-title">
+          ## Only show unresolved, that is only what matters
+          TODO Comments - ${len(c.unresolved_comments)} / ${(len(c.unresolved_comments) + len(c.resolved_comments))}
+
+          % if not c.at_version:
+              % if c.resolved_comments:
+                  <span class="block-right action_button last-item noselect" onclick="$('.unresolved-todo-text').toggle(); return versionController.toggleElement(this, '.unresolved-todo');" data-toggle-on="Show resolved" data-toggle-off="Hide resolved">Show resolved</span>
+              % else:
+                  <span class="block-right last-item noselect">Show resolved</span>
+              % endif
+          % endif
+      </div>
+    </div>
+    <div class="block-right pr-details-content reviewers">
+
+        <table class="todo-table">
+              <%
+                def sorter(entry):
+                    user_id = entry.author.user_id
+                    resolved = '1' if entry.resolved else '0'
+                    if user_id == c.rhodecode_user.user_id:
+                        # own comments first
+                        user_id = 0
+                    return '{}_{}_{}'.format(resolved, user_id, str(entry.comment_id).zfill(100))
+              %>
+
+          % if c.at_version:
+              <tr>
+                <td class="unresolved-todo-text">${_('unresolved TODOs unavailable in this view')}.</td>
+              </tr>
+          % else:
+              % for todo_comment in sorted(c.unresolved_comments + c.resolved_comments, key=sorter):
+                  <% resolved = todo_comment.resolved %>
+                  % if inline:
+                      <% outdated_at_ver = todo_comment.outdated_at_version(getattr(c, 'at_version_num', None)) %>
+                  % else:
+                      <% outdated_at_ver = todo_comment.older_than_version(getattr(c, 'at_version_num', None)) %>
+                  % endif
+
+                  <tr ${('class="unresolved-todo" style="display: none"' if resolved else '') |n}>
+
+                      <td class="td-todo-number">
+                          % if resolved:
+                              <a class="permalink todo-resolved tooltip" title="${_('Resolved by comment #{}').format(todo_comment.resolved.comment_id)}" href="#comment-${todo_comment.comment_id}" onclick="return Rhodecode.comments.scrollToComment($('#comment-${todo_comment.comment_id}'), 0, ${h.json.dumps(outdated_at_ver)})">
+                              <i class="icon-flag-filled"></i> ${todo_comment.comment_id}</a>
+                          % else:
+                              <a class="permalink" href="#comment-${todo_comment.comment_id}" onclick="return Rhodecode.comments.scrollToComment($('#comment-${todo_comment.comment_id}'), 0, ${h.json.dumps(outdated_at_ver)})">
+                              <i class="icon-flag-filled"></i> ${todo_comment.comment_id}</a>
+                          % endif
+                      </td>
+                      <td class="td-todo-gravatar">
+                          ${base.gravatar(todo_comment.author.email, 16, user=todo_comment.author, tooltip=True, extra_class=['no-margin'])}
+                      </td>
+                      <td class="todo-comment-text-wrapper">
+                          <div class="todo-comment-text">
+                            <code>${h.chop_at_smart(todo_comment.text, '\n', suffix_if_chopped='...')}</code>
+                          </div>
+                      </td>
+
+                  </tr>
+              % endfor
+
+              % if len(c.unresolved_comments) == 0:
+                  <tr>
+                    <td class="unresolved-todo-text">${_('No unresolved TODOs')}.</td>
+                  </tr>
+              % endif
+
+          % endif
+
+        </table>
+
+    </div>
+  </div>
 
   </div>
 
@@ -561,7 +626,7 b''
                               disable_new_comments=True,
                               deleted_files_comments=c.deleted_files_comments,
                               inline_comments=c.inline_comments,
-                              pull_request_menu=pr_menu_data)}
+                              pull_request_menu=pr_menu_data, show_todos=False)}
                         % endfor
                     % else:
                         ${cbdiffs.render_diffset(
@@ -570,7 +635,7 b''
                           disable_new_comments=not c.allowed_to_comment,
                           deleted_files_comments=c.deleted_files_comments,
                           inline_comments=c.inline_comments,
-                          pull_request_menu=pr_menu_data)}
+                          pull_request_menu=pr_menu_data, show_todos=False)}
                     % endif
 
                 </div>