omniboard 1.1.1

data/lib/omniboard/renderer.rb

@@ -0,0 +1,50 @@
+class Omniboard::Renderer
+	attr_accessor :columns
+
+	def initialize()
+	  @columns = []
+	  @current_column = nil
+	  @current_group = nil
+	end
+
+	# Add one or more columns to our array of columns.
+	def add_column(*col)
+		@columns += col
+	end
+
+
+
+	def to_s
+		preamble + @columns.map{ |c| render_column(c) }.join("\n") + postamble
+	end
+
+	def preamble
+		ERB.new(template "preamble").result(binding)
+	end
+
+	def postamble
+		ERB.new(template "postamble").result(binding)
+	end
+
+	def render_column(column)
+		ERB.new(template("column")).result(binding)
+	end
+
+	def render_project(project)
+		ERB.new(template("project")).result(binding)
+	end
+
+	# Fetch a template from the templates folder
+	def template(template_name)
+		@templates ||= {}
+
+		if !@templates.has_key?(template_name)
+			template_file = template_name + ".erb"
+			template_path = File.join(__dir__, "templates", template_file)
+			raise(ArgumentError, "Attempting to find template #{template_file}, which does not exist.") unless File.exists?(template_path)
+
+			@templates[template_name] = File.read(template_path)
+		end
+		@templates[template_name]
+	end
+end

data/lib/omniboard/styled_text.rb

@@ -0,0 +1,63 @@
+# Represents some HTML-esque styled text
+#
+# The incredibly naive parser assumes all sorts of things about your notes, and
+# faithfully turns them into a StyledText object.
+#
+# Will probably crash horridly if you try something nasty on it. Don't do that.
+# Things it will choke on (off the top of my head):
+#
+# * Nested <run>s
+# * <run>s with attributes
+# * <text> or <note> tags within the body of this actual note
+# * All kinds of other things?
+
+class Omniboard::StyledText
+  # All the elements that make up this styled text
+  attr_accessor :elements
+
+  # Parse some styled html
+  def self.parse(styled_html)
+    # Remove outlying HTML - surrounding <note> and <text> elements
+    superfluous_tags = /<\/?(note|text)>/
+    styled_html = styled_html.gsub(superfluous_tags, "")
+
+    return_value = self.new
+
+    # Run on all text
+    until styled_html.empty?
+
+      next_run_index = styled_html.index("<run>")
+
+      if next_run_index.nil?
+        return_value << styled_html
+        styled_html = ""
+      
+      else
+        # Get rid of any plain html!
+        if next_run_index != 0
+          return_value << styled_html[0...next_run_index]
+          styled_html = styled_html[next_run_index..-1]
+        end
+
+        run_end = styled_html.index("</run>") + "</run>".length
+        return_value << Omniboard::StyledTextElement.new(styled_html[0...run_end])
+        styled_html = styled_html[run_end..-1]
+      end
+    end
+    return_value
+  end
+
+  def initialize()
+    @elements = []
+  end
+
+  # Add an element to the elements array
+  def << element
+    @elements << element
+  end
+
+  # Turn this styled text into html!
+  def to_html
+    @elements.map{ |e| e.is_a?(String) ? e : e.to_html }.join("")
+  end
+end

data/lib/omniboard/styled_text_element.rb

@@ -0,0 +1,40 @@
+# Represents a little bit of styled text, complete with styling values and the like.
+# Make me big, make me small, make me italic, just don't make me work weekends.
+class Omniboard::StyledTextElement
+  # The actual text
+  attr_accessor :text
+
+  # Applied values
+  attr_accessor :styles
+
+  # Initialize from a string
+  def initialize(string)
+    @text = string[/<lit>(.*?)<\/lit>/,1] || ""
+    @styles = {}
+
+    raw_styles = string[/<style>(.*?)<\/style>/,1]
+    if raw_styles
+      raw_styles.scan(/<value key="(.*?)">(.*?)<\/value>/).each do |match|
+        @styles[match[0]] = match[1]
+      end
+    end
+  end
+
+  def [] k
+    @styles[k]
+  end
+
+  def to_html
+    surrounds = []
+    surrounds << "i" if self["font-italic"] == "yes"
+    surrounds << "b" if self["font-weight"].to_i > 7
+    surrounds << "u" if self["underline-style"] == "single"
+
+    tag(text, *surrounds)
+  end
+
+  private
+  def tag(text, *tags)
+    tags.map{|t| "<#{t}>"}.join("") + text + tags.reverse.map{|t| "</#{t}>"}.join("")
+  end
+end

data/lib/omniboard/templates/column.erb

@@ -0,0 +1,25 @@
+<div class="column width-<%=column.columns%>" style="flex-grow: <%=column.width%>">
+	<div class="column-header">
+		<h2><%=column%></h2>
+		<% if column.filter_button %>
+			<svg class="filter-button" xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="#filter-<%= column.property(:hide_dimmed) ? "remove" : "apply" %>" /></svg>
+		<% end %>
+		<% if column.property(:display_project_counts) != nil %><%= column.count_div %><% end %>
+	</div>
+	<%if column.can_be_grouped? %>
+		<% column.groups.each do |group| %>
+			<div class="project-wrapper">
+				<h3><%=column.group_name_for(group) %></h3>
+				<div class="project-group">
+					<% column.projects(group).each do |p| %>
+						<%= render_project(p) %>
+					<% end %>
+				</div>
+			</div>
+		<% end %>
+	<% else %>
+		<% column.projects.each do |p| %>
+			<%= render_project(p) %>
+		<% end %>
+	<% end %>
+</div>

data/lib/omniboard/templates/postamble.erb

@@ -0,0 +1,226 @@
+	</section>
+	<section id="overlay-wrapper" class="hidden">
+		<section id="overlay-background"></section>
+		<section id="overlay-main">
+			<div class="close">×</div>
+			<div class="overlay-header">
+				<h2 class="name"></h2>
+				<h3><a class="id" href="#"></a></h3>
+			</div>
+			<div class="body">
+				<div class="note"></div>
+				<div class="tasks"></div>
+			</div>
+		</section>
+	</section>
+	<section id="modal-wrapper" class="hidden">
+		<section id="modal-background"></section>
+		<section id="modal-main">
+			<div class="close">×</div>
+			<h2 class="title"></h2>
+			<div class="body"></div>
+		</section>
+	</section>
+	<script>
+	//<![CDATA[
+	//Give us a favicon!
+	var favicon = document.querySelector("head link");
+	favicon.setAttribute("href", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/FtFl8z9ZAHF4bBsrEwAAAAlwSFlzAAALEwAACxMBAJqcGAAAARdJREFUOBGVU00SwVAMlseqCxasXMI4ghkHcAjHqBXuwwm4gnOwYNOd9+RLJVKtIjOZ5r0v35eftpRS6vxhgXOJPbILsadkIlrppd61PbnwhnGiZwd0Oed3JRz3p85sMWUooprYYYe7icTMug5H2yEOaAlWmQNTeTLjaNkZ9fkATlIBByK0wkp0eYHFrTA5oNQIYcCBNVTDSywgAVXqHcR4480Qe8Z4A1/EZTciYm+Bs82w2JSK51mqYQsYB1W9amoUMCUJYjlPkHFtOZqjrxFt53r5wxO8teSV7aLlqjO4Ws7HEY74Hdezn6dSOMuwxO/2UaAodIntIipQW04LresxFbAvx4MNMQrZPwNcBRpyX1chWFqt0APk/nSDodA5MgAAAABJRU5ErkJggg==");
+	
+	//Foreach function
+	function foreach(sel, fnc){
+		var elems;
+		if (sel instanceof Array || sel instanceof NodeList) elems = sel;
+		else elems=document.querySelectorAll(sel);
+
+		for(var i=0;i<elems.length;i++)fnc(elems[i]);
+	}
+
+	//Add class to element
+	function addClass(elem, klass) {
+		var klasses = elem.className.split(/\s+/);
+
+		if (klasses.indexOf(klass) == -1) {
+			klasses.push(klass);
+			elem.className = klasses.join(" ");
+		}
+	}
+
+	function removeClass(elem, klass) {
+		var klasses = elem.className.split(/\s+/);
+		var i = klasses.indexOf(klass);
+
+		if (i >= 0) {
+			klasses.splice(i,1);
+			elem.className = klasses.join(" ");
+		}
+	}
+
+	//Element hide and show
+	function show(elem){ removeClass(elem, "hidden") }
+	function hide(elem){ addClass(elem, "hidden") }
+
+	//Overlay vars	
+	var overlay = {
+		wrapper: document.querySelector("#overlay-wrapper"),
+		background: document.querySelector("#overlay-background"),
+		container: document.querySelector("#overlay-main"),
+		name: document.querySelector("#overlay-main .name"),
+		id: document.querySelector("#overlay-main .id"),
+		note: document.querySelector("#overlay-main .note"),
+		tasks: document.querySelector("#overlay-main .tasks"),
+		close: document.querySelector("#overlay-main .close")
+	};
+
+	//Show the overlay, get data from element
+	function showOverlay(elem) {
+		overlay.container.style.backgroundColor = elem.getAttribute("data-light-colour");
+
+		overlay.name.innerHTML = elem.getAttribute("data-name");
+		overlay.id.innerHTML = elem.getAttribute("data-id");
+		overlay.id.setAttribute("href", "omnifocus:///task/"+elem.getAttribute("data-id"));
+
+		//Set up note panel inner HTML. Optional UL for deferral and due dates,
+		// followed by notes
+		var noteHTML = "";
+		if (elem.getAttribute("data-deferred") != "" ||
+				elem.getAttribute("data-due") 		 != "") {
+			noteHTML = "<ul>";
+			if (elem.getAttribute("data-deferred") != "") { noteHTML += "<li><b>Project deferred until:</b> " + elem.getAttribute("data-deferred") + "</li>"; }
+			if (elem.getAttribute("data-due") != "") 			{ noteHTML += "<li><b>Project due on:</b> " + elem.getAttribute("data-due") + "</li>"; }
+			noteHTML += "</ul>"
+		}
+		overlay.note.innerHTML = noteHTML + "<h3>Notes:</h3>" + elem.getAttribute("data-note");
+		overlay.tasks.innerHTML = "<h3>Tasks:</h3>" + elem.getAttribute("data-tasks");
+
+		show(overlay.wrapper);
+	}
+
+	// Hide the overlay
+	function hideOverlay() {hide(overlay.wrapper); }
+
+	// Set element background colour
+	foreach(".project", function(p){ p.style.backgroundColor = p.getAttribute("data-colour");});
+
+	// Set up title click->overlay
+	foreach(".project h4", function(h){
+		h.style.cursor = "pointer";
+		h.addEventListener("click", function(){showOverlay(h.parentNode)},false);
+	});
+
+	// Modal vars
+	var modal = {
+		wrapper: document.querySelector("#modal-wrapper"),
+		background: document.querySelector("#modal-background"),
+		container: document.querySelector("#modal-main"),
+		title: document.querySelector("#modal-main .title"),
+		body: document.querySelector("#modal-main .body"),
+		close: document.querySelector("#modal-main .close")
+	}
+
+	// Show the modal, with a title and body
+	function showModal(title, body) {
+		modal.title.innerHTML = title;
+		modal.body.innerHTML = body;
+
+		show(modal.wrapper);
+	}
+
+	// Hide the modal
+	function hideModal(){ hide(modal.wrapper); }
+
+	//Background and close button listeners
+	modal.close.addEventListener("click", hideModal, false);
+	modal.background.addEventListener("click", hideModal, false);
+
+	//Hook up alerts to modal
+	foreach(".alert", function(alert){
+		alert.addEventListener("click", function(){
+			showModal(this.getAttribute("data-modal-title"), this.getAttribute("data-modal-body"));
+		}, false);
+	});
+
+	// Search box function
+	document.querySelector("#search").addEventListener("keyup", function(){
+		var searchString = this.value.toLowerCase();
+
+		foreach(".project", function(p){
+			var id = p.getAttribute("data-id");
+			var name = p.getAttribute("data-name");
+			var note = p.getAttribute("data-note");
+			if (name.toLowerCase().indexOf(searchString) >= 0 ||
+					id.toLowerCase().indexOf(searchString) >= 0 ||
+					note.toLowerCase().indexOf(searchString) >= 0
+				)
+				show(p);
+			else
+				hide(p);
+		});
+		updateGroupVisibility();
+	});
+
+	// Close button listener
+	overlay.close.addEventListener("click", hideOverlay, false);
+	// Overlay background listener
+	overlay.background.addEventListener("click", hideOverlay, false);
+
+	// Search box auto-focus with "/" when not focussed on a textbox
+	document.addEventListener("keypress", function(e){
+		if (!e) //IE fix
+			e = window.event;
+
+		// Escape most things
+		var tagName = e.target.tagName;
+		if (tagName == "INPUT" || tagName == "TEXTAREA") return true;
+		if (e.shiftKey || e.ctrlKey || e.altKey) return true;
+
+		if (e.key == "/") {
+			document.querySelector("#search").focus();
+			return false;
+		}
+		else
+			return true;
+	}, true);
+
+	// Filter button listeners
+	foreach(".filter-button", function(elem){
+		elem.addEventListener("click", function(){
+			var parent = this.parentNode.parentNode;
+			var use = this.querySelector("use");
+
+			var dimmedProjects = parent.querySelectorAll(".dimmed");
+			if (use.getAttribute("xlink:href") == "#filter-apply") {// Apply filter!
+				foreach(dimmedProjects, function(e){ addClass(e, "filtered") });
+				use.setAttribute("xlink:href", "#filter-remove");
+			}
+			else {
+				foreach(dimmedProjects, function(e){ removeClass(e, "filtered") });
+				use.setAttribute("xlink:href", "#filter-apply");
+			}
+
+			updateGroupVisibility();
+		}, false);
+	});
+
+	// Hide/show groups
+	function updateGroupVisibility() {
+		foreach(".project-wrapper", function(pw){
+
+			var projects = pw.querySelectorAll(".project");
+			var allProjectsHidden = true;
+			var j = 0;
+
+			while (allProjectsHidden && j < projects.length) {
+				if (projects[j].className.indexOf("hidden") == -1 && projects[j].className.indexOf("filtered") == -1)
+					allProjectsHidden = false;
+				j++;
+			}
+
+			if (allProjectsHidden) hide(pw);
+			else show(pw);
+		});
+	}
+	//]]>
+	</script>
+</body>
+</html>

data/lib/omniboard/templates/preamble.erb

@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<link rel="icon" type="image/png" href="" />
+	<title>看板</title>
+	<style>
+		* { margin: 0px; padding: 0px; }
+		html {
+			font: 12px <%= Omniboard::Column.body_font %>;
+			font-size: 12px;
+			padding: 2rem;
+		}
+
+		header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			border-bottom: 2px solid #888;
+			margin-bottom: 2rem;
+		}
+
+		header svg {
+			max-width: 20px;
+			max-height: 20px;
+		}
+
+		header>div>a {
+			padding-right: 2ex;
+			margin-right: 2ex;
+			border-right: 1px dotted grey;
+		}
+
+		header>div{
+			display: flex;
+			align-items: center;
+		}
+
+		.alert.error {
+			border-left: 4px solid red;
+			background-color: rgba(255,0,0,0.5);
+		}
+
+		.alert.warn {
+			border-left: 4px solid yellow;
+			background-color: rgba(220,200,0,0.5);
+		}
+
+		.alert {
+			border-top-right-radius: 5px;
+			border-bottom-right-radius: 5px;
+			padding: 5px;
+			cursor: pointer;
+		}
+
+		#search {
+			margin-right: 2em;
+			border-radius: 1em;
+			padding: 0.2em 0.4em;
+		}
+
+		#kanban{ display: flex; }
+		.column{ flex-basis: 0px; }
+		.column + .column{ margin-left: 2em; }
+		.project-group { display: flex; flex-wrap: wrap; }
+
+		h1, h2, h3, h4 { font-family: <%= Omniboard::Column.heading_font %>; color: #444; }
+
+		h1{ font-size: 2.5rem; }
+		h2{ font-size: 2rem; }
+		h3{ font-size: 1.5rem }
+		h4{ font-size: 1rem }
+
+		.column.width-1 .project{ width: calc(100% - 0.5em); }
+		.column.width-2 .project { width: calc(50% - 0.5em); }
+		.column.width-3 .project { width: calc(33% - 0.5em); }
+		.column.width-4 .project { width: calc(25% - 0.5em); }
+		.column.width-5 .project { width: calc(20% - 0.5em); }
+		.column.width-6 .project { width: calc(16% - 0.5em); }
+
+		.column-header {
+			margin-bottom: 0.8em;
+			border-bottom: 1px solid #333;
+			display: flex;
+			align-items: center;
+		}
+
+		.column-total {
+			font-size: 1.2rem;
+			padding: 0 2ex;
+			font-weight: bold;
+			color: #666;
+		}
+
+		.column-total.limit-breached {
+			color: #F33;
+		}
+
+		.filter-button {
+			opacity: 0.5;
+			height: 2em;
+			width: 2em;
+			margin-left: 2em;
+			cursor: pointer;
+		}
+
+		.filter-button:hover, .filter-button:active{ opacity: 1;}
+
+		.project{
+			border: 2px solid black;
+			border-radius: 8px;
+			margin: 0 0.5em 1em 0;
+			padding: 5px;
+			box-sizing: border-box;
+			font-weight: 300;
+			box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
+			position: relative;
+		}
+
+		.project.marked:after {
+			content: "";
+			position: absolute;
+			top: 0;
+			right: 0;
+			height: 10px;
+			width: 10px;
+			border-top-right-radius: 5px;
+			background: linear-gradient(-135deg, red 0%, red 50%, rgba(0,0,0,0) 50%);
+		}
+
+		.project.dimmed {
+			opacity: 0.8;
+			box-shadow: none;
+		}
+
+		.project.dimmed:hover {
+			opacity: 1.0;
+			box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
+		}
+
+		.project.compact .tasks, .project.compact .project-deferral, .project.compact .project-icon {
+			display: none;
+		}
+
+		.project-deferral {
+			position: absolute;
+			bottom: 3px;
+			right: 3px;
+			height: 10px;
+			width: 10px;
+
+			background-color: rgb(255, 255, 255);
+			border-top: 4px solid red;
+			box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+		
+			text-align: center;
+			font-weight: bold;
+			font-size: 8px;
+		}
+
+		.project-icon {
+			position: absolute;
+			right: 3px;
+			bottom: 0;
+		}
+
+		.project-icon img, .project-icon svg {
+			max-height: 10px;
+			max-width: 14px;
+		}
+
+		#overlay-background {
+			position: fixed;
+			top: 0px;
+			left: 0px;
+			height: 100%;
+			width: 100%;
+			background-color: rgba(0,0,0,0.2);
+		}
+
+		#overlay-main {
+			position: fixed;
+			top: 10%;
+			left: 10%;
+			height: 80%;
+			width: 80%;
+			padding: 2em;
+			box-sizing: border-box;
+
+			background-color: #ddd;
+			border: 2px solid #666;
+			border-radius: 10px;
+
+			display: flex;
+			flex-direction: column;
+		}
+
+		.close {
+			position: absolute;
+			top: 10px;
+			right: 10px;
+			font-size: 2rem;
+			cursor: pointer;
+		}
+
+		.overlay-header {
+			display: flex;
+			align-items: baseline
+		}
+
+		.overlay-header h2 {
+			border-bottom: none;
+		}
+
+		.overlay-header h3 {
+			padding-left: 3ex;
+		}
+
+		#overlay-main h3 a {
+			color: grey;
+		}
+
+		#overlay-main .body {
+			display: flex;
+			flex-grow: 1;
+			font-size: 1.2rem;
+			padding-top: 1em;
+		}
+
+		#overlay-main .note ul {
+			list-style: none;
+			margin-bottom: 1em;
+		}
+
+		#overlay-main .note {
+			flex: 2 2 0px;
+			margin-right: 1em;
+			border-right: 1px dotted grey;
+		}
+
+		#overlay-main .note p {
+			margin-bottom: 0.2em;
+			min-height: 1em;
+		}
+
+		#overlay-main .tasks {
+			flex: 1 1 0px;
+			margin-left: 1em;
+		}
+
+		#overlay-main .tasks li {
+			margin-bottom: 0.5em;
+		}
+
+		#modal-background{
+			position: fixed;
+			top: 0;
+			left: 0;
+			height: 100%;
+			width: 100%;
+		}
+
+		#modal-main {
+			position: fixed;
+			top: calc(50% - 100px);
+			left: calc(50% - 250px);
+			height: 200px;
+			width: 500px;
+			background-color: white;
+			border: 2px solid black;
+			box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
+			border-radius: 5px;
+		}
+
+		#modal-main h2 {
+			border-bottom: 1px solid black;
+			padding: 0 1ex;
+		}
+
+		#modal-main .body {
+			padding: 1em;
+		}
+
+		.tasks .complete {
+			text-decoration: line-through;
+			color: #666;
+		}
+
+		.hidden, .filtered { display: none; }
+
+		<%= Omniboard.custom_css || "" %>
+	</style>
+</head>
+<body>
+	<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+		<defs>
+			<symbol id="waiting-on" viewBox="0 0 10 10" stroke="black" stroke-width="1" fill="none">
+				<circle cx="5" cy="5" r="4.5" />
+				<path d="M5 5 l0 -4"/>
+				<path d="M5 5 l2 0"/>
+			</symbol>
+			<symbol id="hanging" viewBox="0 0 14 10" stroke="black" stroke-width="1" fill="none">
+				<path d="M 5,2 l 1,-1 q 1,-1 2,0 q 1,1 0,2 L 7,4 l -5,4.167 q -1,0.833 0,1 l 10,0 q 1,0 0,-0.833 L 7,4" />					
+			</symbol>
+			<symbol id="filter-apply" viewBox="0 0 20 20">
+				<path d="M18.5214844,1.4776001C18.131958,1.086853,17.4981079,1.086792,17.1074829,1.477478L1.4785156,17.1084595
+c-0.390625,0.390625-0.390625,1.0244141,0.0001221,1.4140015c0.390625,0.390686,1.0233765,0.390625,1.4140015-0.000061
+L18.5214233,2.8916016C18.9121704,2.5009766,18.9121704,1.8682251,18.5214844,1.4776001z M3.1083984,13.4973145l2.5593262-2.5584717
+C5.5981445,10.6357422,5.5546875,10.3234863,5.5546875,10c0-2.3789062,1.9902344-4.3085938,4.4453125-4.3085938
+c0.2861328,0,0.5644531,0.0314941,0.8354492,0.081665l1.2021484-1.2016602C11.394043,4.467041,10.7192383,4.4003906,10,4.4003906
+C3.4394531,4.4003906,0,9.2324219,0,10C0,10.4234619,1.057373,12.0908203,3.1083984,13.4973145z M16.8950195,6.5046387
+L14.3330078,9.065918C14.4018555,9.3674316,14.4443359,9.6784668,14.4443359,10
+c0,2.3789062-1.9892578,4.3066406-4.4443359,4.3066406c-0.2839355,0-0.5598145-0.0317383-0.8288574-0.0810547L7.967041,15.4291992
+C8.609375,15.5330811,9.2827148,15.5996094,10,15.5996094c6.5605469,0,10-4.8339844,10-5.5996094
+C20,9.5756836,18.9438477,7.9101562,16.8950195,6.5046387z"/>
+			</symbol>
+			<symbol id="filter-remove" viewBox="0 0 20 20">
+				<path d="M10,4.4C3.439,4.4,0,9.232,0,10c0,0.766,3.439,5.6,10,5.6c6.56,0,10-4.834,10-5.6C20,9.232,16.56,4.4,10,4.4z M10,14.307
+c-2.455,0-4.445-1.928-4.445-4.307c0-2.379,1.99-4.309,4.445-4.309c2.455,0,4.444,1.93,4.444,4.309
+C14.444,12.379,12.455,14.307,10,14.307z M10,10c-0.407-0.447,0.663-2.154,0-2.154c-1.228,0-2.223,0.965-2.223,2.154
+c0,1.189,0.995,2.154,2.223,2.154c1.227,0,2.223-0.965,2.223-2.154C12.223,9.453,10.346,10.379,10,10z"/>
+			</symbol>
+			<symbol id="refresh" viewBox="0 0 1000 1000">
+				<path d="M0,395.833333 C0,393.663194 0.217013889,392.144097 0.651041667,391.276042 C28.4288194,274.956597 86.5885417,180.664062 175.130208,108.398438 C263.671875,36.1328125 367.404514,0 486.328125,0 C549.696181,0 611.002604,11.9357639 670.247396,35.8072917 C729.492188,59.6788194 782.335069,93.75 828.776042,138.020833 L912.760417,54.0364583 C921.006944,45.7899306 930.772569,41.6666667 942.057292,41.6666667 C953.342014,41.6666667 963.107639,45.7899306 971.354167,54.0364583 C979.600694,62.2829861 983.723958,72.0486111 983.723958,83.3333333 L983.723958,375 C983.723958,386.284722 979.600694,396.050347 971.354167,404.296875 C963.107639,412.543403 953.342014,416.666667 942.057292,416.666667 L650.390625,416.666667 C639.105903,416.666667 629.340278,412.543403 621.09375,404.296875 C612.847222,396.050347 608.723958,386.284722 608.723958,375 C608.723958,363.715278 612.847222,353.949653 621.09375,345.703125 L710.286458,256.510417 C679.470486,227.864583 644.53125,205.729167 605.46875,190.104167 C566.40625,174.479167 525.824653,166.666667 483.723958,166.666667 C425.564236,166.666667 371.310764,180.772569 320.963542,208.984375 C270.616319,237.196181 230.251736,276.041667 199.869792,325.520833 C195.095486,332.899306 183.59375,358.289931 165.364583,401.692708 C161.892361,411.675347 155.381944,416.666667 145.833333,416.666667 L20.8333333,416.666667 C15.1909722,416.666667 10.3081597,414.605035 6.18489583,410.481771 C2.06163194,406.358507 0,401.475694 0,395.833333 L0,395.833333 Z M11.71875,916.666667 L11.71875,625 C11.71875,613.715278 15.8420139,603.949653 24.0885417,595.703125 C32.3350694,587.456597 42.1006944,583.333333 53.3854167,583.333333 L345.052083,583.333333 C356.336806,583.333333 366.102431,587.456597 374.348958,595.703125 C382.595486,603.949653 386.71875,613.715278 386.71875,625 C386.71875,636.284722 382.595486,646.050347 374.348958,654.296875 L284.505208,744.140625 C348.741319,803.602431 424.479167,833.333333 511.71875,833.333333 C569.878472,833.333333 624.131944,819.227431 674.479167,791.015625 C724.826389,762.803819 765.190972,723.958333 795.572917,674.479167 C800.347222,667.100694 811.848958,641.710069 830.078125,598.307292 C833.550347,588.324653 840.060764,583.333333 849.609375,583.333333 L979.166667,583.333333 C984.809028,583.333333 989.69184,585.394965 993.815104,589.518229 C997.938368,593.641493 1000,598.524306 1000,604.166667 L1000,608.723958 C971.788194,725.043403 913.194444,819.335938 824.21875,891.601562 C735.243056,963.867188 631.076389,1000 511.71875,1000 C448.350694,1000 386.71875,987.955729 326.822917,963.867188 C266.927083,939.778646 213.758681,905.815972 167.317708,861.979167 L82.6822917,945.963542 C74.4357639,954.210069 64.6701389,958.333333 53.3854167,958.333333 C42.1006944,958.333333 32.3350694,954.210069 24.0885417,945.963542 C15.8420139,937.717014 11.71875,927.951389 11.71875,916.666667 L11.71875,916.666667 Z" />
+			</symbol>
+		</defs>
+	</svg>
+	<header>
+		<div>
+			 <% if !Omniboard::document_at_head? %>
+				 <% if !Omniboard.document_can_reach_head? %>
+					<div class="alert error" data-modal-title="Document detached from head." data-modal-body="I cannot update this document to its most recent state. You might want to reset the local database by running omnigrab with the <code>--reset</code> flag.">Document detached from head.</div>
+				<% else %>
+					<div class="alert warn" data-modal-title="Document not at head" data-modal-body="This is not the most recent version of the Omnifocus database. Please run omnigrab to update.">Document not at head.</div>
+				<% end %>
+			<% end %>
+		</div>
+		<div>
+			<% if Omniboard::Column.refresh_link %>
+				<a href="<%= Omniboard::Column.refresh_link %>"><svg class="refresh-link" xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="#refresh" /></svg></a>
+			<% end %>
+			<input type="search" id="search" placeholder="Hit / to filter" />
+			<h1>看板 Kanban</h1>
+		</div>
+	</header>
+	<section id="kanban">