init wip

prototypes/examples/app-bar.moon

@@ -0,0 +1,53 @@
+-- based on http://www.material-ui.com/#/components/app-bar
+
+{
+  toolbar: {
+    width: 1
+    -- height not defined, it will be defined by largest sub-element (in this case, the text)
+    -- sub-items' heights will be equal, widths according to aspect ratio
+    padding: 5
+    {
+      dropdown: {
+        toggle: "click" -- vs hover (default)
+        background: hamburger -- a drawable hamburger icon
+        background: { hamburger, close_x } -- idea: first is default state, second is when activated
+        {} -- sub-items (not shown unless activated)
+      }
+    }
+    {
+      text: "Title"
+      clicked: (btn, x, y) ->
+        -- func that replaces (switch method?) toolbar w one defined below
+    }
+    {
+      align: "right"
+      dropdown: {
+        toggle: "click"
+        background: down_arrow
+        {} -- sub-items (not shown unless activated)
+      }
+    }
+  }
+}
+
+{
+  toolbar: {
+    padding: 5
+    {
+      background: close_x
+    }
+    {
+      textinput: {
+        name: "title" -- something to make it easier to access whatever value is stored here currently ?
+        value: "Title"
+        -- something to style it to just be the text
+      }
+    }
+    {
+      align: "right"
+      text: "SAVE"
+      clicked: (btn, x, y) ->
+        -- do something to save what has been put in the textinput
+    }
+  }
+}

prototypes/examples/badge.moon

@@ -0,0 +1,14 @@
+-- reference http://www.material-ui.com/#/components/badge
+
+{
+  background: some_image -- or could be text or something
+  badge: {
+    -- can be any kind of element, will be sized and offset to top-right
+    --  but will have a circular outer display color for whatever it is
+    --  (so really should use transparent circular items or text only)
+    -- this example: a count of 2 with a background color of red and text color white
+    text: 2
+    background: {255, 0, 0, 255}
+    color: {255, 255, 255, 255}
+  }
+}

prototypes/examples/bottom-navigation.moon

@@ -0,0 +1,20 @@
+-- from http://www.material-ui.com/#/components/bottom-navigation
+
+{
+  toolbar: {
+    width: 0.5
+    padding: 3
+    {
+      -- default align is top-left (we want left, but in this case, vertical alignment doesn't mean anything)
+      background: recents_icon
+    }
+    {
+      align: "center"
+      background: favorites_icon
+    }
+    {
+      align: "right"
+      background: nearby_icon
+    }
+  }
+}

prototypes/examples/buttons.moon

@@ -0,0 +1,23 @@
+{
+  text: "click me"
+  -- define a clicked fn here
+}
+{
+  padding: 3
+  text: "button"
+  background: {0, 255, 255, 255} -- teal
+  color: {255, 255, 255, 255} -- white
+}
+{
+  padding: 8
+  text: "+"
+  background: {0, 255, 255, 255} -- teal
+  color: {255, 255, 255, 255} -- white
+  round: true -- to make a rounded button (like a badge)
+  round: 5    -- round the background box by this percent/pixels
+}
+{
+  background: some_image
+  clicked: (btn, x, y) -> -- now its a button! :D
+  hovered: (x, y) ->      -- with optional hoverable capability
+}

prototypes/examples/chip.moon

@@ -0,0 +1,20 @@
+-- http://www.material-ui.com/#/components/chip
+
+{
+  rounded: 5
+  background: some_color
+  padding: {right: 5}
+  -- somehow this knows to expand to size of children horizontally, but not vertically...
+  {
+    rounded: true -- full circle instead of special pixel count
+    background: an_image
+  }
+  {
+    text: "Colored Chip"
+  }
+  {
+    width: 0.8 -- 80% size of parent
+    rounded: true
+    background: an_x_image
+  }
+}

prototypes/examples/divider.moon

@@ -0,0 +1,10 @@
+-- http://www.material-ui.com/#/components/divider
+
+{
+  text: "some text"
+}
+{ -- makes a horizontal rule effectively
+  newline: true
+  height: 1.0001
+  background: dark_grey
+}

prototypes/examples/todo.txt

@@ -0,0 +1,23 @@
+http://www.material-ui.com/#/components/card
+http://www.material-ui.com/#/components/date-picker
+http://www.material-ui.com/#/components/dialog -- like a window
+http://www.material-ui.com/#/components/drawer
+http://www.material-ui.com/#/components/grid-list
+http://www.material-ui.com/#/components/list  -- like a vertical toolbar ? (menu alias ?)
+http://www.material-ui.com/#/components/paper -- is a drop-shadow effect around itself
+http://www.material-ui.com/#/components/circular-progress -- a spinner (note: should be able to show specific amount too)
+http://www.material-ui.com/#/components/linear-progress   -- a slider / progressbar
+http://www.material-ui.com/#/components/refresh-indicator -- a specialized spinner
+http://www.material-ui.com/#/components/select-field
+http://www.material-ui.com/#/components/checkbox
+http://www.material-ui.com/#/components/toggle   -- a short slider turned into boolean
+http://www.material-ui.com/#/components/snackbar -- a little notification from bottom
+http://www.material-ui.com/#/components/stepper
+http://www.material-ui.com/#/components/subheader
+http://www.material-ui.com/#/components/table      -- grid
+http://www.material-ui.com/#/components/tabs       -- like my tabs, except allows any content for 'name' of tabs
+http://www.material-ui.com/#/components/text-field -- textinput
+http://www.material-ui.com/#/components/time-picker
+http://www.material-ui.com/#/components/toolbar    -- a little more advanced than mine?
+
+Templates and theming are important. Being able to set all colors for a chunk of UI at once is a good thing.