commits: unified expand commit logic and UI.

- also added cursor for whole clickable element not just the arrow.

rhodecode/public/css/main.less

@@ -623,11 +623,6 b' input::-moz-focus-inner { border:0; padd'
 	display: block;
 }
 
-//TODO: lisa: this should be in tables
-.show_more_col {
-    width: 20px;
-}
-
 //FORMS
 
 .medium-inline,

rhodecode/public/css/tables.less

@@ -230,6 +230,8 b' table.dataTable {'
         &.expand_commit {
             padding-right: 0;
             padding-left: 1em;
+            cursor: pointer;
+            width: 20px;
         }
     }
 
@@ -445,6 +447,8 b' table.trending_language_tbl {'
 
         &.expand_commit {
             padding-right: 0;
+            cursor: pointer;
+            width: 20px;
         }
     }
 }

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

@@ -142,7 +142,8 b' var CommitsController = function () {'
         })
     };
 
-    this.expandCommit = function (node) {
+    this.expandCommit = function (node, reloadGraph) {
+        reloadGraph = reloadGraph || false;
 
         var target_expand = $(node);
         var cid = target_expand.data('commitId');
@@ -179,7 +180,10 b' var CommitsController = function () {'
             });
             target_expand.addClass('open');
         }
+
+        if (reloadGraph) {
         // redraw the graph
         self.reloadGraph();
     }
+    }
 };

rhodecode/templates/changelog/changelog_elements.mako

@@ -1,7 +1,6 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">
@@ -80,14 +79,12 b''
           % endif
       % endif
     </td>
-    <td class="td-message expand_commit" data-commit-id="${commit.raw_id}" title="${_('Expand commit message')}" onclick="commitsController.expandCommit(this); return false">
-      <div class="show_more_col">
+    <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;
-      </div>
     </td>
     <td class="td-description mid">
       <div class="log-container truncate-wrap">
-          <div class="message truncate" id="c-${commit.raw_id}">${urlify_commit_message(commit.message, c.repo_name)}</div>
+          <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>
 

rhodecode/templates/compare/compare_commits.mako

@@ -45,23 +45,12 b''
                     ${h.hidden('revisions',commit.raw_id)}
                 </code>
             </td>
-            <td class="expand_commit"
-                data-commit-id="${commit.raw_id}"
-                title="${_( 'Expand commit message')}"
-            >
-                <div class="show_more_col">
+            <td class="td-message expand_commit" data-commit-id="${commit.raw_id}" title="${_('Expand commit message')}" onclick="commitsController.expandCommit(this); return false">
                 <i class="icon-expand-linked"></i>
-                </div>
             </td>
             <td class="mid td-description">
                 <div class="log-container truncate-wrap">
-                    <div
-                        id="c-${commit.raw_id}"
-                        class="message truncate"
-                        data-message-raw="${commit.message}"
-                    >
-                        ${urlify_commit_message(commit.message, c.repo_name)}
-                    </div>
+                    <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>
         </tr>
@@ -85,31 +74,7 b''
 </div>
 
 <script>
-$('.expand_commit').on('click',function(e){
-  var target_expand = $(this);
-  var cid = target_expand.data('commitId');
-
-  // ## TODO: dan: extract styles into css, and just toggleClass('open') here
-  if (target_expand.hasClass('open')){
-    $('#c-'+cid).css({
-        'height': '1.5em',
-        'white-space': 'nowrap',
-        'text-overflow': 'ellipsis',
-        'overflow':'hidden'
-    });
-    target_expand.removeClass('open');
-  }
-  else {
-    $('#c-'+cid).css({
-        'height': 'auto',
-        'white-space': 'pre-line',
-        'text-overflow': 'initial',
-        'overflow':'visible'
-    });
-    target_expand.addClass('open');
-  }
-});
-
+commitsController = new CommitsController();
 $('.compare_select').on('click',function(e){
     var cid = $(this).attr('commit_id');
     $('#row-'+cid).toggleClass('hl', !$('#row-'+cid).hasClass('hl'));

rhodecode/templates/pullrequests/pullrequest_show.mako

@@ -516,16 +516,12 b''
                                         ${h.hidden('revisions', commit.raw_id)}
                                     </code>
                                 </td>
-                                <td class="expand_commit" data-commit-id="${commit.raw_id}" title="${_( 'Expand commit message')}">
-                                    <div class="show_more_col">
+                                <td class="td-message expand_commit" data-commit-id="${commit.raw_id}" title="${_( 'Expand commit message')}" onclick="commitsController.expandCommit(this); return false">
                                     <i class="icon-expand-linked"></i>
-                                    </div>
                                 </td>
                                 <td class="mid td-description">
                                     <div class="log-container truncate-wrap">
-                                        <div class="message truncate" id="c-${commit.raw_id}" data-message-raw="${commit.message}">
-                                            ${h.urlify_commit_message(commit.message, c.repo_name)}
-                                        </div>
+                                        <div class="message truncate" id="c-${commit.raw_id}" data-message-raw="${commit.message}">${h.urlify_commit_message(commit.message, c.repo_name)}</div>
                                     </div>
                                 </td>
                             </tr>
@@ -534,32 +530,6 b''
                         </table>
                     </div>
 
-                    <script>
-                    $('.expand_commit').on('click',function(e){
-                      var target_expand = $(this);
-                      var cid = target_expand.data('commitId');
-
-                      if (target_expand.hasClass('open')){
-                        $('#c-'+cid).css({
-                            'height': '1.5em',
-                            'white-space': 'nowrap',
-                            'text-overflow': 'ellipsis',
-                            'overflow':'hidden'
-                        });
-                        target_expand.removeClass('open');
-                      }
-                      else {
-                        $('#c-'+cid).css({
-                            'height': 'auto',
-                            'white-space': 'pre-line',
-                            'text-overflow': 'initial',
-                            'overflow':'visible'
-                        });
-                        target_expand.addClass('open');
-                      }
-                    });
-                    </script>
-
                     % endif
 
                 % else:
@@ -656,6 +626,7 b''
         versionController.init();
 
         reviewersController = new ReviewersController();
+        commitsController = new CommitsController();
 
         $(function(){
 

rhodecode/templates/search/search_commit.mako

@@ -34,7 +34,7 b''
                       h.route_path('repo_commit',repo_name=entry['repository'],commit_id=entry['commit_id']))}
                 </td>
                 <td class="td-message expand_commit search open" data-commit-id="${h.md5_safe(entry['repository'])+entry['commit_id']}" id="t-${h.md5_safe(entry['repository'])+entry['commit_id']}" title="${_('Expand commit message')}">
-                    <div class="show_more_col">
+                    <div>
                     <i class="icon-expand-linked"></i>&nbsp;
                     </div>
                 </td>