Notifications UI

customize.dist/src/less2/include/toolbar.less

@@ -576,8 +576,13 @@
                         button {
                             height: @toolbar_line-height;
                             width: @toolbar_line-height;
-                            font-size: 20px;
+                            font-size: 15px;
                             margin-top: -1px;
+                            .cp-dropdown-button-title {
+                                transform: scale(0.5);
+                                bottom: -5px;
+                                right: -5px;
+                            }
                         }
                     }
                     .cp-toolbar-new {
@@ -917,6 +922,10 @@
                     width: 20px;
                     height: 20px;
                     line-height: 16px;
+                    &.cp-notifications-small {
+                        font-size: 10px;
+                        line-height: 17px;
+                    }
                 }
             }
         }

www/common/toolbar3.js

@@ -971,11 +971,16 @@ MessengerUI, Messages) {
             updateUserList(toolbar, config);
             var n = $(div).find('.cp-notification').length;
             $button.removeClass('fa-bell-o').removeClass('fa-bell');
+            $n.removeClass('cp-notifications-small');
             if (n === 0) {
                 $empty.show();
                 $n.hide();
                 return void $button.addClass('fa-bell-o');
             }
+            if (n > 99) {
+                n = '99+';
+                $n.addClass('cp-notifications-small');
+            }
             $empty.hide();
             $n.text(n).show();
             $button.addClass('fa-bell');