colors

client/task-creation-modal.ls

@@ -2,6 +2,27 @@
 h = require 'maquette' .h
 Modal = require './modal.ls'
 
+colors = [
+	"white"
+	"black"
+	"light"
+	"dark"
+	"primary"
+	"info"
+	"link"
+	"success"
+	"warning"
+	"danger"
+	"black-bis"
+	"black-ter"
+	"grey-darker"
+	"grey-dark"
+	"grey"
+	"grey-light"
+	"grey-lighter"
+	"white-ter"
+	"white-bis"
+]
 
 column-form-selection = (self, column) ->
 	h \option {
@@ -9,6 +30,11 @@ column-form-selection = (self, column) ->
 		selected: self.extra_properties && self.extra_properties.column == column.id
 	} [ column.title ]
 
+color-to-form-selection = (self, color) ->
+	h \option {
+		value: color
+		selected: self.extra_properties && self.extra_properties.color == color
+	} [ color ]
 
 TaskCreationModal = (project, todod-ws, task) ->
 	task ||= {}
@@ -19,11 +45,16 @@ TaskCreationModal = (project, todod-ws, task) ->
 		description: task.description || ""
 		extra_properties: {
 			column: ""
+			color: ""
 		}
 	}
 
-	if task.extra_properties && task.extra_properties.column
-		self.extra_properties.column = task.extra_properties.column
+	# copy extra properties
+	# currently: column + color + assignee + expected duration time
+	for k,v of task.extra_properties
+		console.log "extra_propertie: " + k + ", value: " + v
+		self.extra_properties[k] = v
+
 
 	modal = Modal {
 		+visible
@@ -51,6 +82,14 @@ TaskCreationModal = (project, todod-ws, task) ->
 					} project.extra_properties.columns.map (column) -> column-form-selection self, column
 				]
 
+				h \p [ "Choose the color" ]
+
+				h \div.select [
+					h \select {
+						onchange: (e) ->
+							self.extra_properties.color := e.target.value
+					} colors.map (color) -> color-to-form-selection self, color
+				]
 			]
 
 		on-validation: ->

client/task.ls

@@ -36,7 +36,13 @@ Task = (self, project, todod-ws) ->
 	modal = void
 
 	self.render = ->
-		h \div.card { key: self.id } [
+		color = "grey"
+		if self.extra_properties && self.extra_properties.color
+			color = self.extra_properties.color
+
+		h "div.card.has-background-#{color}" {
+			key: self.id
+		} [
 			h \div.card-content [
 				h \div.media [
 					h \div.media-left [