From c7c035c3491fbf1e120d7fce858eb1b3ba7e49d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Debois?= Date: Tue, 12 Apr 2016 23:39:35 +0200 Subject: [PATCH] Made proper elevation constructors. --- demo/Demo/Elevation.elm | 12 ++++--- demo/Demo/Snackbar.elm | 4 +-- src/Material/Elevation.elm | 72 ++++++++++++++++++++++++++++++++------ 3 files changed, 71 insertions(+), 17 deletions(-) diff --git a/demo/Demo/Elevation.elm b/demo/Demo/Elevation.elm index 64f389f..d86310b 100644 --- a/demo/Demo/Elevation.elm +++ b/demo/Demo/Elevation.elm @@ -2,7 +2,7 @@ module Demo.Elevation where import Html exposing (..) -import Material.Style as Style exposing (cs, css) +import Material.Style as Style exposing (cs, css, Style) import Material.Elevation as Elevation import Demo.Page as Page @@ -11,21 +11,23 @@ import Demo.Page as Page -- VIEW -elevate : Int -> Html -elevate k = +elevate : (Style, Int) -> Html +elevate (e, k) = Style.div [ css "height" "96px" , css "width" "128px" , css "margin" "40px" + -- Center , css "display" "inline-flex" , css "flex-flow" "row wrap" , css "justify-content" "center" , css "align-items" "center" - , Elevation.shadow k + , e ] [ Style.div [ cs ".mdl-typography--title-color-contrast" -- TODO. Typography! + , css "box-radius" "2pt" ] [ text <| toString k ] ] @@ -33,7 +35,7 @@ elevate k = view : Html view = - 0 :: Elevation.validElevations + (cs "", 0) :: Elevation.elevations |> List.map elevate |> (::) ( p [] [ text """Below are boxes drawn at various elevations.""" ] ) |> Page.body1 "Elevation" srcUrl intro references diff --git a/demo/Demo/Snackbar.elm b/demo/Demo/Snackbar.elm index 9d8a269..8141b52 100644 --- a/demo/Demo/Snackbar.elm +++ b/demo/Demo/Snackbar.elm @@ -12,7 +12,7 @@ import Material.Style exposing (styled, cs, css) import Material.Snackbar as Snackbar import Material.Button as Button exposing (Action(..)) import Material.Grid exposing (..) -import Material.Elevation as Elevation +import Material.Elevation exposing (e2, e8) import Material import Demo.Page as Page @@ -236,7 +236,7 @@ clickView model (k, square) = [ styled div [ Color.background color , Color.text Color.primaryContrast - , Elevation.shadow (if selected then 8 else 2) + , if selected then e8 else e2 ] [ style [ -- Center contents diff --git a/src/Material/Elevation.elm b/src/Material/Elevation.elm index 6aa55e8..c9f9b43 100644 --- a/src/Material/Elevation.elm +++ b/src/Material/Elevation.elm @@ -1,10 +1,9 @@ module Material.Elevation - ( shadow - , validElevations + ( e2, e3, e4, e6, e8, e16, e24 + , elevations , transition ) where - {-| 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 @@ -36,14 +35,19 @@ Refer to for a live demo. -# Component -@docs shadow, validElevations, transition +# Elevations +Each of the values below denote an elevation of a certain heigh, e.g., +`e4` will cast a shadow indicating an elevation of 4dp. +@docs e2, e3, e4, e6, e8, e16, e24 +@docs elevations + +# Transitions +@docs transition -} import Material.Style exposing (..) - {-| Indicate the elevation of an element by giving it a shadow. The argument indicates intended elevation; valid values are 2, 3, 4, 6, 8, 16, 24. Invalid values produce no shadow. @@ -56,11 +60,59 @@ 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 ] +e2 : Style +e2 = shadow 2 + + +{-| +-} +e3 : Style +e3 = shadow 3 + + +{-| +-} +e4 : Style +e4 = shadow 4 + +{-| +-} +e6 : Style +e6 = shadow 6 + + +{-| +-} +e8 : Style +e8 = shadow 8 + + +{-| +-} +e16 : Style +e16 = shadow 16 + + +{-| +-} +e24 : Style +e24 = shadow 24 + + +{-| List of all elevations and their depth in dp. +-} +elevations : List (Style, Int) +elevations = + [ (e2, 2) + , (e3, 3) + , (e4, 4) + , (e6, 6) + , (e8, 8) + , (e16, 16) + , (e24, 24) + ] {-| Add a CSS-transition to changes in elevation. Supply a transition