Better folder unread-count view

dev/Model/FolderCollection.js

@@ -280,21 +280,21 @@ export class FolderModel extends AbstractModel {
 						unread = folder.messageCountUnread(),
 						type = folder.type();
 
-					if (0 < count) {
+					if (count) {
 						if (FolderType.Draft === type) {
-							return '' + count;
+							return count;
 						}
 						if (
-							0 < unread &&
+							unread &&
 							FolderType.Trash !== type &&
 							FolderType.Archive !== type &&
 							FolderType.SentItems !== type
 						) {
-							return '' + unread;
+							return unread;
 						}
 					}
 
-					return '';
+					return null;
 				},
 
 				canBeDeleted: () => !folder.isSystemFolder() && !folder.subFolders.length,

dev/Styles/@Main.less

@@ -17,7 +17,6 @@
 @import "../../vendors/bootstrap/less/modals.less";
 @import "../../vendors/bootstrap/less/utilities.less";
 @import "../../vendors/bootstrap/less/navs.less";
-@import "../../vendors/bootstrap/less/labels-badges.less";
 
 @import "_FontasticToBoot.less";
 @import "_BootstrapFix.less";

dev/Styles/User/FolderList.less

@@ -19,12 +19,6 @@
 			transparent 75%, transparent);
 	}
 
-	.b-folders-user {
-		a.print-count.system .badge {
-			display: none !important;
-		}
-	}
-
 	.b-toolbar {
 		position: absolute;
 		top: 0;
@@ -148,20 +142,6 @@
 				color: grey;
 			}
 
-			.count {
-				position: relative;
-				display: none;
-				margin-top: 5px;
-				line-height: 19px;
-			}
-
-			&.print-count {
-				font-weight: bold;
-				.count {
-					display: inline;
-				}
-			}
-
 			&.unread-sub {
 				font-weight: bold;
 			}
@@ -176,6 +156,10 @@
 			}
 		}
 
+		a[data-unread] {
+			font-weight: bold;
+		}
+
 		.b-sub-folders.collapsed {
 			max-height: 0;
 			height: 0;
@@ -183,6 +167,23 @@
 		}
 	}
 
+	.b-folders-system a[data-unread]::after,
+	.b-folders-user a[data-unread]:not(.system)::after
+	{
+		content: attr(data-unread);
+		background-color: @grayLight;
+		border-radius: 9px;
+		color: @white;
+		float: right;
+		font-size: 80%;
+		line-height: 19px;
+		margin-top: 5px;
+		min-width: 1em;
+		padding: 1px 4px;
+		text-align: center;
+		text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+	}
+
 	&.inbox-is-starred {
 		.flagged {
 			color: orange;

snappymail/v/0.0.0/app/templates/Views/User/MailFolderListItem.html

@@ -1,7 +1,7 @@
 <div class="e-item" data-bind="visible: visible, css: { 'i-am-inbox-wrapper': isInbox }">
 	<a data-bind="dropmessages: $data,
-	   css: { 'i-am-inbox': isInbox, 'selected': selected() && !isSystemFolder(), 'selectable': canBeSelected, 'hidden' : hidden, 'print-count': hasUnreadMessages, 'unread-sub': hasSubscribedUnreadMessagesSubfolders, 'system': isSystemFolder, 'anim-action-class': actionBlink }">
-		<span class="badge pull-right count" data-bind="text: printableUnreadCount"></span>
+	   css: { 'i-am-inbox': isInbox, 'selected': selected() && !isSystemFolder(), 'selectable': canBeSelected, 'hidden' : hidden, 'unread-sub': hasSubscribedUnreadMessagesSubfolders, 'system': isSystemFolder, 'anim-action-class': actionBlink },
+	   attr: { 'data-unread': printableUnreadCount }">
 		<i data-bind="css: collapsedCss()"></i>
 		<span class="name" data-bind="text: name"></span>
 	</a>

snappymail/v/0.0.0/app/templates/Views/User/MailFolderListSystemItem.html

@@ -1,7 +1,7 @@
 <div class="e-item b-folder-system-item">
-	<a data-bind="dropmessages: $data, css: { 'selected': selected, 'selectable': selectable, 'print-count': 0 < printableUnreadCount().length, 'anim-action-class': actionBlink, 'is-inbox': isInbox }">
-		<span class="badge pull-right count" data-bind="text: printableUnreadCount"></span>
-		&nbsp;
+	<a data-bind="dropmessages: $data,
+		css: { 'selected': selected, 'selectable': selectable, 'anim-action-class': actionBlink, 'is-inbox': isInbox },
+		attr: { 'data-unread': printableUnreadCount }">
 		<span class="name" data-bind="text: localName()"></span>
 		<span class="inbox-star-icon">
 			<i class="fontastic flagged">★</i>

vendors/bootstrap/less/labels-badges.less

@@ -1,25 +0,0 @@
-//
-// Labels and badges
-// --------------------------------------------------
-
-
-// Base classes
-.badge {
-  background-color: @grayLight;
-  border-radius: 9px;
-  color: @white;
-  font-size: 80%;
-  min-width: 1em;
-  padding: 1px 4px;
-  text-align: center;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-}
-
-// Hover state, but only for links
-a {
-  &.badge:hover {
-    color: @white;
-    text-decoration: none;
-    cursor: pointer;
-  }
-}