notification number

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>

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 () {

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;
+    }
 }
 

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;