Show the number of occurences for each tag (#2365) and reduce visibility of those tags not matching any tasks (#2374) in the current selection

plugins/tasklist/skins/larry/tasklist.css

@@ -180,12 +180,39 @@ body.attachmentwin #topnav .topright {
 #tagslist li {
 	display: inline-block;
 	color: #004458;
-	margin-right: 0.5em;
+	padding-right: 0.2em;
+	margin-right: 0.3em;
 	margin-bottom: 0.4em;
 	min-width: 1.2em;
 	cursor: pointer;
 }
 
+#tagslist li.inactive {
+	color: #89b3be;
+/*	display: none; */
+}
+
+#tagslist li.inactive .count {
+	display: none;
+}
+
+#tagslist li .count {
+	position: relative;
+	top: -1px;
+	margin-left: 5px;
+	padding: 0.15em 0.5em;
+	font-size: 80%;
+	font-weight: bold;
+	color: #59838e;
+	background: #c7e3ef;
+	box-shadow: inset 0 1px 1px 0 #b0ccd7;
+	-o-box-shadow: inset 0 1px 1px 0 #b0ccd7;
+	-webkit-box-shadow: inset 0 1px 1px 0 #b0ccd7;
+	-moz-box-shadow: inset 0 1px 1px 0 #b0ccd7;
+	border-color: #b0ccd7;
+	border-radius: 8px;
+}
+
 #tasklists li {
 	margin: 0;
 	height: 20px;

plugins/tasklist/skins/larry/templates/mainview.html

@@ -157,6 +157,8 @@ $(document).ready(function(e){
 	UI.init();
 	new rcube_splitter({ id:'taskviewsplitter', p1:'#sidebar', p2:'#mainview-right',
 		orientation:'v', relative:true, start:240, min:180, size:16, offset:2 }).init();
+	new rcube_splitter({ id:'taskviewsplitterv', p1:'#tagsbox', p2:'#tasklistsbox',
+		orientation:'h', relative:true, start:242, min:120, size:16, offset:6 }).init();
 });
 
 </script>

plugins/tasklist/tasklist.js

@@ -474,8 +474,9 @@ function rcube_tasklist_ui(settings)
                 listdata[listdata[id].parent_id].children.push(id);
         }
 
-        render_tasklist();
         append_tags(response.tags || []);
+        render_tasklist();
+
         rcmail.set_busy(false, 'loading', ui_loading);
     }
 
@@ -488,6 +489,7 @@ function rcube_tasklist_ui(settings)
         var id, rec,
             count = 0,
             cache = {},
+            activetags = {},
             msgbox = $('#listmessagebox').hide(),
             list = $(rcmail.gui_objects.resultlist).html('');
 
@@ -497,10 +499,19 @@ function rcube_tasklist_ui(settings)
             if (match_filter(rec, cache)) {
                 render_task(rec);
                 count++;
+
+                // keep a list of tags from all visible tasks
+                for (var t, j=0; rec.tags && j < rec.tags.length; j++) {
+                    t = rec.tags[j];
+                    if (typeof activetags[t] == 'undefined')
+                        activetags[t] = 0;
+                    activetags[t]++;
+                }
             }
         }
 
         fix_tree_toggles();
+        update_tagcloud(activetags);
 
         if (!count)
             msgbox.html(rcmail.gettext('notasksfound','tasklist')).show();
@@ -559,7 +570,7 @@ function rcube_tasklist_ui(settings)
 
         // append new tags to tag cloud
         $.each(newtags, function(i, tag){
-            $('<li>').attr('rel', tag).data('value', tag).html(Q(tag)).appendTo(rcmail.gui_objects.tagslist);
+            $('<li>').attr('rel', tag).data('value', tag).html(Q(tag) + '<span class="count"></span>').appendTo(rcmail.gui_objects.tagslist);
         });
 
         // re-sort tags list
@@ -568,6 +579,22 @@ function rcube_tasklist_ui(settings)
         });
     }
 
+    /**
+     * Display the given counts to each tag and set those inactive which don't
+     * have any matching tasks in the current view.
+     */
+    function update_tagcloud(counts)
+    {
+        $(rcmail.gui_objects.tagslist).children('li').each(function(i,li){
+            var elem = $(li), tag = elem.attr('rel'),
+                count = counts[tag] || 0;
+
+            elem.children('.count').html(count+'');
+            if (count == 0) elem.addClass('inactive');
+            else            elem.removeClass('inactive');
+        });
+    }
+
     /**
      *
      */