From 84bd762d63e536a70be73d271dab5aaf1b7af13e Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Tue, 7 Nov 2017 14:14:58 +0800
Subject: [PATCH] feat(core): show red dot badge on header when user has new
 message or  H&R warning.

---
 modules/core/client/less/mt.less                | 17 +++++++++++++++++
 .../core/client/views/header.client.view.html   |  1 +
 2 files changed, 18 insertions(+)

diff --git a/modules/core/client/less/mt.less b/modules/core/client/less/mt.less
index afa3ee2e..2e4d4a06 100644
--- a/modules/core/client/less/mt.less
+++ b/modules/core/client/less/mt.less
@@ -44,6 +44,23 @@ body {
     font-size: 18px;
 }
 
+.header-red-dot {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 12px;
+    left: 35px;
+    border-radius: 50%;
+    border: solid 1px #fff;
+
+    &.bg-msg {
+        background-color: @btn-info-bg !important;
+    }
+    &.bg-hnr {
+        background-color: @btn-danger-bg;
+    }
+}
+
 .user-header-dropdown-toggle {
     .img {
         position: relative;
diff --git a/modules/core/client/views/header.client.view.html b/modules/core/client/views/header.client.view.html
index 4cf006d6..9a6e4358 100644
--- a/modules/core/client/views/header.client.view.html
+++ b/modules/core/client/views/header.client.view.html
@@ -34,6 +34,7 @@
         <a class="dropdown-toggle user-header-dropdown-toggle" uib-dropdown-toggle role="button">
           <img ng-src="{{vm.authentication.user.profileImageURL}}" alt="{{vm.authentication.user.displayName}}" class="header-profile-image" />
           <span class="sm-hide" ng-bind="vm.authentication.user.displayName"></span> <b class="caret"></b>
+          <span class="header-red-dot" ng-if="vm.unreadCount>0 || vm.user.hnr_warning>0" ng-class="{'bg-hnr': vm.user.hnr_warning>0, 'bg-msg': vm.unreadCount>0}"></span>
         </a>
         <ul class="dropdown-menu" role="menu">
           <li>