[gitg] Improve expand/collapse behavior of diff-view

[Jesse van den Kieboom <jessevdk src gnome org>]

commit ed790cde07679bb02ebe6b0ea4df7428046a1675
Author: Jesse van den Kieboom <jessevdk gnome org>
Date:   Thu Aug 6 20:28:33 2015 +0200

    Improve expand/collapse behavior of diff-view

 libgitg/resources/ui/diff-view/diff-view.css  |   55 ++++++++++---
 libgitg/resources/ui/diff-view/diff-view.html |    5 +-
 libgitg/resources/ui/diff-view/diff-view.js   |  100 ++++++++++++++++++++++++-
 3 files changed, 142 insertions(+), 18 deletions(-)
---
diff --git a/libgitg/resources/ui/diff-view/diff-view.css b/libgitg/resources/ui/diff-view/diff-view.css
index 1bbdd54..389cea4 100644
--- a/libgitg/resources/ui/diff-view/diff-view.css
+++ b/libgitg/resources/ui/diff-view/diff-view.css
@@ -134,23 +134,43 @@ div#diff div.file table tr.file_header td {
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   background: #d3d7cf;
+  vertical-align: middle;
+  transition: background-color 200ms, color 200ms;
+  cursor: pointer;
+}
+
+div#diff div.file table tr.file_header td:hover {
+  background: #ddd;
 }
 
 span.expander {
-  background-color: #ececec;
-  border-radius: 5px;
-  box-shadow: 1px 1px #ccc inset;
-  margin: 5px;
   display: inline-block;
   vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
   padding: 3px;
-  padding-left: 6px;
   padding-right: 6px;
-  cursor: pointer;
+  margin-left: 6px;
+  font-size: 0.8em;
 }
 
 tbody.collapsed > :not(.file_header) {
-  display:none;
+  display: none;
+}
+
+div#diff div.file table tbody.collapsed tr.file_header td {
+  border: 0;
+  background-color: #f3f3f3;
+}
+
+div#diff_content div.file tbody.collapsed.after-uncollapsed tr.file_header td {
+  border-top: 1px solid #ccc;
+  padding-top: 5px;
+}
+
+div#diff_content div.file tbody.collapsed.before-uncollapsed tr.file_header td {
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
 }
 
 span.file_stats {
@@ -159,11 +179,16 @@ span.file_stats {
   padding: 3px;
   border-radius: 5px;
   box-shadow: 1px 1px #ccc inset;
-  margin: 5px;
+  margin: 5px 8px 5px 3px;
   display: inline-block;
   vertical-align: middle;
 }
 
+div#diff div.file table tbody.collapsed span.file_stats {
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+
 span.file_stats .number, span.file_stats .bar {
   display: table-cell;
   vertical-align: middle;
@@ -188,10 +213,6 @@ span.file_stats .removed {
   background-color: #cc3333;
 }
 
-div#diff div.file table tr.file_header td {
-  vertical-align: middle;
-}
-
 div#diff div.file table tr.file_header + tr.hunk_header td.hunk_header {
   border-top: 0px;
 }
@@ -229,7 +250,8 @@ div.commit {
   position: relative;
 }
 
-div.commit .date, div.commit .sha1 {
+div.commit .date,
+div.commit .sha1 {
   color: #888a85;
   font-size: 0.8em;
 }
@@ -249,6 +271,13 @@ div.commit .sha1 {
   text-align: right;
 }
 
+div.commit .expander-all {
+  float: right;
+  padding: 0px 0px 2px 6px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
 div.commit .message {
   white-space: pre-wrap;
   margin-bottom: 5px;
diff --git a/libgitg/resources/ui/diff-view/diff-view.html b/libgitg/resources/ui/diff-view/diff-view.html
index c96c09a..15b40a1 100644
--- a/libgitg/resources/ui/diff-view/diff-view.html
+++ b/libgitg/resources/ui/diff-view/diff-view.html
@@ -23,9 +23,7 @@
             <tr class="file_header">
               <td colspan="4">
                 <!-- BLACK DOWN-POINTING TRIANGLE -->
-                <span class="expander">&#x25BC;</span>
-                <!-- ${FILE_STATS} -->
-                <span class="file_path"><!-- ${FILE_PATH} --></span>
+                <span class="expander">&#x25BC;</span><!-- ${FILE_STATS} --><span class="file_path"><!-- 
${FILE_PATH} --></span>
               </td>
             </tr>
             <!-- ${FILE_BODY} -->
@@ -51,6 +49,7 @@
           </p>
           <p class="parents" data-id="parents">
           </p>
+          <div class="expander-all" data-id="expander-all">&#x25BC;</div>
           <div class="sha1" data-id="sha1"></div>
         </div>
       </div>
diff --git a/libgitg/resources/ui/diff-view/diff-view.js b/libgitg/resources/ui/diff-view/diff-view.js
index a1ca965..89c3096 100644
--- a/libgitg/resources/ui/diff-view/diff-view.js
+++ b/libgitg/resources/ui/diff-view/diff-view.js
@@ -137,7 +137,7 @@ function write_avatar(avatar, commit)
                        avatar_cache[h] = avc;
                        avatarLoader = null;
                }.bind(avatarLoader));
-       
+
                avatarLoader.image.attr('src', gravatar);
        }
 }
@@ -332,6 +332,66 @@ function expand_collapse()
        }
 
        expander.closest('tbody').toggleClass("collapsed");
+
+       var all = $("#diff_content div.file tbody");
+       var prevCollapsed = false;
+       var allUncollapsed = true;
+
+       all.each(function(i, tbody) {
+               tbody = $(tbody);
+
+               var nextCollapsed = false;
+
+               var beforeCollapsed = true;
+               var afterCollapsed = false;
+
+               if (tbody.hasClass("collapsed"))
+               {
+                       if (i < all.length - 1)
+                       {
+                               nextCollapsed = $(all[i + 1]).hasClass("collapsed");
+                       }
+
+                       afterCollapsed = prevCollapsed;
+                       beforeCollapsed = nextCollapsed;
+
+                       prevCollapsed = true;
+                       allUncollapsed = false;
+               }
+               else
+               {
+                       prevCollapsed = false;
+               }
+
+               if (!beforeCollapsed)
+               {
+                       tbody.addClass("before-uncollapsed");
+               }
+               else
+               {
+                       tbody.removeClass("before-uncollapsed");
+               }
+
+               if (!afterCollapsed)
+               {
+                       tbody.addClass("after-uncollapsed");
+               }
+               else
+               {
+                       tbody.removeClass("after-uncollapsed");
+               }
+       });
+
+       var expanderAll = $("#diff .expander-all");
+
+       if (!allUncollapsed)
+       {
+               expanderAll.text("\u25B6");
+       }
+       else
+       {
+               expanderAll.text("\u25BC");
+       }
 }
 
 function next_element(elem)
@@ -531,6 +591,26 @@ function update_tab_width(width)
        tab_width_rule.style.tabSize = width;
 }
 
+function expand_collapse_all()
+{
+       var collapse = ($(this).text() === "\u25BC");
+
+       var allbodies = document.querySelectorAll("#diff_content div.file:not(.background) table.file tbody");
+
+       for (var i = 0; i < allbodies.length; i++)
+       {
+               var tbody = $(allbodies[i]);
+               var isCollapsed = tbody.hasClass("collapsed");
+
+               if (isCollapsed !== collapse)
+               {
+                       expand_collapse.call(tbody.find(".expander"));
+               }
+       }
+
+       $(this).text(collapse ? "\u25B6" : "\u25BC")
+}
+
 function update_diff(id, lsettings)
 {
        if (html_builder_worker)
@@ -608,7 +688,20 @@ function update_diff(id, lsettings)
                        content.html(event.data.diff_html);
                        update_has_selection();
 
-                       $(".expander").click(expand_collapse);
+                       var expanders = document.querySelectorAll("#diff_content div.file:not(.background) 
.expander");
+
+                       // Collapse by default if more than one file
+                       if (expanders && expanders.length > 1)
+                       {
+                               for (var i = 0; i < expanders.length; i++)
+                               {
+                                       expand_collapse.call(expanders[i]);
+                               }
+                       }
+
+                       $("#diff_content div.file tr.file_header td").click(function() {
+                               expand_collapse.call($(this).find(".expander"));
+                       });
 
                        if (settings.staged || settings.unstaged)
                        {
@@ -650,6 +743,9 @@ function update_diff(id, lsettings)
 }
 
 addEventListener('DOMContentLoaded', function () {
+       var expanderAll = $("#diff .expander-all");
+       expanderAll.click(expand_collapse_all);
+
        xhr_get('internal', {action: 'loaded'});
 }, false);