From 4b94950e8b93ea9088d749b2f0cd7a638faee7fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Debois?= Date: Sat, 19 Mar 2016 23:47:21 +0100 Subject: [PATCH] Added styling to Grid, Buttons. --- Makefile | 5 +- examples/Demo.elm | 2 +- examples/Demo/Buttons.elm | 44 ++---- examples/Demo/Grid.elm | 10 +- examples/Demo/Snackbar.elm | 65 ++++----- examples/Demo/Textfields.elm | 2 +- src/Material.elm | 48 +++---- src/Material/Button.elm | 79 ++++++----- src/Material/Color.elm | 257 ++++++++++++++++++++++++++++++++--- src/Material/Grid.elm | 111 +++++---------- src/Material/Snackbar.elm | 29 ++-- src/Material/Textfield.elm | 1 + 12 files changed, 413 insertions(+), 240 deletions(-) diff --git a/Makefile b/Makefile index 6c68723..b9087d9 100644 --- a/Makefile +++ b/Makefile @@ -10,8 +10,11 @@ pages : clean : rm -f elm.js index.html +veryclean : + rm -rf elm-stuff/build-artifacts + distclean : clean rm -rf elm-stuff -.PHONY : pages elm.js clean distclean +.PHONY : pages elm.js clean veryclean distclean diff --git a/examples/Demo.elm b/examples/Demo.elm index b1f3ee1..22c2344 100644 --- a/examples/Demo.elm +++ b/examples/Demo.elm @@ -146,7 +146,7 @@ view addr model = your html, as done with page.html. Removing it will then fix the flicker you see on load. -} - |> Material.topWithColors Color.Teal Color.Red + |> Material.topWithScheme Color.Teal Color.Red init : (Model, Effects.Effects Action) diff --git a/examples/Demo/Buttons.elm b/examples/Demo/Buttons.elm index 2beac6e..eedced0 100644 --- a/examples/Demo/Buttons.elm +++ b/examples/Demo/Buttons.elm @@ -8,6 +8,7 @@ import Effects import Material.Button as Button exposing (..) import Material.Grid as Grid import Material.Icon as Icon +import Material.Style exposing (Style) -- MODEL @@ -15,48 +16,32 @@ import Material.Icon as Icon type alias Index = (Int, Int) - -tabulate' : Int -> List a -> List (Int, a) -tabulate' i ys = - case ys of - [] -> [] - y :: ys -> (i, y) :: tabulate' (i+1) ys - - -tabulate : List a -> List (Int, a) -tabulate = tabulate' 0 - - type alias View = - Signal.Address Button.Action -> Button.Model -> Coloring -> List Html -> Html + Signal.Address Button.Action -> Button.Model -> List Style -> List Html -> Html type alias View' = Signal.Address Button.Action -> Button.Model -> Html -view' : View -> Coloring -> Html -> Signal.Address Button.Action -> Button.Model -> Html +view' : View -> List Style -> Html -> Signal.Address Button.Action -> Button.Model -> Html view' view coloring elem addr model = view addr model coloring [elem] -describe : String -> Bool -> Coloring -> String -describe kind ripple coloring = - let - c = - case coloring of - Plain -> "plain" - Colored -> "colored" - Primary -> "primary" - Accent -> "accent" - in +describe : String -> Bool -> String -> String +describe kind ripple c = kind ++ ", " ++ c ++ if ripple then " w/ripple" else "" row : (String, Html, View) -> Bool -> List (Int, (Bool, String, View')) row (kind, elem, v) ripple = - [ Plain, Colored, Primary, Accent ] - |> List.map (\c -> (ripple, describe kind ripple c, view' v c elem)) - |> tabulate + [ ("plain", []) + , ("colored", [Button.colored]) + , ("primary", [Button.primary]) + , ("accent", [Button.accent]) + ] + |> List.map (\(d,c) -> (ripple, describe kind ripple d, view' v c elem)) + |> List.indexedMap (,) buttons : List (List (Index, (Bool, String, View'))) @@ -68,8 +53,7 @@ buttons = , ("icon", Icon.i "flight_land", Button.icon) ] |> List.concatMap (\a -> [row a False, row a True]) - |> tabulate - |> List.map (\(i, row) -> List.map (\(j, x) -> ((i,j), x)) row) + |> List.indexedMap (\i r -> List.map (\(j, x) -> ((i,j), x)) r) model : Model @@ -141,4 +125,4 @@ view addr model = ] ) ) - |> Grid.grid + |> Grid.grid [] diff --git a/examples/Demo/Grid.elm b/examples/Demo/Grid.elm index 0ddf04f..4e8992d 100644 --- a/examples/Demo/Grid.elm +++ b/examples/Demo/Grid.elm @@ -8,18 +8,18 @@ view : List Html view = [ [1..12] |> List.map (\i -> cell [size All 1] [text "1"]) - |> grid + |> grid [] , [1 .. 3] |> List.map (\i -> cell [size All 4] [text <| "4"]) - |> grid + |> grid [] , [ cell [size All 6] [text "6"] , cell [size All 4] [text "4"] , cell [size All 2] [text "2"] - ] |> grid + ] |> grid [] , [ cell [size All 6, size Tablet 8] [text "6 (8 tablet)"] , cell [size All 4, size Tablet 6] [text "4 (6 tablet)"] , cell [size All 2, size Phone 4] [text "2 (4 phone)"] - ] |> grid + ] |> grid [] , Html.node "style" [] [text """ .mdl-cell { text-sizing: border-box; @@ -34,3 +34,5 @@ view = } """] ] + + diff --git a/examples/Demo/Snackbar.elm b/examples/Demo/Snackbar.elm index 4a8f146..acb12d7 100644 --- a/examples/Demo/Snackbar.elm +++ b/examples/Demo/Snackbar.elm @@ -4,10 +4,11 @@ import Effects exposing (Effects, none) import Html exposing (..) import Html.Attributes exposing (class, style, key) import Array exposing (Array) -import String import Markdown +import Material.Color as Color +import Material.Style exposing (styled, cs) import Material.Snackbar as Snackbar import Material.Button as Button exposing (Action(..)) import Material.Grid exposing (..) @@ -102,44 +103,25 @@ update action model = -- VIEW --- This should be supported by the library somehow. -colors : Array String -colors = - [ "indigo" - , "blue" - , "light-blue" - , "cyan" - , "teal" - , "green" - , "light-green" - , "lime" - , "yellow" - , "amber" - , "orange" - , "brown" - , "blue-grey" - , "grey" - , "deep-orange" - , "red" - , "pink" - , "purple" - , "deep-purple" - ] |> Array.fromList - - -clickView : Int -> Html -clickView k = +clickView : Model -> Int -> Html +clickView model k = let color = - Array.get ((k + 4) % Array.length colors) colors - |> Maybe.withDefault "blue" + Array.get ((k + 4) % Array.length Color.palette) Color.palette + |> Maybe.withDefault Color.Teal + |> flip Color.color Color.S500 + + selected = + (k == model.snackbar.seq - 1) && + (Snackbar.isActive model.snackbar /= Nothing) in - div - [ [ "mdl-color--" ++ color - , "mdl-color-text--primary-contrast" - , "mdl-shadow--8dp" - ] |> String.join " " |> class - , style + styled div + [ Color.background color + , Color.text Color.primaryContrast + -- TODO. Should have shadow styles someplace. + , cs <| "mdl-shadow--" ++ if selected then "8dp" else "2dp" + ] + [ style [ ("margin-right", "3ex") , ("margin-bottom", "3ex") , ("padding", "1.5ex") @@ -147,36 +129,39 @@ clickView k = , ("border-radius", "2px") , ("display", "inline-block") , ("text-align", "center") + , ("transition", "box-shadow 333ms ease-in-out 0s") ] , key (toString k) ] [ text <| toString k ] + view : Signal.Address Action -> Model -> Html view addr model = div [] [ intro - , grid + , grid [] -- TODO. Buttons should be centered. Desperately need to be able -- to add css/classes to top-level element of components (div -- in grid, button in button, div in textfield etc.) [ cell [ size All 2, size Phone 2, align Top ] [ Button.raised (Signal.forwardTo addr ToastButtonAction) - model.toastButton Button.Plain + model.toastButton + [] [ text "Toast" ] ] , cell [ size All 2, size Phone 2, align Top ] [ Button.raised (Signal.forwardTo addr SnackbarButtonAction) model.snackbarButton - Button.Plain + [] [ text "Snackbar" ] ] , cell [ size Desktop 7, size Tablet 3, size Phone 12, align Top ] - (model.clicked |> List.reverse |> List.map clickView) + (model.clicked |> List.reverse |> List.map (clickView model)) ] , Snackbar.view (Signal.forwardTo addr SnackbarAction) model.snackbar ] diff --git a/examples/Demo/Textfields.elm b/examples/Demo/Textfields.elm index e5634b0..5b336c9 100644 --- a/examples/Demo/Textfields.elm +++ b/examples/Demo/Textfields.elm @@ -49,4 +49,4 @@ view addr model = ) |> Array.toList |> List.map (\x -> cell [size All 3] [x]) - |> grid + |> grid [] diff --git a/src/Material.elm b/src/Material.elm index aaf9616..fb34d4f 100644 --- a/src/Material.elm +++ b/src/Material.elm @@ -1,13 +1,16 @@ module Material - ( topWithColors, top + ( topWithScheme, top , Updater', Updater, lift, lift' ) where {-| Material Design component library for Elm based on Google's [Material Design Lite](https://www.getmdl.io/). +This module contains only initial CSS setup and convenience function for alleviating +the pain of the missing component architecture in Elm. + # Loading CSS -@docs topWithColors, top +@docs topWithScheme, top # Component convienience @docs Updater', Updater, lift', lift @@ -19,38 +22,30 @@ import Html exposing (..) import Html.Attributes exposing (..) import Effects exposing (..) -import Material.Color exposing (..) +import Material.Color exposing (Palette(..), Color) -css : Color -> Color -> String -css primary accent = - let cssFile = - case accent of - Grey -> "" - Brown -> "" - BlueGrey -> "" - Primary -> "" - Accent -> "" - _ -> "." ++ cssName primary ++ "-" ++ cssName accent - in - [ "https://code.getmdl.io/1.1.1/material" ++ cssFile ++ ".min.css" - , "https://fonts.googleapis.com/icon?family=Material+Icons" - , "https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext" - ] - |> List.map (\url -> "@import url(" ++ url ++ ");") - |> String.join "\n" + +scheme : Palette -> Palette -> String +scheme primary accent = + [ "https://code.getmdl.io/1.1.2/" ++ Material.Color.scheme primary accent + , "https://fonts.googleapis.com/icon?family=Material+Icons" + , "https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext" + ] + |> List.map (\url -> "@import url(" ++ url ++ ");") + |> String.join "\n" {-| Top-level container for Material components. This will force loading of -Material Design Lite CSS files. Any component you use must be contained +Material Design Lite CSS files Any component you use must be contained in this container, OR you must manually add something like the following to your .html file: - + Supply primary and accent colors as parameters. Refer to the Material Design Lite [Custom CSS theme builder](https://www.getmdl.io/customize/index.html) @@ -65,15 +60,15 @@ on page load. The container is included only to provide an option to get started quickly and for use with elm-reactor. -} -topWithColors : Color -> Color -> Html -> Html -topWithColors primary accent content = +topWithScheme: Palette -> Palette -> Html -> Html +topWithScheme primary accent content = div [] <| {- Trick from Peter Damoc to load CSS outside of . https://github.com/pdamoc/elm-mdl/blob/master/src/Mdl.elm#L63 -} [ node "style" [ type' "text/css"] - [ text <| css primary accent] + [ Html.text <| scheme primary accent] , content ] @@ -83,8 +78,7 @@ topWithColors primary accent content = top : Html -> Html top content = -- Force default color-scheme by picking an invalid combination. - topWithColors Grey Grey content - + topWithScheme Grey Grey content diff --git a/src/Material/Button.elm b/src/Material/Button.elm index f278daa..dc1731c 100644 --- a/src/Material/Button.elm +++ b/src/Material/Button.elm @@ -1,7 +1,7 @@ module Material.Button ( Model, model, Action(Click), update - , Coloring(..) , flat, raised, fab, minifab, icon + , Button, colored, primary, accent ) where {-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#buttons-section): @@ -28,12 +28,15 @@ See also the # Component @docs Model, model, Action, update +# Style +@docs Button, colored, primary, accent + # View Refer to the [Material Design Specification](https://www.google.com/design/spec/components/buttons.html) for details about what type of buttons are appropriate for which situations. -@docs Coloring, flat, raised, fab, minifab, icon +@docs flat, raised, fab, minifab, icon -} @@ -41,8 +44,10 @@ import Html exposing (..) import Html.Attributes exposing (..) import Html.Events exposing (onClick) import Effects exposing (Effects, none) +import Signal exposing (Address, forwardTo) import Material.Helpers as Helpers +import Material.Style exposing (Style, cs, cs', styled) import Material.Ripple as Ripple {-| MDL button. @@ -100,40 +105,50 @@ update action model = -- VIEW -{-| Coloring of a button. `Plain` respectively `Colored` is the button's -uncolored respectively colored defaults. -`Primary` respectively `Accent` chooses a colored button with the indicated -color. +{-| Type tag for button styles. -} -type Coloring - = Plain - | Colored - | Primary - | Accent +type Button = X -view : String -> Signal.Address Action -> Model -> Coloring -> List Html -> Html -view kind addr model coloring html = - button - [ classList - [ ("mdl-button", True) - , ("mdl-js-button", True) - , ("mdl-js-ripple-effect", model /= S Nothing) - -- Color effect. - , ("mdl-button--colored", coloring == Colored) - , ("mdl-button--primary", coloring == Primary) - , ("mdl-button--accent", coloring == Accent) - -- Kind. - , (kind, kind /= "") - ] - , Helpers.blurOn "mouseup" +{-| Color button with primary or accent color depending on button type. +-} +colored : Style +colored = + cs "mdl-button--colored" + + +{-| Color button with primary color. +-} +primary : Style +primary = + cs "mdl-button--primary" + +{-| Color button with accent color. +-} +accent : Style +accent = + cs "mdl-button--accent" + + +{-| Component view. +-} +view : String -> Address Action -> Model -> List Style -> List Html -> Html +view kind addr model styling html = + styled button + ( cs "mdl-button" + :: cs "mdl-js-button" + :: cs' "mdl-js-ripple-effect" (model /= S Nothing) + :: cs' kind (kind /= "") + :: styling + ) + [ Helpers.blurOn "mouseup" , Helpers.blurOn "mouseleave" , onClick addr Click ] (case model of S (Just ripple) -> Ripple.view - (Signal.forwardTo addr Ripple) + (forwardTo addr Ripple) [ class "mdl-button__ripple-container" , Helpers.blurOn "mouseup" ] ripple @@ -161,7 +176,7 @@ Example use (uncolored flat button, assuming properly setup model): flatButton = Button.flat addr model Button.Plain [text "Click me!"] -} -flat : Signal.Address Action -> Model -> Coloring -> List Html -> Html +flat : Address Action -> Model -> List Style -> List Html -> Html flat = view "" @@ -182,7 +197,7 @@ Example use (colored raised button, assuming properly setup model): raisedButton = Button.raised addr model Button.Colored [text "Click me!"] -} -raised : Signal.Address Action -> Model -> Coloring -> List Html -> Html +raised : Address Action -> Model -> List Style -> List Html -> Html raised = view "mdl-button--raised" @@ -208,13 +223,13 @@ Example use (colored with a '+' icon): fabButton : Html fabButton = fab addr model Colored [Icon.i "add"] -} -fab : Signal.Address Action -> Model -> Coloring -> List Html -> Html +fab : Address Action -> Model -> List Style -> List Html -> Html fab = view "mdl-button--fab" {-| Mini-sized variant of a Floating Action Button; refer to `fab`. -} -minifab : Signal.Address Action -> Model -> Coloring -> List Html -> Html +minifab : Address Action -> Model -> List Style -> List Html -> Html minifab = view "mdl-button--mini-fab" @@ -230,5 +245,5 @@ Example use (no color, displaying a '+' icon): iconButton : Html iconButton = icon addr model Plain [Icon.i "add"] -} -icon : Signal.Address Action -> Model -> Coloring -> List Html -> Html +icon : Address Action -> Model -> List Style -> List Html -> Html icon = view "mdl-button--icon" diff --git a/src/Material/Color.elm b/src/Material/Color.elm index cae7f03..602e68d 100644 --- a/src/Material/Color.elm +++ b/src/Material/Color.elm @@ -1,24 +1,74 @@ module Material.Color - ( Color(..) - , cssName + ( Palette(..), palette + , Shade(..), shades + , Color + , color + , white, black + , primary, primaryDark, primaryContrast + , accent, accentContrast + , background + , text + , scheme ) where -{-| Fixed Material Design Lite color palette. -@docs Color(..) +{-| Material Design color palette. -# Internals +@docs Color -These are used internally in the Material package and is likely not useful -to you. +# Palette -@docs cssName : Color -> String +From the +[Material Design Specification](https://www.google.com/design/spec/style/color.html#color-color-palette): + +> The color palette starts with primary colors and fills in the spectrum to +> create a complete and usable palette for Android, Web, and iOS. Google suggests +> using the 500 colors as the primary colors in your app and the other colors as +> accents colors. + +@docs Color, white, black, Palette, Shade, color + +# Color Schemes + +From the +[Material Design Specification](https://www.google.com/design/spec/style/color.html#color-color-palette): + +> [The Material Design] palette comprises primary and accent colors that can be +> used for illustration or to develop your brand colors. They’ve been designed +> to work harmoniously with each other. [...] Apps that don’t have existing +> color schemes may select colors from the material design color palette. Limit +> your selection of colors to three hues from the primary palette and one +> accent color from the secondary palette. + +The Material Design Lite CSS supports this selection; you choose your primary +and accent colors when loading MDL css; see +`Material.top`. Many components can be instructed to take on one of the four hues +mentioned above; below you'll find constructors for these scheme-dependent +colors. + +@docs primary, primaryDark, primaryContrast, accent, accentContrast + +# Styles +@docs background, text + +# Misc +@docs palette, shades, scheme -} +import Array exposing (Array) + + +import Material.Style exposing (..) + + + +-- PALETTE + + {-| Color palette. -} -type Color +type Palette = Indigo | Blue | LightBlue @@ -38,15 +88,37 @@ type Color | Pink | Purple | DeepPurple - -- Not actual colors - | Primary - | Accent -{-| MDL CSS name of given color. +{-| Color palette as array. Mostly useful for demos. -} -cssName : Color -> String -cssName color = +palette : Array Palette +palette = + Array.fromList + [ Indigo + , Blue + , LightBlue + , Cyan + , Teal + , Green + , LightGreen + , Lime + , Yellow + , Amber + , Orange + , Brown + , BlueGrey + , Grey + , DeepOrange + , Red + , Pink + , Purple + , DeepPurple + ] + + +paletteName : Palette -> String +paletteName color = case color of Indigo -> "indigo" Blue -> "blue" @@ -67,5 +139,156 @@ cssName color = Pink -> "pink" Purple -> "purple" DeepPurple -> "deep-purple" - Primary -> "primary" - Accent -> "accent" + + +{-| +-} +type Shade + = S50 + | S100 + | S200 + | S300 + | S400 + | S500 + | S600 + | S700 + | S800 + | S900 + | A100 + | A200 + | A400 + | A700 + + +{-| Shades as array. Mostly useful for demos. +-} +shades : Array Shade +shades = + Array.fromList + [ S50 + , S100 + , S200 + , S300 + , S400 + , S500 + , S600 + , S700 + , S800 + , S900 + , A100 + , A200 + , A400 + , A700 + ] + + +shadeName : Shade -> String +shadeName shade = + case shade of + S50 -> "50" + S100 -> "100" + S200 -> "200" + S300 -> "300" + S400 -> "400" + S500 -> "500" + S600 -> "600" + S700 -> "700" + S800 -> "800" + S900 -> "900" + A100 -> "A100" + A200 -> "A200" + A400 -> "A400" + A700 -> "A700" + + + +-- COLOR CONSTRUCTORS + + +{-| Type of colors. +-} +type Color = C String + + +{-| Construct a specific color given a palette base hue and a shade. +-} +color : Palette -> Shade -> Color +color palette shade = + C (paletteName palette ++ "-" ++ shadeName shade) + + +{-| White color. +-} +white : Color +white = C "white" + + +{-| Black color. +-} +black : Color +black = C "black" + + +{-| Primary color of the theme. +-} +primary : Color +primary = C "primary" + + +{-| Primary color, dark variant. +-} +primaryDark : Color +primaryDark = C "primary-dark" + + +{-| Primary color, contrast variant. +-} +primaryContrast : Color +primaryContrast = C "primary-contrast" + + +{-| Accent color. +-} +accent : Color +accent = C "accent" + + +{-| Accent color, contrast variant. +-} +accentContrast : Color +accentContrast = C "accent-contrast" + + +-- COLOR STYLES + + +{-| Background color. +-} +background : Color -> Style +background (C color) = + cs ("mdl-color--" ++ color) + +{-| Text or foreground color. +-} +text : Color -> Style +text (C color) = + cs ("mdl-color-text--" ++ color) + + +-- SCHEME/CSS SETUP + +{-| Given primary and accent base colors, compute name of appropriate MDL .css-file. +(You are not likely to need to call this function.) +-} +scheme : Palette -> Palette -> String +scheme primary accent = + let cssFile = + case accent of + Grey -> "" + Brown -> "" + BlueGrey -> "" + _ -> "." ++ paletteName primary ++ "-" ++ paletteName accent + in + "material" ++ cssFile ++ ".min.css" + + diff --git a/src/Material/Grid.elm b/src/Material/Grid.elm index 38f64db..e42e408 100644 --- a/src/Material/Grid.elm +++ b/src/Material/Grid.elm @@ -1,9 +1,8 @@ module Material.Grid - ( grid, gridWithOptions, Options + ( grid, noSpacing, maxWidth , cell , Device(..) , Align(..) - , CellConfig , size , offset , align @@ -54,80 +53,44 @@ Example use: ] # Grid container -@docs grid, Options, gridWithOptions +@docs grid, noSpacing, maxWidth # Cells -Cells are configured with a `List CellConfig`; this configuration dictates the -size, offset, and alignment behaviour of the cell. Construct -individual `CellConfig` elements using `size`, `offset`, and `align`. +Cells are configured with a `List Style`; this configuration dictates the +size, offset, etc. of the cell. -@docs cell, CellConfig, Device, size, offset, Align, align, hide, order +@docs cell, Device, size, offset, Align, align, hide, order -} -{- TODO. - -1. From MDL docs: - - "You can set a maximum grid width, after which the grid stays centered with - padding on either side, by setting its max-width CSS property." - -2. mdl-cell--stretch +{- TODO. I don't understand what "mdl-cell--stretch" or when it might be appropriate. -} import Html exposing (..) import Html.Attributes exposing (..) -import String + import Material.Helpers exposing (clip, filter) +import Material.Style as Style exposing (Style, cs, styled) -{-| The `spacing` parameter indicates whether or not the grid should have -spacing between cells. The `maxWidth` parameter, which must be a valid CSS -dimension, indicates the maximum -width of the grid; if the grid is in a larger container, it stays centered with -padding on either side. +{-| Set grid to have no spacing between cells. -} -type alias Options = - { spacing : Bool - , maxWidth : Maybe String - } +noSpacing : Style +noSpacing = Style.cs "mdl-grid--no-spacing" - -{-| By default, a grid has spacing between columns, but no maximum width. +{-| Set maximum grid width. If more space is available, the grid stays centered with +padding on either side. Width must be a valid CSS dimension. -} -defaultOptions : Options -defaultOptions = - { spacing = True - , maxWidth = Nothing - } - +maxWidth : String -> Style +maxWidth w = Style.css "max-width" w {-| Construct a grid with options. -} -gridWithOptions : Options -> List Cell -> Html -gridWithOptions options elms = - div - [ classList - [ ("mdl-grid", True) - , ("mdl-grid--no-spacing", not options.spacing) - ] - , style ( - options.maxWidth - |> Maybe.map (\maxwidth -> [("max-width", maxwidth)]) - |> Maybe.withDefault [] - ) - ] - (List.map (\(Cell elm) -> elm) elms) - - -{-| Construct a grid with default options (i.e., default spacing, no -maximum width.) Use `cell` some number of times to construct the argument -list. --} -grid : List Cell -> Html -grid = gridWithOptions defaultOptions +grid : List Style -> List Cell -> Html +grid styling cells = + styled div (cs "mdl-grid" :: styling) [] (List.map (\(Cell elm) -> elm) cells) {-| Device specifiers, used with `size` and `offset`. (A `Device` really @@ -136,11 +99,6 @@ encapsulates a screen size.) type Device = All | Desktop | Tablet | Phone -{-| Opaque type; construct with `size`, `offset`, `align`, etc. --} -type CellConfig = Config String - - {- Opaque cell type. -} type Cell = Cell Html @@ -158,7 +116,7 @@ suffix device = {-| Specify cell size. On devices of type `Device`, the cell being specified spans `Int` columns. -} -size : Device -> Int -> CellConfig +size : Device -> Int -> Style size device k = let c = case device of @@ -167,14 +125,14 @@ size device k = Tablet -> clip 1 8 k Phone -> clip 1 4 k in - "mdl-cell--" ++ toString c ++ "-col" ++ suffix device |> Config + "mdl-cell--" ++ toString c ++ "-col" ++ suffix device |> cs {-| Specify cell offset, i.e., empty number of empty cells before the present one. On devices of type `Device`, leave `Int` columns blank before the present one begins. -} -offset : Device -> Int -> CellConfig +offset : Device -> Int -> Style offset device k = let c = case device of @@ -183,7 +141,7 @@ offset device k = Tablet -> clip 1 7 k Phone -> clip 1 3 k in - "mdl-cell--" ++ toString c ++ "-offset" ++ suffix device |> Config + "mdl-cell--" ++ toString c ++ "-offset" ++ suffix device |> cs {-| Vertical alignment of cells; use with `align`. @@ -193,9 +151,9 @@ type Align = Top | Middle | Bottom {-| Specify vertical cell alignment. See `Align`. -} -align : Align -> CellConfig +align : Align -> Style align a = - Config <| case a of + cs <| case a of Top -> "mdl-cell--top" Middle -> "mdl-cell--middle" Bottom -> "mdl-cell--bottom" @@ -203,26 +161,23 @@ align a = {-| Specify that a cell should be hidden on given `Device`. -} -hide : Device -> CellConfig +hide : Device -> Style hide device = - Config <| case device of + cs <| case device of All -> "" _ -> "mdl-cell--hide-" ++ suffix device {-| Specify that a cell should re-order itself to position 'Int' on `Device`. -} -order : Device -> Int -> CellConfig +order : Device -> Int -> Style order device n = - Config <| "mdl-cell--order-" ++ (toString <| clip 1 12 n) ++ suffix device + cs <| "mdl-cell--order-" ++ (toString <| clip 1 12 n) ++ suffix device -{-| Construct a cell for use in the argument list for `grid`. -Construct the cell configuration (first argument) using `size`, `offset`, and -`align`. Supply contents for the cell as the second argument. +{-| Construct a cell for use in the argument list for `grid`. Note that this +module defines various styles to set size, offset, etc. of the cell. -} -cell : List CellConfig -> List Html -> Cell -cell configs elms = - Cell <| div - [class <| String.join " " ("mdl-cell" :: (List.map (\(Config s) -> s) configs))] - elms +cell : List Style -> List Html -> Cell +cell styling elms = + Cell (styled div (cs "mdl-cell" :: styling) [] elms) diff --git a/src/Material/Snackbar.elm b/src/Material/Snackbar.elm index 689d72e..d90563d 100644 --- a/src/Material/Snackbar.elm +++ b/src/Material/Snackbar.elm @@ -1,5 +1,5 @@ module Material.Snackbar - ( Contents, Model, model, toast, snackbar + ( Contents, Model, model, toast, snackbar, isActive , Action(Add, Action), update , view ) where @@ -84,6 +84,25 @@ snackbar message actionMessage action = , fade = 250 } +{-| TODO +-} +isActive : Model a -> Maybe (Contents a) +isActive model = + case model.state of + Active c -> + Just c + + _ -> + Nothing + + +contentsOf : Model a -> Maybe (Contents a) +contentsOf model = + case model.state of + Inert -> Nothing + Active contents -> Just contents + Fading contents -> Just contents + -- SNACKBAR STATE MACHINE @@ -205,14 +224,6 @@ update action model = -- VIEW -contentsOf : Model a -> Maybe (Contents a) -contentsOf model = - case model.state of - Inert -> Nothing - Active contents -> Just contents - Fading contents -> Just contents - - view : Signal.Address (Action a) -> Model a -> Html view addr model = let diff --git a/src/Material/Textfield.elm b/src/Material/Textfield.elm index 3bc1fb7..975fa0b 100644 --- a/src/Material/Textfield.elm +++ b/src/Material/Textfield.elm @@ -127,6 +127,7 @@ update action model = {-| Component view. -} view : Signal.Address Action -> Model -> Html +-- TODO: Should take Style argument. view addr model = let hasFloat = model.label |> Maybe.map .float |> Maybe.withDefault False hasError = model.error |> Maybe.map (always True) |> Maybe.withDefault False