From 97785e9c1250b2111c613b2012de10a57dc20044 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Rosseb=C3=B8?= Date: Thu, 24 Mar 2016 21:13:06 +0100 Subject: [PATCH 1/5] Changes Icon to use Style --- src/Material/Icon.elm | 47 ++++++++++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/src/Material/Icon.elm b/src/Material/Icon.elm index 7b52263..a0c8b42 100644 --- a/src/Material/Icon.elm +++ b/src/Material/Icon.elm @@ -1,5 +1,6 @@ module Material.Icon ( Size(..) + , iconSize , view , i ) where @@ -15,12 +16,13 @@ This implementation assumes that you have or an equivalent means of loading the icons in your HTML header. -@docs i, Size, view +@docs i, view, Size, iconSize -} import Html exposing (i, text, Html, Attribute) import Html.Attributes exposing (class) +import Material.Style exposing (Style, cs, styled) {-| Size of an icon. Constructors indicate their pixel size, i.e., @@ -30,12 +32,26 @@ type Size = S18 | S24 | S36 | S48 | S +{-| Icon size styling. This style can be omitted for the default size style `S`. +-} +iconSize : Size -> Style +iconSize size = + case size of + S18 -> cs "md-18" + S24 -> cs "md-24" + S36 -> cs "md-36" + S48 -> cs "md-48" + S -> cs "" + + {-| View function for icons. Supply the [Material Icons Library](https://design.google.com/icons/) name as the first argument (replace spaces with underscores); and the size of the icon -as the second. Do not use this function to produce clickable icons; use +as the second (as a list of styles). Do not use this function to produce clickable icons; use icon buttons in Material.Button for that. +If you doesn't specify any style size, it gives you the default size, 24px. + I.e., to produce a 48px ["trending flat"](https://design.google.com/icons/#ic_trending_flat) icon with no attributes: @@ -43,24 +59,19 @@ no attributes: import Material.Icon as Icon icon : Html - icon = Icon.view "trending_flat" Icon.S48 [] + icon = Icon.view "trending_flat" [Icon.iconSize Icon.S48] [] This function will override any `class` set in `List Attribute`. -} -view : String -> Size -> List Attribute -> Html -view name size attrs = - let - sz = - case size of - S18 -> " md-18" - S24 -> " md-24" - S36 -> " md-36" - S48 -> " md-48" - S -> "" - in - Html.i (class ("material-icons" ++ sz) :: attrs) [text name] - - +view : String -> List Style -> List Attribute-> Html +view name styling attrs= + styled Html.i + ( cs "material-icons" + :: styling + ) + attrs + [text name] + {-| Render a default-sized icon with no behaviour. The `String` argument must be the name of a [Material Icon](https://design.google.com/icons/) (replace spaces with underscores). @@ -73,4 +84,4 @@ I.e., to produce a default size (24xp) "trending flat" icon: icon = Icon.i "trending_flat" -} i : String -> Html -i name = view name S [] +i name = view name [] [] From d329eb445f697824a4666d9b29a6ac9af85a55bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Rosseb=C3=B8?= Date: Thu, 24 Mar 2016 21:14:10 +0100 Subject: [PATCH 2/5] Update usage of Icon parameters --- src/Material/Layout.elm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Material/Layout.elm b/src/Material/Layout.elm index 36cc964..b9a5434 100644 --- a/src/Material/Layout.elm +++ b/src/Material/Layout.elm @@ -264,7 +264,7 @@ tabsView addr model tabs = , ("mdl-layout__tab-bar-" ++ direction ++ "-button", True) ] ] - [ Icon.view ("chevron_" ++ direction) Icon.S + [ Icon.view ("chevron_" ++ direction) [Icon.iconSize Icon.S] [onClick addr (ScrollTab offset)] -- TODO: Scroll event ] From abd5fdf1b83d3fb5e714687d13365abc1965a30f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Rosseb=C3=B8?= Date: Thu, 24 Mar 2016 21:15:14 +0100 Subject: [PATCH 3/5] Adds an Icon with badge example --- examples/Demo/Badges.elm | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/Demo/Badges.elm b/examples/Demo/Badges.elm index f9761ce..ea720ef 100644 --- a/examples/Demo/Badges.elm +++ b/examples/Demo/Badges.elm @@ -4,7 +4,7 @@ import Html exposing (..) import Html.Attributes exposing (class, style, key) import Material.Badge as Badge import Material.Style exposing (..) - +import Material.Icon as Icon -- VIEW view : List Html @@ -23,5 +23,7 @@ view = [ div [][p [][] , p [][] , styled span [Badge.withBadge "Δ"] [ ] [ text "Span with HTML symbol - Delta" ] , p [][] + , span [][text "Icon with badge"] + , Icon.view "face" [Icon.iconSize Icon.S24, Badge.withBadge "33", Badge.overlap ] [] ] ] \ No newline at end of file From 1ad2eb9d3f2ea1d7f9ec4ad5fb91403f5af59a11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Rosseb=C3=B8?= Date: Fri, 25 Mar 2016 00:57:23 +0100 Subject: [PATCH 4/5] Using separate size Style values --- src/Material/Icon.elm | 41 ++++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/src/Material/Icon.elm b/src/Material/Icon.elm index a0c8b42..1bd5c25 100644 --- a/src/Material/Icon.elm +++ b/src/Material/Icon.elm @@ -1,6 +1,5 @@ module Material.Icon - ( Size(..) - , iconSize + ( size18, size24, size36, size48 , view , i ) where @@ -16,7 +15,7 @@ This implementation assumes that you have or an equivalent means of loading the icons in your HTML header. -@docs i, view, Size, iconSize +@docs i, view, size18, size24, size36, size48 -} @@ -24,25 +23,29 @@ import Html exposing (i, text, Html, Attribute) import Html.Attributes exposing (class) import Material.Style exposing (Style, cs, styled) - -{-| Size of an icon. Constructors indicate their pixel size, i.e., -`S18` is 18px. The constructor `S` gives you the default size, 24px. +{-| Icon size styling to indicate their pixel size. This style gives a size of 18px. -} -type Size - = S18 | S24 | S36 | S48 | S +size18 : Style +size18 = + cs "md-18" - -{-| Icon size styling. This style can be omitted for the default size style `S`. +{-| Icon size styling to indicate their pixel size. This style gives a size of 24px. -} -iconSize : Size -> Style -iconSize size = - case size of - S18 -> cs "md-18" - S24 -> cs "md-24" - S36 -> cs "md-36" - S48 -> cs "md-48" - S -> cs "" +size24 : Style +size24 = + cs "md-24" +{-| Icon size styling to indicate their pixel size. This style gives a size of 36px. +-} +size36 : Style +size36 = + cs "md-36" + +{-| Icon size styling to indicate their pixel size. This style gives a size of 48px. +-} +size48 : Style +size48 = + cs "md-48" {-| View function for icons. Supply the [Material Icons Library](https://design.google.com/icons/) name as @@ -59,7 +62,7 @@ no attributes: import Material.Icon as Icon icon : Html - icon = Icon.view "trending_flat" [Icon.iconSize Icon.S48] [] + icon = Icon.view "trending_flat" [Icon.size48] [] This function will override any `class` set in `List Attribute`. -} From bcd5e3656a3e697df67273fbc59aa423ba0c77f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Rosseb=C3=B8?= Date: Fri, 25 Mar 2016 00:58:07 +0100 Subject: [PATCH 5/5] Updates Icon usage to handle separate Icon size Style values --- examples/Demo/Badges.elm | 2 +- src/Material/Layout.elm | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/Demo/Badges.elm b/examples/Demo/Badges.elm index ea720ef..6b0fdb3 100644 --- a/examples/Demo/Badges.elm +++ b/examples/Demo/Badges.elm @@ -24,6 +24,6 @@ view = [ div [][p [][] , styled span [Badge.withBadge "Δ"] [ ] [ text "Span with HTML symbol - Delta" ] , p [][] , span [][text "Icon with badge"] - , Icon.view "face" [Icon.iconSize Icon.S24, Badge.withBadge "33", Badge.overlap ] [] + , Icon.view "face" [Icon.size24, Badge.withBadge "33", Badge.overlap ] [] ] ] \ No newline at end of file diff --git a/src/Material/Layout.elm b/src/Material/Layout.elm index b9a5434..97dac5d 100644 --- a/src/Material/Layout.elm +++ b/src/Material/Layout.elm @@ -264,7 +264,7 @@ tabsView addr model tabs = , ("mdl-layout__tab-bar-" ++ direction ++ "-button", True) ] ] - [ Icon.view ("chevron_" ++ direction) [Icon.iconSize Icon.S] + [ Icon.view ("chevron_" ++ direction) [Icon.size24] [onClick addr (ScrollTab offset)] -- TODO: Scroll event ]