github/elm-mdl
1
0
Fork 0
mirror of https://github.com/correl/elm-mdl.git synced 2024-11-23 11:09:51 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added Style to Layout content builders. Closes #24.

Browse source
This commit is contained in:
Søren Debois 2016-04-21 14:57:58 +02:00
parent 59a4abb0d4
commit 923256cffe
9 changed files with 112 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
demo/Demo.elm
View file

@ -161,13 +161,16 @@ type alias Addr =
drawer : List Html
drawer =
[ Layout.title "Example drawer"
[ Layout.title [] [ text "Example drawer" ]
, Layout.navigation
[]
[ Layout.link
[ href "https://github.com/debois/elm-mdl" ]
[ Style.attribute
<| href "https://github.com/debois/elm-mdl" ]
[ text "github" ]
, Layout.link
[ href "http://package.elm-lang.org/packages/debois/elm-mdl/latest/" ]
[ Style.attribute
<| href "http://package.elm-lang.org/packages/debois/elm-mdl/latest/" ]
[ text "elm-package" ]
]
]
@ -176,15 +179,18 @@ drawer =
header : List Html
header =
[ Layout.row
[ Layout.title "elm-mdl"
[]
[ Layout.title [] [ text "elm-mdl" ]
, Layout.spacer
, Layout.navigation
, Layout.navigation []
[ Layout.link
[href "https://github.com/debois/elm-mdl"]
[span [] [text "github"] ]
[ Style.attribute
<| href "https://github.com/debois/elm-mdl"]
[ span [] [text "github"] ]
, Layout.link
[href "http://package.elm-lang.org/packages/debois/elm-mdl/latest/"]
[text "elm-package"]
[ Style.attribute
<| href "http://package.elm-lang.org/packages/debois/elm-mdl/latest/" ]
[ text "elm-package" ]
]
]
]
@ -215,7 +221,6 @@ e404 _ _ =
[ Style.cs "mdl-typography--display-4"
, Color.background Color.primary
]
[]
[ text "404" ]
]
@ -287,7 +292,7 @@ view addr model =
Layout.view (Signal.forwardTo addr LayoutAction) model.layout
{ header = header
, drawer = drawer
, tabs = tabTitles
, tabs = (tabTitles, [ Color.background (Color.color Color.Teal Color.S400) ])
, main = [ stylesheet, top ]
}
{- The following line is not needed when you manually set up

2
demo/Demo/Badges.elm
View file

@ -39,7 +39,7 @@ view =
[ Badge.withBadge "♥" ]
[ text "Symbol" ]
]
, c [ Icon.view "flight_takeoff" [ Icon.size24, Badge.withBadge "33", Badge.overlap ] [] ]
, c [ Icon.view "flight_takeoff" [ Icon.size24, Badge.withBadge "33", Badge.overlap ] ]
]
]
|> Page.body2 "Badges" srcUrl intro references

1
demo/Demo/Page.elm
View file

@ -92,7 +92,6 @@ title t =
--, cs "mdl-typography--display-4"
-- TODO. Typography module
]
[]
[ text t ]

66
demo/Demo/Snackbar.elm
View file

@ -8,7 +8,7 @@ import Time exposing (Time, millisecond)
import Material.Helpers exposing (map1st, map2nd, pure, delay)
import Material.Color as Color
import Material.Style exposing (styled, cs, css)
import Material.Style as Style exposing (cs, css, Style)
import Material.Snackbar as Snackbar
import Material.Button as Button exposing (Action(..))
import Material.Grid exposing (..)
@ -169,22 +169,20 @@ transitionLength : Time
transitionLength = 150 * millisecond
transitionInner : (String, String)
transitionInner : Style
transitionInner =
("transition"
, "box-shadow 333ms ease-in-out 0s, "
css "transition"
<| "box-shadow 333ms ease-in-out 0s, "
++ "width " ++ toString transitionLength ++ "ms, "
++ "height " ++ toString transitionLength ++ "ms, "
++ "background-color " ++ toString transitionLength ++ "ms"
)
transitionOuter : (String, String)
transitionOuter : Style
transitionOuter =
("transition"
, "width " ++ toString transitionLength ++ "ms ease-in-out 0s, "
css "transition"
<| "width " ++ toString transitionLength ++ "ms ease-in-out 0s, "
++ "margin " ++ toString transitionLength ++ "ms ease-in-out 0s"
)
clickView : Model -> Square -> Html
@ -220,43 +218,39 @@ clickView model (k, square) =
(which animates only width, to cause reflow of surrounding boxes),
and an absolutely positioned inner div (to force animation to start
in the lower-left corner. -}
div
[ style
[ ("height", boxHeight)
, ("width", width)
, ("position", "relative")
, ("display", "inline-block")
, ("margin", margin)
, ("z-index", "0")
Style.div
[ css "height" boxHeight
, css "width" width
, css "position" "relative"
, css "display" "inline-block"
, css "margin" margin
, css "z-index" "0"
, transitionOuter
, Style.attribute (key <| toString k)
{- Interestingly, not setting key messes up CSS transitions in
spectacular ways. -}
]
, key <| toString k
{- Interestingly, not setting key messes up CSS transitions in spectacular ways. -}
]
[ styled div
[ Style.div
[ Color.background color
, Color.text Color.primaryContrast
, if selected then e8 else e2
]
[ style
[ -- Center contents
("display", "inline-flex")
, ("align-items", "center")
, ("justify-content", "center")
, ("flex", "0 0 auto")
-- Center contents
, css "display" "inline-flex"
, css "align-items" "center"
, css "justify-content" "center"
, css "flex" "0 0 auto"
-- Sizing
, ("height", height)
, ("width", width)
, ("border-radius", "2px")
, ("box-sizing", "border-box")
, css "height" height
, css "width" width
, css "border-radius" "2px"
, css "box-sizing" "border-box"
-- Force appearance/disapparenace to be from/to lower-left corner.
, ("position", "absolute")
, ("bottom", "0")
, ("left", "0")
, css "position" "absolute"
, css "bottom" "0"
, css "left" "0"
-- Transitions
, transitionInner
]
]
[ div [] [ text <| toString k ] ]
]

9
src/Material/Button.elm
View file

@ -60,7 +60,7 @@ 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.Style as Style exposing (Style, cs, cs', styled)
import Material.Ripple as Ripple
import Material.Component as Component exposing (Indexed)
@ -147,12 +147,11 @@ view kind addr model styling html =
:: cs "mdl-js-button"
:: cs' "mdl-js-ripple-effect" (model /= S Nothing)
:: cs' kind (kind /= "")
:: Style.attribute (Helpers.blurOn "mouseup")
:: Style.attribute (Helpers.blurOn "mouseleave")
:: Style.attribute (Html.Events.onClick addr Click)
:: styling
)
[ Helpers.blurOn "mouseup"
, Helpers.blurOn "mouseleave"
, Html.Events.onClick addr Click
]
(case model of
S (Just ripple) ->
Ripple.view

4
src/Material/Grid.elm
View file

@ -93,7 +93,7 @@ maxWidth w = Style.css "max-width" w
-}
grid : List Style -> List Cell -> Html
grid styling cells =
styled div (cs "mdl-grid" :: styling) [] (List.map (\(Cell elm) -> elm) cells)
Style.div (cs "mdl-grid" :: styling) (List.map (\(Cell elm) -> elm) cells)
{-| Device specifiers, used with `size` and `offset`. (A `Device` really
@ -184,4 +184,4 @@ module defines various styles to set size, offset, etc. of the cell.
-}
cell : List Style -> List Html -> Cell
cell styling elms =
Cell (styled div (cs "mdl-cell" :: styling) [] elms)
Cell (Style.div (cs "mdl-cell" :: styling) elms)

7
src/Material/Icon.elm
View file

@ -64,13 +64,12 @@ produce clickable icons; use icon buttons in Material.Button.icon for that.
icon : Html
icon = Icon.view "trending_flat" [Icon.size48] []
-}
view : String -> List Style -> List Attribute -> Html
view name styling attrs =
view : String -> List Style -> Html
view name styling =
styled Html.i
( cs "material-icons"
:: styling
)
attrs
[text name]
@ -86,4 +85,4 @@ I.e., to produce a default size (24xp) "trending flat" icon:
icon = Icon.i "trending_flat"
-}
i : String -> Html
i name = view name [] []
i name = view name []

67
src/Material/Layout.elm
View file

@ -56,6 +56,7 @@ import Window
import Material.Helpers exposing (..)
import Material.Ripple as Ripple
import Material.Icon as Icon
import Material.Style as Style exposing (Style, cs, cs')
import DOM
@ -265,29 +266,30 @@ spacer = div [class "mdl-layout-spacer"] []
{-| Title in header row or drawer.
-}
title : String -> Html
title t = span [class "mdl-layout__title"] [text t]
title : List Style -> List Html -> Html
title styles =
Style.span (cs "mdl-layout__title" :: styles)
{-| Container for links.
-}
navigation : List Html -> Html
navigation contents =
navigation : List Style -> List Html -> Html
navigation styles contents =
nav [class "mdl-navigation"] contents
{-| Link.
-}
link : List Attribute -> List Html -> Html
link attrs contents =
a (class "mdl-navigation__link" :: attrs) contents
link : List Style -> List Html -> Html
link styles contents =
Style.styled a (cs "mdl-navigation__link" :: styles) contents
{-| Header row.
-}
row : List Html -> Html
row =
div [ class "mdl-layout__header-row" ]
row : List Style -> List Html -> Html
row styles =
Style.div (cs "mdl-layout__header-row" :: styles)
-- MAIN VIEWS
@ -327,8 +329,8 @@ toList x =
Just y -> [y]
tabsView : Addr -> Model -> List Html -> Html
tabsView addr model tabs =
tabsView : Addr -> Model -> (List Html, List Style) -> Html
tabsView addr model (tabs, tabStyles) =
let chevron direction offset =
div
[ classList
@ -336,22 +338,25 @@ tabsView addr model tabs =
, ("mdl-layout__tab-bar-" ++ direction ++ "-button", True)
]
]
[ Icon.view ("chevron_" ++ direction) [Icon.size24]
[onClick addr (ScrollTab offset)]
[ Icon.view ("chevron_" ++ direction)
[ Icon.size24
, Style.attribute <| onClick addr (ScrollTab offset)
]
-- TODO: Scroll event
]
in
div
[ class "mdl-layout__tab-bar-container"]
Style.div
( cs "mdl-layout__tab-bar-container"
:: []
)
[ chevron "left" -100
, div
[ classList
[ ("mdl-layout__tab-bar", True)
, ("mdl-js-ripple-effect", model.rippleTabs)
, ("mds-js-ripple-effect--ignore-events", model.rippleTabs)
, ("is-casting-shadow", model.mode == Standard)
]
]
, Style.div
( cs "mdl-layout__tab-bar"
:: cs' "mdl-js-ripple-effect" model.rippleTabs
:: cs' "mds-js-ripple-effect--ignore-events" model.rippleTabs
:: cs' "is-casting-shadow" (model.mode == Standard)
:: tabStyles
)
(tabs |> List.indexedMap (\tabIndex tab ->
filter a
[ classList
@ -378,7 +383,6 @@ tabsView addr model tabs =
headerView : Addr -> Model -> (Maybe Html, List Html, Maybe Html) -> Html
headerView addr model (drawerButton, rows, tabs) =
let
_ = Debug.log "foo" model.state
mode =
case model.mode of
Standard -> ""
@ -466,7 +470,7 @@ the title of each tab.
type alias Contents =
{ header : List Html
, drawer : List Html
, tabs : List Html
, tabs : (List Html, List Style)
, main : List Html
}
@ -490,11 +494,14 @@ view addr model { drawer, header, tabs, main } =
-- No drawer: no button.
(Nothing, Nothing)
hasTabs =
not (List.isEmpty (fst tabs))
hasHeader =
not (List.isEmpty tabs && List.isEmpty header)
hasTabs || (not (List.isEmpty header))
tabsElems =
if List.isEmpty tabs then
if not hasTabs then
Nothing
else
Just (tabsView addr model tabs)
@ -511,11 +518,11 @@ view addr model { drawer, header, tabs, main } =
, ("is-upgraded", True)
, ("is-small-screen", (s model).isSmallScreen)
, ("has-drawer", drawer /= [])
, ("has-tabs", tabs /= [])
, ("has-tabs", hasTabs)
, ("mdl-js-layout", True)
, ("mdl-layout--fixed-drawer", model.fixedDrawer && drawer /= [])
, ("mdl-layout--fixed-header", model.fixedHeader && hasHeader)
, ("mdl-layout--fixed-tabs", model.fixedTabs && tabs /= [])
, ("mdl-layout--fixed-tabs", model.fixedTabs && hasTabs)
]
]
[ if hasHeader then

13
src/Material/Style.elm
View file

@ -76,21 +76,18 @@ from a List Style. Use like this:
myDiv =
styled div
[ css "classA", css "classB" ]
[ {- onClick ... (*) -} ]
[ text "This is my div with classes classA and classB!" ]
Note that if you do specify `style`, `class`, or `classList` attributes in
(*), they will be discarded.
-}
styled : (List Attribute -> a) -> List Style -> List Attribute -> a
styled ctor styles attrs' =
styled : (List Attribute -> a) -> List Style -> a
styled ctor styles =
let
{ classes, css, attrs } = collect styles
in
ctor
( Html.Attributes.style css
:: Html.Attributes.class (String.join " " classes)
:: List.append attrs attrs'
:: attrs
)
@ -108,7 +105,7 @@ div element. Use like this:
-}
div : List Style -> List Html -> Html
div styles elems =
styled Html.div styles [] elems
styled Html.div styles elems
{-| Convenience function for the reasonably common case of setting attributes
@ -116,7 +113,7 @@ of a span element. See also `div`.
-}
span : List Style -> List Html -> Html
span styles elems =
styled Html.span styles [] elems
styled Html.span styles elems
{-| Add a HTML class to a component. (Name chosen to avoid clashing with