[bugzilla-gnome-org-extensions] Split patch files onto separate pages

[Krzesimir Nowak <krnowak src gnome org>]

commit 91da3b78f760a5db0ff44eed987cd0875f4504ac
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Sat Oct 3 15:02:53 2009 -0400

    Split patch files onto separate pages
    
    Instead of having everything on a single page, have one page for the
    overview (old comments, summary comments), and one page for each file.
    
    A "navigation header" at the top allows switching between pages.

 js/splinter.js      |   55 ++++++++++++++++++++++++++++++++++++++++++++++----
 web/index.html.body |    3 +-
 web/splinter.css    |   15 +++++++++++++-
 3 files changed, 66 insertions(+), 7 deletions(-)
---
diff --git a/js/splinter.js b/js/splinter.js
index d9a5917..3e8daed 100644
--- a/js/splinter.js
+++ b/js/splinter.js
@@ -447,7 +447,8 @@ function EL(element, cls, text) {
 }
 
 function addPatchFile(file) {
-    var fileDiv = $("<div></div>").appendTo("#files");
+    var fileDiv = $("<div class='file'></div>").appendTo("#files").get(0);
+    file.div = fileDiv;
 
     $("<div class='file-label'><span></span></div/>")
         .find("span").text(file.filename).end()
@@ -532,6 +533,48 @@ function addPatchFile(file) {
     }
 }
 
+function showOverview() {
+    $("#bugInfo").show();
+    $("#overview").show();
+    $(".file").hide();
+}
+
+function showPatchFile(file) {
+    $("#bugInfo").hide();
+    $("#overview").hide();
+    $(".file").hide();
+    if (file.div)
+        $(file.div).show();
+    else
+        addPatchFile(file);
+}
+
+function addNavigationLink(title, callback, selected) {
+    if ($("#navigation").children().size() > 0)
+        $("#navigation").append(" | ");
+
+    var q = $("<a class='navigation-link' href='javascript:void(0)'></a")
+        .text(title)
+        .appendTo("#navigation")
+        .click(function() {
+                   if (!$(this).hasClass("navigation-link-selected")) {
+                       $(".navigation-link").removeClass("navigation-link-selected");
+                       $(this).addClass("navigation-link-selected");
+                       callback();
+                   }
+               });
+
+    if (selected)
+        q.addClass("navigation-link-selected");
+}
+
+function addFileNavigationLink(file) {
+    var basename = file.filename.replace(/.*\//, "");
+    addNavigationLink(basename, function() {
+        showPatchFile(file);
+    });
+}
+
 var REVIEW_RE = /^\s*review\s+of\s+attachment\s+(\d+)\s*:\s*/i;
 
 function start(xml) {
@@ -541,7 +584,8 @@ function start(xml) {
 
     $("#loading").hide();
     $("#attachmentInfo").show();
-    $("#intro").show();
+    $("#navigation").show();
+    $("#overview").show();
     $("#files").show();
 
     $("#bugLink").attr('href', newPageUrl(theBug.id));
@@ -565,6 +609,10 @@ function start(xml) {
     else
         $("#patchIntro").hide();
 
+    addNavigationLink("Overview", showOverview, true);
+    for (i = 0; i < thePatch.files.length; i++)
+        addFileNavigationLink(thePatch.files[i]);
+
     var numReviewers = 0;
     for (i = 0; i < theBug.comments.length; i++) {
         var comment = theBug.comments[i];
@@ -621,9 +669,6 @@ function start(xml) {
         .val(theReview.intro)
         .keypress(queueSaveDraft);
 
-    for (i = 0; i < thePatch.files.length; i++)
-        addPatchFile(thePatch.files[i]);
-
     $("#publishButton").click(publishReview);
 }
 
diff --git a/web/index.html.body b/web/index.html.body
index f3ebcb6..93ef06b 100644
--- a/web/index.html.body
+++ b/web/index.html.body
@@ -1,4 +1,5 @@
 <div id="error" style="display: none;"> </div>
+<div id="navigation" style="display: none;"></div>
 <div id="bugInfo" style="display: none;">
   <a id="bugLink">Bug <span id="bugId"></span></a> -
   <span id="bugShortDesc"></span> -
@@ -26,7 +27,7 @@
   </table>
   <a id="originalBugLink">Go to bug</a>
 </div>
-<div id="intro" style="display: none;">
+<div id="overview" style="display: none;">
   <div id="patchIntro">
   </div>
   <div id="oldReviews">
diff --git a/web/splinter.css b/web/splinter.css
index 993d891..650d03a 100644
--- a/web/splinter.css
+++ b/web/splinter.css
@@ -68,7 +68,20 @@ body {
     text-decoration: line-through ;
 }
 
-#intro {
+#navigation {
+    color: #888888;
+}
+
+.navigation-link {
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.navigation-link-selected {
+    color: black;
+}
+
+#overview {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
 }