From 11bbcb242f23c7d5fb2880e4e708779b0e3c4129 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Thu, 24 Nov 2016 15:33:37 -0500
Subject: [PATCH] red dot if there are unread notifications

---
 app/assets/stylesheets/application.scss.erb | 14 +++++++++++++-
 app/helpers/application_helper.rb           |  7 ++++---
 app/views/layouts/_account.html.erb         |  6 +++++-
 app/views/layouts/_upperelements.html.erb   |  3 +++
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb
index 2b51fae2..b56e2d12 100644
--- a/app/assets/stylesheets/application.scss.erb
+++ b/app/assets/stylesheets/application.scss.erb
@@ -854,8 +854,10 @@ label {
 .accountListItem:hover a {
     color: #424242;
 }
+.accountNotifications {
+    position: relative;
+}
 .accountNotifications.unread a {
-    color: #424242;
     font-weight: 900;
 }
 .accountListItem:hover .accountIcon {
@@ -865,6 +867,16 @@ li.accountInvite span {
     display: block;
     padding: 9px 0 9px 62px;
 }
+$unread_notifications_dot_size: 8px;
+.unread-notifications-dot {
+  width: $unread_notifications_dot_size;
+  height: $unread_notifications_dot_size;
+  background-color: #e22;
+  border-radius: $unread_notifications_dot_size / 2;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
 .accountImage {
     background-image: url(<%= asset_data_uri 'user.png' %>);
     background-size: 84px 84px;
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 14f8aae9..cc121cbe 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -39,11 +39,12 @@ module ApplicationHelper
   end
 
   def user_has_unread_notifications?
-    return false if current_user.nil?
+    return @user_has_unread_notifications unless @user_has_unread_notifications.nil?
+    return (@user_has_unread_notifications = false) if current_user.nil?
     current_user.mailboxer_notification_receipts.each do |receipt|
-      return true if receipt.is_read == false
+      return (@user_has_unread_notifications = true) if receipt.is_read == false
     end
-    false
+    @user_has_unread_notifications = false
   end
 
   def user_unread_notification_count
diff --git a/app/views/layouts/_account.html.erb b/app/views/layouts/_account.html.erb
index ebb8658c..3cbf4f52 100644
--- a/app/views/layouts/_account.html.erb
+++ b/app/views/layouts/_account.html.erb
@@ -24,7 +24,11 @@
     </li>
     <% if current_user.present? %>
       <li class="accountListItem accountNotifications <%= user_has_unread_notifications? ? 'unread' : 'read' %>">
-        <div class="accountIcon"></div>
+        <div class="accountIcon">
+          <% if user_has_unread_notifications? %>
+            <div class="unread-notifications-dot"></div>
+          <% end %>
+        </div>
         <%= link_to "Notifications", notifications_path %>
       </li>
     <% end %>
diff --git a/app/views/layouts/_upperelements.html.erb b/app/views/layouts/_upperelements.html.erb
index 63de15fd..e560eadf 100644
--- a/app/views/layouts/_upperelements.html.erb
+++ b/app/views/layouts/_upperelements.html.erb
@@ -74,6 +74,9 @@
   <!-- Account / Sign in -->
   <% if !(controller_name == "sessions" && action_name == "new") %>
   <div class="sidebarAccount upperRightEl">
+    <% if user_has_unread_notifications? %>
+      <div class="unread-notifications-dot"></div>
+    <% end %>
     <div class="sidebarAccountIcon"><div class="tooltipsUnder">Account</div>
       <% if current_user && current_user.image %>
         <%= image_tag current_user.image.url(:thirtytwo), :size => "32x32" %>