From f4f043f4e1321e59cd15f3d85107f4cb37d34ebd Mon Sep 17 00:00:00 2001 From: Luka Vandervelden Date: Sun, 22 Dec 2019 20:03:11 +0100 Subject: [PATCH] Columns can be added and removed again. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A .visible-on-hover class has also been added, although it isn’t very flexible at the moment. --- Makefile | 5 ++- client/column-edit-modal.ls | 6 ++- client/column.ls | 16 ++++++++ client/project-creation-modal.ls | 17 ++------ client/project.ls | 66 +++++++++++++++++++++++++++----- client/style.sass | 5 +++ 6 files changed, 90 insertions(+), 25 deletions(-) create mode 100644 client/column.ls diff --git a/Makefile b/Makefile index fe7ff3b..3f03fa4 100644 --- a/Makefile +++ b/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 \ diff --git a/client/column-edit-modal.ls b/client/column-edit-modal.ls index dfc511c..0d6b5cc 100644 --- a/client/column-edit-modal.ls +++ b/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) -> } diff --git a/client/column.ls b/client/column.ls new file mode 100644 index 0000000..4b20930 --- /dev/null +++ b/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 + diff --git a/client/project-creation-modal.ls b/client/project-creation-modal.ls index 13f0b4e..e9dbcb9 100644 --- a/client/project-creation-modal.ls +++ b/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"} diff --git a/client/project.ls b/client/project.ls index ae06b19..e616329 100644 --- a/client/project.ls +++ b/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 - self.render-column column, is-last - else - [ + if is-last 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 diff --git a/client/style.sass b/client/style.sass index 53bc983..64b1feb 100644 --- a/client/style.sass +++ b/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