Merge pull request #296 from berenddeboer/v6.0.0

Update to MDC v6.0.0

CHANGELOG.md

@@ -1,7 +1,15 @@
 ## Latest changes
 
+
+## Upgrade to 6.0.0
+
+New features:
 * TabBar: keyboard interaction now works.
 * TabBar: scrolling animation now works.
+* Material.CircularProgress: new component. Only the determine version
+  display is correct. The indeterminate version should animate, but
+  this does not happen at the moment. We'll have another look at
+  this with version 7.
 
 Fixes:
 * Slider mouse position could be incorrect (this fix was not mentioned

demo/Demo.elm

@@ -9,6 +9,7 @@ import Demo.Buttons
 import Demo.Cards
 import Demo.Checkbox
 import Demo.Chips
+import Demo.CircularProgress
 import Demo.DataTable
 import Demo.Dialog
 import Demo.DismissibleDrawer
@@ -60,6 +61,7 @@ type alias Model =
     , cards : Demo.Cards.Model Msg
     , checkbox : Demo.Checkbox.Model Msg
     , chips : Demo.Chips.Model Msg
+    , circularProgress : Demo.CircularProgress.Model Msg
     , dataTable : Demo.DataTable.Model Msg
     , dialog : Demo.Dialog.Model Msg
     , dismissibleDrawer : Demo.DismissibleDrawer.Model Msg
@@ -101,6 +103,7 @@ defaultModel key =
     , cards = Demo.Cards.defaultModel
     , checkbox = Demo.Checkbox.defaultModel
     , chips = Demo.Chips.defaultModel
+    , circularProgress = Demo.CircularProgress.defaultModel
     , dataTable = Demo.DataTable.defaultModel
     , dialog = Demo.Dialog.defaultModel
     , dismissibleDrawer = Demo.DismissibleDrawer.defaultModel
@@ -145,6 +148,7 @@ type Msg
     | CardsMsg (Demo.Cards.Msg Msg)
     | CheckboxMsg (Demo.Checkbox.Msg Msg)
     | ChipsMsg (Demo.Chips.Msg Msg)
+    | CircularProgressMsg (Demo.CircularProgress.Msg Msg)
     | DataTableMsg (Demo.DataTable.Msg Msg)
     | DialogMsg (Demo.Dialog.Msg Msg)
     | DismissibleDrawerMsg (Demo.DismissibleDrawer.Msg Msg)
@@ -259,6 +263,13 @@ update msg model =
             in
             ( { model | chips = chips }, effects )
 
+        CircularProgressMsg msg_ ->
+            let
+                ( circularProgress, effects ) =
+                    Demo.CircularProgress.update CircularProgressMsg msg_ model.circularProgress
+            in
+            ( { model | circularProgress = circularProgress }, effects )
+
         DataTableMsg msg_ ->
             let
                 ( dataTable, effects ) =
@@ -515,6 +526,9 @@ view_ model =
         Demo.Url.Chips ->
             Demo.Chips.view ChipsMsg page model.chips
 
+        Demo.Url.CircularProgress ->
+            Demo.CircularProgress.view CircularProgressMsg page model.circularProgress
+
         Demo.Url.DataTable ->
             Demo.DataTable.view DataTableMsg page model.dataTable
 

demo/Demo/CircularProgress.elm

@@ -0,0 +1,52 @@
+module Demo.CircularProgress exposing (Model, Msg(..), defaultModel, update, view)
+
+import Demo.Helper.Hero as Hero
+import Demo.Helper.ResourceLink as ResourceLink
+import Demo.Page as Page exposing (Page)
+import Html exposing (Html, text)
+import Material
+import Material.CircularProgress as CircularProgress
+import Material.Options exposing (styled)
+import Material.Typography as Typography
+
+
+type alias Model m =
+    { mdc : Material.Model m
+    }
+
+
+defaultModel : Model m
+defaultModel =
+    { mdc = Material.defaultModel
+    }
+
+
+type Msg m
+    = Mdc (Material.Msg m)
+
+
+update : (Msg m -> m) -> Msg m -> Model m -> ( Model m, Cmd m )
+update lift msg model =
+    case msg of
+        Mdc msg_ ->
+            Material.update (lift << Mdc) msg_ model
+
+
+view : (Msg m -> m) -> Page m -> Model m -> Html m
+view lift page model =
+    page.body
+        [ Hero.view
+              [ Hero.header "Circular Progress Indicator"
+              , Hero.intro "Progress indicators display the length of a process or express an unspecified wait time."
+              , Hero.component []
+                  [ CircularProgress.view [ CircularProgress.progress 0.75 ] []
+                  ]
+              ]
+        , ResourceLink.links (lift << Mdc) model.mdc "progress-indicators" "linear-progress" "mdc-linear-progress"
+        , Page.demos
+            [ styled Html.h3 [ Typography.subtitle1 ] [ text "Determinate" ]
+            , CircularProgress.view [ CircularProgress.progress 0.75 ] []
+            , styled Html.h3 [ Typography.subtitle1 ] [ text "Indeterminate" ]
+            , CircularProgress.view [ ] []
+            ]
+        ]

demo/Demo/Helper/Hero.elm

@@ -39,6 +39,7 @@ component options_ =
         :: css "max-width" "860px"
         :: css "background-color" "#f7f7f7"
         :: css "overflow" "auto"
+        :: css "width" "100%"
         :: options_
         )
 

demo/Demo/Page.elm

@@ -78,6 +78,7 @@ drawerItems =
         , ( "Card", Url.Card )
         , ( "Checkbox", Url.Checkbox )
         , ( "Chips", Url.Chips )
+        , ( "Circular Progress Indicator", Url.CircularProgress )
         , ( "Data Table", Url.DataTable )
         , ( "Dialog", Url.Dialog )
         , ( "Drawer", Url.Drawer )

demo/Demo/Selects.elm

@@ -70,7 +70,9 @@ heroSelect lift model =
     Select.view (lift << Mdc)
         "selects-hero-select"
         model.mdc
-        [ Select.label "Fruit" ]
+        [ Select.label "Fruit"
+        , cs "custom-enhanced-select-width"
+        ]
         ( items "" )
 
 

demo/Demo/Slider.elm

@@ -149,7 +149,7 @@ view lift page model =
         [ Hero.view
               [ Hero.header "Slider"
               , Hero.intro "Sliders let users select from a range of values by moving the slider thumb."
-              , Hero.component [ css "width" "100%" ] [ heroSlider lift model ]
+              , Hero.component [] [ heroSlider lift model ]
               ]
         , ResourceLink.links (lift << Mdc) model.mdc "sliders" "input-controls/sliders" "mdc-slider"
         , Page.demos

demo/Demo/Startpage.elm

@@ -5,6 +5,7 @@ import Demo.Startpage.Svg.Button as ButtonSvg
 import Demo.Startpage.Svg.Card as CardSvg
 import Demo.Startpage.Svg.Checkbox as CheckboxSvg
 import Demo.Startpage.Svg.Chips as ChipsSvg
+import Demo.Startpage.Svg.CircularProgress as CircularProgressSvg
 import Demo.Startpage.Svg.DataTable as DataTableSvg
 import Demo.Startpage.Svg.Dialog as DialogSvg
 import Demo.Startpage.Svg.Drawer as DrawerSvg
@@ -86,6 +87,11 @@ view page =
                       , title = "Chips"
                       , subtitle = "Chips"
                       }
+                    , { url = CircularProgress
+                      , icon = CircularProgressSvg.view
+                      , title = "Circular Progress"
+                      , subtitle = "Fills from 0% to 100%, represented by a circle"
+                      }
                     , { url = DataTable
                       , icon = DataTableSvg.view
                       , title = "Data Table"

demo/Demo/Startpage/Svg/CircularProgress.elm

@@ -0,0 +1,23 @@
+module Demo.Startpage.Svg.CircularProgress exposing (view)
+
+import Html exposing (Html)
+import Svg
+import Svg.Attributes as Svg exposing (cx, cy, fill, r, stroke, strokeDasharray, strokeDashoffset, strokeWidth, viewBox)
+
+
+view : Html msg
+view =
+    Svg.svg
+        [ viewBox "0 0 180 180" ]
+        [ Svg.circle
+              [ cx "90"
+              , cy "90"
+              , r "18"
+              , fill "transparent"
+              , stroke "black"
+              , strokeDasharray "113.097"
+              , strokeDashoffset "28.2743"
+              , strokeWidth "4"
+              ]
+              []
+        ]

demo/Demo/Switch.elm

@@ -4,10 +4,9 @@ import Demo.Helper.Hero as Hero
 import Demo.Helper.ResourceLink as ResourceLink
 import Demo.Page as Page exposing (Page)
 import Dict exposing (Dict)
-import Html exposing (Html, text)
+import Html exposing (Html, text, div)
 import Material
-import Material.FormField as FormField
-import Material.Options as Options exposing (for, styled, when)
+import Material.Options as Options exposing (css, for, styled, when)
 import Material.Switch as Switch
 import Material.Typography as Typography
 import Platform.Cmd exposing (Cmd, none)
@@ -67,15 +66,19 @@ heroSwitch lift model =
         index =
             "switch-hero-switch"
     in
-    FormField.view []
+    div []
         [ Switch.view (lift << Mdc)
             index
             model.mdc
             [ Options.onClick (lift (Toggle index))
             , Switch.on |> when (isOn index model)
             ]
             []
-        , styled Html.label [ Options.for index ] [ text "off/on" ]
+        , styled Html.label
+            [ Options.for index
+            , css "margin-left" "10px"
+            ]
+            [ text "off/on" ]
         ]
 
 
@@ -85,15 +88,19 @@ exampleSwitch lift model =
         index =
             "switch-example-switch"
     in
-    FormField.view []
+    div []
         [ Switch.view (lift << Mdc)
             index
             model.mdc
             [ Options.onClick (lift (Toggle index))
             , Switch.on |> when (isOn index model)
             ]
             []
-        , styled Html.label [ Options.for index ] [ text "off/on" ]
+        , styled Html.label
+            [ Options.for index
+            , css "margin-left" "10px"
+            ]
+            [ text "off/on" ]
         ]
 
 

demo/Demo/Url.elm

@@ -15,6 +15,7 @@ type Url
     | Card
     | Checkbox
     | Chips
+    | CircularProgress
     | DataTable
     | Dialog
     | Drawer
@@ -94,6 +95,9 @@ toString url =
         Chips ->
             "#chips"
 
+        CircularProgress ->
+            "#circular-progress"
+
         DataTable ->
             "#data-table"
 
@@ -196,6 +200,9 @@ fromString url =
         "chips" ->
             Chips
 
+        "circular-progress" ->
+            CircularProgress
+
         "data-table" ->
             DataTable