Add tabs for task states.

diff --git a/kronolith/templates/index/tasks.inc b/kronolith/templates/index/tasks.inc
index 715ccb2..98b8a46 100644 (file)
--- a/kronolith/templates/index/tasks.inc
+++ b/kronolith/templates/index/tasks.inc
@@ -1,8 +1,14 @@
 <div id="kronolithViewTasks" class="kronolithView kronolithViewTasks" style="display:none">
 <table class="kronolithView kronolithViewTasks">
-  <caption>
+  <caption class="tabset">
     <span id="kronolithLoadingtasks" class="kronolithLoading"></span>
     <span><?php echo _("Tasks") ?></span>
+    <ul class="kronolithNavigation">
+      <li><a id="kronolithTasksAll" class="activeTab"><?php echo _("All") ?></a></li>
+      <li><a id="kronolithTasksComplete"><?php echo _("Completed") ?></a></li>
+      <li><a id="kronolithTasksIncomplete"><?php echo _("Incomplete") ?></a></li>
+      <li><a id="kronolithTasksFuture"><?php echo _("Future") ?></a></li>
+    </ul>
   </caption>
   <tbody id="kronolithViewTasksBody" class="kronolithViewBody">
     <tr id="kronolithTasksTemplate" class="kronolithTaskRow" style="display:none">

diff --git a/kronolith/themes/screen.css b/kronolith/themes/screen.css
index 98e1d75..20b9004 100644 (file)
--- a/kronolith/themes/screen.css
+++ b/kronolith/themes/screen.css
@@ -853,7 +853,7 @@ div.kronolithView div.kronolithViewBody div.kronolithRow {
 #kronolithBody caption span {
     padding: 0;
 }
-#kronolithBody caption span.kronolithNavigation {
+#kronolithBody caption .kronolithNavigation {
     position: absolute;
     right: 2px;
     cursor: pointer;
@@ -981,6 +981,22 @@ div.kronolithView div.kronolithViewBody div.kronolithRow {
 #kronolithViewTasks caption {
     margin-left: 2px;
 }
+#kronolithViewTasks caption.tabset {
+    float: none;
+    width: auto;
+    font-weight: bold;
+    background: none;
+}
+#kronolithViewTasks ul.kronolithNavigation {
+    display: inline;
+    margin: 2px 0 0 0;
+    padding: 0;
+}
+#kronolithViewTasks caption.tabset li a {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-bottom-style: dotted;
+}
 #kronolithViewTasks tbody.kronolithViewBody td {
     padding: 4px 4px 4px 4px;
 }