mirror of
https://github.com/correl/elm-mdl.git
synced 2024-12-18 03:00:11 +00:00
Added styling to Grid, Buttons.
This commit is contained in:
Søren Debois
parent
837784ad25
commit
4b94950e8b
12 changed files with 413 additions and 240 deletions
5
Makefile
5
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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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 []
|
||||
|
|
|
|||
|
|
@ -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 =
|
|||
}
|
||||
"""]
|
||||
]
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
]
|
||||
|
|
|
|||
|
|
@ -49,4 +49,4 @@ view addr model =
|
|||
)
|
||||
|> Array.toList
|
||||
|> List.map (\x -> cell [size All 3] [x])
|
||||
|> grid
|
||||
|> grid []
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
<!-- MDL -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.min.css" />
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.min.css" />
|
||||
|
||||
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 <head>.
|
||||
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
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue