diff --git a/examples/Demo/Badges.elm b/examples/Demo/Badges.elm index 5ee4d78..d37a68f 100644 --- a/examples/Demo/Badges.elm +++ b/examples/Demo/Badges.elm @@ -9,10 +9,10 @@ import Material.Style exposing (..) view : List Html view = [ div [][p [][] - , styled span (Badge.badgeStyle { overlap = False, noBackground = False} "4") [ ] [ text "Span with badge" ] + , styled span [Badge.withBadge "56", Badge.overlap] [ ] [ text "Span with badge" ] , 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" ] + -- , 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" ] ] ] \ No newline at end of file diff --git a/src/Material/Badge.elm b/src/Material/Badge.elm index 572af2c..f928dad 100644 --- a/src/Material/Badge.elm +++ b/src/Material/Badge.elm @@ -1,7 +1,7 @@ module Material.Badge - ( Model - , badgeStyle - , badgeStyleDefault + ( noBackground + , overlap + , withBadge ) where {-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#badges-section): @@ -33,23 +33,20 @@ module Material.Badge import String import Html exposing (Attribute) import Html.Attributes exposing (attribute) -import Material.Style exposing (Style, cs, cs', styled, attrib) +import Material.Style exposing (Style, cs, attrib, multiple) -{-| Model for Badge - ovelap: Bool to set css class - mdl-badge--overlap. Make the badge overlap with its container - noBackground: Bool to set css class - mdl-badge--no-background. Applies open-circle effect to badge +{-| No background for badge -} -type alias Model = - { overlap : Bool - , noBackground : Bool - } +noBackground : Style +noBackground = + cs "mdl-badge--no-background" -model : Model -model = - { overlap = True - , noBackground = False - } +{-| Overlap Badge +-} +overlap : Style +overlap = + cs "mdl-badge--overlap" {-| Style function for Badge @@ -62,29 +59,6 @@ model = badgeStyleList : List Style badgeStyleList = Badge.badgeStyle { overlap = False, noBackground = False} "3" -} -badgeStyle : Model -> String -> List Style -badgeStyle model databadge = - let classes = - [ - {css = "mdl-badge", show = True} - , {css = "mdl-badge--no-background", show = model.noBackground} - , {css = "mdl-badge--overlap", show = model.overlap} - ] - |> List.filter .show - |> List.map .css - |> String.join " " - in - [cs classes, attrib "data-badge" databadge] - - -{-| Create Badge Style List with default values - - Parameter will set a value to data-badge="value". Assigns string value to badge - - import Material.Badge as Badge - - badgeStyleListDefault : List Style - badgeStyleListDefault = Badge.badgeStyleDefault "3" --} -badgeStyleDefault : String -> List Style -badgeStyleDefault databadge = badgeStyle model databadge +withBadge : String -> Style +withBadge databadge = + multiple [cs "mdl-badge", attrib "data-badge" databadge] diff --git a/src/Material/Style.elm b/src/Material/Style.elm index eaa917b..283d9c9 100644 --- a/src/Material/Style.elm +++ b/src/Material/Style.elm @@ -1,7 +1,7 @@ module Material.Style ( Style , styled - , cs, cs', css, css', attrib + , cs, cs', css, css', attrib, multiple , stylesheet ) where @@ -17,7 +17,7 @@ add to or remove from the contents of an already constructed class Attribute.) @docs Style # Constructors -@docs cs, cs', css, css', attrib +@docs cs, cs', css, css', attrib, multiple # Application @docs styled @@ -42,8 +42,15 @@ type Style = Class String | CSS (String, String) | Attr (String, String) + | Multiple (List Style) | NOP +multipleOf : Style -> Maybe (List Style) +multipleOf style = + case style of + Multiple multiple -> Just multiple + _ -> Nothing + attrOf : Style -> Maybe (String, String) attrOf style = @@ -81,8 +88,12 @@ 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 ctor styles attrs = let + multipleStyles = (List.filterMap multipleOf styles) + -- could need some help on how to proceed here + + -- (List.filterMap multipleOf styles) styleAttrs = (List.filterMap attrOf styles) |> List.map (\attrib -> Html.Attributes.attribute (fst attrib) ( snd attrib)) in @@ -120,6 +131,11 @@ attrib : String -> String -> Style attrib key value = Attr (key, value) +{-| Add a custom attribute +-} +multiple : List Style -> Style +multiple styles = + Multiple (styles) {-| Conditionally add a CSS style to a component -}