Merge pull request #2052 from fabrixxm/issue_1718

duepuntozero, vier: add unread messages per group

js/main.js

@@ -203,6 +203,13 @@
 			var birthdaystoday = $(data).find('birthdays-today').text();
 			if(birthdaystoday == 0) { $('#birthdays-update').removeClass('notif-birthdays-today') } else { $('#birthdays-update').addClass('notif-birthdays-today') }
 
+			$(".sidebar-group-li .notify").removeClass("show");
+			$(data).find("group").each(function() {
+				var gid = this.id;
+				var gcount = this.innerHTML;
+				$(".group-"+gid+" .notify").addClass("show").text(gcount);
+			});
+
 
 			var eNotif = $(data).find('notif')
 

view/templates/group_side.tpl

@@ -4,7 +4,7 @@
 <div id="sidebar-group-list">
 	<ul role="menu" id="sidebar-group-ul">
 		{{foreach $groups as $group}}
-			<li role="menuitem" class="sidebar-group-li">
+			<li role="menuitem" class="sidebar-group-li group-{{$group.id}}">
 				{{if $group.cid}}
 					<input type="checkbox"
 						class="{{if $group.selected}}ticked{{else}}unticked {{/if}} action"
@@ -16,6 +16,7 @@
 					<a class="groupsideedit" href="{{$group.edit.href}}" title="{{$edittext}}"><span id="edit-sidebar-group-element-{{$group.id}}" class="group-edit-icon iconspacer small-pencil"><span class="sr-only">{{$edittext}}</span></span></a>
 				{{/if}}
 				<a id="sidebar-group-element-{{$group.id}}" class="sidebar-group-element {{if $group.selected}}group-selected{{/if}}" href="{{$group.href}}">{{$group.text}}</a>
+				<span class="notify"></span>
 			</li>
 		{{/foreach}}
 	</ul>

view/theme/duepuntozero/style.css

@@ -2039,6 +2039,17 @@ a.mail-list-link {
 #sidebar-group-list ul {
 	list-style-type: none;
 }
+.sidebar-group-li .notify {
+	display: none;
+	font-size: 9px;
+	border: 1px solid rgb(221, 221, 221);
+	padding: 2px;
+	float: right;
+	background-color: #BABDB6;
+}
+.sidebar-group-li .notify.show {
+	display: block;
+}
 
 #sidebar-group-list .icon, #sidebar-group-list .iconspacer {
 	display: inline-block;

view/theme/quattro/js/quattro.js

@@ -4,7 +4,7 @@ $(document).ready(function(){
 		var intro = $(data).find('intro').text();
 		var mail = $(data).find('mail').text();
 
-		$("tool notify").removeClass("on");
+		$(".tool .notify").removeClass("on");
 		$(data).find("group").each(function() {
 			var gid = this.id;
 			var gcount = this.innerHTML;

view/theme/vier/style.css

@@ -366,6 +366,17 @@ code {
 #sidebar-group-list .tool:hover {
 	background: #EEE;
 }
+#sidebar-group-list .notify {
+	min-width: 10px;
+	text-align: center;
+	color: #FFF;
+	background-color: #CB4437;
+	font: bold 10px Arial;
+	padding: 3px;
+	border-radius: 10px;
+	display: none;
+}
+#sidebar-group-list .notify.show { display: inline-block; }
 .tool .label {
 /*  float: left; */
 }