diffs: added handy quick file selector in diffs views.

rhodecode/public/css/code-block.less

@@ -648,6 +648,7 b' pre.literal-block, .codehilite pre{'
 @cb-text-padding: 5px;
 
 @pill-padding: 2px 7px;
+@pill-padding-small: 2px 2px 1px 2px;
 
 input.filediff-collapse-state {
     display: none;
@@ -725,11 +726,20 b' input.filediff-collapse-state {'
     }
 }
 
+.filelist {
+    .pill {
+        display: block;
+        float: left;
+        padding: @pill-padding-small;
+    }
+}
+
 .pill {
     display: block;
     float: left;
     padding: @pill-padding;
 }
+
 .pill-group {
     .pill {
         opacity: .8;
@@ -815,6 +825,56 b' input.filediff-collapse-state {'
         }
     }
 
+    .filediff-collapse-button, .filediff-expand-button {
+        cursor: pointer;
+    }
+    .filediff-collapse-button {
+        display: inline;
+    }
+    .filediff-expand-button {
+        display: none;
+    }
+    .filediff-collapsed .filediff-collapse-button {
+        display: none;
+    }
+    .filediff-collapsed .filediff-expand-button {
+        display: inline;
+    }
+
+    /**** COMMENTS ****/
+
+    .filediff-menu {
+        .show-comment-button {
+            display: none;
+        }
+    }
+    &.hide-comments {
+        .inline-comments {
+            display: none;
+        }
+        .filediff-menu {
+            .show-comment-button {
+                display: inline;
+            }
+            .hide-comment-button {
+                display: none;
+            }
+        }
+    }
+
+    .hide-line-comments {
+        .inline-comments {
+            display: none;
+        }
+    }
+
+    /**** END COMMENTS ****/
+
+}
+
+
+
+.filediff, .filelist {
     .pill {
         &[op="name"] {
             background: none;
@@ -868,53 +928,8 b' input.filediff-collapse-state {'
             color: white;
         }
     }
-
-    .filediff-collapse-button, .filediff-expand-button {
-        cursor: pointer;
-    }
-    .filediff-collapse-button {
-        display: inline;
-    }
-    .filediff-expand-button {
-        display: none;
-    }
-    .filediff-collapsed .filediff-collapse-button {
-        display: none;
-    }
-    .filediff-collapsed .filediff-expand-button {
-        display: inline;
     }
 
-    /**** COMMENTS ****/
-
-    .filediff-menu {
-        .show-comment-button {
-            display: none;
-        }
-    }
-    &.hide-comments {
-        .inline-comments {
-            display: none;
-        }
-        .filediff-menu {
-            .show-comment-button {
-                display: inline;
-            }
-            .hide-comment-button {
-                display: none;
-            }
-        }
-    }
-
-    .hide-line-comments {
-        .inline-comments {
-            display: none;
-        }
-    }
-
-    /**** END COMMENTS ****/
-
-}
 
 .filediff-outdated {
     padding: 8px 0;

rhodecode/templates/changeset/changeset.mako

@@ -211,7 +211,7 b''
   </div> <!-- end summary -->
   <div class="cs_files">
     <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
-    ${cbdiffs.render_diffset_menu()}
+    ${cbdiffs.render_diffset_menu(c.changes[c.commit.raw_id])}
     ${cbdiffs.render_diffset(
       c.changes[c.commit.raw_id], commit=c.commit, use_comments=True,inline_comments=c.inline_comments )}
   </div>

rhodecode/templates/changeset/changeset_range.mako

@@ -3,9 +3,9 b''
 
 <%def name="title()">
     ${_('%s Commits') % c.repo_name} -
-    r${c.commit_ranges[0].revision}:${h.short_id(c.commit_ranges[0].raw_id)}
+    r${c.commit_ranges[0].idx}:${h.short_id(c.commit_ranges[0].raw_id)}
     ...
-    r${c.commit_ranges[-1].revision}:${h.short_id(c.commit_ranges[-1].raw_id)}
+    r${c.commit_ranges[-1].idx}:${h.short_id(c.commit_ranges[-1].raw_id)}
     ${_ungettext('(%s commit)','(%s commits)', len(c.commit_ranges)) % len(c.commit_ranges)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
@@ -14,9 +14,9 b''
 
 <%def name="breadcrumbs_links()">
     ${_('Commits')} -
-    r${c.commit_ranges[0].revision}:${h.short_id(c.commit_ranges[0].raw_id)}
+    r${c.commit_ranges[0].idx}:${h.short_id(c.commit_ranges[0].raw_id)}
     ...
-    r${c.commit_ranges[-1].revision}:${h.short_id(c.commit_ranges[-1].raw_id)}
+    r${c.commit_ranges[-1].idx}:${h.short_id(c.commit_ranges[-1].raw_id)}
     ${_ungettext('(%s commit)','(%s commits)', len(c.commit_ranges)) % len(c.commit_ranges)}
 </%def>
 
@@ -43,7 +43,7 b''
                 <h4>
                     ${_('Commit Range')}
                     <code>
-                    r${c.commit_ranges[0].revision}:${h.short_id(c.commit_ranges[0].raw_id)}...r${c.commit_ranges[-1].revision}:${h.short_id(c.commit_ranges[-1].raw_id)}
+                    r${c.commit_ranges[0].idx}:${h.short_id(c.commit_ranges[0].raw_id)}...r${c.commit_ranges[-1].idx}:${h.short_id(c.commit_ranges[-1].raw_id)}
                     </code>
                 </h4>
               </span>
@@ -54,7 +54,7 b''
               ${_('Diff option')}:
             </div>
             <div class="right-content">
-              <div class="header-buttons">
+              <div class="btn btn-primary">
                 <a href="${h.route_path('repo_compare',
                 repo_name=c.repo_name,
                 source_ref_type='rev',

rhodecode/templates/codeblocks/diffs.mako

@@ -116,19 +116,23 b' collapse_all = len(diffset.files) > coll'
             </div>
         %endif
         <h2 class="clearinner">
+        ## invidual commit
         %if commit:
-            <a class="tooltip revision" title="${h.tooltip(commit.message)}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=commit.raw_id)}">${'r%s:%s' % (commit.revision,h.short_id(commit.raw_id))}</a> -
-            ${h.age_component(commit.date)} -
-        %endif
-
+            <a class="tooltip revision" title="${h.tooltip(commit.message)}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=commit.raw_id)}">${('r%s:%s' % (commit.idx,h.short_id(commit.raw_id)))}</a> -
+            ${h.age_component(commit.date)}
         %if diffset.limited_diff:
-            ${_('The requested commit is too big and content was truncated.')}
-
+                - ${_('The requested commit is too big and content was truncated.')}
             ${_ungettext('%(num)s file changed.', '%(num)s files changed.', diffset.changed_files) % {'num': diffset.changed_files}}
             <a href="${h.current_route_path(request, fulldiff=1)}" onclick="return confirm('${_("Showing a big diff might take some time and resources, continue?")}')">${_('Show full diff')}</a>
+            % elif hasattr(c, 'commit_ranges') and len(c.commit_ranges) > 1:
+                ## compare diff, has no file-selector and we want to show stats anyway
+               ${_ungettext('{num} file changed: {linesadd} inserted, ''{linesdel} deleted',
+                            '{num} files changed: {linesadd} inserted, {linesdel} deleted', diffset.changed_files) \
+                            .format(num=diffset.changed_files, linesadd=diffset.lines_added, linesdel=diffset.lines_deleted)}
+            % endif
         %else:
-            ${_ungettext('%(num)s file changed: %(linesadd)s inserted, ''%(linesdel)s deleted',
-                        '%(num)s files changed: %(linesadd)s inserted, %(linesdel)s deleted', diffset.changed_files) % {'num': diffset.changed_files, 'linesadd': diffset.lines_added, 'linesdel': diffset.lines_deleted}}
+            ## pull requests/compare
+            ${_('File Changes')}
         %endif
 
         </h2>
@@ -432,7 +436,7 b' from rhodecode.lib.diffs import NEW_FILE'
 </%def>
 
 <%def name="nice_mode(filemode)">
-    ${filemode.startswith('100') and filemode[3:] or filemode}
+    ${(filemode.startswith('100') and filemode[3:] or filemode)}
 </%def>
 
 <%def name="diff_menu(filediff, use_comments=False)">
@@ -693,7 +697,7 b' def get_comments_for(diff_type, comments'
             %endif
         </td>
         <td class="cb-content ${action_class(action)}"
-            data-line-no="${new_line_no and 'n' or 'o'}${new_line_no or old_line_no}"
+            data-line-no="${(new_line_no and 'n' or 'o')}${(new_line_no or old_line_no)}"
             >
             %if use_comments:
             ${render_add_comment_button()}
@@ -727,7 +731,7 b' def get_comments_for(diff_type, comments'
 </button>
 </%def>
 
-<%def name="render_diffset_menu()">
+<%def name="render_diffset_menu(diffset=None)">
 
     <div class="diffset-menu clearinner">
         <div class="pull-right">
@@ -749,6 +753,9 b' def get_comments_for(diff_type, comments'
 
         <div class="pull-left">
           <div class="btn-group">
+              <div class="pull-left">
+              ${h.hidden('file_filter')}
+              </div>
               <a
                   class="btn"
                   href="#"
@@ -761,7 +768,103 b' def get_comments_for(diff_type, comments'
                   class="btn"
                   href="#"
                   onclick="return Rhodecode.comments.toggleWideMode(this)">${_('Wide Mode Diff')}</a>
+
           </div>
         </div>
     </div>
+
+    % if diffset:
+
+        %if diffset.limited_diff:
+            <% file_placeholder = _ungettext('%(num)s file changed', '%(num)s files changed', diffset.changed_files) % {'num': diffset.changed_files}%>
+        %else:
+            <% file_placeholder = _ungettext('%(num)s file changed: %(linesadd)s inserted, ''%(linesdel)s deleted', '%(num)s files changed: %(linesadd)s inserted, %(linesdel)s deleted', diffset.changed_files) % {'num': diffset.changed_files, 'linesadd': diffset.lines_added, 'linesdel': diffset.lines_deleted}%>
+        %endif
+
+        <script>
+
+        var feedFilesOptions = function (query, initialData) {
+            var data = {results: []};
+            var isQuery = typeof query.term !== 'undefined';
+
+            var section = _gettext('Changed files');
+            var filteredData = [];
+
+            //filter results
+            $.each(initialData.results, function (idx, value) {
+
+                if (!isQuery || query.term.length === 0 || value.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
+                    filteredData.push({
+                        'id': this.id,
+                        'text': this.text,
+                        "ops": this.ops,
+                    })
+                }
+
+            });
+
+            data.results = filteredData;
+
+            query.callback(data);
+        };
+
+        var formatFileResult = function(result, container, query, escapeMarkup) {
+            return function(data, escapeMarkup) {
+                var container = '<div class="filelist" style="padding-right:100px">{0}</div>';
+                var tmpl = '<span style="margin-right:-50px"><strong>{0}</strong></span>'.format(escapeMarkup(data['text']));
+                var pill = '<span class="pill-group" style="float: right;margin-right: -100px">' +
+                            '<span class="pill" op="added">{0}</span>' +
+                            '<span class="pill" op="deleted">{1}</span>' +
+                           '</span>'
+                        ;
+                var added = data['ops']['added'];
+                if (added === 0) {
+                    // don't show +0
+                    added = 0;
+                } else {
+                    added = '+' + added;
+                }
+
+                var deleted = -1*data['ops']['deleted'];
+
+                tmpl += pill.format(added, deleted);
+                return container.format(tmpl);
+
+            }(result, escapeMarkup);
+        };
+        var preloadData = {
+            results: [
+                % for filediff in diffset.files:
+                    {id:"a_${h.FID('', filediff.patch['filename'])}",
+                     text:"${filediff.patch['filename']}",
+                     ops:${h.json.dumps(filediff.patch['stats'])|n}}${('' if loop.last else ',')}
+                % endfor
+            ]
+        };
+
+        $("#file_filter").select2({
+            'dropdownAutoWidth': true,
+            'width': 'auto',
+            'placeholder': "${file_placeholder}",
+            containerCssClass: "drop-menu",
+            dropdownCssClass: "drop-menu-dropdown",
+            data: preloadData,
+            query: function(query) {
+                feedFilesOptions(query, preloadData);
+            },
+            formatResult: formatFileResult
+        });
+
+        $("#file_filter").on('click', function (e) {
+            e.preventDefault();
+            var selected = $('#file_filter').select2('data');
+            var idSelector = "#"+selected.id;
+            window.location.hash = idSelector;
+            // expand the container if we quick-select the field
+            $(idSelector).prev().prop('checked', false);
+        })
+
+    </script>
+    % endif
+
 </%def>

rhodecode/templates/compare/compare_commits.mako

@@ -40,7 +40,7 b''
             <td class="td-hash">
                 <code>
                     <a href="${h.route_path('repo_commit', repo_name=c.target_repo.repo_name, commit_id=commit.raw_id)}">
-                        r${commit.revision}:${h.short_id(commit.raw_id)}
+                        r${commit.idx}:${h.short_id(commit.raw_id)}
                     </a>
                     ${h.hidden('revisions',commit.raw_id)}
                 </code>

rhodecode/templates/compare/compare_diff.mako

@@ -322,7 +322,7 b''
                     <div style="padding:0 10px 10px 0px" class="pull-left"></div>
                     ## commit compare generated below
                     <%include file="compare_commits.mako"/>
-                    ${cbdiffs.render_diffset_menu()}
+                    ${cbdiffs.render_diffset_menu(c.diffset)}
                     ${cbdiffs.render_diffset(c.diffset)}
                  </div>
             % endif
@@ -330,4 +330,4 b''
         </div>
     </div>
 
-</%def>
  No newline at end of file
+</%def>

rhodecode/templates/pullrequests/pullrequest_show.mako

@@ -568,7 +568,7 b''
 
                 <div class="cs_files">
                     <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
-                    ${cbdiffs.render_diffset_menu()}
+                    ${cbdiffs.render_diffset_menu(c.diffset)}
                     ${cbdiffs.render_diffset(
                       c.diffset, use_comments=True,
                       collapse_when_files_over=30,