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,29 +61,24 @@ Project = (self, todod-ws, users-cache) ->
 			h \p.title.is-4 [
 				column.title
 
+				h \div.is-pulled-right.visible-on-hover [
 					if tasks-to-display.length == 0
-					h \a.is-pulled-right.icon.has-text-danger.visible-on-hover {
+						h \a.icon.has-text-danger {
 							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
-									}
+										self.remove-column column
 								}
 						} [
 							icon \skull-crossbones
 						]
 
-				h \a.is-pulled-right.icon.has-text-grey.visible-on-hover {
+					h \a.icon.has-text-grey {
 						key: \edit
 						onclick: ->
 							modal := ColumnEditModal self, column, {
@@ -98,15 +101,17 @@ Project = (self, todod-ws, users-cache) ->
 						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
-							self.selected-task-id := void
+						if self.selected-tasks.includes task.id
+							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 {
+					content: [
+						title 5 self.title
+
+						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
 						]
-					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
+						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