mirror of
https://github.com/TheAnachronism/docspell.git
synced 2025-06-22 18:38:26 +00:00
87 lines
2.2 KiB
Elm
87 lines
2.2 KiB
Elm
{-
|
|
Copyright 2020 Docspell Contributors
|
|
|
|
SPDX-License-Identifier: GPL-3.0-or-later
|
|
-}
|
|
|
|
|
|
module Comp.Progress exposing
|
|
( progress2
|
|
, smallIndicating
|
|
, topAttachedIndicating
|
|
)
|
|
|
|
import Html exposing (Html, div, text)
|
|
import Html.Attributes exposing (attribute, class, style)
|
|
|
|
|
|
progress2 : Int -> Html msg
|
|
progress2 percent =
|
|
div [ class "shadow w-full h-full bg-gray-200 dark:bg-bluegray-600 rounded relative" ]
|
|
[ div
|
|
[ class "transition-duration-300 h-full bg-blue-500 dark:bg-light-blue-500 block text-xs text-center"
|
|
, style "width" (String.fromInt percent ++ "%")
|
|
]
|
|
[]
|
|
, div [ class "absolute left-1/2 -top-1 font-semibold" ]
|
|
[ text (String.fromInt percent)
|
|
, text "%"
|
|
]
|
|
]
|
|
|
|
|
|
smallIndicating : Int -> Html msg
|
|
smallIndicating percent =
|
|
progress "small indicating active" percent Nothing Nothing
|
|
|
|
|
|
topAttachedIndicating : Int -> Html msg
|
|
topAttachedIndicating percent =
|
|
progress "top attached indicating active" percent Nothing Nothing
|
|
|
|
|
|
progress : String -> Int -> Maybe String -> Maybe String -> Html msg
|
|
progress classes percent label barText =
|
|
if percent <= 0 then
|
|
div
|
|
[ class ("ui progress " ++ classes)
|
|
]
|
|
(div [ class "bar" ] (barDiv barText) :: labelDiv label)
|
|
|
|
else
|
|
div
|
|
[ class ("ui progress " ++ classes)
|
|
, attribute "data-percent" (String.fromInt percent)
|
|
]
|
|
(div
|
|
[ class "bar"
|
|
, style "transition-duration" "300ms"
|
|
, style "display" "block"
|
|
, style "width" (String.fromInt percent ++ "%")
|
|
]
|
|
(barDiv barText)
|
|
:: labelDiv label
|
|
)
|
|
|
|
|
|
labelDiv : Maybe String -> List (Html msg)
|
|
labelDiv label =
|
|
case label of
|
|
Just l ->
|
|
[ div [ class "label" ] [ text l ]
|
|
]
|
|
|
|
Nothing ->
|
|
[]
|
|
|
|
|
|
barDiv : Maybe String -> List (Html msg)
|
|
barDiv barText =
|
|
case barText of
|
|
Just t ->
|
|
[ div [ class "progress" ] [ text t ]
|
|
]
|
|
|
|
Nothing ->
|
|
[]
|