Bug 1428641 - Implement Requests quick look dropdown on global header

2 files changed, 34 insertions, 21 deletions

diff --git a/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl b/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl
index aca61561e..df3dd82be 100644
--- a/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl
+++ b/extensions/Review/template/en/default/hook/global/header-badge.html.tmpl
@@ -6,18 +6,35 @@
   # defined by the Mozilla Public License, v. 2.0.
   #%]
 
-[% RETURN UNLESS
-    user.review_request_count
-    || user.feedback_request_count
-    || user.needinfo_request_count
-%]
-
-<a id="header-flags" class="badge"
-  href="request.cgi?action=queue&amp;requestee=[% user.login FILTER uri %]&amp;group=type"
-  title="Flags requested of you:
-    [%- " review (" _ user.review_request_count _ ")" IF user.review_request_count -%]
-    [%- " feedback (" _ user.feedback_request_count _ ")" IF user.feedback_request_count -%]
-    [%- " needinfo (" _ user.needinfo_request_count _ ")" IF user.needinfo_request_count -%]
-">
-  [%- user.review_request_count + user.feedback_request_count + user.needinfo_request_count ~%]
-</a>
+[% IF user.id %]
+  [% request_count = user.review_request_count + user.feedback_request_count + user.needinfo_request_count %]
+  <div id="header-requests" class="dropdown">
+    <button type="button" id="header-requests-menu-button" class="dropdown-button minor"
+            title="Requests for you[%- IF request_count -%]:
+              [%- " review (" _ user.review_request_count _ ")" IF user.review_request_count -%]
+              [%- " feedback (" _ user.feedback_request_count _ ")" IF user.feedback_request_count -%]
+              [%- " needinfo (" _ user.needinfo_request_count _ ")" IF user.needinfo_request_count -%][%- END -%]"
+            aria-label="Requests for you" aria-expanded="false" aria-haspopup="true" aria-controls="header-requests-menu">
+      [%- IF request_count -%]
+        <span class="badge">[% request_count FILTER html %]</span>
+      [%- ELSE -%]
+        <span class="icon" aria-hidden="true"></span>
+      [%- END -%]
+    </button>
+    <section class="dropdown-content dropdown-panel left" id="header-requests-menu" role="menu" style="display:none;">
+      <header>
+        <h2>Requests</h2>
+      </header>
+      [%- IF request_count -%]
+        <div class="loading">Loading…</div>
+        <ul class="notifications" role="none" hidden></ul>
+      [%- ELSE -%]
+        <div class="empty">You’re all caught up!</div>
+      [%- END -%]
+      <footer>
+        <div><a href="request.cgi?action=queue&amp;requestee=[% user.login FILTER uri %]&amp;group=requestee"
+                role="menuitem" tabindex="-1">See All</a></div>
+      </footer>
+    </section>
+  </div>
+[% END %]
diff --git a/extensions/Review/template/en/default/hook/global/header-start.html.tmpl b/extensions/Review/template/en/default/hook/global/header-start.html.tmpl
index 3da136f41..5441ea270 100644
--- a/extensions/Review/template/en/default/hook/global/header-start.html.tmpl
+++ b/extensions/Review/template/en/default/hook/global/header-start.html.tmpl
@@ -6,12 +6,8 @@
   # defined by the Mozilla Public License, v. 2.0.
   #%]
 
-[% IF user.review_request_count
-      || user.feedback_request_count
-      || user.needinfo_request_count
-%]
-  [% style_urls.push('extensions/Review/web/styles/badge.css') %]
-[% END %]
+[% style_urls.push('extensions/Review/web/styles/badge.css') %]
+[% javascript_urls.push('js/util.js', 'js/lib/md5.min.js', 'extensions/Review/web/js/badge.js') %]
 
 [% RETURN UNLESS template.name == 'attachment/edit.html.tmpl'
       || template.name == 'attachment/create.html.tmpl'