From d522d7095ddbbdd1668cb5e90261edcc68f66b46 Mon Sep 17 00:00:00 2001
From: fabrixxm <fabrix.xm@gmail.com>
Date: Sun, 8 Nov 2015 16:55:44 +0100
Subject: [PATCH] quattro: add unread message count per groups

---
 js/main.js                                    |   2 +-
 view/theme/quattro/dark/style.css             |  17 +-
 view/theme/quattro/green/style.css            |  17 +-
 view/theme/quattro/js/quattro.js              | 143 +++++++++++++++++
 view/theme/quattro/lilac/style.css            |  23 ++-
 view/theme/quattro/quattro.less               |  14 ++
 .../templates/generic_links_widget.tpl        |   5 +-
 view/theme/quattro/templates/group_side.tpl   |   9 +-
 view/theme/quattro/theme.php                  | 149 +-----------------
 9 files changed, 221 insertions(+), 158 deletions(-)
 create mode 100644 view/theme/quattro/js/quattro.js

diff --git a/js/main.js b/js/main.js
index 572a6ebfe1..84940eb239 100644
--- a/js/main.js
+++ b/js/main.js
@@ -153,7 +153,7 @@
 		var notifications_empty = unescape($("#nav-notifications-menu").html());
 
 		/* nav update event  */
-		$('nav').bind('nav-update', function(e,data){;
+		$('nav').bind('nav-update', function(e,data){
 			var invalid = $(data).find('invalid').text();
 			if(invalid == 1) { window.location.href=window.location.href }
 
diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css
index 485ac39387..93ee1ccd58 100644
--- a/view/theme/quattro/dark/style.css
+++ b/view/theme/quattro/dark/style.css
@@ -463,7 +463,7 @@ a:hover {
   text-decoration: underline;
 }
 blockquote {
-  background: #ffffff;
+  background: #FFFFFF;
   padding: 1em;
   margin-left: 1em;
   border-left: 1em solid #e6e6e6;
@@ -1013,6 +1013,21 @@ aside .posted-date-selector-months {
 .widget .tool.selected {
   background: url('../../../images/selected.png') no-repeat left center;
 }
+.widget .notify {
+  display: none;
+  background-color: #19AEFF;
+  border-radius: 5px;
+  font-size: 10px;
+  padding: 1px 3px;
+  min-width: 15px;
+  text-align: right;
+  float: right;
+  color: #ffffff;
+  margin-right: 10px;
+}
+.widget .notify.on {
+  display: block;
+}
 /* widget: search */
 #add-search-popup {
   width: 200px;
diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css
index 345043ffb4..ab50d93ae1 100644
--- a/view/theme/quattro/green/style.css
+++ b/view/theme/quattro/green/style.css
@@ -463,7 +463,7 @@ a:hover {
   text-decoration: underline;
 }
 blockquote {
-  background: #ffffff;
+  background: #FFFFFF;
   padding: 1em;
   margin-left: 1em;
   border-left: 1em solid #e6e6e6;
@@ -1013,6 +1013,21 @@ aside .posted-date-selector-months {
 .widget .tool.selected {
   background: url('../../../images/selected.png') no-repeat left center;
 }
+.widget .notify {
+  display: none;
+  background-color: #19AEFF;
+  border-radius: 5px;
+  font-size: 10px;
+  padding: 1px 3px;
+  min-width: 15px;
+  text-align: right;
+  float: right;
+  color: #ffffff;
+  margin-right: 10px;
+}
+.widget .notify.on {
+  display: block;
+}
 /* widget: search */
 #add-search-popup {
   width: 200px;
diff --git a/view/theme/quattro/js/quattro.js b/view/theme/quattro/js/quattro.js
new file mode 100644
index 0000000000..1a532b9d55
--- /dev/null
+++ b/view/theme/quattro/js/quattro.js
@@ -0,0 +1,143 @@
+$(document).ready(function(){
+	$('nav').bind('nav-update', function(e,data){
+		var notifCount = $(data).find('notif').attr('count');
+		var intro = $(data).find('intro').text();
+		var mail = $(data).find('mail').text();
+
+		$("tool notify").removeClass("on");
+		$(data).find("group").each(function() {
+			var gid = this.id;
+			var gcount = this.innerHTML;
+			$(".group-"+gid+" .notify").addClass("on").text(gcount);
+		});
+
+		console.log(intro,mail);
+
+		if (notifCount > 0 ) {
+			Tinycon.setBubble(notifCount);
+		} else {
+			Tinycon.setBubble('');
+		}
+
+		if (intro>0){
+			$("#nav-introductions-link").addClass("on");
+		} else {
+			$("#nav-introductions-link").removeClass("on");
+		}
+
+		if (mail>0){
+			$("#nav-messages-link").addClass("on");
+		} else {
+			$("#nav-messages-link").removeClass("on");
+		}
+
+	});
+
+	/*
+	 * show and hide contact action buttons in
+	 * contacts page on contacts' checkbox selection
+	 */
+	$('.contact-select').bind('click', function(e) {
+		var y = e.clientY;
+		var elm = $("#contacts-actions");
+		y=y-40;
+		if (y<0) y=0;
+		if (y+elm.height() > $("html").height()) y=$("html").height()-elm.height();
+		elm.css('top', y+"px");
+		if ($(".contact-select:checked").length > 0) {
+			elm.show();
+		} else {
+			elm.hide();
+		}
+	});
+});
+
+function insertFormatting(comment,BBcode,id) {
+
+		var tmpStr = $("#comment-edit-text-" + id).val();
+		if(tmpStr == comment) {
+			tmpStr = "";
+			$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
+			$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
+			openMenu("comment-edit-submit-wrapper-" + id);
+			$("#comment-edit-text-" + id).val(tmpStr);
+		}
+
+	textarea = document.getElementById("comment-edit-text-" +id);
+	if (document.selection) {
+		textarea.focus();
+		selected = document.selection.createRange();
+		if (BBcode == "url"){
+			selected.text = "["+BBcode+"]" + "http://" +  selected.text + "[/"+BBcode+"]";
+			} else
+		selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
+	} else if (textarea.selectionStart || textarea.selectionStart == "0") {
+		var start = textarea.selectionStart;
+		var end = textarea.selectionEnd;
+		if (BBcode == "url"){
+			textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + "http://" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
+			} else
+		textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
+	}
+	return true;
+}
+
+function showThread(id) {
+	$("#collapsed-comments-" + id).show()
+	$("#collapsed-comments-" + id + " .collapsed-comments").show()
+}
+function hideThread(id) {
+	$("#collapsed-comments-" + id).hide()
+	$("#collapsed-comments-" + id + " .collapsed-comments").hide()
+}
+
+
+function cmtBbOpen(id) {
+	$("#comment-edit-bb-" + id).show();
+}
+function cmtBbClose(id) {
+	$("#comment-edit-bb-" + id).hide();
+}
+
+$(document).ready(function() {
+
+	$('html').click(function() { $("#nav-notifications-menu" ).hide(); });
+
+	$('.group-edit-icon').hover(
+		function() {
+			$(this).addClass('icon'); $(this).removeClass('iconspacer');},
+		function() {
+			$(this).removeClass('icon'); $(this).addClass('iconspacer');}
+		);
+
+	$('.sidebar-group-element').hover(
+		function() {
+			id = $(this).attr('id');
+			$('#edit-' + id).addClass('icon'); $('#edit-' + id).removeClass('iconspacer');},
+
+		function() {
+			id = $(this).attr('id');
+			$('#edit-' + id).removeClass('icon');$('#edit-' + id).addClass('iconspacer');}
+		);
+
+
+	$('.savedsearchdrop').hover(
+		function() {
+			$(this).addClass('drop'); $(this).addClass('icon'); $(this).removeClass('iconspacer');},
+		function() {
+			$(this).removeClass('drop'); $(this).removeClass('icon'); $(this).addClass('iconspacer');}
+		);
+
+	$('.savedsearchterm').hover(
+		function() {
+			id = $(this).attr('id');
+			$('#drop-' + id).addClass('icon'); 	$('#drop-' + id).addClass('drophide'); $('#drop-' + id).removeClass('iconspacer');},
+
+		function() {
+			id = $(this).attr('id');
+			$('#drop-' + id).removeClass('icon');$('#drop-' + id).removeClass('drophide'); $('#drop-' + id).addClass('iconspacer');}
+	);
+
+});
+
+
diff --git a/view/theme/quattro/lilac/style.css b/view/theme/quattro/lilac/style.css
index b2dec86c84..510b2f7c8c 100644
--- a/view/theme/quattro/lilac/style.css
+++ b/view/theme/quattro/lilac/style.css
@@ -420,7 +420,7 @@
 body {
   font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
   font-size: 11px;
-  background-color: #f6ecf9;
+  background-color: #F6ECF9;
   color: #2d2d2d;
   margin: 50px 0px 0px 0px;
   display: table;
@@ -463,7 +463,7 @@ a:hover {
   text-decoration: underline;
 }
 blockquote {
-  background: #ffffff;
+  background: #FFFFFF;
   padding: 1em;
   margin-left: 1em;
   border-left: 1em solid #e6e6e6;
@@ -1013,6 +1013,21 @@ aside .posted-date-selector-months {
 .widget .tool.selected {
   background: url('../../../images/selected.png') no-repeat left center;
 }
+.widget .notify {
+  display: none;
+  background-color: #19AEFF;
+  border-radius: 5px;
+  font-size: 10px;
+  padding: 1px 3px;
+  min-width: 15px;
+  text-align: right;
+  float: right;
+  color: #ffffff;
+  margin-right: 10px;
+}
+.widget .notify.on {
+  display: block;
+}
 /* widget: search */
 #add-search-popup {
   width: 200px;
@@ -1689,7 +1704,7 @@ span[id^="showmore-wrap"] {
   height: 20px;
   width: 500px;
   font-weight: bold;
-  border: 1px solid #f6ecf9;
+  border: 1px solid #F6ECF9;
 }
 #jot #jot-title:-webkit-input-placeholder {
   font-weight: normal;
@@ -1716,7 +1731,7 @@ span[id^="showmore-wrap"] {
   margin: 0px;
   height: 20px;
   width: 200px;
-  border: 1px solid #f6ecf9;
+  border: 1px solid #F6ECF9;
 }
 #jot #jot-category:hover {
   border: 1px solid #999999;
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index 7aede8df08..2faa7966f0 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -442,6 +442,20 @@ aside {
 	/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
 
+	.notify {
+		display: none;
+		background-color: #19AEFF;
+		border-radius: 5px;
+		font-size: 10px;
+		padding: 1px 3px;
+		min-width: 15px;
+		text-align: right;
+		float: right;
+		color: rgb(255, 255, 255);
+		margin-right: 10px;
+
+		&.on { display: block; }
+	}
 }
 
 /* widget: search */
diff --git a/view/theme/quattro/templates/generic_links_widget.tpl b/view/theme/quattro/templates/generic_links_widget.tpl
index 6f7a082c1e..426464a094 100644
--- a/view/theme/quattro/templates/generic_links_widget.tpl
+++ b/view/theme/quattro/templates/generic_links_widget.tpl
@@ -1,11 +1,12 @@
 <div class="widget">
 	{{if $title}}<h3>{{$title}}</h3>{{/if}}
 	{{if $desc}}<div class="desc">{{$desc}}</div>{{/if}}
-	
+
 	<ul role="menu">
 		{{foreach $items as $item}}
+			{{$item|var_dump}}
 			<li role="menuitem" class="tool {{if $item.selected}}selected{{/if}}"><a href="{{$item.url}}" {{if $item.accesskey}}accesskey="{{$item.accesskey}}"{{/if}} class="link">{{$item.label}}</a></li>
 		{{/foreach}}
 	</ul>
-	
+
 </div>
diff --git a/view/theme/quattro/templates/group_side.tpl b/view/theme/quattro/templates/group_side.tpl
index d0fb5d62b6..620d2de75a 100644
--- a/view/theme/quattro/templates/group_side.tpl
+++ b/view/theme/quattro/templates/group_side.tpl
@@ -7,7 +7,7 @@
 	<div id="sidebar-group-list">
 		<ul>
 			{{foreach $groups as $group}}
-			<li class="tool  {{if $group.selected}}selected{{/if}}">
+			<li class="tool  {{if $group.selected}}selected{{/if}} group-{{$group.id}}">
 				<a href="{{$group.href}}" class="label">
 					{{$group.text}}
 				</a>
@@ -15,15 +15,16 @@
 					<a href="{{$group.edit.href}}" class="action"><span class="icon text s10 edit">{{$group.edit.title}}</span></a>
 				{{/if}}
 				{{if $group.cid}}
-					<input type="checkbox" 
-						class="{{if $group.selected}}ticked{{else}}unticked {{/if}} action" 
+					<input type="checkbox"
+						class="{{if $group.selected}}ticked{{else}}unticked {{/if}} action"
 						onclick="contactgroupChangeMember('{{$group.id}}','{{$group.cid}}');return true;"
 						{{if $group.ismember}}checked="checked"{{/if}}
 					/>
 				{{/if}}
+				<span class="notify"></span>
 			</li>
 			{{/foreach}}
 		</ul>
 	</div>
-</div>	
+</div>
 
diff --git a/view/theme/quattro/theme.php b/view/theme/quattro/theme.php
index 1be5c02678..a1cd29ee72 100644
--- a/view/theme/quattro/theme.php
+++ b/view/theme/quattro/theme.php
@@ -6,151 +6,10 @@
  * Maintainer: Fabio <http://kirgroup.com/profile/fabrixxm>
  * Maintainer: Tobias <https://diekershoff.homeunix.net/friendica/profile/tobias>
  */
- 
+
 function quattro_init(&$a) {
-$a->theme_info = array();
-set_template_engine($a, 'smarty3');
+	$a->theme_info = array();
 
-
-$a->page['htmlhead'] .= '<script src="'.$a->get_baseurl().'/view/theme/quattro/tinycon.min.js"></script>';
-$a->page['htmlhead'] .= <<< EOT
-<script>
-$(document).ready(function(){
-    $('nav').bind('nav-update', function(e,data){
-        var notifCount = $(data).find('notif').attr('count');
-        var intro = $(data).find('intro').text();
-        var mail = $(data).find('mail').text();
-        
-        console.log(intro,mail);
-        
-        if (notifCount > 0 ) {
-            Tinycon.setBubble(notifCount);
-        } else {
-            Tinycon.setBubble('');
-        }
-        
-        if (intro>0){
-			$("#nav-introductions-link").addClass("on");
-		} else {
-			$("#nav-introductions-link").removeClass("on");
-		}
-		
-        if (mail>0){
-			$("#nav-messages-link").addClass("on");
-		} else {
-			$("#nav-messages-link").removeClass("on");
-		}
-		
-    });
-	
-	/* 
-	 * show and hide contact action buttons in 
-	 * contacts page on contacts' checkbox selection
-	 */
-	$('.contact-select').bind('click', function(e) {
-		var y = e.clientY;
-		var elm = $("#contacts-actions");
-		y=y-40;
-		if (y<0) y=0;
-		if (y+elm.height() > $("html").height()) y=$("html").height()-elm.height();
-		elm.css('top', y+"px");
-		if ($(".contact-select:checked").length > 0) {
-			elm.show();
-		} else {
-			elm.hide();
-		}
-	});
-});        
-
-function insertFormatting(comment,BBcode,id) {
-	
-		var tmpStr = $("#comment-edit-text-" + id).val();
-		if(tmpStr == comment) {
-			tmpStr = "";
-			$("#comment-edit-text-" + id).addClass("comment-edit-text-full");
-			$("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
-			openMenu("comment-edit-submit-wrapper-" + id);
-			$("#comment-edit-text-" + id).val(tmpStr);
-		}
-
-	textarea = document.getElementById("comment-edit-text-" +id);
-	if (document.selection) {
-		textarea.focus();
-		selected = document.selection.createRange();
-		if (BBcode == "url"){
-			selected.text = "["+BBcode+"]" + "http://" +  selected.text + "[/"+BBcode+"]";
-			} else			
-		selected.text = "["+BBcode+"]" + selected.text + "[/"+BBcode+"]";
-	} else if (textarea.selectionStart || textarea.selectionStart == "0") {
-		var start = textarea.selectionStart;
-		var end = textarea.selectionEnd;
-		if (BBcode == "url"){
-			textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + "http://" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
-			} else
-		textarea.value = textarea.value.substring(0, start) + "["+BBcode+"]" + textarea.value.substring(start, end) + "[/"+BBcode+"]" + textarea.value.substring(end, textarea.value.length);
-	}
-	return true;
-}
-
-function showThread(id) {
-	$("#collapsed-comments-" + id).show()
-	$("#collapsed-comments-" + id + " .collapsed-comments").show()
-}
-function hideThread(id) {
-	$("#collapsed-comments-" + id).hide()
-	$("#collapsed-comments-" + id + " .collapsed-comments").hide()
-}
-
-
-function cmtBbOpen(id) {
-	$("#comment-edit-bb-" + id).show();
-}
-function cmtBbClose(id) {
-	$("#comment-edit-bb-" + id).hide();
-}
-
-$(document).ready(function() {
-
-	$('html').click(function() { $("#nav-notifications-menu" ).hide(); });
-
-	$('.group-edit-icon').hover(
-		function() {
-			$(this).addClass('icon'); $(this).removeClass('iconspacer');},
-		function() {
-			$(this).removeClass('icon'); $(this).addClass('iconspacer');}
-		);
-
-	$('.sidebar-group-element').hover(
-		function() {
-			id = $(this).attr('id');
-			$('#edit-' + id).addClass('icon'); $('#edit-' + id).removeClass('iconspacer');},
-
-		function() {
-			id = $(this).attr('id');
-			$('#edit-' + id).removeClass('icon');$('#edit-' + id).addClass('iconspacer');}
-		);
-
-
-	$('.savedsearchdrop').hover(
-		function() {
-			$(this).addClass('drop'); $(this).addClass('icon'); $(this).removeClass('iconspacer');},
-		function() {
-			$(this).removeClass('drop'); $(this).removeClass('icon'); $(this).addClass('iconspacer');}
-		);
-
-	$('.savedsearchterm').hover(
-		function() {
-			id = $(this).attr('id');
-			$('#drop-' + id).addClass('icon'); 	$('#drop-' + id).addClass('drophide'); $('#drop-' + id).removeClass('iconspacer');},
-
-		function() {
-			id = $(this).attr('id');
-			$('#drop-' + id).removeClass('icon');$('#drop-' + id).removeClass('drophide'); $('#drop-' + id).addClass('iconspacer');}
-	);
-
-});
-
-
-</script>
-EOT;
+	$a->page['htmlhead'] .= '<script src="'.$a->get_baseurl().'/view/theme/quattro/tinycon.min.js"></script>';
+	$a->page['htmlhead'] .= '<script src="'.$a->get_baseurl().'/view/theme/quattro/js/quattro.js"></script>';;
 }