Allow to select tasks by multiple tags (AND); show tags in task listing

plugins/tasklist/skins/larry/tasklist.css

@@ -67,7 +67,7 @@
 	display: inline-block;
 	color: #004458;
 	min-width: 4em;
-	padding: 0.2em 0.6em;
+	padding: 0.2em 0.6em 0.3em 0.6em;
 	text-align: center;
 	text-decoration: none;
 	border: 1px solid #eee;
@@ -324,7 +324,7 @@
 	-webkit-box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.5);
 	-moz-box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.5);
 	box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.5);
-	padding-right: 11em;
+	padding-right: 26em;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -367,6 +367,26 @@
 	background-position: -2px -23px;
 }
 
+.taskhead .tags {
+	position: absolute;
+	top: 4px;
+	right: 110px;
+	max-width: 14em;
+	overflow: hidden;
+	padding-top: 1px;
+	padding-bottom: 4px;
+	text-align: right;
+}
+
+.taskhead .tags .tag {
+	font-size: 85%;
+	background: #d9ecf4;
+	border: 1px solid #c2dae5;
+	border-radius: 4px;
+	padding: 2px 8px;
+	margin-right: 3px;
+}
+
 .taskhead .date {
 	position: absolute;
 	top: 6px;

plugins/tasklist/tasklist.js

@@ -47,7 +47,7 @@ function rcube_tasklist(settings)
 
     /*  private vars  */
     var selector = 'all';
-    var tagsfilter = null;
+    var tagsfilter = [];
     var filtermask = FILTER_MASK_ALL;
     var loadstate = { filter:-1, lists:'', search:null };
     var idcount = 0;
@@ -146,20 +146,43 @@ function rcube_tasklist(settings)
         // click-handler on tags list
         $(rcmail.gui_objects.tagslist).click(function(e){
             if (e.target.nodeName != 'LI')
-                return;
+                return false;
 
             var item = $(e.target),
                 tag = item.data('value');
 
+            // reset selection on regular clicks
+            var index = tagsfilter.indexOf(tag);
+            var shift = e.shiftKey || e.ctrlKey || e.metaKey;
+
+            if (!shift) {
+                if (tagsfilter.length > 1)
+                    index = -1;
+
                 $('li', this).removeClass('selected');
-            if (tag != tagsfilter) {
+                tagsfilter = [];
-                item.addClass('selected');
+            }
-                tagsfilter = tag;
+
+            // add tag to filter
+            if (index < 0) {
+                item.addClass('selected');
+                tagsfilter.push(tag);
+            }
+            else if (shift) {
+                item.removeClass('selected');
+                var a = tagsfilter.slice(0,index);
+                tagsfilter = a.concat(tagsfilter.slice(index+1));
             }
-            else
-                tagsfilter = null;
 
             list_tasks();
+
+            e.preventDefault();
+            return false;
+        })
+        .mousedown(function(e){
+            // disable content selection with the mouse
+            e.preventDefault();
+            return false;
         });
 
         // click-handler on task list items (delegate)
@@ -439,11 +462,16 @@ function rcube_tasklist(settings)
      */
     function render_task(rec, replace)
     {
+        var tags_html = '';
+        for (var j=0; rec.tags && j < rec.tags.length; j++)
+            tags_html += '<span class="tag">' + Q(rec.tags[j]) + '</span>';
+
         var div = $('<div>').addClass('taskhead').html(
             '<div class="progressbar"><div class="progressvalue" style="width:' + (rec.complete * 100) + '%"></div></div>' +
             '<input type="checkbox" name="completed[]" value="1" class="complete" ' + (rec.complete == 1.0 ? 'checked="checked" ' : '') + '/>' + 
             '<span class="flagged"></span>' +
             '<span class="title">' + Q(rec.title) + '</span>' +
+            '<span class="tags">' + tags_html + '</span>' +
             '<span class="date">' + Q(rec.date || rcmail.gettext('nodate','tasklist')) + '</span>' +
             '<a href="#" class="actions">V</a>'
             )
@@ -822,8 +850,13 @@ function rcube_tasklist(settings)
     {
         var match = !filtermask || (filtermask & rec.mask) > 0;
 
-        if (match && tagsfilter)
+        if (match && tagsfilter.length) {
-            match = rec.tags && rec.tags.indexOf(tagsfilter) >= 0;
+            match = rec.tags && rec.tags.length;
+            for (var i=0; match && i < tagsfilter.length; i++) {
+                if (rec.tags.indexOf(tagsfilter[i]) < 0)
+                    match = false;
+            }
+        }
 
         return match;
     }