From 923256cffe2bf51c0f751a2c8561dd6c81b11a9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Debois?= Date: Thu, 21 Apr 2016 14:57:58 +0200 Subject: [PATCH] Added Style to Layout content builders. Closes #24. --- demo/Demo.elm | 35 +++++++++-------- demo/Demo/Badges.elm | 2 +- demo/Demo/Page.elm | 1 - demo/Demo/Snackbar.elm | 84 +++++++++++++++++++---------------------- src/Material/Button.elm | 9 ++--- src/Material/Grid.elm | 4 +- src/Material/Icon.elm | 7 ++-- src/Material/Layout.elm | 69 ++++++++++++++++++--------------- src/Material/Style.elm | 13 +++---- 9 files changed, 112 insertions(+), 112 deletions(-) diff --git a/demo/Demo.elm b/demo/Demo.elm index b6df36f..303b117 100644 --- a/demo/Demo.elm +++ b/demo/Demo.elm @@ -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,17 +179,20 @@ drawer = header : List Html header = [ Layout.row - [ Layout.title "elm-mdl" - , Layout.spacer - , Layout.navigation - [ Layout.link - [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"] + [] + [ Layout.title [] [ text "elm-mdl" ] + , Layout.spacer + , Layout.navigation [] + [ Layout.link + [ Style.attribute + <| href "https://github.com/debois/elm-mdl"] + [ span [] [text "github"] ] + , Layout.link + [ 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 diff --git a/demo/Demo/Badges.elm b/demo/Demo/Badges.elm index 879749b..b069f00 100644 --- a/demo/Demo/Badges.elm +++ b/demo/Demo/Badges.elm @@ -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 diff --git a/demo/Demo/Page.elm b/demo/Demo/Page.elm index 06ffc25..d409161 100644 --- a/demo/Demo/Page.elm +++ b/demo/Demo/Page.elm @@ -92,7 +92,6 @@ title t = --, cs "mdl-typography--display-4" -- TODO. Typography module ] - [] [ text t ] diff --git a/demo/Demo/Snackbar.elm b/demo/Demo/Snackbar.elm index c6cec41..7374a87 100644 --- a/demo/Demo/Snackbar.elm +++ b/demo/Demo/Snackbar.elm @@ -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, " - ++ "width " ++ toString transitionLength ++ "ms, " - ++ "height " ++ toString transitionLength ++ "ms, " - ++ "background-color " ++ toString transitionLength ++ "ms" - ) + 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, " - ++ "margin " ++ 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,42 +218,38 @@ 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") - , transitionOuter - ] - , key <| toString k - {- Interestingly, not setting key messes up CSS transitions in spectacular ways. -} + 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. -} ] - [ 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") - -- Sizing - , ("height", height) - , ("width", width) - , ("border-radius", "2px") - , ("box-sizing", "border-box") - -- Force appearance/disapparenace to be from/to lower-left corner. - , ("position", "absolute") - , ("bottom", "0") - , ("left", "0") - -- Transitions - , transitionInner - ] + -- Center contents + , css "display" "inline-flex" + , css "align-items" "center" + , css "justify-content" "center" + , css "flex" "0 0 auto" + -- Sizing + , 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. + , css "position" "absolute" + , css "bottom" "0" + , css "left" "0" + -- Transitions + , transitionInner ] [ div [] [ text <| toString k ] ] ] diff --git a/src/Material/Button.elm b/src/Material/Button.elm index ad7e442..fb2aaf3 100644 --- a/src/Material/Button.elm +++ b/src/Material/Button.elm @@ -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 diff --git a/src/Material/Grid.elm b/src/Material/Grid.elm index 288ce7b..50269cf 100644 --- a/src/Material/Grid.elm +++ b/src/Material/Grid.elm @@ -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) diff --git a/src/Material/Icon.elm b/src/Material/Icon.elm index c694816..8ca5d0d 100644 --- a/src/Material/Icon.elm +++ b/src/Material/Icon.elm @@ -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 [] diff --git a/src/Material/Layout.elm b/src/Material/Layout.elm index 0f54b5e..1573a94 100644 --- a/src/Material/Layout.elm +++ b/src/Material/Layout.elm @@ -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)] - -- TODO: Scroll event + [ 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 diff --git a/src/Material/Style.elm b/src/Material/Style.elm index ac5d0f3..7896d70 100644 --- a/src/Material/Style.elm +++ b/src/Material/Style.elm @@ -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