diff --git a/example/src/Data/Style/ElmUiFramework.elm b/example/src/Data/Style/ElmUiFramework.elm index de4ae4f..7b1e5ef 100644 --- a/example/src/Data/Style/ElmUiFramework.elm +++ b/example/src/Data/Style/ElmUiFramework.elm @@ -287,13 +287,13 @@ sortTable = progressIndicatorStyle : ProgressIndicatorStyle msg progressIndicatorStyle = { icon = - \maybeProgressPercent -> - case maybeProgressPercent of + \maybeProgress -> + case maybeProgress of Nothing -> Element.text "Indeterminate progress indicator" - Just progressPercent -> - Element.text ("Determinate progress indicator, " ++ String.fromInt progressPercent ++ "% complete") + Just progress -> + Element.text ("Determinate progress indicator, " ++ String.fromFloat progress ++ "completeness") } diff --git a/example/src/Example/ProgressIndicator.elm b/example/src/Example/ProgressIndicator.elm index 3033a73..c8dff43 100644 --- a/example/src/Example/ProgressIndicator.elm +++ b/example/src/Example/ProgressIndicator.elm @@ -20,16 +20,16 @@ materialStyle = type Model - = MaybeProgressPercent (Maybe Int) + = MaybeProgress (Maybe Float) type Msg - = ChangedProgressPercent (Maybe Int) + = ChangedProgress (Maybe Float) init : ( Model, Cmd Msg ) init = - ( MaybeProgressPercent Nothing + ( MaybeProgress Nothing , Cmd.none ) @@ -37,8 +37,8 @@ init = update : Msg -> Model -> ( Model, Cmd Msg ) update msg _ = case msg of - ChangedProgressPercent maybeInt -> - ( MaybeProgressPercent maybeInt + ChangedProgress maybeFloat -> + ( MaybeProgress maybeFloat , Cmd.none ) @@ -51,9 +51,9 @@ subscriptions _ = {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below. -} view : (Msg -> msg) -> Style style msg -> Model -> Element msg -view msgMapper style (MaybeProgressPercent maybeProgressPercent) = +view msgMapper style (MaybeProgress maybeProgress) = Widget.circularProgressIndicator style.progressIndicator - { maybeProgressPercent = maybeProgressPercent + { maybeProgress = maybeProgress } diff --git a/example/src/View/Test.elm b/example/src/View/Test.elm index fa2647a..85828cb 100644 --- a/example/src/View/Test.elm +++ b/example/src/View/Test.elm @@ -517,16 +517,16 @@ progressIndicator : msg -> Style msg -> List ( String, Element msg ) progressIndicator _ style = let determinateIndicators = - [ 0, 25, 50, 75, 100 ] + [ 0, 0.25, 0.50, 0.75, 1 ] |> List.map - (\percent -> - ( "Determinate Progress Indicator, " ++ String.fromInt percent ++ "% complete" - , Widget.circularProgressIndicator style.progressIndicator { maybeProgressPercent = Just percent } + (\completeness -> + ( "Determinate Progress Indicator, completeness " ++ String.fromFloat completeness + , Widget.circularProgressIndicator style.progressIndicator { maybeProgress = Just completeness } ) ) in [ ( "Indeterminate Progress Indicator" - , Widget.circularProgressIndicator style.progressIndicator { maybeProgressPercent = Nothing } + , Widget.circularProgressIndicator style.progressIndicator { maybeProgress = Nothing } ) ] ++ determinateIndicators diff --git a/src/Internal/ProgressIndicator.elm b/src/Internal/ProgressIndicator.elm index a53bfab..59547fa 100644 --- a/src/Internal/ProgressIndicator.elm +++ b/src/Internal/ProgressIndicator.elm @@ -6,7 +6,7 @@ import Widget.Style exposing (ProgressIndicatorStyle) circularProgressIndicator : ProgressIndicatorStyle msg - -> { maybeProgressPercent : Maybe Int } + -> { maybeProgress : Maybe Float } -> Element msg -circularProgressIndicator style { maybeProgressPercent } = - style.icon maybeProgressPercent +circularProgressIndicator style { maybeProgress } = + style.icon maybeProgress diff --git a/src/Widget.elm b/src/Widget.elm index fc57f1b..63469ad 100644 --- a/src/Widget.elm +++ b/src/Widget.elm @@ -636,19 +636,19 @@ tab = {-| Progress Indicator widget type -If `maybeProgressPercent` is set to `Nothing`, an indeterminate progress indicator (e.g. spinner) will display. -If `maybeProgressPercent` is set to `Just Int` (where the `Int` is completion percentage between 0 and 100 inclusive), a determinate progress indicator will visualize the completion percentage. +If `maybeProgress` is set to `Nothing`, an indeterminate progress indicator (e.g. spinner) will display. +If `maybeProgress` is set to `Just Float` (where the `Float` is proportion of completeness between 0 and 1 inclusive), a determinate progress indicator will visualize the progress. -} type alias ProgressIndicator = - { maybeProgressPercent : Maybe Int } + { maybeProgress : Maybe Float } {-| Displays a circular progress indicator -} circularProgressIndicator : ProgressIndicatorStyle msg - -> { maybeProgressPercent : Maybe Int } + -> { maybeProgress : Maybe Float } -> Element msg circularProgressIndicator = ProgressIndicator.circularProgressIndicator diff --git a/src/Widget/Style.elm b/src/Widget/Style.elm index 20b8402..d0e3c49 100644 --- a/src/Widget/Style.elm +++ b/src/Widget/Style.elm @@ -136,5 +136,5 @@ type alias LayoutStyle msg = {-| -} type alias ProgressIndicatorStyle msg = - { icon : Maybe Int -> Element msg + { icon : Maybe Float -> Element msg } diff --git a/src/Widget/Style/Material.elm b/src/Widget/Style/Material.elm index 0ba2ad0..8538f54 100644 --- a/src/Widget/Style/Material.elm +++ b/src/Widget/Style/Material.elm @@ -1272,17 +1272,18 @@ indeterminateCircularIcon color attribs = |> Element.el attribs -determinateCircularIcon : Color.Color -> List (Attribute msg) -> Int -> Element msg -determinateCircularIcon color attribs progressPercent = +determinateCircularIcon : Color.Color -> List (Attribute msg) -> Float -> Element msg +determinateCircularIcon color attribs progress = -- With help from https://css-tricks.com/building-progress-ring-quickly/ let strokeDashoffset = let - clampedProgPrecent = - clamp 0 100 progressPercent + clampedProgress = + clamp 0 1 progress in -- 188 is circumference of circle in pixels - 188 - (188 * clampedProgPrecent // 100) + 188 - (188 * clampedProgress) + |> round in Svg.svg [ Svg.Attributes.height "48px" @@ -1313,13 +1314,13 @@ determinateCircularIcon color attribs progressPercent = progressIndicator : Palette -> ProgressIndicatorStyle msg progressIndicator palette = { icon = - \maybeProgressPercent -> - case maybeProgressPercent of + \maybeProgress -> + case maybeProgress of Nothing -> indeterminateCircularIcon palette.primary [] - Just progressPercent -> - determinateCircularIcon palette.primary [] progressPercent + Just progress -> + determinateCircularIcon palette.primary [] progress }