Hide badge when zero and use absolute position

issue7181
review39201002

src/sao.less

@@ -44,13 +44,10 @@
 
     & .navbar-btn {
         .badge {
-            max-width: 3em;
-            min-width: 3em;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            /* remove padding to not increase size of navbar-btn */
-            margin-top: -3px;
-            margin-bottom: -3px;
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            z-index: 1000;
         }
     }
 

src/tab.js

@@ -861,7 +861,11 @@
                     'class': 'badge'
                 }).appendTo(this.buttons.attach);
             }
-            badge.text(count);
+            var text = count || '';
+            if (count > 99) {
+                text = '99+';
+            }
+            badge.text(text);
             this.buttons.attach.attr(
                 'title', Sao.i18n.gettext("Attachement(%1)", count));
             var record_id = this.screen.get_id();
@@ -893,7 +897,11 @@
                     'class': 'badge'
                 }).appendTo(this.buttons.note);
             }
-            badge.text(unread);
+            var text = unread || '';
+            if (unread > 99) {
+                text = '99+';
+            }
+            badge.text(text);
             this.buttons.note.attr(
                 'title', Sao.i18n.gettext("Note(%1)", unread));
             var record_id = this.screen.get_id();