mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-11-22 04:58:49 +03:00
Minor tweaks after reviewing diff
This commit is contained in:
parent
c410b918d5
commit
bb71703f15
@ -9,9 +9,4 @@ circularProgressIndicator :
|
||||
-> { maybeProgressPercent : Maybe Int }
|
||||
-> Element msg
|
||||
circularProgressIndicator style { maybeProgressPercent } =
|
||||
-- TODO determinate indicator based on progressPercent
|
||||
style.icon maybeProgressPercent
|
||||
|
||||
|
||||
|
||||
-- TODO linear progress indicator
|
||||
|
@ -119,6 +119,15 @@ You can create you own widgets by sticking widgets types together.
|
||||
|
||||
@docs Dialog, ExpansionPanel
|
||||
|
||||
|
||||
# Progress Indicator
|
||||
|
||||
![ProgressIndicator](TODO)
|
||||
|
||||
[Open in Ellie](TODO)
|
||||
|
||||
@docs ProgressIndicator, progressIndicator
|
||||
|
||||
-}
|
||||
|
||||
import Element exposing (Attribute, Element, Length)
|
||||
|
@ -1,6 +1,4 @@
|
||||
module Widget.Style exposing
|
||||
( ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle, ProgressIndicatorStyle
|
||||
)
|
||||
module Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, LayoutStyle, RowStyle, SnackbarStyle, SortTableStyle, TabStyle, TextInputStyle, ProgressIndicatorStyle)
|
||||
|
||||
{-| This module contains style types for every widget.
|
||||
|
||||
@ -136,6 +134,7 @@ type alias LayoutStyle msg =
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias ProgressIndicatorStyle msg =
|
||||
{ icon : (Maybe Int -> Element msg)
|
||||
}
|
||||
|
@ -1215,8 +1215,8 @@ expansionPanel palette =
|
||||
-------------------------------------------------------------------------------}
|
||||
|
||||
|
||||
indeterminateCircIcon : Color.Color -> List (Attribute msg) -> Element msg
|
||||
indeterminateCircIcon color attribs =
|
||||
indeterminateCircularIcon : Color.Color -> List (Attribute msg) -> Element msg
|
||||
indeterminateCircularIcon color attribs =
|
||||
-- Based on example at https://codepen.io/FezVrasta/pen/oXrgdR
|
||||
Svg.svg
|
||||
[ Svg.Attributes.height "48px"
|
||||
@ -1272,8 +1272,8 @@ indeterminateCircIcon color attribs =
|
||||
|> Element.el attribs
|
||||
|
||||
|
||||
determinateCircIcon : Color.Color -> List (Attribute msg) -> Int -> Element msg
|
||||
determinateCircIcon color attribs progressPercent =
|
||||
determinateCircularIcon : Color.Color -> List (Attribute msg) -> Int -> Element msg
|
||||
determinateCircularIcon color attribs progressPercent =
|
||||
-- With help from https://css-tricks.com/building-progress-ring-quickly/
|
||||
let
|
||||
strokeDashoffset =
|
||||
@ -1290,17 +1290,7 @@ determinateCircIcon color attribs progressPercent =
|
||||
, Svg.Attributes.xmlSpace "http://www.w3.org/2000/svg"
|
||||
]
|
||||
[ Svg.g []
|
||||
[ {- Svg.animateTransform
|
||||
[ Svg.Attributes.attributeName "transform"
|
||||
, Svg.Attributes.type_ "rotate"
|
||||
, Svg.Attributes.values "0 33 33;270 33 33"
|
||||
, Svg.Attributes.begin "0s"
|
||||
, Svg.Attributes.dur "1.4s"
|
||||
, Svg.Attributes.fill "freeze"
|
||||
, Svg.Attributes.repeatCount "indefinite"
|
||||
]
|
||||
[]
|
||||
, -}Svg.circle
|
||||
[ Svg.circle
|
||||
[ Svg.Attributes.fill "none"
|
||||
, Svg.Attributes.stroke (Color.toCssString color)
|
||||
, Svg.Attributes.strokeWidth "5"
|
||||
@ -1312,26 +1302,7 @@ determinateCircIcon color attribs progressPercent =
|
||||
, Svg.Attributes.strokeDashoffset (String.fromInt strokeDashoffset)
|
||||
, Svg.Attributes.transform "rotate(-90 33 33)"
|
||||
]
|
||||
[ {- Svg.animateTransform
|
||||
[ Svg.Attributes.attributeName "transform"
|
||||
, Svg.Attributes.type_ "rotate"
|
||||
, Svg.Attributes.values "0 33 33;135 33 33;450 33 33"
|
||||
, Svg.Attributes.begin "0s"
|
||||
, Svg.Attributes.dur "1.4s"
|
||||
, Svg.Attributes.fill "freeze"
|
||||
, Svg.Attributes.repeatCount "indefinite"
|
||||
]
|
||||
[]
|
||||
, Svg.animate
|
||||
[ Svg.Attributes.attributeName "stroke-dashoffset"
|
||||
, Svg.Attributes.values "187;46.75;187"
|
||||
, Svg.Attributes.begin "0s"
|
||||
, Svg.Attributes.dur "1.4s"
|
||||
, Svg.Attributes.fill "freeze"
|
||||
, Svg.Attributes.repeatCount "indefinite"
|
||||
]
|
||||
[] -}
|
||||
]
|
||||
[]
|
||||
]
|
||||
]
|
||||
|> Element.html
|
||||
@ -1344,9 +1315,9 @@ progressIndicator palette =
|
||||
\maybeProgressPercent ->
|
||||
case maybeProgressPercent of
|
||||
Nothing ->
|
||||
indeterminateCircIcon palette.primary []
|
||||
indeterminateCircularIcon palette.primary []
|
||||
Just progressPercent ->
|
||||
determinateCircIcon palette.primary [] progressPercent
|
||||
determinateCircularIcon palette.primary [] progressPercent
|
||||
}
|
||||
|
||||
|
||||
|
@ -1,7 +1,6 @@
|
||||
module Widget.Style.Template exposing
|
||||
( box, decoration, icon
|
||||
, button, column, dialog, expansionPanel, layout, row, snackbar, sortTable, tab, textInput
|
||||
, progressIndicator
|
||||
, button, column, dialog, expansionPanel, layout, progressIndicator, row, snackbar, sortTable, tab, textInput
|
||||
)
|
||||
|
||||
{-| ![Example using the Template style](https://orasund.github.io/elm-ui-widgets/assets/template-style.png)
|
||||
@ -346,8 +345,7 @@ sortTable string =
|
||||
```
|
||||
progressIndicator : String -> ProgressIndicatorStyle msg
|
||||
progressIndicator string =
|
||||
{ track = box <| string ++ ":track"
|
||||
, indicator = box <| string ++ ":box"
|
||||
{ icon = (\_ -> icon <| string ++ ":icon")
|
||||
}
|
||||
```
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user