Baguette/todo-webclient
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Columns can be added and removed again.

Browse Source 
A .visible-on-hover class has also been added, although it isn’t very
flexible at the moment.
This commit is contained in:
Luka Vandervelden 2019-12-22 20:03:11 +01:00
parent 2871f515cf
commit f4f043f4e1
6 changed files with 90 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Makefile
View File

@ -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 \

6
client/column-edit-modal.ls
View File

@ -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) ->
}

16
client/column.ls Normal file
View File

@ -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

17
client/project-creation-modal.ls
View File

@ -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"}

66
client/project.ls
View File

@ -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

5
client/style.sass
View File

@ -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