Basic checklist support

The checkboxes don’t ripple on click yet.

4 files changed, 99 insertions, 2 deletions

diff --git a/main.ur b/main.ur
index 3131f14..5e2eab2 100644
--- a/main.ur
+++ b/main.ur
@@ -23,7 +23,12 @@ fun markNextActionStatus id done =
   dml (UPDATE nextAction SET Done = {[done]} WHERE Id = {[id]})
 
 fun renderNextAction action : transaction xbody =
-  return <xml></xml>
+  c <- Material.Checkbox.make action.Done
+    (fn b => rpc (markNextActionStatus action.Id b));
+  return (Material.List.SingleLine.item {
+    Icon = c,
+    Content = cdata action.Nam
+  })
 
 val renderNextActions =
   queryX1' (SELECT * FROM nextAction WHERE nextAction.Done = FALSE) renderNextAction
@@ -68,6 +73,9 @@ val main =
                   | _ => hidden)
       }>
         {Material.AppBar.make "Next actions"}
+        {Material.List.SingleLine.make <xml>
+          <dyn signal={signal actionItems} />
+        </xml>}
       </div>
     </xml>
   })
diff --git a/material/material.css b/material/material.css
index 5a20eda..ccf8c12 100644
--- a/material/material.css
+++ b/material/material.css
@@ -1,4 +1,5 @@
-/* Copyright 2016 Benjamin Barenblat
+/* Copyright 2015 Google Inc.
+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
@@ -46,3 +47,36 @@ html, body {
   /* We can’t use text-overflow because line-height got set to zero for baseline
   adjustment. */
 }
+
+.Material_Checkbox_checkbox {
+  display: block;
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  border: 2px solid #9c27b0;
+  border-radius: 2px;
+}
+
+.Material_Checkbox_checked {
+  background: #9c27b0 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
+}
+
+.Material_List_SingleLine_element {
+  list-style-type: none;
+  height: 48px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.Material_List_SingleLine_icon {
+  margin: 12px 32px 12px 0;
+  height: 24px;
+  width: 24px;
+}
+
+.Material_List_SingleLine_list {
+  margin: 8px 16px;
+  padding: 0;
+}
diff --git a/material/material.ur b/material/material.ur
index 3787355..eb4f971 100644
--- a/material/material.ur
+++ b/material/material.ur
@@ -40,3 +40,46 @@ structure AppBar = struct
     </header>
   </xml>
 end
+
+structure Checkbox = struct
+  style checkbox
+  style checked
+
+  val make c onChange =
+    s <- source c;
+    return <xml>
+      <span
+        dynClass={
+          c <- signal s;
+          return (classes checkbox (if c then checked else null))
+        }
+        onclick={fn click =>
+          c <- get s;
+          let
+            val c' = not c
+          in
+            set s c';
+            onChange c'
+          end
+        }
+      >
+      </span>
+      </xml>
+end
+
+structure List = struct
+  structure SingleLine = struct
+    style element
+    style icon
+    style list
+
+    fun make es = <xml><ul class={list}>{es}</ul></xml>
+
+    fun item i = <xml>
+      <li class={element}>
+        <span class={icon}>{i.Icon}</span>
+        {i.Content}
+      </li>
+    </xml>
+  end
+end
diff --git a/material/material.urs b/material/material.urs
index fe50869..cee2b85 100644
--- a/material/material.urs
+++ b/material/material.urs
@@ -16,3 +16,15 @@ val page : {Head : xhead, Body : xbody} -> page
 structure AppBar : sig
   val make : string (* app title *) -> xbody
 end
+
+structure Checkbox : sig
+  val make : bool -> (bool -> transaction unit) -> transaction xbody
+end
+
+structure List : sig
+  structure SingleLine : sig
+    val make : xbody -> xbody
+
+    val item : {Icon : xbody, Content : xbody} -> xbody
+  end
+end