docspell/modules/webapp/src/main/elm/Comp/YesNoDimmer.elm
2021-03-09 20:40:49 +01:00

147 lines
2.9 KiB
Elm

module Comp.YesNoDimmer exposing
( Model
, Msg(..)
, Settings
, activate
, defaultSettings
, defaultSettings2
, disable
, emptyModel
, initActive
, initInactive
, update
, viewN
)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
import Styles as S
type alias Model =
{ active : Bool
}
emptyModel : Model
emptyModel =
{ active = False
}
initInactive : Model
initInactive =
{ active = False
}
initActive : Model
initActive =
{ active = True
}
type Msg
= Activate
| Disable
| ConfirmDelete
type alias Settings =
{ message : String
, headerIcon : String
, headerClass : String
, confirmButton : String
, cancelButton : String
, extraClass : String
}
defaultSettings : Settings
defaultSettings =
{ message = "Delete this item permanently?"
, headerIcon = "exclamation icon"
, headerClass = "ui inverted icon header"
, confirmButton = "Yes, do it!"
, cancelButton = "No"
, extraClass = ""
}
defaultSettings2 : String -> Settings
defaultSettings2 msg =
{ message = msg
, headerIcon = "fa fa-exclamation-circle mr-3"
, headerClass = "text-2xl font-bold text-center w-full"
, confirmButton = "Yes, do it!"
, cancelButton = "No"
, extraClass = ""
}
activate : Msg
activate =
Activate
disable : Msg
disable =
Disable
update : Msg -> Model -> ( Model, Bool )
update msg model =
case msg of
Activate ->
( { model | active = True }, False )
Disable ->
( { model | active = False }, False )
ConfirmDelete ->
( { model | active = False }, True )
--- View2
viewN : Bool -> Settings -> Model -> Html Msg
viewN active settings model =
div
[ class S.dimmer
, class settings.extraClass
, classList
[ ( "hidden", not active || not model.active )
]
]
[ div [ class settings.headerClass ]
[ i
[ class settings.headerIcon
, class "text-gray-200 font-semibold"
, classList [ ( "hidden", settings.headerClass == "" ) ]
]
[]
, span [ class "text-gray-200 font-semibold" ]
[ text settings.message
]
]
, div [ class "flex flex-row space-x-2 text-xs mt-2" ]
[ a
[ class (S.primaryButton ++ "block font-semibold")
, href "#"
, onClick ConfirmDelete
]
[ text settings.confirmButton
]
, a
[ class (S.secondaryButton ++ "block font-semibold")
, href "#"
, onClick Disable
]
[ text settings.cancelButton
]
]
]