Columns can be added and removed again.

A .visible-on-hover class has also been added, although it isn’t very
flexible at the moment.

Makefile

@@ -18,7 +18,7 @@ main.js: main.bundle.js
 	$(Q)npx babel --minified main.bundle.js -o main.js
 
 
-main.bundle.js: client/index.ls client/authws.ls client/bulma.ls client/card.ls client/column-edit-modal.ls client/font-awesome.ls client/modal.ls client/navbar.ls client/project-creation-modal.ls client/project.ls client/task-creation-modal.ls client/task.ls client/task-removal-modal.ls client/todowebsocket.ls client/users-cache.ls client/validation-modal.ls  
+main.bundle.js: client/index.ls client/authws.ls client/bulma.ls client/card.ls client/column-edit-modal.ls client/column.ls client/font-awesome.ls client/modal.ls client/navbar.ls client/project-creation-modal.ls client/project.ls client/task-creation-modal.ls client/task.ls client/task-removal-modal.ls client/todowebsocket.ls client/users-cache.ls client/validation-modal.ls  
 	@echo '  BUN >   main.bundle.js'
 	$(Q)npx browserify -t browserify-livescript client/index.ls -o main.bundle.js
 
@@ -100,6 +100,7 @@ $(PACKAGE)-$(VERSION).tar.gz: distdir
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
 		$(PACKAGE)-$(VERSION)/client/card.ls \
 		$(PACKAGE)-$(VERSION)/client/column-edit-modal.ls \
+		$(PACKAGE)-$(VERSION)/client/column.ls \
 		$(PACKAGE)-$(VERSION)/client/font-awesome.ls \
 		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/navbar.ls \
@@ -122,6 +123,7 @@ $(PACKAGE)-$(VERSION).tar.xz: distdir
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
 		$(PACKAGE)-$(VERSION)/client/card.ls \
 		$(PACKAGE)-$(VERSION)/client/column-edit-modal.ls \
+		$(PACKAGE)-$(VERSION)/client/column.ls \
 		$(PACKAGE)-$(VERSION)/client/font-awesome.ls \
 		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/navbar.ls \
@@ -144,6 +146,7 @@ $(PACKAGE)-$(VERSION).tar.bz2: distdir
 		$(PACKAGE)-$(VERSION)/client/bulma.ls \
 		$(PACKAGE)-$(VERSION)/client/card.ls \
 		$(PACKAGE)-$(VERSION)/client/column-edit-modal.ls \
+		$(PACKAGE)-$(VERSION)/client/column.ls \
 		$(PACKAGE)-$(VERSION)/client/font-awesome.ls \
 		$(PACKAGE)-$(VERSION)/client/modal.ls \
 		$(PACKAGE)-$(VERSION)/client/navbar.ls \

client/column-edit-modal.ls

@@ -3,13 +3,17 @@
 {field, control, input, label} = require "./bulma.ls"
 
 Modal = require "./modal.ls"
+Column = require './column.ls'
 
 deep-copy = (object) ->
 	JSON.parse JSON.stringify object
 
 ColumnEditModal = (project, column, args) ->
 	self = {
-		column: deep-copy column
+		column: if column
+			deep-copy column
+		else
+			Column ""
 
 		on-validation: args.on-validation || (column) ->
 	}

client/column.ls

@@ -0,0 +1,16 @@
+
+UUID = require "uuid/v4"
+
+Column = (title, args) ->
+	self = {
+		title: title
+		id: UUID!
+	}
+
+	for key, value of (args || {})
+		self[key] = value
+
+	self
+
+module.exports = Column
+

client/project-creation-modal.ls

@@ -1,8 +1,10 @@
 
 h     = require 'maquette' .h
-Modal = require './modal.ls'
 UUID  = require "uuid/v4"
-bulma = require "./bulma.ls"
+
+Column = require './column.ls'
+Modal  = require './modal.ls'
+bulma  = require "./bulma.ls"
 
 {field, control, label, button, tag, input, select} = bulma
 
@@ -39,17 +41,6 @@ ProjectCreationModal = (args) ->
 	self.project.tasks := void
 
 	unless self.project.extra_properties
-		Column = (title, args) ->
-			self = {
-				title: title
-				id: UUID!
-			}
-
-			for key, value of (args || {})
-				self[key] = value
-
-			self
-
 		self.project.extra_properties = {
 			columns: [
 				Column "Unassigned"       {color: "red"}

client/project.ls

@@ -53,7 +53,30 @@ Project = (self, todod-ws, users-cache) ->
 			h \p.title.is-4 [
 				column.title
 
-				h \a.is-pulled-right.icon.has-text-grey {
+				if tasks-to-display.length == 0
+					h \a.is-pulled-right.icon.has-text-danger.visible-on-hover {
+						key: \remove
+						onclick: ->
+							modal := Modal {
+								+visible
+								content: [ "Are you sure you want to remove this column?" ]
+								on-validation: ->
+									console.log "column removal:", column
+									modal.visible := false
+
+									extra_properties = deep-copy(self.extra_properties)
+									extra_properties.columns = extra_properties.columns.filter((.id != column.id))
+
+									todod-ws.edit-list self.id, {
+										extra_properties: extra_properties
+									}
+							}
+					} [
+						icon \skull-crossbones
+					]
+
+				h \a.is-pulled-right.icon.has-text-grey.visible-on-hover {
+					key: \edit
 					onclick: ->
 						modal := ColumnEditModal self, column, {
 							on-validation: (column) ->
@@ -134,21 +157,44 @@ Project = (self, todod-ws, users-cache) ->
 		]
 
 	self.render = ->
-
 		h \div.project {} [
-
 			h \div.columns [
 				if columns = self.extra_properties.columns
-					for column in columns
+					[
-						is-last = column == columns[columns.length-1]
+						for column in columns
+							is-last = column == columns[columns.length-1]
 
-						if is-last
+							if is-last
-							self.render-column column, is-last
-						else
-							[
 								self.render-column column, is-last
-								h \div.is-divider-vertical
+							else
+								[
+									self.render-column column, is-last
+									h \div.is-divider-vertical {key: column.id + ".divider"}
+								]
+
+						h \div.is-divider-vertical {
+							key: "final.divider"
+						}
+						h \div.column.is-narrow [
+							h \div.button.is-outlined.is-large {
+								onclick: ->
+									modal := ColumnEditModal self, void, {
+										on-validation: (column) ->
+											console.log "column creation:", column
+											modal.visible := false
+
+											extra_properties = deep-copy(self.extra_properties)
+											extra_properties.columns.push column
+
+											todod-ws.edit-list self.id, {
+												extra_properties: extra_properties
+											}
+									}
+							} [
+								"+"
 							]
+						]
+					]
 			]
 
 			if modal

client/style.sass

@@ -32,6 +32,11 @@
 .project .columns .column
     padding: 0.25rem
 
+.project .column .visible-on-hover
+  visibility: hidden
+.project .column:hover .visible-on-hover
+  visibility: visible
+
 .cards-list .card
     border-top: 4px solid $grey-lighter
 .cards-list .card .card-content