Grooming.

client/bulma.ls

@@ -18,6 +18,21 @@ module.exports = {
 		h \label.label args, [label]
 	input: (args, children) ->
 		h \input.input args, children
+	textarea: (args, children) ->
+		h \textarea.textarea args, children
+	control: (args, children) ->
+		h \div.control args, children
+	select: (selector, args, children) ->
+		if typeof(selector) == "object"
+			children = args
+			args = selector
+
+		h (\div.select + selector), {
+		} [
+			h \select {
+				onchange: args.onchange || ->
+			} children
+		]
 
 	# FIXME: Use only args and add args.label and args.input?
 	#        Or maybe args.name and args.type could be used directly?

client/task-creation-modal.ls

@@ -4,6 +4,8 @@
 h = require 'maquette' .h
 Modal = require './modal.ls'
 
+{field, input, textarea, label, control, select} = require './bulma.ls'
+
 colors = [
 	"white"
 	"black"
@@ -72,31 +74,41 @@ TaskCreationModal = (project, todod-ws, task, users) ->
 				# TITLE
 				#
 
-				h \input.input {
-					value: self.title
-					oninput: (e) ->
-						self.title := e.target.value
-				}
+				field [
+					label "Task title"
+
+					input {
+						value: self.title
+						oninput: (e) ->
+							self.title := e.target.value
+					}
+				]
 
 
-				#
-				# DESCRIPTION
-				#
+				field [
+					label "Task description"
 
-				h \textarea {
-					value: self.description
-					oninput: (e) ->
-						self.description := e.target.value
-				}
+					#
+					# DESCRIPTION
+					#
+
+					textarea {
+						value: self.description
+						oninput: (e) ->
+							self.description := e.target.value
+					}
+				]
 
 
-				h \p [ "Choose the column" ]
+				field [
+					label "Initial column"
 
-				h \div.select [
-					h \select {
-						onchange: (e) ->
-							self.extra_properties.column := e.target.value
-					} project.extra_properties.columns.map (column) -> column-form-selection self, column
+					control [
+						select \.is-fullwidth {
+							onchange: (e) ->
+								self.extra_properties.column := e.target.value
+						} project.extra_properties.columns.map (column) -> column-form-selection self, column
+					]
 				]
 
 
@@ -106,13 +118,13 @@ TaskCreationModal = (project, todod-ws, task, users) ->
 
 				h \hr []
 
-				h \p [ "Assign someone to the task" ]
+				field [
+					label "Assigned user"
 
-				h \div.field.has-addons {
-					key: "assign-someone-to-task"
-				} [
-					h \div.select.control [
-						h \select {
+					control {
+						key: "assign-someone-to-task"
+					} [
+						select \.is-fullwidth {
 							onchange: (e) ->
 								self.extra_properties.assignee-id := e.target.value
 						} [
@@ -128,13 +140,15 @@ TaskCreationModal = (project, todod-ws, task, users) ->
 				# BACKGROUND COLOR
 				#
 
-				h \p [ "Choose the background color" ]
+				field [
+					label "Card background color"
 
-				h \div.select [
-					h \select {
-						onchange: (e) ->
-							self.extra_properties.background-color := e.target.value
-					} colors.map (color) -> color-to-form-selection self, color, self.extra_properties.background-color
+					control [
+						select \.is-fullwidth {
+							onchange: (e) ->
+								self.extra_properties.background-color := e.target.value
+						} colors.map (color) -> color-to-form-selection self, color, self.extra_properties.background-color
+					]
 				]
 			]