taskwarrior-web 0.0.1

data/public/css/jquery.tagsinput.css

@@ -0,0 +1,6 @@
+div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;}
+div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica;  font-size:13px;}
+div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px;  } 
+div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px;  margin-right:5px; margin-bottom:5px; }
+div.tagsinput div { display:block; float: left; } 
+.tags_clear { clear: both; width: 100%; height: 0px; }

data/public/css/styles.css

@@ -0,0 +1,283 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/********************************
+ * UTILITY CLASSES
+ *******************************/
+.clearer { clear: both; }
+
+body {
+  font: 13.34px helvetica,arial,sans-serif;
+}
+
+#page { width: 960px; margin: 30px auto; }
+
+h1 { 
+  float: left; 
+  padding-top: 0px;
+  margin-top: 0px;
+  width: 270px;
+  height: 55px;
+  background: url(/images/logo.png) no-repeat center center;
+  text-indent: -9999px;
+}
+
+h2 { font-size: 1.5em; font-weight: bold; margin: 20px 0; width: 70%; float: left; }
+h3 { font-size: 1.25em; font-weight: bold; margin: 20px 0; }
+
+th { text-align: left; }
+
+/********************************
+ * POLLING
+ *******************************/
+#polling-info {
+  width: auto;
+  float: right;
+  position:relative;
+  top: 15px;
+}
+
+/********************************
+ * NAVIGATION
+ *******************************/
+#navigation ul.tabs {
+    background: url("/images/tab_background.gif") repeat-x scroll 0 0 transparent;
+    border: 1px solid #DDDDDD;
+    border-radius: 5px 5px 0 0;
+    height: 26px;
+    margin: 10px 0 0;
+    padding: 6px 10px;
+    position: relative;
+}
+#navigation ul.tabs li {
+    display: inline;
+    list-style-type: none;
+    margin: 0;
+}
+#navigation ul.tabs li a {
+    border-radius: 4px 4px 4px 4px;
+    color: #666666;
+    float: left;
+    font-size: 14px;
+    height: 26px;
+    line-height: 26px;
+    margin-right: 10px;
+    padding: 0 8px;
+    text-decoration: none;
+    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
+}
+#navigation ul.tabs li a:hover {
+    background-color: #CCCCCC;
+    color: #333333;
+    text-decoration: none;
+}
+#navigation ul.tabs li a.selected {
+    -moz-border-bottom-colors: none;
+    -moz-border-image: none;
+    -moz-border-left-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-top-colors: none;
+    background: none repeat scroll 0 0 #FFFFFF;
+    border-color: #CCCCCC #EEEEEE #EEEEEE #CCCCCC;
+    border-style: solid;
+    border-width: 1px;
+    color: #333333;
+    font-weight: bold;
+    position: relative;
+    top: -1px;
+}
+
+/********************************
+ * SUB-NAVIGATION
+ *******************************/
+#subnav-bar {
+    -moz-border-bottom-colors: none;
+    -moz-border-image: none;
+    -moz-border-left-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-top-colors: none;
+    background: url("/images/subnav_background.gif") repeat-x scroll 0 0 transparent;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-color: #FAFAFA #DDDDDD #D2D2D2;
+    border-left: 1px solid #DDDDDD;
+    border-right: 1px solid #DDDDDD;
+    border-style: solid;
+    border-width: 1px;
+    height: 30px;
+    padding: 0 10px;
+    position: relative;
+    z-index: 3;
+}
+#subnav-bar > ul {
+    margin: 4px 0 0 1px;
+    position: relative;
+}
+#subnav-bar > ul > li {
+    float: left;
+    list-style-type: none;
+    margin-right: 10px;
+    position: relative;
+}
+#subnav-bar > ul > li > a {
+    border: 1px solid transparent;
+    border-radius: 3px 3px 3px 3px;
+    color: #666666;
+    display: block;
+    font-size: 11px;
+    height: 15px;
+    padding: 3px 5px;
+    position: relative;
+    text-decoration: none;
+    z-index: 5;
+}
+#subnav-bar > ul > li:hover > a {
+    background-color: #F8F8F8;
+    border-color: #CCCCCC;
+    color: #333333;
+}
+#subnav-bar > ul > li > a.selected {
+    background: none repeat scroll 0 0 #DDDDDD;
+    border-color: #C5C5C5 #EEEEEE #EEEEEE #C5C5C5;
+    color: #000000;
+    cursor: default;
+    font-weight: bold;
+    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
+}
+#subnav-bar > ul > li > ul {
+    background: none repeat scroll 0 0 #F8F8F8;
+    border: 1px solid #CCCCCC;
+    display: none;
+    max-height: 275px;
+    overflow: auto;
+    position: absolute;
+    top: 22px;
+    z-index: 4;
+}
+#subnav-bar > ul > li:hover > ul {
+    display: block;
+    margin: 0;
+    min-width: 180px;
+}
+#subnav-bar > ul > li > ul > li {
+    border-top: 1px solid #E2E2E2;
+    font-size: 11px;
+    list-style-type: none;
+    margin: 0;
+}
+#subnav-bar > ul > li > ul > li:first-child {
+    border-top: medium none;
+}
+#subnav-bar > ul > li > ul > li > a, .subnav-bar > ul > li > ul > li > strong {
+    display: block;
+    font-weight: normal;
+    padding: 4px 5px;
+}
+#subnav-bar > ul > li > ul > li > a {
+    font-weight: bold;
+}
+#subnav-bar > ul > li > ul > li > a:hover {
+    background-color: #EEEEEE;
+    text-decoration: none;
+}
+
+ul.view-mode-group { float: right; position: relative; top: -32px; right: 10px; }
+li.view-mode a { height: 12px; width: 12px; }
+
+a#task-add { float: right; margin: 20px 0; }
+/********************************
+ * LISTING STYLES
+ *******************************/
+#listing table { width: 100%; }
+#listing table tr th { background: #eaeaea;  color: #222; }
+#listing table tr td,
+#listing table tr th { padding: 10px 10px 10px 0; border-bottom: 1px solid #ddd; }
+#listing table tr td:first-child,
+#listing table tr th:first-child { padding-left: 10px; }
+
+/********************************
+ * TASK COLORS
+ *******************************/
+#listing table tr.overdue { background: #fdd; }
+#listing table tr.today { background: #ffc; }
+#listing table tr.due { background: #BBFFB6; }
+#listing table tr.completed { text-decoration: line-through; }
+#listing table tr.deleted {  }
+
+#listing .project-container { margin-bottom: 10px; }
+h3.project a {
+  color: #000;
+  text-decoration: none;
+  width: auto;
+  float: left;
+  margin-bottom: 10px;
+  background: url(/images/arrow_right_grey.png) no-repeat right center;
+  padding-right: 20px;
+}
+h3.project a:hover {
+  background: url(/images/arrow_right_black.png) no-repeat right center;
+}
+h3.project.done a { color: #ddd; }
+.doneness-container { border: 1px solid #eee; float: right; margin-top: 20px; width: 200px; height: 20px; }
+.doneness-measure { background: #BBFFB6; height: 16px; text-align: center; padding-top: 4px; color: #bbb; font-size: 0.8em; }
+
+/********************************
+ * INPLACE EDITING
+ *******************************/
+.inplace-text { width: 250px; height: 30px; padding: 5px; }
+.inplace-edit, .inplace-cancel { font-style: italic; }
+
+/********************************
+ * TASK FORM
+ *******************************/
+.form-element { padding: 10px 0; }
+.form-element label { width: 200px; }
+input[type=textfield] { width: 300px; height: 25px; padding: 5px; }
+.form-element .description { font-size: 0.8em; font-style: italic; color: #999; }
+#task-tags_tag { border: none; -webkit-box-shadow: none, -moz-box-shadow: none; box-shadow: none; }

data/public/css/tipsy.css

@@ -0,0 +1,7 @@
+.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(../images/tipsy.gif); }
+  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
+  .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
+  .tipsy-north { background-position: top center; }
+  .tipsy-south { background-position: bottom center; }
+  .tipsy-east { background-position: right center; }
+  .tipsy-west { background-position: left center; }

data/public/js/application.js

@@ -0,0 +1,130 @@
+$(document).ready(function() {
+	initPolling();
+	initTooltips();
+	initCompleteTask();
+	initDatePicker();
+	initAutocomplete();
+});
+
+var initPolling = function() {
+	var polling;
+	if (polling = $.cookie('taskwarrior-web-polling')) {
+		var pollingInterval = startPolling();
+	} else {
+		$('#polling-info a').text('Start polling');
+	}
+
+	$('#polling-info a').click(function(e) {
+		if (polling) {
+			window.clearInterval(pollingInterval);
+			polling = false;
+			$(this).text('Start polling');
+			$.cookie('taskwarrior-web-polling', null);
+		} else {
+			pollingInterval = startPolling();
+			polling = true;
+			$(this).text('Stop polling');
+			$.cookie('taskwarrior-web-polling', true);
+		}
+		e.preventDefault();
+	});
+};
+
+var startPolling = function() {
+	var pollingInterval = window.setInterval('refreshPageContents()', 3000);
+	return pollingInterval;
+};
+
+var refreshPageContents = function() {
+	$.ajax({
+		url: window.location,
+		success: function(data) {
+			$('#listing').replaceWith($('#listing', data));
+		}
+	});
+};
+
+var initTooltips = function() {
+	$('.tooltip').tipsy({
+		title: 'data-tooltip',
+		gravity: 's'
+	});
+};
+
+var initCompleteTask = function() {
+	$('input.pending').live('change', function() {
+		var checkbox = $(this);
+		var row = checkbox.closest('tr');
+		var task_id = $(this).data('task');
+		$.ajax({
+			url: '/tasks/' + task_id + '/complete',
+			type: 'post',
+			beforeSend: function() {
+				checkbox.replaceWith('<img src="/images/ajax-loader.gif" />');
+			},
+			success: function(data) {
+				row.fadeOut('slow', function() {
+					row.remove();
+					// TODO: Wow. This is nasty.
+					var subnavItem = $('#subnav-bar ul li:first-child a');
+					var oldCount = subnavItem.text().match(/((\d))/);
+					var newCount = parseInt(oldCount[0]) - 1
+					var newVal = subnavItem.text().replace(oldCount[0], newCount);
+					console.log(newVal);
+					subnavItem.text(newVal);
+				});
+			}
+		});
+	});
+};
+
+var initInPlaceEditing = function() {
+	// Hide it initially.
+	$('.inplace-edit').hide();
+	$('#listing table td').live('mouseover mouseout', function(e) {
+		if (e.type == 'mouseover')  {
+			$('.inplace-edit', this).show();
+		} else {
+			$('.inplace-edit', this).hide();
+		}
+	});
+
+	$('.inplace-edit').live('click', function() {
+		var field = $($(this).siblings('span')[0]);
+		var formElement = '<input type="text" class="inplace-text" value="'+field.text()+'" />';
+		formElement += '<button type="submit" class="inplace-submit">Update</button>';
+		formElement += '<a href="javascript:void(0);" class="inplace-cancel">Cancel</a>';
+		field.replaceWith(formElement);
+		$(this).remove();
+	});
+
+	$('.inplace-cancel').live('click', function() {
+		var td = $(this).closest('td');
+		var oldField = '<span class="description">'+$($(this).siblings('.inplace-text')[0]).val()+'</span>';
+		oldField += '<a class="inplace-edit" href="javascript:void(0);">Edit</a>';
+		td.html(oldField);
+	});
+};
+
+var initDatePicker = function() {
+	$('.datefield input').datepicker({
+		dateFormat: $('.datefield input').data('format'),
+		autoSize: true
+	});
+};
+
+var initAutocomplete = function() {
+	$('#task-project').autocomplete({
+		source: '/ajax/projects'
+	});
+
+	$('#task-tags').tagsInput({
+		autocomplete_url: '/ajax/tags',
+		defaultText: ''
+	});
+};
+
+function set_message(msg, severity) {
+	severity = severity ? severity : 'info';
+	$('#flash-messages').append('<div class="message ' + severity + '">' + msg + '</div>');
+}