From 65084c3247130742b67227014eb2cb44bc41db78 Mon Sep 17 00:00:00 2001 From: Philippe PITTOLI Date: Wed, 4 Dec 2019 23:30:12 +0100 Subject: [PATCH] modal == bien --- Makefile | 5 +++- client/bulma.ls | 41 ------------------------------- client/index.ls | 7 +++++- client/modal.ls | 62 +++++++++++++++++++++++++++++++++++++++++++++++ client/style.sass | 2 +- 5 files changed, 73 insertions(+), 44 deletions(-) create mode 100644 client/modal.ls diff --git a/Makefile b/Makefile index 87da56b..f30c5f9 100644 --- a/Makefile +++ b/Makefile @@ -37,7 +37,7 @@ main.js: main.bundle.js $(Q)npx babel --minified main.bundle.js -o main.js -main.bundle.js: client/index.ls client/authd.ls client/bulma.ls client/project.ls client/task.ls client/todowebsocket.ls +main.bundle.js: client/index.ls client/authd.ls client/bulma.ls client/modal.ls client/project.ls client/task.ls client/todowebsocket.ls @echo ' BUN > main.bundle.js' $(Q)npx browserify -t browserify-livescript client/index.ls -o main.bundle.js @@ -118,6 +118,7 @@ $(PACKAGE)-$(VERSION).tar.gz: distdir $(PACKAGE)-$(VERSION)/client/style.sass \ $(PACKAGE)-$(VERSION)/client/authd.ls \ $(PACKAGE)-$(VERSION)/client/bulma.ls \ + $(PACKAGE)-$(VERSION)/client/modal.ls \ $(PACKAGE)-$(VERSION)/client/project.ls \ $(PACKAGE)-$(VERSION)/client/task.ls \ $(PACKAGE)-$(VERSION)/client/todowebsocket.ls @@ -131,6 +132,7 @@ $(PACKAGE)-$(VERSION).tar.xz: distdir $(PACKAGE)-$(VERSION)/client/style.sass \ $(PACKAGE)-$(VERSION)/client/authd.ls \ $(PACKAGE)-$(VERSION)/client/bulma.ls \ + $(PACKAGE)-$(VERSION)/client/modal.ls \ $(PACKAGE)-$(VERSION)/client/project.ls \ $(PACKAGE)-$(VERSION)/client/task.ls \ $(PACKAGE)-$(VERSION)/client/todowebsocket.ls @@ -144,6 +146,7 @@ $(PACKAGE)-$(VERSION).tar.bz2: distdir $(PACKAGE)-$(VERSION)/client/style.sass \ $(PACKAGE)-$(VERSION)/client/authd.ls \ $(PACKAGE)-$(VERSION)/client/bulma.ls \ + $(PACKAGE)-$(VERSION)/client/modal.ls \ $(PACKAGE)-$(VERSION)/client/project.ls \ $(PACKAGE)-$(VERSION)/client/task.ls \ $(PACKAGE)-$(VERSION)/client/todowebsocket.ls diff --git a/client/bulma.ls b/client/bulma.ls index c8f0595..2c03d26 100644 --- a/client/bulma.ls +++ b/client/bulma.ls @@ -29,46 +29,5 @@ module.exports = { action: url method: method }, content - - asking-modal: (model, args, content) -> - console.log "Rendering a modal: ", args, content - is-active = (if model.current-modal == true then \.is-active else "") - h \div.modal + is-active, args, [ - h \div.modal-background (args.background || []) - - h \div.modal-content {} [ - content - - h \hr [] - - h \div.columns {} [ - h \div.column {} [ - h \button.button.is-success.is-fullwidth { - onclick: -> - model.current-modal := false - } [ - h \span.icon.has-text-success [ h \i.fas.fa-check-square [] ] - ] - ] - h \div.column {} [ - # h \button.button.is-warning.is-fullwidth { - # onclick: -> - # model.current-modal := false - # } [ - # h \span.icon.has-text-danger [ h \i.fas.fa-ban [] ] - # ] - h \span.icon.has-text-danger { - onclick: -> - model.current-modal := false - } [ h \i.fas.fa-ban [] ] - ] - ] - h \button.button.modal-close { - aria-label: "close" - onclick: -> - model.current-modal := false - } [] - ] - ] } diff --git a/client/index.ls b/client/index.ls index 325a9eb..c3774d4 100644 --- a/client/index.ls +++ b/client/index.ls @@ -40,6 +40,7 @@ todows = require "./todowebsocket.ls" bulma = require "./bulma.ls" Task = require "./task.ls" Project = require "./project.ls" +Modal = require "./modal.ls" {create-projector, h} = maquette projector = create-projector! @@ -79,6 +80,9 @@ model = { jwt: undefined } +# TODO XXX FIXME +model.modal = Modal {+visible} + model.authd-url = (if location.protocol == 'https' then 'wss' else 'ws') + '://' + location.hostname + \: + @@ -266,7 +270,8 @@ render-body = -> console.log "rendering a modal" # bulma.asking-modal model, {}, [ (h \button.button {} [ "rendering a modal" ]) ] - bulma.asking-modal model, {}, [ "rendering a modal !!" ] + if model.modal + model.modal.render! render-new-project-button! ] diff --git a/client/modal.ls b/client/modal.ls new file mode 100644 index 0000000..ee047ae --- /dev/null +++ b/client/modal.ls @@ -0,0 +1,62 @@ + +h = require 'maquette' .h + +# formulaire création de listes +# formulaire création de tâches +# confirmation de suppression de listes, de tâches, de colonnes + +Modal = (args) -> + self = {} + + self.modal-args = args.modal-args || {} + self.visible = args.visible || false + self.content = args.content || [] + self.background-args = args.background-args || [] + self.on-validation = args.on-validation || -> + self.on-cancellation = args.on-cancellation || -> + self.validation-label = args.validation-label || "Ok" + self.cancellation-label = args.cancellation-label || "Cancel" + + self.render = -> + console.log "Rendering a modal: ", self, self.content + + is-active = (if self.visible == true then \.is-active else "") + h \div.modal + is-active, self.modal-args, [ + h \div.modal-background self.background-args + + h \div.modal-content {} [ + h \div.box [ + self.content + + h \hr [] + + h \div.columns {} [ + h \div.column {} [ + h \button.button.is-fullwidth { + onclick: -> + self.visible := false + self.on-validation self + } [ self.validation-label ] + ] + h \div.column {} [ + h \button.button.is-fullwidth { + onclick: -> + self.visible := false + self.on-cancellation self + } [ self.cancellation-label ] + ] + ] + ] + + h \button.button.modal-close { + aria-label: "close" + onclick: -> + self.visible := false + self.on-cancellation self + } [] + ] + ] + + self + +module.exports = Modal diff --git a/client/style.sass b/client/style.sass index 5c50be7..7183fa3 100644 --- a/client/style.sass +++ b/client/style.sass @@ -7,7 +7,7 @@ @import "../node_modules/bulmaswatch/superhero/_overrides.scss" -.columns +.project>.columns overflow-x: scroll .avatar