Grooming.

client/bulma.ls

@@ -20,12 +20,33 @@ module.exports = {
 		h \input.input args, children
 	textarea: (args, children) ->
 		h \textarea.textarea args, children
-	control: (args, children) ->
-		h \div.control args, children
+	control: (selector, args, children) ->
+		if typeof(selector) == "object"
+			children = args
+			args = selector
+			selector = ""
+
+		h (\div.control + selector), args, children
+	button: (selector, args, children) ->
+		if typeof(selector) == "object"
+			children = args
+			args = selector
+			selector = ""
+
+		h (\div.button + selector), args, children
+	tag: (selector, args, children) ->
+		if typeof(selector) == "object"
+			children = args
+			args = selector
+			selector = ""
+
+		h (\div.tag + selector), args, children
+
 	select: (selector, args, children) ->
 		if typeof(selector) == "object"
 			children = args
 			args = selector
+			selector = ""
 
 		h (\div.select + selector), {
 		} [
@@ -36,8 +57,13 @@ module.exports = {
 
 	# FIXME: Use only args and add args.label and args.input?
 	#        Or maybe args.name and args.type could be used directly?
-	field: (args, children) ->
-		h \div.field args, children
+	field: (selector, args, children) ->
+		if typeof(selector) == "object"
+			children = args
+			args = selector
+			selector = ""
+
+		h (\div.field + selector), args, children
 
 	form: (method, url, content) ->
 		h \form.form {

client/project-creation-modal.ls

@@ -4,25 +4,29 @@ Modal = require './modal.ls'
 UUID  = require "uuid/v4"
 bulma = require "./bulma.ls"
 
+{field, control, label, button, tag, input, select} = bulma
+
 col-to-lines = (column, self) ->
-	h \div.field.has-addons {
-		key: "field" + column.id
+	field \.has-addons {
+		key: "column.#{column.id}"
 	} [
-		h \p.control.is-expanded [
-			h \input.input {
+		control \.is-expanded [
+			input {
 				key:     "input" + column.id
 				value:     column.title
 				oninput: (e) ->
 					self.extra_properties.columns.find((.id == column.id)).title := e.target.value
-			} [ ]
+			}
 		]
 
-		h \div.control.button.is-danger.is-outlined {
+		control [
+			button \.is-danger.is-outlined {
 				key: "button" + column.id
 				onclick: ->
 					self.extra_properties.columns := self.extra_properties.columns.filter((.id != column.id))
 			} [ "DELETE" ]
 		]
+	]
 
 user-form-selection = (self, user) ->
 	h \option {
@@ -86,10 +90,10 @@ ProjectCreationModal = (project, todod-ws, users) ->
 		content-render: (self) ->
 			h \div.form [
 
-				bulma.field [
-					bulma.label "Project title"
+				field [
+					label "Project title"
 
-					h \input.input {
+					input {
 						value: self.title
 						oninput: (e) ->
 							self.title := e.target.value
@@ -111,36 +115,41 @@ ProjectCreationModal = (project, todod-ws, users) ->
 
 				h \hr []
 
-				h \aside.menu [
-					h \p.menu-label [ "Permissions" ]
-					h \ul.menu-list Object.keys(self.permissions).map (permission) ->
-							h \li {
-								key: "permission" + permission
-							} [
-								h \p self.permissions[permission].map (e, index) ->
-									if index == 0
-										"Permissions '" + permission + "': " + e + ", "
-									else
-										"" + e + ", "
+				field [
+					label "Permissions"
+
+					h \table.table.is-fullwidth.is-striped [
+						h \tbody [
+							for permission, uids of self.permissions
+								for uid in uids
+									h \tr {key: uid.to-string!} [
+										h \td [
+											uid.to-string!
+										]
+
+										h \td.is-narrow [
+											permission
+										]
+									]
+						]
 					]
 				]
 
 				h \hr []
 
-				h \p [ "Adding new user" ]
+				# FIXME: This is supposed to go in a .field, right?
+				label "Adding new user"
 
-				h \div.field.has-addons {
-					key: "adding-user"
-				} [
-					h \div.select.control [
-						h \select {
+				field \.has-addons { key: \new-user } [
+					control [
+						select {
 							onchange: (e) ->
 								self.tmp.new-user-permission.permission := e.target.value
 						} permission-groups.map (permission) -> permission-to-form-selection self, permission
 					]
 
-					h \div.select.control.is-expanded [
-						h \select {
+					control \.is-expanded [
+						select \.is-fullwidth {
 							onchange: (e) ->
 								self.tmp.new-user-permission.uid := e.target.value
 						} [
@@ -150,7 +159,8 @@ ProjectCreationModal = (project, todod-ws, users) ->
 						]
 					]
 
-					h \div.control.button.is-success.is-outlined {
+					control [
+						button \.is-success.is-outlined {
 							onclick: ->
 								if self.tmp.new-user-permission.uid == void || self.tmp.new-user-permission.uid == "-"
 									console.log "adding an user permission on the kanban: failed, no user selected"
@@ -161,28 +171,27 @@ ProjectCreationModal = (project, todod-ws, users) ->
 									permissions-add self, self.tmp.new-user-permission.permission, self.tmp.new-user-permission.uid
 						} [ "+" ]
 					]
+				]
 
 				h \hr []
 
-				h \p [ "Choose the columns" ]
+				label [ "Columns" ]
 
 				for dom in (self.extra_properties.columns.map (column) -> col-to-lines column, self)
 					dom
 
 				h \hr []
 
-				h \div.field.has-addons {
-					key: "adding-field"
-				} [
-					h \p.control.is-expanded [
-						h \input.input {
+				field \.has-addons { key: \new-column } [
+					control \.is-expanded [
+						input {
 							value:     self.tmp.new-column-input.title
 							oninput: (e) ->
 								self.tmp.new-column-input.title := e.target.value
-						} [ ]
+						}
 					]
 
-					h \div.control.button.is-success.is-outlined {
+					button \.is-success.is-outlined {
 						onclick: ->
 							new-col = {
 								id: UUID!