commits: new commits page based on new UI

rhodecode/public/css/main.less

@@ -960,9 +960,6 b' label {'
 }
 
 
-#graph_nodes {
-    padding-top: 43px;
-}
 
 #graph_content{
 
@@ -995,13 +992,12 b' label {'
     }
 
     .graph-col-wrapper {
-        padding-left: 110px;
 
         #graph_nodes {
             width: 100px;
-            margin-left: -110px;
-            float: left;
-            clear: left;
+            position: absolute;
+            left: 120px;
+            z-index: -1;
         }
     }
 
@@ -1018,6 +1014,16 b' label {'
     }
 }
 
+.obsolete-toggle {
+    line-height: 30px;
+    margin-left: -15px;
+}
+
+#rev_range_container, #rev_range_clear, #rev_range_more {
+    margin-top: -5px;
+    margin-bottom: -5px;
+}
+
 #filter_changelog {
     float: left;
 }

rhodecode/public/css/navigation.less

@@ -621,14 +621,6 b' ul#context-pages {'
     font-family: @text-regular;
     color: @grey1;
 
-    &#graph_nodes {
-        clear:both;
-        width: auto;
-        margin-left: -100px;
-        padding: 0;
-        border: none;
-    }
-
     .nav-pills {
         margin: 0;
     }

rhodecode/public/css/tables.less

@@ -118,6 +118,10 b' table.dataTable {'
             }
         }
 
+        &.td-graphbox {
+            width: 140px;
+        }
+
         &.td-time {
             width: 160px;
             white-space: nowrap;

rhodecode/public/js/src/rhodecode/changelog.js

@@ -46,6 +46,8 b' var CommitsController = function () {'
         self.$graphCanvas.html('');
 
         var edgeData = $("[data-graph]").data('graph') || this.$graphCanvas.data('graph') || [];
+        var prev_link = $('.load-more-commits').find('.prev-commits').get(0);
+        var next_link = $('.load-more-commits').find('.next-commits').get(0);
 
         // Determine max number of edges per row in graph
         var edgeCount = 1;
@@ -57,10 +59,20 b' var CommitsController = function () {'
             });
         });
 
+        if (prev_link && next_link) {
+            var graph_padding = -64;
+        }
+        else if (next_link) {
+            var graph_padding = -32;
+        } else {
+            var graph_padding = 0;
+        }
+
         var x_step = Math.min(10, Math.floor(86 / edgeCount));
+        var height = $('#changesets').find('.commits-range').height() + graph_padding;
         var graph_options = {
             width: 100,
-            height: $('#changesets').find('.commits-range').height(),
+            height: height,
             x_step: x_step,
             y_step: 42,
             dotRadius: 3.5,
@@ -85,11 +97,11 b' var CommitsController = function () {'
         this.$graphCanvas.commits(graph_options);
 
         this.setLabelText(edgeData);
-        if ($('.load-more-commits').find('.prev-commits').get(0)) {
-            var padding = 75;
 
-        } else {
-            var padding = 43;
+        var padding = 98;
+        if (prev_link) {
+            padding += 32;
+
         }
         $('#graph_nodes').css({'padding-top': padding});
     };

rhodecode/templates/commits/changelog.mako

@@ -29,10 +29,30 b''
 <%def name="main()">
 
 <div class="box">
+
     <div class="title">
+        <div id="filter_changelog">
+            ${h.hidden('branch_filter')}
+             %if c.selected_name:
+             <div class="btn btn-default" id="clear_filter" >
+                 ${_('Clear filter')}
+             </div>
+            %endif
+        </div>
+        <div class="pull-left obsolete-toggle">
+            % if h.is_hg(c.rhodecode_repo):
+                % if c.show_hidden:
+                    <a class="action-link" href="${h.current_route_path(request, evolve=0)}">${_('Hide obsolete/hidden')}</a>
+                % else:
+                    <a class="action-link" href="${h.current_route_path(request, evolve=1)}">${_('Show obsolete/hidden')}</a>
+                % endif
+            % else:
+                    <span class="action-link disabled">${_('Show hidden')}</span>
+            % endif
+        </div>
         <ul class="links">
             <li>
-                <a href="#" class="btn btn-small" id="rev_range_container" style="display:none;"></a>
+
                 %if c.rhodecode_db_repo.fork:
                     <span>
                         <a  id="compare_fork_button"
@@ -60,11 +80,6 b''
                     </span>
                 %endif
 
-                ## clear selection
-                <div title="${_('Clear selection')}" class="btn" id="rev_range_clear" style="display:none">
-                    ${_('Clear selection')}
-                </div>
-
             </li>
         </ul>
     </div>
@@ -73,29 +88,7 b''
         <script type="text/javascript" src="${h.asset('js/src/plugins/jquery.commits-graph.js')}"></script>
 
         <div class="graph-header">
-            <div id="filter_changelog">
-                ${h.hidden('branch_filter')}
-                 %if c.selected_name:
-                 <div class="btn btn-default" id="clear_filter" >
-                     ${_('Clear filter')}
-                 </div>
-                %endif
-            </div>
             ${self.breadcrumbs('breadcrumbs_light')}
-            <div class="pull-right">
-                % if h.is_hg(c.rhodecode_repo):
-                    % if c.show_hidden:
-                        <a class="action-link" href="${h.current_route_path(request, evolve=0)}">${_('Hide obsolete/hidden')}</a>
-                    % else:
-                        <a class="action-link" href="${h.current_route_path(request, evolve=1)}">${_('Show obsolete/hidden')}</a>
-                    % endif
-                % else:
-                        <span class="action-link disabled">${_('Show hidden')}</span>
-                % endif
-            </div>
-            <div id="commit-counter" data-total=${c.total_cs} class="pull-right">
-                ${_ungettext('showing %d out of %d commit', 'showing %d out of %d commits', c.showing_commits) % (c.showing_commits, c.total_cs)}
-            </div>
         </div>
 
         <div id="graph">
@@ -103,14 +96,23 b''
               <div id="graph_nodes">
                 <div id="graph_canvas"></div>
             </div>
-            <div id="graph_content" class="main-content graph_full_width">
+            <div id="graph_content" class="graph_full_width">
 
               <div class="table">
                 <table id="changesets" class="rctable">
                     <tr>
                       ## checkbox
-                      <th></th>
-                      <th></th>
+                      <th colspan="4">
+                        ## clear selection
+                        <div title="${_('Clear selection')}" class="btn btn-sm" id="rev_range_clear" style="display:none">
+                            <i class="icon-cancel-circled2"></i>
+                        </div>
+                        <div class="btn btn-sm disabled" disabled="disabled" id="rev_range_more" style="display:none;">${_('Select second commit')}</div>
+                        <a href="#" class="btn btn-success btn-sm" id="rev_range_container" style="display:none;"></a>
+                      </th>
+                      ## graph
+
+                      ## review box
 
                       <th>${_('Commit')}</th>
 
@@ -135,6 +137,9 b''
             <div class="pagination-wh pagination-left">
             ${c.pagination.pager('$link_previous ~2~ $link_next')}
             </div>
+            <div id="commit-counter" data-total=${c.total_cs} class="pull-right">
+                ${_ungettext('showing %d out of %d commit', 'showing %d out of %d commits', c.showing_commits) % (c.showing_commits, c.total_cs)}
+            </div>
         </div>
 
         <script type="text/javascript">
@@ -144,6 +149,7 b''
             // Create links to commit ranges when range checkboxes are selected
             var $commitCheckboxes = $('.commit-range');
             // cache elements
+            var $commitRangeMore = $('#rev_range_more');
             var $commitRangeContainer = $('#rev_range_container');
             var $commitRangeClear = $('#rev_range_clear');
 
@@ -155,57 +161,67 b''
                     }
                 }
                 var open_new_pull_request = $('#open_new_pull_request');
+
                 if(open_new_pull_request){
                       var selected_changes = selectedCheckboxes.length;
-                      if (selected_changes > 1 || selected_changes == 1 && templateContext.repo_type == 'svn') {
                           open_new_pull_request.hide();
-                      } else {
                           if (selected_changes == 1) {
                              open_new_pull_request.html(_gettext('Open new pull request for selected commit'));
-                          } else if (selected_changes == 0) {
+                    } else {
                              open_new_pull_request.html(_gettext('Open new pull request'));
                           }
                           open_new_pull_request.show();
                       }
-                }
 
                 if (selectedCheckboxes.length>0){
-                    var revEnd = selectedCheckboxes[0].name;
-                    var revStart = selectedCheckboxes[selectedCheckboxes.length-1].name;
-                    var url = pyroutes.url('repo_commit',
-                            {'repo_name': '${c.repo_name}',
-                             'commit_id': revStart+'...'+revEnd});
+                    $('#compare_fork_button').hide();
+                    var commitStart = $(selectedCheckboxes[selectedCheckboxes.length-1]).data();
+
+                    var revStart = commitStart.commitId;
+
+                    var commitEnd = $(selectedCheckboxes[0]).data();
+                    var revEnd = commitEnd.commitId;
 
-                    var link = (revStart == revEnd)
-                        ? _gettext('Show selected commit __S')
-                        : _gettext('Show selected commits __S ... __E');
+                    var lbl_start = 'r{0}:{1}'.format(commitStart.commitIdx, commitStart.commitId.substr(0,6));
+                    var lbl_end = 'r{0}:{1}'.format(commitEnd.commitIdx, commitEnd.commitId.substr(0,6));
+                    var url = pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}', 'commit_id': revStart+'...'+revEnd});
+                    var link = _gettext('Show selected commits {0} ... {1}').format(lbl_start, lbl_end);
 
-                    link = link.replace('__S', revStart.substr(0,6));
-                    link = link.replace('__E', revEnd.substr(0,6));
+                    if (selectedCheckboxes.length > 1) {
+                        $commitRangeClear.show();
+                        $commitRangeMore.hide();
 
                     $commitRangeContainer
                         .attr('href',url)
                         .html(link)
                         .show();
 
+
+                    } else {
+                        $commitRangeContainer.hide();
                     $commitRangeClear.show();
-                    var _url = pyroutes.url('pullrequest_new',
-                                    {'repo_name': '${c.repo_name}',
-                                     'commit': revEnd});
+                        $commitRangeMore.show();
+                    }
+
+                    // pull-request link
+                    if (selectedCheckboxes.length == 1){
+                        var _url = pyroutes.url('pullrequest_new', {'repo_name': '${c.repo_name}', 'commit': revEnd});
                     open_new_pull_request.attr('href', _url);
-                    $('#compare_fork_button').hide();
+                    } else {
+                        var _url = pyroutes.url('pullrequest_new', {'repo_name': '${c.repo_name}'});
+                        open_new_pull_request.attr('href', _url);
+                    }
+
                 } else {
                     $commitRangeContainer.hide();
                     $commitRangeClear.hide();
+                    $commitRangeMore.hide();
 
                     %if c.branch_name:
-                        var _url = pyroutes.url('pullrequest_new',
-                                        {'repo_name': '${c.repo_name}',
-                                         'branch':'${c.branch_name}'});
+                        var _url = pyroutes.url('pullrequest_new', {'repo_name': '${c.repo_name}', 'branch':'${c.branch_name}'});
                         open_new_pull_request.attr('href', _url);
                     %else:
-                        var _url = pyroutes.url('pullrequest_new',
-                                        {'repo_name': '${c.repo_name}'});
+                        var _url = pyroutes.url('pullrequest_new', {'repo_name': '${c.repo_name}'});
                         open_new_pull_request.attr('href', _url);
                     %endif
                     $('#compare_fork_button').show();
@@ -247,7 +263,7 b''
             $("#branch_filter").select2({
                 'dropdownAutoWidth': true,
                 'width': 'resolve',
-                'placeholder': "${c.selected_name or _('Filter changelog')}",
+                'placeholder': "${c.selected_name or _('Branch filter')}",
                 containerCssClass: "drop-menu",
                 dropdownCssClass: "drop-menu-dropdown",
                 query: function(query){

rhodecode/templates/commits/changelog_elements.mako

@@ -21,7 +21,11 b''
     <tr id="sha_${commit.raw_id}" class="changelogRow container ${'tablerow%s' % (cnt%2)}">
 
     <td class="td-checkbox">
-        ${h.checkbox(commit.raw_id,class_="commit-range")}
+        ${h.checkbox(commit.raw_id,class_="commit-range", **{'data-commit-idx':commit.idx, 'data-commit-id': commit.raw_id})}
+    </td>
+    ##
+    <td class="td-graphbox">
+
     </td>
 
     <td class="td-status">