ui: optimized changelog view with phases, and made display of comments similar like in summary page.

rhodecode/templates/changelog/changelog.mako

@@ -1,313 +1,314 b''
 ## -*- coding: utf-8 -*-
 
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('%s Changelog') % c.repo_name}
     %if c.changelog_for_path:
       /${c.changelog_for_path}
     %endif
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     %if c.changelog_for_path:
      /${c.changelog_for_path}
     %endif
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='changelog')}
 </%def>
 
 <%def name="main()">
 
 <div class="box">
     <div class="title">
         <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"
                             title="${h.tooltip(_('Compare fork with %s' % c.rhodecode_db_repo.fork.repo_name))}"
                             class="btn btn-small"
                             href="${h.route_path('repo_compare',
                                 repo_name=c.rhodecode_db_repo.fork.repo_name,
                                 source_ref_type=c.rhodecode_db_repo.landing_rev[0],
                                 source_ref=c.rhodecode_db_repo.landing_rev[1],
                                 target_ref_type='branch' if request.GET.get('branch') else c.rhodecode_db_repo.landing_rev[0],
                                 target_ref=request.GET.get('branch') or c.rhodecode_db_repo.landing_rev[1],
                                 _query=dict(merge=1, target_repo=c.repo_name))}"
                         >
                         ${_('Compare fork with Parent (%s)' % c.rhodecode_db_repo.fork.repo_name)}
                         </a>
                     </span>
                 %endif
 
                 ## pr open link
                 %if h.is_hg(c.rhodecode_repo) or h.is_git(c.rhodecode_repo):
                     <span>
                         <a id="open_new_pull_request" class="btn btn-small btn-success" href="${h.route_path('pullrequest_new',repo_name=c.repo_name)}">
                             ${_('Open new pull request')}
                         </a>
                     </span>
                 %endif
 
                 ## clear selection
                 <div title="${_('Clear selection')}" class="btn" id="rev_range_clear" style="display:none">
                     ${_('Clear selection')}
                 </div>
 
             </li>
         </ul>
     </div>
 
     % if c.pagination:
         <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">
             <div class="graph-col-wrapper">
               <div id="graph_nodes">
                 <div id="graph_canvas"></div>
             </div>
             <div id="graph_content" class="main-content graph_full_width">
 
               <div class="table">
                 <table id="changesets" class="rctable">
                     <tr>
                       ## checkbox
                       <th></th>
-                      <th colspan="2"></th>
+                      <th></th>
 
                       <th>${_('Commit')}</th>
-                      ## Mercurial phase/evolve state
-                      <th></th>
+
                       ## commit message expand arrow
                       <th></th>
                       <th>${_('Commit Message')}</th>
 
                       <th>${_('Age')}</th>
                       <th>${_('Author')}</th>
 
                       <th>${_('Refs')}</th>
+                      ## comments
+                      <th></th>
                     </tr>
 
                     <tbody class="commits-range">
                         <%include file='changelog_elements.mako'/>
                     </tbody>
                 </table>
               </div>
             </div>
             <div class="pagination-wh pagination-left">
             ${c.pagination.pager('$link_previous ~2~ $link_next')}
             </div>
         </div>
 
         <script type="text/javascript">
         var cache = {};
         $(function(){
 
             // Create links to commit ranges when range checkboxes are selected
             var $commitCheckboxes = $('.commit-range');
             // cache elements
             var $commitRangeContainer = $('#rev_range_container');
             var $commitRangeClear = $('#rev_range_clear');
 
             var checkboxRangeSelector = function(e){
                 var selectedCheckboxes = [];
                 for (pos in $commitCheckboxes){
                     if($commitCheckboxes[pos].checked){
                         selectedCheckboxes.push($commitCheckboxes[pos]);
                     }
                 }
                 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) {
                              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});
 
                     var link = (revStart == revEnd)
                         ? _gettext('Show selected commit __S')
                         : _gettext('Show selected commits __S ... __E');
 
                     link = link.replace('__S', revStart.substr(0,6));
                     link = link.replace('__E', revEnd.substr(0,6));
 
                     $commitRangeContainer
                         .attr('href',url)
                         .html(link)
                         .show();
 
                     $commitRangeClear.show();
                     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 {
                     $commitRangeContainer.hide();
                     $commitRangeClear.hide();
 
                     %if 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}'});
                         open_new_pull_request.attr('href', _url);
                     %endif
                     $('#compare_fork_button').show();
                 }
             };
 
             $commitCheckboxes.on('click', checkboxRangeSelector);
 
             $commitRangeClear.on('click',function(e) {
                 $commitCheckboxes.attr('checked', false);
                 checkboxRangeSelector();
                 e.preventDefault();
             });
 
             // make sure the buttons are consistent when navigate back and forth
             checkboxRangeSelector();
 
             var msgs = $('.message');
             // get first element height
             var el = $('#graph_content .container')[0];
             var row_h = el.clientHeight;
             for (var i=0; i < msgs.length; i++) {
                 var m = msgs[i];
 
                 var h = m.clientHeight;
                 var pad = $(m).css('padding');
                 if (h > row_h) {
                     var offset = row_h - (h+12);
                     $(m.nextElementSibling).css('display','block');
                     $(m.nextElementSibling).css('margin-top',offset+'px');
                 }
             }
 
             $("#clear_filter").on("click", function() {
                 var filter = {'repo_name': '${c.repo_name}'};
                 window.location = pyroutes.url('repo_changelog', filter);
             });
 
             $("#branch_filter").select2({
                 'dropdownAutoWidth': true,
                 'width': 'resolve',
                 'placeholder': "${c.selected_name or _('Filter changelog')}",
                 containerCssClass: "drop-menu",
                 dropdownCssClass: "drop-menu-dropdown",
                 query: function(query){
                   var key = 'cache';
                   var cached = cache[key] ;
                   if(cached) {
                     var data = {results: []};
                     //filter results
                     $.each(cached.results, function(){
                         var section = this.text;
                         var children = [];
                         $.each(this.children, function(){
                             if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ){
                                 children.push({'id': this.id, 'text': this.text, 'type': this.type})
                             }
                         });
                         data.results.push({'text': section, 'children': children});
                         query.callback({results: data.results});
                     });
                   }else{
                       $.ajax({
                         url: pyroutes.url('repo_refs_changelog_data', {'repo_name': '${c.repo_name}'}),
                         data: {},
                         dataType: 'json',
                         type: 'GET',
                         success: function(data) {
                           cache[key] = data;
                           query.callback({results: data.results});
                         }
                       })
                   }
                 }
             });
             $('#branch_filter').on('change', function(e){
                 var data = $('#branch_filter').select2('data');
                 //type: branch_closed
                 var selected = data.text;
                 var filter = {'repo_name': '${c.repo_name}'};
                 if(data.type == 'branch' || data.type == 'branch_closed'){
                     filter["branch"] = selected;
                     if (data.type == 'branch_closed') {
                         filter["evolve"] = '1';
                     }
                 }
                 else if (data.type == 'book'){
                     filter["bookmark"] = selected;
                 }
                 window.location = pyroutes.url('repo_changelog', filter);
             });
 
             commitsController = new CommitsController();
             % if not c.changelog_for_path:
                 commitsController.reloadGraph();
             % endif
 
         });
 
     </script>
         </div>
     % else:
         ${_('There are no changes yet')}
     % endif
 </div>
 </%def>

rhodecode/templates/changelog/changelog_elements.mako

@@ -1,149 +1,155 b''
 ## small box that displays changed/added/removed details fetched by AJAX
 <%namespace name="base" file="/base/base.mako"/>
 
 % if c.prev_page:
     <tr>
         <td colspan="9" class="load-more-commits">
             <a class="prev-commits" href="#loadPrevCommits" onclick="commitsController.loadPrev(this, ${c.prev_page}, '${c.branch_name}', '${c.commit_id}', '${c.f_path}');return false">
             ${_('load previous')}
             </a>
         </td>
     </tr>
 % endif
 
 ## to speed up lookups cache some functions before the loop
 <%
     active_patterns = h.get_active_pattern_entries(c.repo_name)
     urlify_commit_message = h.partial(h.urlify_commit_message, active_pattern_entries=active_patterns)
 %>
 
 % for cnt,commit in enumerate(c.pagination):
     <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")}
     </td>
+
     <td class="td-status">
-
     %if c.statuses.get(commit.raw_id):
       <div class="changeset-status-ico">
         %if c.statuses.get(commit.raw_id)[2]:
           <a class="tooltip" title="${_('Commit status: %s\nClick to open associated pull request #%s') % (h.commit_status_lbl(c.statuses.get(commit.raw_id)[0]), c.statuses.get(commit.raw_id)[2])}" href="${h.route_path('pullrequest_show',repo_name=c.statuses.get(commit.raw_id)[3],pull_request_id=c.statuses.get(commit.raw_id)[2])}">
             <div class="${'flag_status {}'.format(c.statuses.get(commit.raw_id)[0])}"></div>
           </a>
         %else:
           <a class="tooltip" title="${_('Commit status: {}').format(h.commit_status_lbl(c.statuses.get(commit.raw_id)[0]))}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=commit.raw_id,_anchor='comment-%s' % c.comments[commit.raw_id][0].comment_id)}">
             <div class="${'flag_status {}'.format(c.statuses.get(commit.raw_id)[0])}"></div>
           </a>
         %endif
       </div>
     %else:
         <div class="tooltip flag_status not_reviewed" title="${_('Commit status: Not Reviewed')}"></div>
     %endif
     </td>
-    <td class="td-comments comments-col">
-    %if c.comments.get(commit.raw_id):
-      <a title="${_('Commit has comments')}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=commit.raw_id,_anchor='comment-%s' % c.comments[commit.raw_id][0].comment_id)}">
-          <i class="icon-comment"></i> ${len(c.comments[commit.raw_id])}
-      </a>
-    %endif
-    </td>
+
     <td class="td-hash">
     <code>
 
       <a href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=commit.raw_id)}">
         <span class="${'commit_hash obsolete' if getattr(commit, 'obsolete', None) else 'commit_hash'}">${h.show_id(commit)}</span>
       </a>
+
       <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${commit.raw_id}" title="${_('Copy the full commit id')}"></i>
-    </code>
-    </td>
-    <td class="td-tags tags-col">
-      ## phase
+
+      ## COMMIT PHASES
+
+      ## Draft
       % if hasattr(commit, 'phase'):
           % if commit.phase != 'public':
-              <span class="tag phase-${commit.phase} tooltip" title="${_('Commit phase')}">${commit.phase}</span>
+              <span class="tag phase-${commit.phase} tooltip" title="${_('{} commit phase').format(commit.phase)}">${commit.phase[0].upper()}</span>
           % endif
       % endif
 
       ## obsolete commits
-      % if hasattr(commit, 'obsolete'):
-          % if commit.obsolete:
-              <span class="tag obsolete-${commit.obsolete} tooltip" title="${_('Evolve State')}">${_('obsolete')}</span>
-          % endif
+      % if hasattr(commit, 'obsolete') and commit.obsolete:
+          <span class="tag obsolete-${commit.obsolete} tooltip" title="${_('Obsolete Evolve State')}">O</span>
       % endif
 
       ## hidden commits
-      % if hasattr(commit, 'hidden'):
-          % if commit.hidden:
-              <span class="tag obsolete-${commit.hidden} tooltip" title="${_('Evolve State')}">${_('hidden')}</span>
-          % endif
+      % if hasattr(commit, 'hidden') and commit.hidden:
+          <span class="tag obsolete-${commit.hidden} tooltip" title="${_('Hidden Evolve State')}">H</span>
       % endif
+
+    </code>
     </td>
+
     <td class="td-message expand_commit" data-commit-id="${commit.raw_id}" title="${_('Expand commit message')}" onclick="commitsController.expandCommit(this, true); return false">
         <i class="icon-expand-linked"></i>&nbsp;
     </td>
     <td class="td-description mid">
       <div class="log-container truncate-wrap">
           <div class="message truncate" id="c-${commit.raw_id}" data-message-raw="${commit.message}">${urlify_commit_message(commit.message, c.repo_name)}</div>
       </div>
     </td>
 
     <td class="td-time">
         ${h.age_component(commit.date)}
     </td>
     <td class="td-user">
         ${base.gravatar_with_user(commit.author)}
     </td>
 
     <td class="td-tags tags-col">
     <div id="t-${commit.raw_id}">
 
         ## merge
         %if commit.merge:
             <span class="tag mergetag">
                 <i class="icon-merge"></i>${_('merge')}
             </span>
         %endif
 
         ## branch
         %if commit.branch:
           <span class="tag branchtag" title="${h.tooltip(_('Branch %s') % commit.branch)}">
              <a href="${h.route_path('repo_changelog',repo_name=c.repo_name,_query=dict(branch=commit.branch))}"><i class="icon-code-fork"></i>${h.shorter(commit.branch)}</a>
           </span>
         %endif
 
         ## bookmarks
         %if h.is_hg(c.rhodecode_repo):
             %for book in commit.bookmarks:
                 <span class="tag booktag" title="${h.tooltip(_('Bookmark %s') % book)}">
                   <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=commit.raw_id, _query=dict(at=book))}"><i class="icon-bookmark"></i>${h.shorter(book)}</a>
                 </span>
             %endfor
         %endif
 
         ## tags
         %for tag in commit.tags:
           <span class="tag tagtag"  title="${h.tooltip(_('Tag %s') % tag)}">
             <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=commit.raw_id, _query=dict(at=tag))}"><i class="icon-tag"></i>${h.shorter(tag)}</a>
           </span>
         %endfor
 
       </div>
     </td>
+
+    <td class="td-comments comments-col">
+        <% cs_comments = c.comments.get(commit.raw_id,[]) %>
+        % if cs_comments:
+            <a title="${_('Commit has comments')}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=commit.raw_id,_anchor='comment-%s' % cs_comments[0].comment_id)}">
+                <i class="icon-comment"></i> ${len(cs_comments)}
+            </a>
+        % else:
+            <i class="icon-comment"></i> ${len(cs_comments)}
+        % endif
+    </td>
+
 </tr>
 % endfor
 
 % if c.next_page:
     <tr>
         <td colspan="10" class="load-more-commits">
             <a  class="next-commits" href="#loadNextCommits" onclick="commitsController.loadNext(this, ${c.next_page}, '${c.branch_name}', '${c.commit_id}', '${c.f_path}');return false">
             ${_('load next')}
             </a>
         </td>
     </tr>
 % endif
 <tr class="chunk-graph-data" style="display:none"
     data-graph='${c.graph_data|n}'
     data-node='${c.prev_page}:${c.next_page}'
     data-commits='${c.graph_commits|n}'>
 </tr>
  No newline at end of file