Display readonly/shared icons for task lists; added toggles to collapse/expand subtasks (although state is not yet saved)

plugins/tasklist/drivers/kolab/tasklist_kolab_driver.php

@@ -107,6 +107,7 @@ class tasklist_kolab_driver extends tasklist_driver
                 'editable' => !$readonly,
                 'active' => $folder->is_subscribed(kolab_storage::SERVERSIDE_SUBSCRIPTION),
                 'parentfolder' => $path_imap,
+                'class_name' => $folder->get_namespace(),
             );
             $this->lists[$tasklist['id']] = $tasklist;
             $this->folders[$tasklist['id']] = $folder;

plugins/tasklist/skins/larry/tasklist.css

@@ -199,15 +199,46 @@ body.attachmentwin #topnav .topright {
 }
 
 #tasklists li span.listname {
+	display: block;
 	cursor: default;
 	padding-bottom: 2px;
+	padding-right: 30px;
+	margin-right: 20px;
 	color: #004458;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	background: url(sprites.png) right 20px no-repeat;
 }
 
 #tasklists li span.handle {
 	display: none;
 }
 
+#tasklists li.selected span.listname {
+	font-weight: bold;
+}
+
+#tasklists li.readonly span.listname {
+	background-position: right -142px;
+}
+
+#tasklists li.other span.listname {
+	background-position: right -160px;
+}
+
+#tasklists li.other.readonly span.listname {
+	background-position: right -178px;
+}
+
+#tasklists li.shared span.listname {
+	background-position: right -196px;
+}
+
+#tasklists li.shared.readonly span.listname {
+	background-position: right -214px;
+}
+
 #tasklists li input {
 	position: absolute;
 	top: 5px;
@@ -317,8 +348,9 @@ body.attachmentwin #topnav .topright {
 }
 
 .taskitem {
+	position: relative;
 	display: block;
-	margin-bottom: 5px;
+	margin-bottom: 3px;
 }
 
 .taskitem.dragging {
@@ -326,13 +358,26 @@ body.attachmentwin #topnav .topright {
 }
 
 .taskitem .childtasks {
+	position: relative;
 	padding: 0;
-	margin: 0.5em 0 0 2em;
+	margin: 3px 0 0 20px;
 	list-style: none;
 }
 
+.taskitem .childtoggle {
+	display: none;
+	position: absolute;
+	top: 4px;
+	left: -5px;
+	padding: 2px;
+	font-size: 10px;
+	color: #727272;
+	cursor: pointer;
+}
+
 .taskhead {
 	position: relative;
+	margin-left: 14px;
 	padding: 4px 5px 3px 5px;
 	border: 1px solid #fff;
 	border-radius: 5px;

plugins/tasklist/tasklist.js

@@ -205,8 +205,13 @@ function rcube_tasklist_ui(settings)
         // click-handler on task list items (delegate)
         $(rcmail.gui_objects.resultlist).click(function(e){
             var item = $(e.target);
+            var className = e.target.className;
 
-            if (!item.hasClass('taskhead'))
+            if (item.hasClass('childtoggle')) {
+                item = item.parent().find('.taskhead');
+                className = 'childtoggle';
+            }
+            else if (!item.hasClass('taskhead'))
                 item = item.closest('div.taskhead');
 
             // ignore
@@ -217,7 +222,13 @@ function rcube_tasklist_ui(settings)
                 li = item.parent(),
                 rec = listdata[id];
             
-            switch (e.target.className) {
+            switch (className) {
+                case 'childtoggle':
+                    rec.collapsed = !rec.collapsed;
+                    li.children('.childtasks:first').toggle();
+                    $(e.target).toggleClass('collapsed').html(rec.collapsed ? '▶' : '▼');
+                    break;
+
                 case 'complete':
                     rec.complete = e.target.checked ? 1 : 0;
                     li.toggleClass('complete');
@@ -450,10 +461,26 @@ function rcube_tasklist_ui(settings)
             }
         }
 
+        fix_tree_toggles();
+
         if (!count)
             msgbox.html(rcmail.gettext('notasksfound','tasklist')).show();
     }
 
+    /**
+     * Show/hide child toggle buttons on all 
+     */
+    function fix_tree_toggles()
+    {
+        $('.taskitem', rcmail.gui_objects.resultlist).each(function(i,elem){
+            var li = $(elem),
+                rec = listdata[li.attr('rel')],
+                childs = rec && rec.children && rec.children.length ? $('.childtasks li', li) : [];
+
+            $('.childtoggle', li)[(childs.length ? 'show' : 'hide')]();
+        })
+    }
+
     /**
      *
      */
@@ -528,6 +555,7 @@ function rcube_tasklist_ui(settings)
             $('li[rel="'+id+'"]', rcmail.gui_objects.resultlist).remove();
 
         append_tags(rec.tags || []);
+        fix_tree_toggles();
     }
 
     /**
@@ -601,8 +629,9 @@ function rcube_tasklist_ui(settings)
             li = $('<li>')
                 .attr('rel', rec.id)
                 .addClass('taskitem')
+                .append((rec.collapsed ? '<span class="childtoggle collapsed">&#9654;' : '<span class="childtoggle expanded">&#9660;') + '</span>')
                 .append(div)
-                .append('<ul class="childtasks"></ul>');
+                .append('<ul class="childtasks" style="' + (rec.collapsed ? 'display:none' : '') + '"></ul>');
 
             if (!parent || !parent.length)
                 li.appendTo(rcmail.gui_objects.resultlist);

plugins/tasklist/tasklist_ui.php

@@ -105,7 +105,7 @@ class tasklist_ui
             $html_id = html_identifier($id);
             $class = 'tasks-'  . asciiwords($id, true);
 
-            if ($prop['readonly'])
+            if (!$prop['editable'])
                 $class .= ' readonly';
             if ($prop['class_name'])
                 $class .= ' '.$prop['class_name'];