Bug 1225478 - Redesign with persistent navigation. r=me

mozilla-b2g · Nov 24, 2015 · bbf82ec · bbf82ec
1 parent 9c571af
commit bbf82ec
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 117 deletions.
diff --git a/lib/views/bug.js b/lib/views/bug.js
@@ -6,7 +6,6 @@ var utils = require('../utils.js');
 module.exports = function(ctx) {
   return tpl.read('/views/bug.tpl').then(function(template) {
     var bug = utils.render(template, {
-      '.id': ctx.bug.id,
       '.title': ctx.bug.id + ' - ' + ctx.bug.summary,
       '.commentsLink-href': '/bug/' + ctx.params.id,
       '.detailsLink-href': '/bug/' + ctx.params.id + '/details/',

diff --git a/lib/views/dashboard.js b/lib/views/dashboard.js
@@ -1,11 +1,9 @@
 'use strict';
 
 var timeago = require('timeago');
-var localforage = require('localforage');
 var tpl = require('../template.js');
 var utils = require('../utils.js');
 
-var SECTION_KEY = 'storedSection';
 var fetch = {};
 
 fetch.assigned = function(bz, to) {
@@ -91,68 +89,64 @@ function hasText(str) {
   return str !== '';
 }
 
-module.exports = function(ctx) {
-
-  var section;
+function fillSection(ctx, ul, tpl, section, data) {
 
-  return localforage.getItem(SECTION_KEY).then(function(storedSection) {
+  data.then(function(result) {
 
-    section = ctx.path.split('/').filter(hasText).pop();
-    if (Object.keys(fetch).indexOf(section) === -1) {
-      // The url doesnt say which tab should be used, pick the last
-      // one the user visited or if first visit default to assigned
-      section = storedSection || 'assigned';
+    var rows;
+    if (section in process) {
+      rows = process[section](result.bugs, ctx);
     } else {
-      // Store the default section for next load
-      localforage.setItem(SECTION_KEY, section);
+      rows = result.bugs.map(function(obj) {
+        return {
+          id: obj.id,
+          '.id': obj.id,
+          '.lastChanged': timeago(obj.last_change_time),
+          '.summary': obj.summary
+        }
+      });
     }
 
-    return tpl.read('/views/dashboard.tpl');
-  }).then(function(form) {
-
-    Promise.all([
-      tpl.read('/views/dashboard-row.tpl'),
-      fetch[section](ctx.app.bugzilla, ctx.app.user.name)
-    ]).then(function(result) {
-
-      var rowTpl = result[0];
-      var bugs = result[1];
-      var ul = form.querySelector('#bugs');
-
-      var rows;
-      if (section in process) {
-        rows = process[section](bugs.bugs, ctx);
-      } else {
-        rows = bugs.bugs.map(function(obj) {
-          return {
-            id: obj.id,
-            '.id': obj.id,
-            '.lastChanged': timeago(obj.last_change_time),
-            '.summary': obj.summary
-          }
-        });
-      }
-
-      if (!rows.length) {
-        var notice = document.createElement('div');
-        notice.classList.add('emptyNotice');
-        notice.textContent = 'No Bugs';
-        ul.appendChild(notice);
-      }
+    ul.innerHTML = '';
 
-      rows.forEach(function(obj) {
-        var id = obj.id;
-        delete obj.id;
-        var row = utils.render(rowTpl, obj);
-        row.href = '/bug/' + id;
-        ul.appendChild(row);
-      });
+    if (!rows.length) {
+      var notice = document.createElement('div');
+      notice.classList.add('emptyNotice');
+      notice.textContent = 'No Bugs';
+      ul.appendChild(notice);
+    }
 
-      form.querySelector('.progress').classList.add('hidden');
+    rows.forEach(function(obj) {
+      var id = obj.id;
+      delete obj.id;
+      var row = utils.render(tpl, obj);
+      row.href = '/bug/' + id;
+      ul.appendChild(row);
     });
+  });
+}
+
+
+module.exports = function(ctx) {
+
+  var tpls = [
+    tpl.read('/views/dashboard.tpl'),
+    tpl.read('/views/dashboard-row.tpl')
+  ];
+
+  return Promise.all(tpls).then(function(result) {
+
+    var form = result[0];
+    var tpl = result[1];
+
+    fillSection(ctx, form.querySelector('#assignedBugs'), tpl, 'assigned',
+                fetch.assigned(ctx.app.bugzilla, ctx.app.user.name));
+    fillSection(ctx, form.querySelector('#flaggedBugs'), tpl, 'flagged',
+                fetch.flagged(ctx.app.bugzilla, ctx.app.user.name));
+    fillSection(ctx, form.querySelector('#filedBugs'), tpl, 'filed',
+                fetch.filed(ctx.app.bugzilla, ctx.app.user.name));
 
-    document.body.dataset.region = section;
-    document.body.dataset.section = section;
+    document.body.dataset.region = 'dashboard';
 
     return form;
   });

diff --git a/public/style/bzlite-desktop.css b/public/style/bzlite-desktop.css
@@ -48,18 +48,14 @@
 }
 
 #navigation {
-  background: black;
-  padding: 0;
-  margin: 0;
-}
-
-#navigation a {
+  order: 0;
+  flex-direction: column;
   display: block;
-  padding: 1rem;
+  text-align: right;
 }
 
-#navigation a:hover {
-  background: #333;
+#navigation a {
+  text-align: right;
 }
 
 .mobile {

diff --git a/public/style/bzlite.css b/public/style/bzlite.css
@@ -147,13 +147,10 @@ h5 {
   color: white;
 }
 
-[data-region="dashboard"] .dashboardLink a,
-[data-region="search"] .searchLink a,
-[data-region="create"] .createLink a,
-[data-region="profile"] .profileLink a,
-[data-region="assigned"] .assignedLink a,
-[data-region="flagged"] .flaggedLink a,
-[data-region="filed"] .filedLink a {
+[data-region="dashboard"] .dashboardLink,
+[data-region="search"] .searchLink,
+[data-region="create"] .createLink,
+[data-region="profile"] .profileLink {
   color: #00caf2;
 }
 /* GLOBAL NAV END */
@@ -179,6 +176,10 @@ h5 {
   border-bottom: 1px solid #DDD;
 }
 
+.dashboard ul a:last-child {
+  border-bottom: 0;
+}
+
 .dashboard ul a:active,
 .dashboard ul a:hover {
   background-color: #b1f1ff;
@@ -196,6 +197,14 @@ h5 {
   flex-direction: column;
 }
 
+#bugsWrapper h3 {
+  text-transform: uppercase;
+  font-weight: normal;
+  margin: 1rem 1.5rem 0 1.5rem;
+  font-size: 1.2rem;
+  color: #00AACC;
+}
+
 /* DASHBOARD END */
 
 /* BUG PAGE START */
@@ -917,3 +926,12 @@ input[type=search]:focus + .focus {
   height: .4rem;
   width: 100%;
 }
+
+#navigation {
+  background: black;
+  order: 2;
+}
+
+#navigation a:hover {
+  background: #333;
+}
diff --git a/public/views/bug.tpl b/public/views/bug.tpl
@@ -1,10 +1,10 @@
 <div class="bugPage">
 
-  <header>
-    <a href="/" class="headerBtn back" data-ctx-capture="true"></a>
-    <h2>Bug <span class="id"></span></h2>
-    <span class="headerBtn"></span>
-  </header>
+  <div class="tabbar" id="bugNav">
+    <a class="commentsLink" data-ctx-capture="true">Comments</a>
+    <a class="detailsLink" data-ctx-capture="true">Details</a>
+    <a class="attachLink" data-ctx-capture="true">Attachments</a>
+  </div>
 
   <div class="bugWrapper">
     <div class="progressWrapper"><div class="progress"></div></div>
@@ -13,10 +13,4 @@
     </div>
   </div>
 
-  <div class="tabbar" id="bugNav">
-    <a class="commentsLink" data-ctx-capture="true">Comments</a>
-    <a class="detailsLink" data-ctx-capture="true">Details</a>
-    <a class="attachLink" data-ctx-capture="true">Attachments</a>
-  </div>
-
 </div>
diff --git a/public/views/create_bug.tpl b/public/views/create_bug.tpl
@@ -1,7 +1,7 @@
 <div>
 
   <header>
-    <a href="/" class="headerBtn close" data-ctx-capture="true"></a>
+    <a class="headerBtn"></a>
     <h2>File a Bug</h2>
     <a class="headerBtn" id="submit">Submit</a>
   </header>

diff --git a/public/views/dashboard.tpl b/public/views/dashboard.tpl
@@ -1,24 +1,20 @@
 <div class="dashboard">
 
-  <header class="mobile">
-    <span class="headerBtn"></span>
-    <span class="headerBtn"></span>
-    <h2>Bugzilla Lite</h2>
-    <a href="/create/" class="headerBtn add right" data-ctx-capture="true"></a>
-    <a href="/profile/" class="headerBtn profile right" data-ctx-capture="true"></a>
-  </header>
-
-
   <div id="bugsWrapper">
-    <a href="/search/" id="searchLink" class="mobile"><div>Search</div></a>
-    <div class="progress"></div>
-    <ul id="bugs"></ul>
-  </div>
+    <h3>Assigned</h3>
+    <ul id="assignedBugs">
+      <li class="loading"></li>
+    </ul>
+
+    <h3>Flags Requested of You</h3>
+    <ul id="flaggedBugs">
+      <li class="loading"></li>
+    </ul>
 
-  <div class="tabbar mobile" id="dashboardNav">
-    <a href="/dashboard/assigned/" class="assigned" data-ctx-capture="true">Assigned</a>
-    <a href="/dashboard/flagged/" class="flagged" data-ctx-capture="true">Flagged</a>
-    <a href="/dashboard/filed/" class="filed" data-ctx-capture="true">Filed</a>
+    <h3>Filed</h3>
+    <ul id="filedBugs">
+      <li class="loading"></li>
+    </ul>
   </div>
 
 </div>
diff --git a/public/views/home.tpl b/public/views/home.tpl
@@ -1,13 +1,11 @@
 <div id="wrapper">
 
-  <ul id="navigation" class="desktop">
-    <li class="assignedLink"><a href="/dashboard/assigned/">Assigned</a>
-    <li class="flaggedLink"><a href="/dashboard/flagged/">Flagged</a>
-    <li class="filedLink"><a href="/dashboard/filed/">Filed</a>
-    <li class="searchLink"><a href="/search/">Search</a>
-    <li class="profileLink"><a href="/profile/">Profile</a>
-    <li class="createLink"><a href="/create/">Create</a>
-  </ul>
+  <div id="navigation" class="tabbar">
+    <a href="/" class="dashboardLink">Dashboard</a>
+    <a class="searchLink" href="/search/">Search</a>
+    <a class="profileLink" href="/profile/">Profile</a>
+    <a class="createLink" href="/create/">Create</a>
+  </div>
 
   <div id="content"></div>
 

diff --git a/public/views/profile.tpl b/public/views/profile.tpl
@@ -1,11 +1,4 @@
 <div>
-
-  <header>
-    <a href="/" class="headerBtn close" data-ctx-capture="true"></a>
-    <h2>Profile</h2>
-    <span class="headerBtn"></span>
-  </header>
-
   <div class="profileContent">
     <h4>Bugzilla Account:</h4>
     <span class="accountName"></span>

diff --git a/public/views/search.tpl b/public/views/search.tpl
@@ -7,7 +7,6 @@
       <div class="focus"></div>
     </div>
 
-    <a href="/" data-ctx-capture="true">Cancel</a>
   </div>
 
   <div class="bugs"></div>