ui: add arrow navigation for parent/child in changelog view.

- allows easier to tell if we browse next/prev commit

rhodecode/public/css/rcicons.less

@@ -1,157 +1,161 b''
 @font-face {
   font-family: 'rcicons';
   src: url('../fonts/RCIcons/rcicons.eot?74666722');
   src: url('../fonts/RCIcons/rcicons.eot?74666722#iefix') format('embedded-opentype'),
        url('../fonts/RCIcons/rcicons.woff2?74666722') format('woff2'),
        url('../fonts/RCIcons/rcicons.woff?74666722') format('woff'),
        url('../fonts/RCIcons/rcicons.ttf?74666722') format('truetype'),
        url('../fonts/RCIcons/rcicons.svg?74666722#rcicons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
 /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
 /*
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'rcicons';
     src: url('../fonts/RCIcons/rcicons.svg?74666722#rcicons') format('svg');
   }
 }
 */
  
  [class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: "rcicons";
   font-style: normal;
   font-weight: normal;
   speak: none;
  
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
   margin-right: .2em;
   text-align: center;
   /* opacity: .8; */
  
   /* For safety - reset parent styles, that can break glyph codes*/
   font-variant: normal;
   text-transform: none;
  
   /* fix buttons height, for twitter bootstrap */
   line-height: 1em;
  
   /* Animation center compensation - margins should be symmetric */
   /* remove if not needed */
   margin-left: .2em;
  
   /* you can be more comfortable with increased icons size */
   /* font-size: 120%; */
  
   /* Font smoothing. That was taken from TWBS */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
  
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
+.icon-no-margin::before {
+    margin: 0;
+
+}
 // -- ICON CLASSES -- //
 
 .icon-bookmark:before { content: '\e803'; } /* '' */
 .icon-branch:before { content: '\e804'; } /* '' */
 .icon-lock:before { content: '\e806'; } /* '' */
 .icon-unlock:before { content: '\e807'; } /* '' */
 .icon-delete:before { content: '\e808'; } /* '' */
 .icon-false:before { content: '\e808'; } /* '' */
 
 .icon-ok:before { content: '\e809'; } /* '' */
 .icon-true:before { content: '\e809'; } /* '' */
 
 .icon-comment:before { content: '\e80a'; } /* '' */
 .icon-comment-add:before { content: '\e816'; } /* '' */
 .icon-comment_toggle:before { content: '\e818'; } /* '' */
 
 .icon-feed:before { content: '\e80b'; } /* '' */
 
 .icon-right:before { content: '\e80c'; } /* '' */
 .icon-left:before { content: '\e80d'; } /* '' */
 
 .icon-arrow_down:before { content: '\e80e'; } /* '' */
 .icon-arrow_up:before { content: '\e80e'; } /* '' */
 
 .icon-group:before { content: '\e812'; } /* '' */
 
 .icon-fork:before { content: '\e814'; } /* '' */
 .icon-merge:before { content: '\e814'; } /* '' */
 
 .icon-more:before { content: '\e815'; } /* '' */
 
 .icon-git-inv:before { content: '\e80f'; } /* '' */
 .icon-hg-inv:before { content: '\e810'; } /* '' */
 .icon-svn-inv:before { content: '\e811'; } /* '' */
 
 .icon-git:before { content: '\e81a'; } /* '' */
 .icon-hg:before { content: '\e81b'; } /* '' */
 .icon-svn:before { content: '\e820'; } /* '' */
 
 .icon-minus:before { content: '\e81c'; } /* '' */
 .icon-plus:before { content: '\e81d'; } /* '' */
 .icon-remove:before { content: '\e81e'; } /* '' */
 .icon-remove-sign:before { content: '\e81e'; } /* '' */
 
 .icon-rhodecode:before { content: '\e81f'; } /* '' */
 
 .icon-tag:before { content: '\e821'; } /* '' */
 .icon-copy:before { content: '\f0c5'; } /* '' */
 .icon-clipboard:before { content: '\f0c5'; } /* '' */
 
 
 .icon-folder:before { content: '\e813'; } /* '' */
 .icon-folder-close:before { content: '\e813'; } /* '' */
 
 .icon-directory:before { content: '\e800'; } /* '' */
 .icon-directory-empty:before { content: '\f114'; } /* '' */
 .icon-file-text:before { content: '\f0f6'; } /* '' */
 .icon-file-text-inv:before { content: '\f15c'; } /* '' */
 .icon-file-code:before { content: '\f1c9'; } /* '' */
 
 // MERGED ICONS
 
 .icon-repo-private:before { &:extend(.icon-lock:before); }
 .icon-repo-lock:before { &:extend(.icon-lock:before); }
 .icon-unlock-alt:before { &:extend(.icon-unlock:before); }
 .icon-repo-unlock:before { &:extend(.icon-unlock:before); }
 .icon-repo-public:before { &:extend(.icon-unlock:before); }
 .icon-rss-sign:before { &:extend(.icon-feed:before); }
 .icon-code-fork:before {  &:extend(.icon-fork:before);  }
 
 // TRANSFORM
 .icon-arrow_up:before {transform: rotate(180deg);}
 .icon-merge:before {transform: rotate(180deg);}
 
 // -- END ICON CLASSES -- //
 
 
 //--- ICONS STYLING ------------------//
 
 .icon-git { color: @color4 !important; }
 .icon-hg { color: @color8 !important; }
 .icon-svn { color: @color1 !important; }
 .icon-git-inv { color: @color4 !important; }
 .icon-hg-inv { color: @color8 !important; }
 .icon-svn-inv { color: @color1 !important; }
 .icon-repo-lock { color: #FF0000; }
 .icon-repo-unlock { color: #FF0000; }
 
 .repo-switcher-dropdown .select2-result-label {
     .icon-git:before {
         &:extend(.icon-git-transparent:before);
     }
     .icon-hg:before {
         &:extend(.icon-hg-transparent:before);
         color: @alert4;
     }
     .icon-svn:before {
         &:extend(.icon-svn-transparent:before);
     }
 }

rhodecode/templates/changeset/changeset.mako

@@ -1,354 +1,354 b''
 ## -*- coding: utf-8 -*-
 
 <%inherit file="/base/base.mako"/>
 <%namespace name="diff_block" file="/changeset/diff_block.mako"/>
 
 <%def name="title()">
     ${_('%s Commit') % c.repo_name} - ${h.show_id(c.commit)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %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()">
 <script>
     // TODO: marcink switch this to pyroutes
     AJAX_COMMENT_DELETE_URL = "${h.route_path('repo_commit_comment_delete',repo_name=c.repo_name,commit_id=c.commit.raw_id,comment_id='__COMMENT_ID__')}";
     templateContext.commit_data.commit_id = "${c.commit.raw_id}";
 </script>
 <div class="box">
     <div class="title">
         ${self.repo_page_title(c.rhodecode_db_repo)}
     </div>
 
   <div id="changeset_compare_view_content"  class="summary changeset">
     <div class="summary-detail">
       <div class="summary-detail-header">
           <div class="breadcrumbs files_location">
             <h4>
             ${_('Commit')}
 
             <code>
                 ${h.show_id(c.commit)}
             </code>
             <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.commit.raw_id}" title="${_('Copy the full commit id')}"></i>
             % if hasattr(c.commit, 'phase'):
                   <span class="tag phase-${c.commit.phase} tooltip" title="${_('Commit phase')}">${c.commit.phase}</span>
             % endif
 
             ## obsolete commits
             % if hasattr(c.commit, 'obsolete'):
               % if c.commit.obsolete:
                   <span class="tag obsolete-${c.commit.obsolete} tooltip" title="${_('Evolve State')}">${_('obsolete')}</span>
               % endif
             % endif
 
             ## hidden commits
             % if hasattr(c.commit, 'hidden'):
               % if c.commit.hidden:
                   <span class="tag hidden-${c.commit.hidden} tooltip" title="${_('Evolve State')}">${_('hidden')}</span>
               % endif
             % endif
             </h4>
 
           </div>
           <div class="pull-right">
               <span id="parent_link">
-                <a href="#parentCommit" title="${_('Parent Commit')}">${_('Parent')}</a>
+                <a href="#parentCommit" title="${_('Parent Commit')}"><i class="icon-left icon-no-margin"></i>${_('parent')}</a>
               </span>
                |
               <span id="child_link">
-                <a href="#childCommit" title="${_('Child Commit')}">${_('Child')}</a>
+                <a href="#childCommit" title="${_('Child Commit')}">${_('child')}<i class="icon-right icon-no-margin"></i></a>
               </span>
           </div>
       </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Description')}:
         </div>
         <div class="right-content">
           <div id="trimmed_message_box" class="commit">${h.urlify_commit_message(c.commit.message,c.repo_name)}</div>
           <div id="message_expand" style="display:none;">
             ${_('Expand')}
           </div>
         </div>
       </div>
 
       %if c.statuses:
       <div class="fieldset">
         <div class="left-label">
           ${_('Commit status')}:
         </div>
         <div class="right-content">
           <div class="changeset-status-ico">
             <div class="${'flag_status %s' % c.statuses[0]} pull-left"></div>
           </div>
           <div title="${_('Commit status')}" class="changeset-status-lbl">[${h.commit_status_lbl(c.statuses[0])}]</div>
         </div>
       </div>
       %endif
 
       <div class="fieldset">
         <div class="left-label">
           ${_('References')}:
         </div>
         <div class="right-content">
           <div class="tags">
 
             %if c.commit.merge:
               <span class="mergetag tag">
                <i class="icon-merge"></i>${_('merge')}
               </span>
             %endif
 
             %if h.is_hg(c.rhodecode_repo):
               %for book in c.commit.bookmarks:
               <span class="booktag tag" title="${h.tooltip(_('Bookmark %s') % book)}">
                 <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=book))}"><i class="icon-bookmark"></i>${h.shorter(book)}</a>
               </span>
               %endfor
             %endif
 
             %for tag in c.commit.tags:
              <span class="tagtag tag"  title="${h.tooltip(_('Tag %s') % tag)}">
               <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=tag))}"><i class="icon-tag"></i>${tag}</a>
              </span>
             %endfor
 
             %if c.commit.branch:
               <span class="branchtag tag" title="${h.tooltip(_('Branch %s') % c.commit.branch)}">
                 <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=c.commit.branch))}"><i class="icon-code-fork"></i>${h.shorter(c.commit.branch)}</a>
               </span>
             %endif
             </div>
           </div>
         </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Diff options')}:
         </div>
         <div class="right-content">
             <div class="diff-actions">
               <a href="${h.route_path('repo_commit_raw',repo_name=c.repo_name,commit_id=c.commit.raw_id)}"  class="tooltip" title="${h.tooltip(_('Raw diff'))}">
                 ${_('Raw Diff')}
               </a>
                |
               <a href="${h.route_path('repo_commit_patch',repo_name=c.repo_name,commit_id=c.commit.raw_id)}"  class="tooltip" title="${h.tooltip(_('Patch diff'))}">
                 ${_('Patch Diff')}
               </a>
                |
               <a href="${h.route_path('repo_commit_download',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(diff='download'))}" class="tooltip" title="${h.tooltip(_('Download diff'))}">
                 ${_('Download Diff')}
               </a>
                |
               ${c.ignorews_url(request)}
                |
               ${c.context_url(request)}
             </div>
         </div>
       </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Comments')}:
         </div>
         <div class="right-content">
             <div class="comments-number">
                 %if c.comments:
                     <a href="#comments">${_ungettext("%d Commit comment", "%d Commit comments", len(c.comments)) % len(c.comments)}</a>,
                 %else:
                     ${_ungettext("%d Commit comment", "%d Commit comments", len(c.comments)) % len(c.comments)}
                 %endif
                 %if c.inline_cnt:
                     <a href="#" onclick="return Rhodecode.comments.nextComment();" id="inline-comments-counter">${_ungettext("%d Inline Comment", "%d Inline Comments", c.inline_cnt) % c.inline_cnt}</a>
                 %else:
                     ${_ungettext("%d Inline Comment", "%d Inline Comments", c.inline_cnt) % c.inline_cnt}
                 %endif
             </div>
         </div>
       </div>
 
       <div class="fieldset">
         <div class="left-label">
           ${_('Unresolved TODOs')}:
         </div>
         <div class="right-content">
             <div class="comments-number">
                 % if c.unresolved_comments:
                     % for co in c.unresolved_comments:
                         <a class="permalink" href="#comment-${co.comment_id}" onclick="Rhodecode.comments.scrollToComment($('#comment-${co.comment_id}'))"> #${co.comment_id}</a>${'' if loop.last else ','}
                     % endfor
                 % else:
                     ${_('There are no unresolved TODOs')}
                 % endif
             </div>
         </div>
       </div>
 
     </div> <!-- end summary-detail -->
 
     <div id="commit-stats" class="sidebar-right">
       <div class="summary-detail-header">
         <h4 class="item">
           ${_('Author')}
         </h4>
       </div>
         <div class="sidebar-right-content">
             ${self.gravatar_with_user(c.commit.author)}
             <div class="user-inline-data">- ${h.age_component(c.commit.date)}</div>
         </div>
     </div><!-- end sidebar -->
   </div> <!-- end summary -->
   <div class="cs_files">
     <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
     ${cbdiffs.render_diffset_menu()}
     ${cbdiffs.render_diffset(
       c.changes[c.commit.raw_id], commit=c.commit, use_comments=True,inline_comments=c.inline_comments )}
   </div>
 
     ## template for inline comment form
     <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
 
     ## render comments
     ${comment.generate_comments(c.comments)}
 
     ## main comment form and it status
     ${comment.comments(h.route_path('repo_commit_comment_create', repo_name=c.repo_name, commit_id=c.commit.raw_id),
                        h.commit_status(c.rhodecode_db_repo, c.commit.raw_id))}
 </div>
 
     ## FORM FOR MAKING JS ACTION AS CHANGESET COMMENTS
     <script type="text/javascript">
 
       $(document).ready(function() {
 
           var boxmax = parseInt($('#trimmed_message_box').css('max-height'), 10);
           if($('#trimmed_message_box').height() === boxmax){
               $('#message_expand').show();
           }
 
           $('#message_expand').on('click', function(e){
               $('#trimmed_message_box').css('max-height', 'none');
               $(this).hide();
           });
 
           $('.show-inline-comments').on('click', function(e){
               var boxid = $(this).attr('data-comment-id');
               var button = $(this);
 
               if(button.hasClass("comments-visible")) {
                 $('#{0} .inline-comments'.format(boxid)).each(function(index){
                   $(this).hide();
                 });
                 button.removeClass("comments-visible");
               } else {
                 $('#{0} .inline-comments'.format(boxid)).each(function(index){
                   $(this).show();
                 });
                 button.addClass("comments-visible");
               }
           });
 
 
           // next links
           $('#child_link').on('click', function(e){
               // fetch via ajax what is going to be the next link, if we have
               // >1 links show them to user to choose
               if(!$('#child_link').hasClass('disabled')){
                   $.ajax({
                     url: '${h.route_path('repo_commit_children',repo_name=c.repo_name, commit_id=c.commit.raw_id)}',
                     success: function(data) {
                       if(data.results.length === 0){
                           $('#child_link').html("${_('No Child Commits')}").addClass('disabled');
                       }
                       if(data.results.length === 1){
                           var commit = data.results[0];
                           window.location = pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': commit.raw_id});
                       }
                       else if(data.results.length === 2){
                           $('#child_link').addClass('disabled');
                           $('#child_link').addClass('double');
                           var _html = '';
                           _html +='<a title="__title__" href="__url__">__rev__</a> '
                                   .replace('__rev__','r{0}:{1}'.format(data.results[0].revision, data.results[0].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[0].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[0].raw_id}));
                           _html +=' | ';
                           _html +='<a title="__title__" href="__url__">__rev__</a> '
                                   .replace('__rev__','r{0}:{1}'.format(data.results[1].revision, data.results[1].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[1].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[1].raw_id}));
                           $('#child_link').html(_html);
                       }
                     }
                   });
                   e.preventDefault();
               }
           });
 
           // prev links
           $('#parent_link').on('click', function(e){
               // fetch via ajax what is going to be the next link, if we have
               // >1 links show them to user to choose
               if(!$('#parent_link').hasClass('disabled')){
                   $.ajax({
                     url: '${h.route_path("repo_commit_parents",repo_name=c.repo_name, commit_id=c.commit.raw_id)}',
                     success: function(data) {
                       if(data.results.length === 0){
                           $('#parent_link').html('${_('No Parent Commits')}').addClass('disabled');
                       }
                       if(data.results.length === 1){
                           var commit = data.results[0];
                           window.location = pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': commit.raw_id});
                       }
                       else if(data.results.length === 2){
                           $('#parent_link').addClass('disabled');
                           $('#parent_link').addClass('double');
                           var _html = '';
                           _html +='<a title="__title__" href="__url__">Parent __rev__</a>'
                                   .replace('__rev__','r{0}:{1}'.format(data.results[0].revision, data.results[0].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[0].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[0].raw_id}));
                           _html +=' | ';
                           _html +='<a title="__title__" href="__url__">Parent __rev__</a>'
                                   .replace('__rev__','r{0}:{1}'.format(data.results[1].revision, data.results[1].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[1].message)
                                   .replace('__url__', pyroutes.url('repo_commit', {'repo_name': '${c.repo_name}','commit_id': data.results[1].raw_id}));
                           $('#parent_link').html(_html);
                       }
                     }
                   });
                   e.preventDefault();
               }
           });
 
           if (location.hash) {
             var result = splitDelimitedHash(location.hash);
             var line = $('html').find(result.loc);
               if (line.length > 0){
                   offsetScroll(line, 70);
               }
           }
 
           // browse tree @ revision
           $('#files_link').on('click', function(e){
               window.location = '${h.route_path('repo_files:default_path',repo_name=c.repo_name, commit_id=c.commit.raw_id)}';
               e.preventDefault();
           });
 
           // inject comments into their proper positions
           var file_comments = $('.inline-comment-placeholder');
       })
     </script>
 
 </%def>