From 2a860e1cacb5a651cf8a314142611bdcd264012e Mon Sep 17 00:00:00 2001 From: Luka Vandervelden Date: Tue, 24 Dec 2019 22:25:01 +0100 Subject: [PATCH] Selection of multiple cards, grooming. --- client/project.ls | 79 +++++++++++++++++++++++++---------------------- client/style.sass | 11 ++++++- client/task.ls | 47 +++++++++++++--------------- 3 files changed, 74 insertions(+), 63 deletions(-) diff --git a/client/project.ls b/client/project.ls index 52a580f..f3d6933 100644 --- a/client/project.ls +++ b/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 \a.is-pulled-right.icon.has-text-danger.visible-on-hover { - key: \remove + h \div.is-pulled-right.visible-on-hover [ + if tasks-to-display.length == 0 + 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 { - +visible - content: [ "Are you sure you want to remove this column?" ] - on-validation: -> - console.log "column removal:", column + 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.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 - 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 } ] diff --git a/client/style.sass b/client/style.sass index abb011e..42389ed 100644 --- a/client/style.sass +++ b/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" diff --git a/client/task.ls b/client/task.ls index 1879b19..1a45c47 100644 --- a/client/task.ls +++ b/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 [ - 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 [ + 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 + ] + 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