1
0
Fork 0
mirror of https://github.com/correl/elm-mdl.git synced 2024-12-18 11:06:18 +00:00

Enables Style to handle recursive (Multiple) styles. Updated Badge implementation and demo

This commit is contained in:
Håkon Rossebø 2016-03-24 09:29:47 +01:00
parent a17c53dfdd
commit 903091e625
3 changed files with 28 additions and 20 deletions
examples/Demo
src/Material

View file

@ -9,10 +9,13 @@ import Material.Style exposing (..)
view : List Html
view = [ div [][p [][]
, styled span [Badge.withBadge "56", Badge.overlap] [ ] [ text "Span with badge" ]
, styled span [Badge.withBadge "2"] [ ] [ text "Span with badge" ]
, p [][]
, styled span [Badge.withBadge "22", Badge.noBackground] [ ] [ text "Span with no background badge" ]
, p [][]
, styled span [Badge.withBadge "33", Badge.overlap] [ ] [ text "Span with badge overlap" ]
, p [][]
, styled span [Badge.withBadge "99", Badge.overlap, Badge.noBackground] [ ] [ text "Span with badge overlap and no background" ]
, p [][]
-- , styled span (Badge.badgeStyle { overlap = True, noBackground = False} "7") [ ] [ text "Span with no background badge" ]
-- , p [][]
-- , styled span (Badge.badgeStyle { overlap = True, noBackground = False} "14") [ ] [ text "Span with badge overlap" ]
]
]

View file

@ -27,7 +27,7 @@ module Material.Badge
> discover additional relevant content. Their design and use is therefore an important
> factor in the overall user experience.
@docs viewDefault, view, BadgeInfo, Options
@docs withBadge, noBackground, overlap
-}
import String
@ -36,28 +36,25 @@ import Html.Attributes exposing (attribute)
import Material.Style exposing (Style, cs, attrib, multiple)
{-| No background for badge
{-| Optional style for Badge. No background for badge
-}
noBackground : Style
noBackground =
cs "mdl-badge--no-background"
{-| Overlap Badge
{-| Optional style for Badge. Overlap Badge
-}
overlap : Style
overlap =
cs "mdl-badge--overlap"
{-| Style function for Badge
First parameter will set Badge options. See Options for more info.
Last parameter will set a value to data-badge="value". Assigns string value to badge
{-| Main style for Badge
The parameter will set a value to data-badge="value". Assigns string value to badge
import Material.Badge as Badge
badgeStyleList : List Style
badgeStyleList = Badge.badgeStyle { overlap = False, noBackground = False} "3"
badgeStyle : Style
badgeStyle = Badge.withBadge "3"
-}
withBadge : String -> Style
withBadge databadge =

View file

@ -72,6 +72,14 @@ classOf style =
_ -> Nothing
flatten : Style -> List Style -> List Style
flatten style styles =
case style of
Multiple styles' ->
List.foldl flatten styles' styles
style ->
style :: styles
{-| Handle the common case of setting attributes of a standard Html node
from a List Style. Use like this:
@ -90,16 +98,16 @@ Note that if you do specify `style`, `class`, or `classList` attributes in
styled : (List Attribute -> a) -> List Style -> List Attribute -> a
styled ctor styles attrs =
let
multipleStyles = (List.filterMap multipleOf styles)
-- multipleStyles = (List.filterMap multipleOf styles)
-- could need some help on how to proceed here
-- (List.filterMap multipleOf styles)
styleAttrs = (List.filterMap attrOf styles)
flatStyles = List.foldl flatten [] styles
-- (List.filterMap multipleOf styles)
styleAttrs = (List.filterMap attrOf flatStyles)
|> List.map (\attrib -> Html.Attributes.attribute (fst attrib) ( snd attrib))
in
ctor
( Html.Attributes.style (List.filterMap cssOf styles)
:: Html.Attributes.class (String.join " " (List.filterMap classOf styles))
( Html.Attributes.style (List.filterMap cssOf flatStyles)
:: Html.Attributes.class (String.join " " (List.filterMap classOf flatStyles))
:: List.append attrs styleAttrs
)