commits/ux: use similar as in files expand/collapse toggle.

rhodecode/apps/repository/tests/test_repo_compare_on_single_file.py

@@ -82,7 +82,7 @@ class TestSideBySideDiff(object):
 
         compare_page = ComparePage(response)
         compare_page.contains_change_summary(*file_changes)
-        response.mustcontain('Expand 1 commit')
+        response.mustcontain('Collapse 1 commit')
 
     def test_diff_sidebyside_two_commits(self, app, backend):
         commit_id_range = {
@@ -122,7 +122,33 @@ class TestSideBySideDiff(object):
         compare_page = ComparePage(response)
         compare_page.contains_change_summary(*file_changes)
 
-        response.mustcontain('Expand 2 commits')
+        response.mustcontain('Collapse 2 commits')
+
+    def test_diff_sidebyside_collapsed_commits(self, app, backend_svn):
+        commit_id_range = {
+
+            'svn': {
+                'commits': ['330',
+                            '337'],
+
+            },
+        }
+
+        commit_info = commit_id_range['svn']
+        commit2, commit1 = commit_info['commits']
+
+        response = self.app.get(route_path(
+            'repo_compare',
+            repo_name=backend_svn.repo_name,
+            source_ref_type='rev',
+            source_ref=commit2,
+            target_repo=backend_svn.repo_name,
+            target_ref_type='rev',
+            target_ref=commit1,
+            params=dict(target_repo=backend_svn.repo_name, diffmode='sidebyside')
+        ))
+
+        response.mustcontain('Expand 7 commits')
 
     @pytest.mark.xfail(reason='GIT does not handle empty commit compare correct (missing 1 commit)')
     def test_diff_side_by_side_from_0_commit(self, app, backend, backend_stub):
@@ -149,7 +175,7 @@ class TestSideBySideDiff(object):
             params=dict(diffmode='sidebyside')
         ))
 
-        response.mustcontain('Expand 2 commits')
+        response.mustcontain('Collapse 2 commits')
         response.mustcontain('123 file changed')
 
         response.mustcontain(
@@ -183,7 +209,7 @@ class TestSideBySideDiff(object):
             params=dict(f_path=f_path, target_repo=repo.repo_name, diffmode='sidebyside')
         ))
 
-        response.mustcontain('Expand 2 commits')
+        response.mustcontain('Collapse 2 commits')
         response.mustcontain('1 file changed')
 
         response.mustcontain(
@@ -215,7 +241,7 @@ class TestSideBySideDiff(object):
             params=dict(f_path=f_path, target_repo=repo.repo_name, diffmode='sidebyside')
         ))
 
-        response.mustcontain('Expand 2 commits')
+        response.mustcontain('Collapse 2 commits')
         response.mustcontain('1 file changed')
 
         response.mustcontain(
@@ -259,7 +285,7 @@ class TestSideBySideDiff(object):
             params=dict(f_path=f_path, target_repo=backend.repo_name, diffmode='sidebyside')
         ))
 
-        response.mustcontain('Expand 2 commits')
+        response.mustcontain('Collapse 2 commits')
 
         compare_page = ComparePage(response)
         compare_page.contains_change_summary(*file_changes)

rhodecode/apps/repository/tests/test_repo_files.py

@@ -617,7 +617,7 @@ class TestFilesDiff(object):
             })
         # use redirect since this is OLD view redirecting to compare page
         response = response.follow()
-        response.mustcontain('Expand 1 commit')
+        response.mustcontain('Collapse 1 commit')
         file_changes = (1, 0, 0)
 
         compare_page = ComparePage(response)

rhodecode/templates/changeset/changeset_range.mako

@@ -83,17 +83,14 @@
         <div id="changeset_compare_view_content">
     <div class="pull-left">
       <div class="btn-group">
-          <a
-              class="btn"
-              href="#"
-              onclick="$('.compare_select').show();$('.compare_select_hidden').hide(); return false">
-              ${_ungettext('Expand %s commit','Expand %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
-          </a>
-          <a
-              class="btn"
-              href="#"
-              onclick="$('.compare_select').hide();$('.compare_select_hidden').show(); return false">
-              ${_ungettext('Collapse %s commit','Collapse %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
+          <a class="${('collapsed' if c.collapse_all_commits else '')}" href="#expand-commits" onclick="toggleCommitExpand(this); return false" data-toggle-commits-cnt=${len(c.commit_ranges)} >
+              % if c.collapse_all_commits:
+                <i class="icon-plus-squared-alt icon-no-margin"></i>
+                ${_ungettext('Expand {} commit', 'Expand {} commits', len(c.commit_ranges)).format(len(c.commit_ranges))}
+              % else:
+                <i class="icon-minus-squared-alt icon-no-margin"></i>
+                ${_ungettext('Collapse {} commit', 'Collapse {} commits', len(c.commit_ranges)).format(len(c.commit_ranges))}
+              % endif
           </a>
       </div>
     </div>

rhodecode/templates/codeblocks/diffs.mako

@@ -1140,6 +1140,32 @@ def get_comments_for(diff_type, comments, filename, line_version, line_number):
                 updateSticky()
             };
 
+            toggleCommitExpand = function (el) {
+                var $el = $(el);
+                var commits = $el.data('toggleCommitsCnt');
+                var collapseMsg = _ngettext('Collapse {0} commit', 'Collapse {0} commits', commits).format(commits);
+                var expandMsg = _ngettext('Expand {0} commit', 'Expand {0} commits', commits).format(commits);
+
+                if ($el.hasClass('collapsed')) {
+                    $('.compare_select').show();
+                    $('.compare_select_hidden').hide();
+
+                    $el.removeClass('collapsed');
+                    $el.html(
+                        '<i class="icon-minus-squared-alt icon-no-margin"></i>' +
+                       collapseMsg);
+                }
+                else {
+                    $('.compare_select').hide();
+                    $('.compare_select_hidden').show();
+                    $el.addClass('collapsed');
+                    $el.html(
+                        '<i class="icon-plus-squared-alt icon-no-margin"></i>' +
+                        expandMsg);
+                }
+                updateSticky();
+            };
+
             // get stored diff mode and pre-enable it
             if (templateContext.session_attrs.wide_diff_mode === "true") {
                 Rhodecode.comments.toggleWideMode(null);

rhodecode/templates/compare/compare_commits.mako

@@ -55,10 +55,9 @@
             </td>
         </tr>
     %endfor
-        <tr class="compare_select_hidden" style="${'' if c.collapse_all_commits else 'display: none'}">
+        <tr class="compare_select_hidden" style="${('' if c.collapse_all_commits else 'display: none')}">
             <td colspan="5">
-                ${_ungettext('%s commit hidden','%s commits hidden', len(c.commit_ranges)) % len(c.commit_ranges)},
-                <a href="#" onclick="$('.compare_select').show();$('.compare_select_hidden').hide(); return false">${_ungettext('show it','show them', len(c.commit_ranges))}</a>
+                ${_ungettext('{} commit hidden, click expand to show them.', '{} commits hidden, click expand to show them.', len(c.commit_ranges)).format(len(c.commit_ranges))}
             </td>
         </tr>
     % if not c.commit_ranges:

rhodecode/templates/compare/compare_diff.mako

@@ -283,17 +283,14 @@
                 <div id="changeset_compare_view_content">
                     <div class="pull-left">
                       <div class="btn-group">
-                          <a
-                              class="btn"
-                              href="#"
-                              onclick="$('.compare_select').show();$('.compare_select_hidden').hide(); return false">
-                              ${_ungettext('Expand %s commit','Expand %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
-                          </a>
-                          <a
-                              class="btn"
-                              href="#"
-                              onclick="$('.compare_select').hide();$('.compare_select_hidden').show(); return false">
-                              ${_ungettext('Collapse %s commit','Collapse %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
+                          <a class="${('collapsed' if c.collapse_all_commits else '')}" href="#expand-commits" onclick="toggleCommitExpand(this); return false" data-toggle-commits-cnt=${len(c.commit_ranges)} >
+                              % if c.collapse_all_commits:
+                                <i class="icon-plus-squared-alt icon-no-margin"></i>
+                                ${_ungettext('Expand {} commit', 'Expand {} commits', len(c.commit_ranges)).format(len(c.commit_ranges))}
+                              % else:
+                                <i class="icon-minus-squared-alt icon-no-margin"></i>
+                                ${_ungettext('Collapse {} commit', 'Collapse {} commits', len(c.commit_ranges)).format(len(c.commit_ranges))}
+                              % endif
                           </a>
                       </div>
                     </div>

rhodecode/templates/pullrequests/pullrequest_show.mako

@@ -400,17 +400,14 @@
 
                     <div class="pull-left">
                       <div class="btn-group">
-                          <a
-                              class="btn"
-                              href="#"
-                              onclick="$('.compare_select').show();$('.compare_select_hidden').hide(); return false">
-                              ${_ungettext('Expand %s commit','Expand %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
-                          </a>
-                          <a
-                              class="btn"
-                              href="#"
-                              onclick="$('.compare_select').hide();$('.compare_select_hidden').show(); return false">
-                              ${_ungettext('Collapse %s commit','Collapse %s commits', len(c.commit_ranges)) % len(c.commit_ranges)}
+                          <a class="${('collapsed' if c.collapse_all_commits else '')}" href="#expand-commits" onclick="toggleCommitExpand(this); return false" data-toggle-commits-cnt=${len(c.commit_ranges)} >
+                              % if c.collapse_all_commits:
+                                <i class="icon-plus-squared-alt icon-no-margin"></i>
+                                ${_ungettext('Expand {} commit', 'Expand {} commits', len(c.commit_ranges)).format(len(c.commit_ranges))}
+                              % else:
+                                <i class="icon-minus-squared-alt icon-no-margin"></i>
+                                ${_ungettext('Collapse {} commit', 'Collapse {} commits', len(c.commit_ranges)).format(len(c.commit_ranges))}
+                              % endif
                           </a>
                       </div>
                     </div>