Added introductory text etc. to various components. Closes #8.

examples/Component.elm

@@ -19,7 +19,6 @@ type alias Model =
   }
 
 
-
 model : Model 
 model = 
   { count = 0
@@ -38,7 +37,7 @@ type Action
       -- Boilerplate: Action for MDL actions (ripple animations etc.).
 
 
-update : Action -> Model -> (Model, Effects.Effects Action)
+update : Action -> Model -> (Model, Effects Action)
 update action model =
   case Debug.log "" action of
     Increase -> 
@@ -67,6 +66,7 @@ update action model =
 
 type alias Mdl = Material.Model Action
 
+
 {- We construct the instances of the Button component that we need, one 
 for the increase button, one for the reset button. First, the increase
 button. The arguments are: 

examples/Demo.elm

@@ -77,7 +77,6 @@ update action model =
 type alias Addr = Signal.Address Action
 
 
-
 drawer : List Html
 drawer =
   [ Layout.title "Example drawer"
@@ -107,15 +106,15 @@ header =
   ]
 
 
-tabs : List (String, Addr -> Model -> List Html)
+tabs : List (String, Addr -> Model -> Html)
 tabs =
   [ ("Snackbar", \addr model ->
-      [Demo.Snackbar.view (Signal.forwardTo addr SnackbarAction) model.snackbar])
+      Demo.Snackbar.view (Signal.forwardTo addr SnackbarAction) model.snackbar)
   , ("Textfields", \addr model ->
-      [Demo.Textfields.view (Signal.forwardTo addr TextfieldAction) model.textfields])
+      Demo.Textfields.view (Signal.forwardTo addr TextfieldAction) model.textfields)
   , ("Buttons", \addr model ->
-      [Demo.Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons])
-  , ("Grid", \addr model -> [ Demo.Grid.view ])
+      Demo.Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons)
+  , ("Grid", \addr model -> Demo.Grid.view)
   , ("Badges", \addr model -> Demo.Badges.view )
   {-
   , ("Template", \addr model -> 
@@ -123,7 +122,7 @@ tabs =
   -}
   ]
 
-tabViews : Array (Addr -> Model -> List Html)
+tabViews : Array (Addr -> Model -> Html)
 tabViews = List.map snd tabs |> Array.fromList
 
 
@@ -145,13 +144,16 @@ stylesheet = Style.stylesheet """
        */
   }
   p, blockquote { 
-    max-width: 33em;
-    font-size: 13px;
+    max-width: 40em;
+  }
+
+  h1, h2 { 
+    /* TODO. Need typography module with kerning. */
+    margin-left: -3px;
   }
 """
 
 
-
 view : Signal.Address Action -> Model -> Html
 view addr model =
   let top =
@@ -162,11 +164,12 @@ view addr model =
             , ("padding-right", "5%")
             ]
           ]
-          ((Array.get model.layout.selectedTab tabViews
-           |> Maybe.withDefault (\addr model ->
-             [div [] [text "This can't happen."]]
-           )
-          ) addr model)
+          [ (Array.get model.layout.selectedTab tabViews
+             |> Maybe.withDefault (\addr model ->
+                  div [] [text "This can't happen."]
+                )
+            ) addr model
+          ]
 
   in
     Layout.view (Signal.forwardTo addr LayoutAction) model.layout

examples/Demo/Badges.elm

@@ -2,34 +2,86 @@ module Demo.Badges (..) where
 
 import Html exposing (..)
 import Material.Badge as Badge
-import Material.Style exposing (styled)
+import Material.Style as Style exposing (styled)
 import Material.Icon as Icon
+import Material.Grid exposing (..)
+
+import Demo.Page as Page
 
 
 -- VIEW
 
 
-view : List Html
+c : List Html -> Cell
+c = cell [ size All 4 ]  
+
+view : Html
 view =
-  [ div
-      []
-      [ p [] []
-      , styled span [ Badge.withBadge "2" ] [] [ text "Span with badge" ]
-      , p [] []
-      , styled span [ Badge.withBadge "22", Badge.noBackground ] [] [ text "Span with no background badge" ]
-      , p [] []
-      , styled span [ Badge.withBadge "33", Badge.overlap ] [] [ text "Span with badge overlap" ]
-      , p [] []
-      , styled span [ Badge.withBadge "99", Badge.overlap, Badge.noBackground ] [] [ text "Span with badge overlap and no background" ]
-      , p [] []
-      , styled span [ Badge.withBadge "♥" ] [] [ text "Span with HTML symbol - Black heart suit" ]
-      , p [] []
-      , styled span [ Badge.withBadge "→" ] [] [ text "Span with HTML symbol - Rightwards arrow" ]
-      , p [] []
-      , styled span [ Badge.withBadge "Δ" ] [] [ text "Span with HTML symbol - Delta" ]
-      , p [] []
-      , span [] [ text "Icon with badge" ]
-      , Icon.view "face" [ Icon.size24, Badge.withBadge "33", Badge.overlap ] []
-      , Icon.view "face" [ Icon.size48, Badge.withBadge "33", Badge.overlap ] []
+  [ grid 
+      [] 
+      [ c [Style.span [ Badge.withBadge "2" ]  [text "Badge"]  ]
+      , c [Style.span 
+            [ Badge.withBadge "22", Badge.noBackground ]  
+            [ text "No background" ]
+          ]
+      , c [Style.span 
+            [ Badge.withBadge "33", Badge.overlap ]  
+            [ text "Overlap" ]
+          ]
+      , c [Style.span 
+            [ Badge.withBadge "99", Badge.overlap, Badge.noBackground ]  
+            [ text "Overlap, no background" ]
+          ]
+      , c [Style.span 
+            [ Badge.withBadge "♥" ]  
+            [ text "Symbol" ]
+          ]
+      , c [ Icon.view "flight_takeoff" [ Icon.size24, Badge.withBadge "33", Badge.overlap ] [] ]
       ]
   ]
+  |> Page.body "Badges" srcUrl intro references
+
+
+
+intro : Html
+intro =
+  Page.fromMDL "http://www.getmdl.io/components/#badges-section" """
+> The Material Design Lite (MDL) badge component is an onscreen notification
+> element. A badge consists of a small circle, typically containing a number or
+> other characters, that appears in proximity to another object. A badge can be
+> both a notifier that there are additional items associated with an object and
+> an indicator of how many items there are.
+> 
+> You can use a badge to unobtrusively draw the user's attention to items they
+> might not otherwise notice, or to emphasize that items may need their
+> attention. For example:
+> 
+>  - A "New messages" notification might be followed by a badge containing the
+> number of unread messages.  
+>  - A "You have unpurchased items in your shopping cart" reminder might include
+>  a badge showing the number of items in the cart.
+>  - A "Join the discussion!" button might have an accompanying badge indicating the
+> number of users currently participating in the discussion.  
+> 
+> A badge is almost
+> always positioned near a link so that the user has a convenient way to access
+> the additional information indicated by the badge. However, depending on the
+> intent, the badge itself may or may not be part of the link.
+> 
+> Badges are a new feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience.
+> 
+"""
+
+
+srcUrl : String
+srcUrl = 
+  "https://github.com/debois/elm-mdl/blob/master/examples/Demo/Badges.elm"
+
+
+references : List (String, String)
+references = 
+  [ Page.package "http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-Badge"
+  --, Page.mds "https://www.google.com/design/spec/components/buttons.html"
+  , Page.mdl "https://www.getmdl.io/components/#badges-section"
+  ]
+

examples/Demo/Grid.elm

@@ -10,8 +10,10 @@ import Material.Color as Color
 
 import Demo.Page as Page
 
+
 -- Cell styling
 
+
 style : Int -> List Style
 style h = 
   [ css "text-sizing" "border-box"
@@ -22,30 +24,41 @@ style h =
   , css "color" "white"
   ]
 
+
 -- Cell variants
 
+
 democell : Int -> List Style -> List Html -> Cell
 democell k styling = 
   cell <| List.concat [style k, styling] 
+
   
 small : List Style -> List Html -> Cell
 small = democell 50
 
+
 std : List Style -> List Html -> Cell
 std = democell 200
 
+
 -- Grid 
 
+
 color : Int -> Style
 color k =
-    Array.get (k % Array.length Color.palette) Color.palette
+    Array.get ((k + 7) % Array.length Color.palette) Color.palette
       |> Maybe.withDefault Color.Teal
       |> flip Color.color Color.S500
       |> Color.background
 
+
 view : Html
 view =
-  [ [1..12]
+  [ p []
+      [ text """Resize your browser-window and observe the effect on the Grid
+                below. Note in particular what happens to the top and bottom rows."""
+      ]
+  , [1..12 ]
     |> List.map (\i -> small [size All 1, color i] [text "1"])
     |> grid []
   , [1 .. 3]
@@ -81,8 +94,6 @@ intro =
 >   - If a cell has a specified column size equal to or larger than the number
 >     of columns for the current screen size, it takes up the entirety of its
 >     row.
-
-Resize your browser-window to observe the effect on the Grid below. 
 """
 
 srcUrl : String

examples/Demo/Page.elm

@@ -14,7 +14,6 @@ import Material.Style as Style exposing (styled, cs, css, attribute)
 import Material.Button as Button
 import Material.Color as Color
 import Material.Icon as Icon
-import Material.Elevation as Elevation
 
 
 -- REFERENCES
@@ -90,17 +89,11 @@ title t =
 
 demoTitle : Html 
 demoTitle = 
-  div [] []
-  {-
-  Style.div
+  Style.styled Html.h2
     [ Color.text Color.primary 
-    , css "text-align" "right"
-    , css "padding" ".5em"
-    , cs "mdl-typography--display2" 
-    -- TODO. Typography module
     ]
-    [ text "Demo" ]
-   -} 
+    []
+    [ text "Example" ]
 
 -- VIEW SOURCE BUTTON
 
@@ -113,9 +106,9 @@ fab : String -> Html
 fab url = 
   Button.fab addr (Button.model False)
     [ css "position" "fixed"
-    , css "right" "72px"
-    , css "bottom" "72px"
-    , css "z-index" "9999"
+    , css "right" "48px"
+    , css "top" "72px"
+    , css "z-index" "100"
     , Button.colored
     --, attribute (href srcUrl) 
     , attribute (Html.Attributes.attribute "onclick" ("alert('foo!');")) --("window.location.href = '" ++ srcUrl ++ "';") )
@@ -130,18 +123,24 @@ body : String -> String -> Html -> List (String, String) -> List Html -> Html
 body t srcUrl contents links demo = 
   div []
     [ title t
-    , grid []
+    , grid [ noSpacing ]
        [ cell [ size All 6, size Phone 4 ] [ contents ]
        , cell 
-           [ size All 5, offset Desktop 1, size Phone 4, align Top ] 
+           [ size All 5, offset Desktop 1, size Phone 4, align Top 
+           , css "position" "relative" 
+           ] 
            ( references <| ("Demo source", srcUrl) :: links )
        ]
-    , fab srcUrl
+    --, fab srcUrl
+    -- TODO: buttons can't be links (yet)
+    -- TODO: FAB placement.
+    , demoTitle
     , Style.div 
-        [ Elevation.shadow 2 ]
-        (  demoTitle 
-        :: demo 
-        )
+      [ css "margin-bottom" "48px"
+      --, css "margin-top" "48px"
+        -- , Elevation.shadow 2 
+      ]
+    demo 
     ]
 
 

examples/Demo/Snackbar.elm

@@ -232,7 +232,11 @@ clickView model (k, square) =
 view : Signal.Address Action -> Model -> Html
 view addr model =
   Page.body "Snackbar & Toast" srcUrl intro references
-    [ grid [ css "margin-top" "32px" ]
+    [ p [] 
+        [ text """Click the buttons below to activate the snackbar. Note that 
+                  multiple activations are automatically queued."""
+        ]
+    , grid [ ] --css "margin-top" "32px" ]
         [ cell 
             [ size All 2, size Phone 2, align Top ]
             [ addToastButton.view addr model.mdl 

examples/Demo/Textfields.elm

@@ -15,7 +15,6 @@ import Demo.Page as Page
 -- MODEL
 
 
-
 type alias Model = 
   { mdl : Material.Model Action 
   , rx : (String, Regex.Regex)
@@ -39,11 +38,9 @@ model =
   }
 
 
-
 -- ACTION, UPDATE
 
 
-
 type Action
   = MDL (Material.Action Action)
   | Upd0 String 
@@ -62,6 +59,8 @@ transferToDisabled str =
     }) 
 
 
+{- Check that rx matches all of str.
+-}
 match : String -> Regex.Regex -> Bool
 match str rx = 
   Regex.find Regex.All rx str
@@ -129,9 +128,7 @@ field1 =
 field2 : Textfield.Instance Mdl Action
 field2 = 
   Textfield.instance 2 MDL 
-    { m0 
-    | label = Just { text = "Floating label", float = True }
-    }
+    { m0 | label = Just { text = "Floating label", float = True } }
     []
 
 
@@ -148,9 +145,7 @@ field3 =
 field4 : Textfield.Instance Mdl Action
 field4 = 
   Textfield.instance 4 MDL 
-    { m0
-    | label = Just { text = "With error checking", float = False }
-    }
+    { m0 | label = Just { text = "With error checking", float = False } }
     [ Textfield.fwdInput Upd4 ]
 
 
@@ -169,7 +164,8 @@ view addr model =
      )
   |> List.intersperse (cell [size All 1] [])
   |> grid []
-  |> flip (::) []
+  |> flip (::) [] 
+  |> (::) (Html.text "Try entering text into some of the textfields below.")
   |> Page.body "Textfields" srcUrl intro references
 
 

src/Material/Component.elm

@@ -24,8 +24,8 @@ This module provides an extensible mechanism for collecting arbitrary
 (differently-typed) Elm Architecture components into a single component with
 a single Action type and update function. The module is used internally to 
 produce `instance` functions; if you are using elm-mdl (and are not interested in
-optimising for compiled program size), you should ignore this module and look
-instead at `Material`. 
+optimising for compiled program size or writing your own components), you
+should ignore this module and look instead at `Material`. 
 
 
 # Embeddings 

src/Material/Style.elm

@@ -1,7 +1,7 @@
 module Material.Style
   ( Style
   , cs, cs', css, css', attribute, multiple
-  , styled, div, stylesheet
+  , styled, div, span, stylesheet
   ) where
 
 
@@ -19,7 +19,7 @@ add to or remove from the contents of an already constructed class Attribute.)
 @docs cs, cs', css, css', attribute, multiple
 
 # Application
-@docs styled, div
+@docs styled, div, span
 
 # Convenience
 @docs stylesheet
@@ -94,8 +94,8 @@ styled ctor styles attrs' =
       )
 
 
-{-| Handle the ultra-common case of setting attributes of a div element,
-with no custom attributes. Use like this: 
+{-| Handle the ultra-common case of setting attributes of a div element.
+Use like this: 
 
     myDiv : Html 
     myDiv = 
@@ -111,6 +111,14 @@ div styles elems =
   styled Html.div styles [] elems
 
 
+{-| Convenience function for the reasonably common case of setting attributes
+of a span element. See also `div`. 
+-}
+span : List Style -> List Html -> Html
+span styles elems = 
+  styled Html.span styles [] elems
+
+
 {-| Add a HTML class to a component. (Name chosen to avoid clashing with
 Html.Attributes.class.)
 -}