diff options
| author |  Benjamin Barenblat <benjamin@barenblat.name> | 2016-09-17 20:55:07 -0400 |
|---|---|---|
| committer | Benjamin Barenblat <benjamin@barenblat.name> | 2016-09-17 20:55:07 -0400 |
| commit | 095bf921806b23213775180428c2bd230cb9adff (patch) | |
| tree | 85c1e4a826a2d3d81630f361f8038f7e8c4a3712 | |
| parent | e5853953b45283638d2088c3df67e8bb04fc02a8 (diff) | |
Add basic modal new-next-action dialogue
| -rw-r--r-- | Makefile | 1 | ||||
| -rw-r--r-- | main.ur | 57 | ||||
| -rw-r--r-- | mdl/mdl.ur | 11 | ||||
| -rw-r--r-- | ugtd.css | 20 | ||||
| -rw-r--r-- | ugtd.urp | 1 |
5 files changed, 82 insertions, 8 deletions
@@ -19,6 +19,7 @@ all: ugtd ugtd.db ugtd initialize.sql: \ ugtd.urp \ + ugtd.css \ mdl/lib.urp \ mdl/mdlFfi.urs mdl/mdlFfi.js \ mdl/mdlClasses.urp \ @@ -48,9 +48,16 @@ fun renderNextAction action = </xml> +style hidden +style visible + +datatype mode = NextActions | NewNextAction + val main = actionItems <- queryX1' (SELECT * FROM nextAction) renderNextAction; setHeader (blessResponseHeader "X-UA-Compatible") "IE=edge"; + mode <- source NextActions; + newNextActionDescription <- Mdl.Textbox.make "Description"; return <xml> <head> (* TODO(bbaren): Write a meta-description tag. *) @@ -70,18 +77,52 @@ val main = <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.purple-orange.min.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> {forceJavaScript} + + <link rel="stylesheet" href="/ugtd.css" /> </head> <body> - <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> - <div class="mdl-layout__header mdl-layout__header--waterfall mdl-layout__header--waterfall-hide-top"> - <div class="mdl-layout__header-row"> - <span class="mdl-layout-title">Next actions</span> + <div dynClass={ + currentMode <- signal mode; + return (case currentMode of + NewNextAction => visible + | _ => hidden) + }> + <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> + <header class="mdl-layout__header"> + <button class="mdl-layout__drawer-button" onclick={fn _ => set mode NextActions}> + <i class="material-icons">close</i> + </button> + <div class="mdl-layout__header-row"> + <span class="mdl-layout-title">New action</span> + <div class="mdl-layout-spacer" /> + (* <button class="mdl-button mdl-js-button" value="Save" /> *) + </div> + </header> + <div class="mdl-layout__content"> + {newNextActionDescription} </div> </div> - <div class="mdl-layout__content"> - <ul class="mdl-list"> - {actionItems} - </ul> + </div> + <div dynClass={ + currentMode <- signal mode; + return (case currentMode of + NextActions => visible + | _ => hidden) + }> + <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> + <div class="mdl-layout__header mdl-layout__header--waterfall mdl-layout__header--waterfall-hide-top"> + <div class="mdl-layout__header-row"> + <span class="mdl-layout-title">Next actions</span> + </div> + </div> + <div class="mdl-layout__content"> + <ul class="mdl-list"> + {actionItems} + </ul> + <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" onclick={fn _ => set mode NewNextAction}> + <i class="material-icons">add</i> + </button> + </div> </div> </div> </body> @@ -15,6 +15,17 @@ specific language governing permissions and limitations under the License. *) structure Classes = MdlClasses open Classes +structure Textbox = struct + fun make (placeholder : string) : transaction xbody = + id <- fresh; + return <xml> + <div class="mdl-textfield mdl-js-textfield"> + <ctextbox class="mdl-textfield__input" id={id} /> + <label class="mdl-textfield__label" for={id}>{[placeholder]}</label> + </div> + </xml> +end + structure Toast = struct val make : transaction {Placeholder: xbody, Show: string -> transaction unit} = diff --git a/ugtd.css b/ugtd.css new file mode 100644 index 0000000..6bd370b --- /dev/null +++ b/ugtd.css @@ -0,0 +1,20 @@ +/* Copyright 2016 Benjamin Barenblat + +Licensed under the Apache License, Version 2.0 (the “License”); you may not use +this file except in compliance with the License. You may obtain a copy of the +License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed +under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR +CONDITIONS OF ANY KIND, either express or implied. See the License for the +specific language governing permissions and limitations under the License. */ + +header .mdl-button { + color: inherit; +} + +.Main_hidden { + display: none; +} @@ -6,6 +6,7 @@ allow url https://fonts.googleapis.com/* allow url https://code.getmdl.io/* database dbname=ugtd.db dbms sqlite +file /ugtd.css ugtd.css library mdl script https://storage.googleapis.com/code.getmdl.io/1.1.3/material.min.js sql initialize.sql |