From 6f658be6afc894f40d096f191374ad81f909a05d Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@esilibrary.com>
Date: Wed, 8 Apr 2015 22:42:26 +0000
Subject: [PATCH] LP#1442262: move patron messages link to dashboard button bar

Also implement a Facebook-style display of the unread
messages count.

Signed-off-by: Galen Charlton <gmc@esilibrary.com>
Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Signed-off-by: Ben Shum <bshum@biblio.org>
---
 Open-ILS/src/templates/opac/css/style.css.tt2 | 18 +++++++++++++++++-
 Open-ILS/src/templates/opac/parts/topnav.tt2  | 17 +++++++++++------
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 9a2d2f626f..1b50d0f9c6 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -136,7 +136,23 @@ is too low for WCAG compliance.  Use "text_attention"
 for now until a better color is picked - if needed.
 */
 #dash_fines { color: [% css_colors.text_attention %]; }
-#dash_messages { color: [% css_colors.text_attention %]; }
+
+#dash_wrapper #dash_user_message_button_container {
+    display: inline;
+    padding: 0;
+}
+#dash_wrapper #unread_message_count_floater {
+    position: absolute;
+    background-color: [% css_colors.text_alert %];
+    padding-left: 0.2em;
+    padding-right: 0.2em;
+    display: inline-block;
+    font-size: 95%;
+    border-radius: 0;
+    z-index: 2;
+    margin-top: 0.2em;
+    margin-left: -1.5em;
+}
 
 #header-wrap {
     background: linear-gradient([% css_colors.primary %], [% css_colors.primary_fade %]);
diff --git a/Open-ILS/src/templates/opac/parts/topnav.tt2 b/Open-ILS/src/templates/opac/parts/topnav.tt2
index e2a961cef1..89d57c0f79 100644
--- a/Open-ILS/src/templates/opac/parts/topnav.tt2
+++ b/Open-ILS/src/templates/opac/parts/topnav.tt2
@@ -23,6 +23,17 @@
                 </span>
                 <span class="dash_divider">|</span>
                 <span class="dash_account_buttons">
+                <div id="dash_user_message_button_container">
+                    <a href="[% mkurl(ctx.opac_root _ '/myopac/messages') %]" class="opac-button">
+                        [% l('Messages') %]
+                    </a>
+                    [% IF ctx.user_stats.messages.unread %]
+                        <div id="unread_message_count_floater">
+                            [%- ctx.user_stats.messages.unread -%]
+                            <span class="sr-only">[% l('unread') %]</a>
+                        </div>
+                    [% END %]
+                </div>
                 <a href="[% mkurl(ctx.opac_root _ '/myopac/main') %]" 
                     class="opac-button">[% l('My Account') %]</a>
                 <a href="[% mkurl(ctx.opac_root _ '/myopac/lists') %]" 
@@ -55,12 +66,6 @@
                         %]"><span id="dash_fines">[% money(ctx.user_stats.fines.balance_owed)
                         %]</span> [% l("Fines") %]</a>
                 </span>
-                <span class="dash_divider">|</span>
-                <span class="dash-align">
-                    <a class="dash-link" href="[% mkurl(ctx.opac_root _ '/myopac/messages')
-                        %]"><span id="dash_messages">[% ctx.user_stats.messages.unread
-                        %]</span> [% l("Unread Messages") %]</a>
-                </span>
             </div>
         </div>
         [% END %]
-- 
2.43.2