From bbcf9e00fa35ef4ae680e519c9e2e883a7e0735d Mon Sep 17 00:00:00 2001
From: yuri <yurikuzn@users.noreply.github.com>
Date: Mon, 15 May 2017 16:54:34 +0300
Subject: [PATCH] notification number

---
 client/res/templates/notification/badge.tpl |  3 ++-
 client/src/views/notification/badge.js      |  8 ++++++--
 frontend/less/espo-vertical/custom.less     |  6 +++++-
 frontend/less/espo/custom.less              | 16 ++++++++++++++--
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/client/res/templates/notification/badge.tpl b/client/res/templates/notification/badge.tpl
index 1f5ececc0e..c673b9c664 100644
--- a/client/res/templates/notification/badge.tpl
+++ b/client/res/templates/notification/badge.tpl
@@ -1,4 +1,5 @@
 <a href="javascript:" class="notifications-button" data-action="showNotifications">
-    <span class="glyphicon glyphicon-bell icon"></span>
+    <span class="glyphicon glyphicon-bell icon bell"></span>
+    <span class="badge number-badge hidden"></span>
 </a>
 <div class="notifications-panel-container"></div>
diff --git a/client/src/views/notification/badge.js b/client/src/views/notification/badge.js
index 667bc8edd6..765b6534cd 100644
--- a/client/src/views/notification/badge.js
+++ b/client/src/views/notification/badge.js
@@ -92,6 +92,7 @@ Espo.define('views/notification/badge', 'view', function (Dep) {
         afterRender: function () {
             this.$badge = this.$el.find('.notifications-button');
             this.$icon = this.$el.find('.notifications-button .icon');
+            this.$number = this.$el.find('.number-badge');
 
             this.runCheckUpdates(true);
 
@@ -120,13 +121,16 @@ Espo.define('views/notification/badge', 'view', function (Dep) {
         },
 
         showNotRead: function (count) {
-            this.$icon.addClass('warning');
+            //this.$icon.addClass('warning');
             this.$badge.attr('title', this.translate('New notifications') + ': ' + count);
+
+            this.$number.removeClass('hidden').html(count.toString());
         },
 
         hideNotRead: function () {
-            this.$icon.removeClass('warning');
+            //this.$icon.removeClass('warning');
             this.$badge.attr('title', '');
+            this.$number.addClass('hidden').html('');
         },
 
         checkBypass: function () {
diff --git a/frontend/less/espo-vertical/custom.less b/frontend/less/espo-vertical/custom.less
index 700751be0b..3c8834878c 100644
--- a/frontend/less/espo-vertical/custom.less
+++ b/frontend/less/espo-vertical/custom.less
@@ -7,7 +7,7 @@
     height: @tob-bar-height;
 }
 
-#header .notifications-badge-container a span{
+#header .notifications-badge-container a span.bell{
     margin-top: 2px;
 }
 
@@ -38,5 +38,9 @@
     #global-search-panel {
         margin-top: -1px;
     }
+    .notifications-badge-container > .notifications-button > .number-badge {
+      top: 3px;
+      left: 22px;
+    }
 }
 
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 33c3551ebf..3b036943ea 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -906,9 +906,21 @@ td.cell[data-name="buttons"] > .btn-group {
           url('../fonts/open-sans-regular.svg#svgFontName') format('svg');
 }
 
+.notifications-badge-container > .notifications-button > .number-badge {
+    position: absolute;
+    z-index: 10;
+    font-size: 9px;
+    padding: 2px 5px;
+    display: inline-block;
+    top: 7px;
+    left: 27px;
+    background-color: @brand-warning;
+    color: @white-color;
+}
+
 .badge-circle {
-    width:8px;
-    height:8px;
+    width: 8px;
+    height: 8px;
     border-radius: 4px;
     text-align: center;
     display: table-cell;