Selection of multiple cards, grooming.

client/project.ls

@@ -32,10 +32,18 @@ Project = (self, todod-ws, users-cache) ->
 	self.todod-ws = todod-ws
 	self.tasks = []
 
-	self.selected-task-id = void
+	self.selected-tasks = []
 
 	modal = void
 
+	self.remove-column = (column) ->
+		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
+		}
+
 	self.render-column = (column, first) ->
 
 		tasks-to-display = self.tasks.filter (task) -> is-right-column task, column.id
@@ -53,60 +61,57 @@ Project = (self, todod-ws, users-cache) ->
 			h \p.title.is-4 [
 				column.title
 
-				if tasks-to-display.length == 0
+				h \div.is-pulled-right.visible-on-hover [
-					h \a.is-pulled-right.icon.has-text-danger.visible-on-hover {
+					if tasks-to-display.length == 0
-						key: \remove
+						h \a.icon.has-text-danger {
+							key: \remove
+							onclick: ->
+								modal := Modal {
+									+visible
+									content: [ "Are you sure you want to remove this column?" ]
+									on-validation: ->
+										modal.visible := false
+
+										self.remove-column column
+								}
+						} [
+							icon \skull-crossbones
+						]
+
+					h \a.icon.has-text-grey {
+						key: \edit
 						onclick: ->
-							modal := Modal {
+							modal := ColumnEditModal self, column, {
-								+visible
+								on-validation: (column) ->
-								content: [ "Are you sure you want to remove this column?" ]
+									console.log "column update:", 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))
+									extra_properties.columns = extra_properties.columns.map (old-column) ->
+										if old-column.id == column.id
+											column
+										else
+											old-column
 
 									todod-ws.edit-list self.id, {
 										extra_properties: extra_properties
 									}
 							}
 					} [
-						icon \skull-crossbones
+						icon \cog
 					]
-
-				h \a.is-pulled-right.icon.has-text-grey.visible-on-hover {
-					key: \edit
-					onclick: ->
-						modal := ColumnEditModal self, column, {
-							on-validation: (column) ->
-								console.log "column update:", column
-								modal.visible := false
-
-								extra_properties = deep-copy(self.extra_properties)
-								extra_properties.columns = extra_properties.columns.map (old-column) ->
-									if old-column.id == column.id
-										column
-									else
-										old-column
-
-								todod-ws.edit-list self.id, {
-									extra_properties: extra_properties
-								}
-						}
-				} [
-					icon \cog
 				]
 			]
 
 			tasks-to-display.map (task) ->
 				task.render {
-					is-selected: (task.id == self.selected-task-id)
+					is-selected: self.selected-tasks.includes task.id
 					onclick: ->
-						if self.selected-task-id == task.id
+						if self.selected-tasks.includes task.id
-							self.selected-task-id := void
+							self.selected-tasks :=
+								self.selected-tasks.filter (!= task.id)
 						else
-							self.selected-task-id := task.id
+							self.selected-tasks.push task.id
 				}
 		]
 

client/style.sass

@@ -49,7 +49,7 @@
 .cards-list .card .card-footer
     margin: -0.75rem
 .cards-list .card.is-selected
-    border-width: 4px
+  border-top-width: 4px
 .cards-list .card .title.is-5
   margin-bottom: 0.25rem
 
@@ -85,6 +85,15 @@
 
   .card.is-#{$name}
     border-top: 4px solid $color
+    border-left: 1px solid transparent
+    border-right: 1px solid transparent
+    border-bottom: 1px solid transparent
+
+  .card.is-#{$name}.is-selected
+    border-top: 4px solid $color
+    border-left: 1px solid $color
+    border-right: 1px solid $color
+    border-bottom: 1px solid $color
 
 @import "../node_modules/bulma-divider/src/sass/index.sass"
 

client/task.ls

@@ -1,9 +1,9 @@
 h     = require 'maquette' .h
-bulma = require "./bulma.ls"
 nmd   = require "nano-markdown"
 TaskCreationModal = require './task-creation-modal.ls'
 TaskRemovalModal = require './task-removal-modal.ls'
 
+{media, title} = require "./bulma.ls"
 {icon} = require "./font-awesome.ls"
 
 Task = (self, project, todod-ws, users-cache) ->
@@ -34,39 +34,36 @@ Task = (self, project, todod-ws, users-cache) ->
 					args.onclick(e)
 		} [
 			h \div.card-content [
-				h \div.title.is-5 [
+				media {
-					h \a.has-text-grey.is-pulled-right {
+					content: [
-						onclick: ->
+						title 5 self.title
-							modal := TaskCreationModal project, todod-ws, self, users-cache
+
-					} [
-						icon \cog.visible-on-hover
-					]
-					self.title
-				]
-				h \div.media [
-					h \div.media-left [
-						# FIXME: assignee card image
-					]
-					h \div.media-content [
 						if uid = self.assigned_to
 							self.render-login uid
 					]
-				]
+					right: [
+						h \a.has-text-grey.is-pulled-right {
+							onclick: ->
+								modal := TaskCreationModal project, todod-ws, self, users-cache
+						} [
+							icon \cog.visible-on-hover
+						]
+						h \br
+						h \a.has-text-danger.is-pulled-right {
+							onclick: ->
+								modal := TaskRemovalModal project.id, todod-ws, self
+						} [
+							icon \skull-crossbones.visible-on-hover
+						]
+					]
+				}
 
-				if args.is-selected
+				if args.is-selected && self.description.length > 0
 					h \div.content {
 						key: "task-description-#{self.id}"
 						after-create: (dom) ->
 							dom.innerHTML = nmd self.description
 					} [ ]
-
-				if args.is-selected
-					h \div.card-footer [
-							h \a.card-footer-item.has-text-danger {
-								onclick: ->
-									modal := TaskRemovalModal project.id, todod-ws, self
-							} [ "Destroy" ]
-					]
 			]
 
 			if modal