mirror of
https://github.com/correl/elm-mdl.git
synced 2025-01-11 19:12:57 +00:00
Added Elevation module, closing #19.
This commit is contained in:
Søren Debois
parent
7d0f70a7d4
commit
6ef3c1523a
5 changed files with 72 additions and 76 deletions
|
|
@ -1,7 +1,7 @@
|
|||
module Main (..) where
|
||||
import StartApp
|
||||
import Html exposing (..)
|
||||
import Html.Attributes exposing (href, class, style)
|
||||
import Html.Attributes exposing (href, class, style, key)
|
||||
import Signal exposing (Signal)
|
||||
import Effects exposing (..)
|
||||
import Task
|
||||
|
|
@ -26,6 +26,7 @@ import Demo.Grid
|
|||
import Demo.Textfields
|
||||
import Demo.Snackbar
|
||||
import Demo.Badges
|
||||
import Demo.Elevation
|
||||
|
||||
--import Demo.Template
|
||||
|
||||
|
|
@ -140,7 +141,6 @@ update action model =
|
|||
HopAction _ ->
|
||||
( model, Effects.none )
|
||||
|
||||
|
||||
ButtonsAction a -> lift .buttons (\m x->{m|buttons =x}) ButtonsAction Demo.Buttons.update a model
|
||||
|
||||
TextfieldAction a -> lift .textfields (\m x->{m|textfields=x}) TextfieldAction Demo.Textfields.update a model
|
||||
|
|
@ -189,14 +189,15 @@ header =
|
|||
|
||||
tabs : List (String, String, Addr -> Model -> Html)
|
||||
tabs =
|
||||
[ ("Snackbar", "snackbar", \addr model ->
|
||||
[ ("Buttons", "buttons", \addr model ->
|
||||
Demo.Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons)
|
||||
, ("Badges", "badges", \addr model -> Demo.Badges.view )
|
||||
, ("Elevation", "elevation", \addr model -> Demo.Elevation.view )
|
||||
, ("Grid", "grid", \addr model -> Demo.Grid.view)
|
||||
, ("Snackbar", "snackbar", \addr model ->
|
||||
Demo.Snackbar.view (Signal.forwardTo addr SnackbarAction) model.snackbar)
|
||||
, ("Textfields", "textfields", \addr model ->
|
||||
Demo.Textfields.view (Signal.forwardTo addr TextfieldAction) model.textfields)
|
||||
, ("Buttons", "buttons", \addr model ->
|
||||
Demo.Buttons.view (Signal.forwardTo addr ButtonsAction) model.buttons)
|
||||
, ("Grid", "grid", \addr model -> Demo.Grid.view)
|
||||
, ("Badges", "badges", \addr model -> Demo.Badges.view )
|
||||
{-
|
||||
, ("Template", \addr model ->
|
||||
[Demo.Template.view (Signal.forwardTo addr TemplateAction) model.template])
|
||||
|
|
@ -269,9 +270,10 @@ view addr model =
|
|||
div
|
||||
[ style
|
||||
[ ( "margin", "auto" )
|
||||
, ( "padding-left", "5%" )
|
||||
, ( "padding-right", "5%" )
|
||||
, ( "padding-left", "8%" )
|
||||
, ( "padding-right", "8%" )
|
||||
]
|
||||
, key <| toString (fst model.routing)
|
||||
]
|
||||
[ (Array.get model.layout.selectedTab tabViews
|
||||
|> Maybe.withDefault e404)
|
||||
|
|
|
|||
|
|
@ -1,61 +1,50 @@
|
|||
module Demo.Elevation where
|
||||
|
||||
import Effects exposing (Effects, none)
|
||||
import Html exposing (..)
|
||||
|
||||
import Markdown
|
||||
import Material.Style as Style exposing (cs, css)
|
||||
import Material.Elevation as Elevation
|
||||
|
||||
import Material.Template as Template
|
||||
import Material exposing (lift, lift')
|
||||
|
||||
|
||||
-- MODEL
|
||||
|
||||
|
||||
type alias Model =
|
||||
{ template : Template.Model
|
||||
}
|
||||
|
||||
|
||||
model : Model
|
||||
model =
|
||||
{ template = Template.model
|
||||
}
|
||||
|
||||
|
||||
-- ACTION, UPDATE
|
||||
|
||||
|
||||
type Action
|
||||
= TemplateAction Template.Action
|
||||
|
||||
|
||||
update : Action -> Model -> (Model, Effects Action)
|
||||
update action model =
|
||||
case action of
|
||||
TemplateAction action' -> lift .template (\m x -> {m|template=x}) TemplateAction Template.update action' model
|
||||
import Demo.Page as Page
|
||||
|
||||
|
||||
-- VIEW
|
||||
|
||||
|
||||
|
||||
view : Signal.Address Action -> Model -> Html
|
||||
view addr model =
|
||||
div []
|
||||
[ intro
|
||||
, Template.view (Signal.forwardTo addr TemplateAction) model.template
|
||||
elevate : Int -> Html
|
||||
elevate k =
|
||||
Style.div
|
||||
[ css "height" "96px"
|
||||
, css "width" "128px"
|
||||
, css "margin" "40px"
|
||||
, css "display" "inline-flex"
|
||||
, css "flex-flow" "row wrap"
|
||||
, css "justify-content" "center"
|
||||
, css "align-items" "center"
|
||||
, Elevation.shadow k
|
||||
]
|
||||
[ Style.div
|
||||
[ cs ".mdl-typography--title-color-contrast"
|
||||
-- TODO. Typography!
|
||||
]
|
||||
[ text <| toString k ]
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
view : Html
|
||||
view =
|
||||
0 :: Elevation.validElevations
|
||||
|> List.map elevate
|
||||
|> Page.body "Elevation" srcUrl intro references
|
||||
|
||||
|
||||
|
||||
intro : Html
|
||||
intro = """
|
||||
|
||||
|
||||
{-| From the [Material Design Lite documentation](https://github.com/google/material-design-lite/blob/master/src/shadow/README.md)
|
||||
|
||||
> The Material Design Lite (MDL) shadow is not a component in the same sense as
|
||||
intro =
|
||||
Page.fromMDL "https://github.com/google/material-design-lite/blob/master/src/shadow/README.md" """
|
||||
> The Material Design Lite (MDL) shadow is not a component in the same sense as
|
||||
> an MDL card, menu, or textbox; it is a visual effect that can be assigned to a
|
||||
> user interface element. The effect simulates a three-dimensional positioning of
|
||||
> the element, as though it is slightly raised above the surface it rests upon —
|
||||
|
|
@ -78,24 +67,19 @@ assign shadows only to your own elements.
|
|||
You are encouraged to visit the
|
||||
[Material Design specification](https://www.google.com/design/spec/what-is-material/elevation-shadows.html)
|
||||
for details about appropriate use of shadows.
|
||||
|
||||
# TEMPLATE
|
||||
|
||||
From the
|
||||
[Material Design Lite documentation](https://www.getmdl.io/components/index.html#TEMPLATE-section).
|
||||
|
||||
> ...
|
||||
|
||||
#### See also
|
||||
|
||||
- [Demo source code](https://github.com/debois/elm-mdl/blob/master/examples/Demo/TEMPLATE.elm)
|
||||
- [elm-mdl package documentation](http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-TEMPLATE)
|
||||
- [Material Design Specification](https://www.google.com/design/spec/components/TEMPLATE.html)
|
||||
- [Material Design Lite documentation](https://www.getmdl.io/components/index.html#TEMPLATE)
|
||||
|
||||
#### Demo
|
||||
|
||||
""" |> Markdown.toHtml
|
||||
"""
|
||||
|
||||
|
||||
srcUrl : String
|
||||
srcUrl =
|
||||
"https://github.com/debois/elm-mdl/blob/master/examples/Demo/Elevation.elm"
|
||||
|
||||
|
||||
references : List (String, String)
|
||||
references =
|
||||
[ Page.package "http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-Elevation"
|
||||
, Page.mds "https://www.google.com/design/spec/what-is-material/elevation-shadows.html"
|
||||
, Page.mdl "https://github.com/google/material-design-lite/blob/master/src/shadow/README.md"
|
||||
]
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<!-- 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.2/material.teal-red.min.css" />
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.teal-red.min.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
module Material.Elevation
|
||||
( shadow
|
||||
, validElevations
|
||||
, transition
|
||||
) where
|
||||
|
||||
|
|
@ -32,7 +33,7 @@ for details about appropriate use of shadows.
|
|||
|
||||
|
||||
# Component
|
||||
@docs shadow, transition
|
||||
@docs shadow, validElevations, transition
|
||||
|
||||
-}
|
||||
|
||||
|
|
@ -41,14 +42,23 @@ import Material.Style exposing (..)
|
|||
|
||||
{-| Indicate the elevation of an element by giving it a shadow.
|
||||
The `z` argument indicates intended elevation; valid values
|
||||
are 0--24. The specification uses only the values
|
||||
1-6, 8, 9, 12, 16, 24 for standard UI elements.
|
||||
are 2, 3, 4, 6, 8, 16, 24. Invalid values produce no shadow.
|
||||
|
||||
(The specification uses only the values 1-6, 8, 9, 12, 16, 24 for standard UI
|
||||
elements; MDL sources define all values 0-24, but omits most from production css.)
|
||||
-}
|
||||
shadow : Int -> Style
|
||||
shadow z =
|
||||
cs ("mdl-shadow--" ++ toString z ++ "dp")
|
||||
|
||||
|
||||
{-| Programmatically accessible valid elevations for `shadow`.
|
||||
-}
|
||||
validElevations : List Int
|
||||
validElevations =
|
||||
[ 2, 3, 4, 6, 8, 16, 24 ]
|
||||
|
||||
|
||||
{-| Add a CSS-transition to changes in elevation. Supply a transition
|
||||
duration in milliseconds as argument.
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ To load CSS manually, add the following to your
|
|||
<!-- 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.2/material.min.css" />
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.min.css" />
|
||||
|
||||
# Loading CSS from Elm
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ import Material.Color exposing (Palette(..), Color)
|
|||
|
||||
scheme : Palette -> Palette -> String
|
||||
scheme primary accent =
|
||||
[ "https://code.getmdl.io/1.1.2/" ++ Material.Color.scheme primary accent
|
||||
[ "https://code.getmdl.io/1.1.3/" ++ 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"
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in a new issue