changeset 73:1cd66cabe153

Added a 'more...' link at the bottom of columns that have more than 10 bugs.
author Atul Varma <avarma@mozilla.com>
date Sun, 25 Apr 2010 18:53:27 -0700
parents 0eab9a3ff12f
children 1a0a3abbba93
files css/main.css js/modules/app.js main.html
diffstat 3 files changed, 62 insertions(+), 28 deletions(-) [+]
line wrap: on
line diff
--- a/css/main.css	Sun Apr 25 18:21:34 2010 -0700
+++ b/css/main.css	Sun Apr 25 18:53:27 2010 -0700
@@ -193,3 +193,13 @@
 .hide-while-loading {
     display: none;
 }
+
+div.more-link {
+    padding: 0.5em;
+    color: gray;
+    cursor: pointer;
+}
+
+div.more-link:hover {
+    background: #f0f0f0;
+}
--- a/js/modules/app.js	Sun Apr 25 18:21:34 2010 -0700
+++ b/js/modules/app.js	Sun Apr 25 18:53:27 2010 -0700
@@ -420,45 +420,68 @@
   window.setInterval(function() { updatePrettyDates($("#reports")); },
                      PRETTY_DATE_UPDATE_INTERVAL);
 
+  const BUGS_TO_SHOW = 10;
+
   function showBugs(query, bugs) {
     var table = $("#templates .bugs").clone();
     var rowTemplate = table.find(".bug-row").remove();
+
+    function appendRowForBug(bug) {
+      var row = rowTemplate.clone();
+      row.attr("id", "bug-id-" + bug.id);
+      row.find(".summary").text(bug.summary);
+      row.addClass("status-" + bug.status);
+      if (bug.priority != "--") {
+        row.addClass(bug.priority);
+        row.addClass(bug.severity);
+      }
+      row.find(".last-changed").attr("data-last-change",
+                                     bug.last_change_time);
+
+      row.click(
+        function onClick() {
+          window.open(bugzilla.getShowBugURL(bug.id));
+        });
+
+      row.hover(
+        function onIn() {
+          var tooltip = $("#templates .bug-tooltip").clone();
+          tooltip.find(".priority").text(bug.priority);
+          // TODO: Show more information in tooltip.
+          $(this).append(tooltip);
+        },
+        function onOut() {
+          $(this).find(".bug-tooltip").remove();
+        });
+      
+      table.append(row);
+    }
+
     sortByLastChanged(bugs);
     bugs.reverse();
-    bugs.forEach(
-      function(bug) {
-        var row = rowTemplate.clone();
-        row.attr("id", "bug-id-" + bug.id);
-        row.find(".summary").text(bug.summary);
-        row.addClass("status-" + bug.status);
-        if (bug.priority != "--") {
-          row.addClass(bug.priority);
-          row.addClass(bug.severity);
-        }
-        row.find(".last-changed").attr("data-last-change",
-                                       bug.last_change_time);
 
-        row.click(
-          function onClick() {
-            window.open(bugzilla.getShowBugURL(bug.id));
-          });
+    var extraBugs = bugs.slice(BUGS_TO_SHOW);
+    bugs = bugs.slice(0, BUGS_TO_SHOW);
 
-        row.hover(
-          function onIn() {
-            var tooltip = $("#templates .bug-tooltip").clone();
-            tooltip.find(".priority").text(bug.priority);
-            // TODO: Show more information in tooltip.
-            $(this).append(tooltip);
-          },
-          function onOut() {
-            $(this).find(".bug-tooltip").remove();
-          });
+    bugs.forEach(appendRowForBug);
 
-        table.append(row);
-      });
     updatePrettyDates(table);
     query.find(".bugs").remove();
+    query.find(".more-link").remove();
     query.append(table);
+
+    if (extraBugs.length) {
+      var moreLink = $("#templates .more-link").clone();
+      moreLink.click(
+        function() {
+          moreLink.remove();
+          extraBugs.forEach(appendRowForBug);
+          updatePrettyDates(table);
+          removeDuplicateBugs();
+        });
+      query.append(moreLink);
+    }
+
     table.hide();
     removeDuplicateBugs();
     table.fadeIn();
--- a/main.html	Sun Apr 25 18:21:34 2010 -0700
+++ b/main.html	Sun Apr 25 18:53:27 2010 -0700
@@ -90,6 +90,7 @@
   </div>
 </div>
 <div id="templates">
+  <div class="more-link">More&hellip;</div>
   <div class="bug-tooltip">
     <div>
       <span class="priority"></span>