diff --git a/src/Nri/Ui/Modal/V9.elm b/src/Nri/Ui/Modal/V9.elm index 5b5a3c67..b4781dc7 100644 --- a/src/Nri/Ui/Modal/V9.elm +++ b/src/Nri/Ui/Modal/V9.elm @@ -3,7 +3,7 @@ module Nri.Ui.Modal.V9 exposing , Msg, update, subscriptions , open, close , info, warning - , multipleFocusableElementView, onlyFocusableElementView + , FocusManager(..) ) {-| Changes from V8: @@ -23,11 +23,6 @@ module Nri.Ui.Modal.V9 exposing @docs info, warning - -### Focusable - -@docs multipleFocusableElementView, onlyFocusableElementView - -} import Accessibility.Styled as Html exposing (..) @@ -141,170 +136,53 @@ close = CloseModal Other -{-| -} -info : - { visibleTitle : Bool - , title : String - , wrapMsg : Msg -> msg - } - -> - ({ viewContent : { content : List (Html msg), footer : List (Html msg) } -> Html msg - , closeButton : List (Html.Attribute msg) -> Html msg - } - -> Attribute msg - ) - -> Model - -> Html msg -info config getFocusable model = - let - appliedAttrs = - List.foldl (\(Attribute f) acc -> f acc) - { visibleTitle = config.visibleTitle - , overlayColor = Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.navy - , wrapMsg = config.wrapMsg - , modalStyle = modalStyle - , titleString = config.title - , titleStyles = titleStyle Colors.navy config.visibleTitle - , autofocusOn = Default - , content = \_ -> text "" - } - [ getFocusable - { viewContent = viewContent config.visibleTitle - , closeButton = closeButton config.wrapMsg - } - ] - in - view config.wrapMsg config.title appliedAttrs model - - -{-| -} -warning : - { visibleTitle : Bool - , title : String - , wrapMsg : Msg -> msg - } - -> - ({ viewContent : { content : List (Html msg), footer : List (Html msg) } -> Html msg - , closeButton : List (Html.Attribute msg) -> Html msg - } - -> Attribute msg - ) - -> Model - -> Html msg -warning config getFocusable model = - let - appliedAttrs = - List.foldl (\(Attribute f) acc -> f acc) - { visibleTitle = config.visibleTitle - , overlayColor = Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.gray20 - , wrapMsg = config.wrapMsg - , modalStyle = modalStyle - , titleString = config.title - , titleStyles = titleStyle Colors.red config.visibleTitle - , autofocusOn = Default - , content = \_ -> text "" - } - [ getFocusable - { viewContent = viewContent config.visibleTitle - , closeButton = closeButton config.wrapMsg - } - ] - in - view config.wrapMsg config.title appliedAttrs model - - -- ATTRIBUTES -type alias Config msg = - { visibleTitle : Bool - , overlayColor : Color - , wrapMsg : Msg -> msg - , modalStyle : Style - , titleString : String - , titleStyles : List Style - , autofocusOn : Autofocus - , content : - { onlyFocusableElement : List (Html.Attribute msg) - , firstFocusableElement : List (Html.Attribute msg) - , lastFocusableElement : List (Html.Attribute msg) - , autofocusOn : Html.Attribute msg - } - -> Html msg - } +{-| -} +type FocusManager msg + = MultipleFocusableElements + ({ firstFocusableElement : List (Attribute msg) + , lastFocusableElement : List (Attribute msg) + , autofocusElement : Attribute msg + , closeButton : List (Attribute msg) -> Html msg + } + -> + { content : List (Html msg) + , footer : List (Html msg) + } + ) + | OneFocusableElement + ({ onlyFocusableElement : List (Attribute msg) + , closeButton : List (Attribute msg) -> Html msg + } + -> + { content : List (Html msg) + , footer : List (Html msg) + } + ) -modalStyle : Style +modalStyle : List Style modalStyle = - batch - [ -- Border - borderRadius (px 20) - , border3 (px 2) solid (rgb 127 0 127) - , boxShadow5 zero (px 1) (px 10) zero (rgba 0 0 0 0.35) + [ position relative -- Border + , borderRadius (px 20) + , border3 (px 2) solid (rgb 127 0 127) + , boxShadow5 zero (px 1) (px 10) zero (rgba 0 0 0 0.35) - -- Spacing - , margin2 (px 50) auto - , padding (px 20) + -- Spacing + , margin2 (px 50) auto + , padding (px 20) - -- Size - , minHeight (vh 40) - , width (px 600) - , backgroundColor Colors.white + -- Size + , minHeight (vh 40) + , width (px 600) + , backgroundColor Colors.white - -- the modal should grow up to the viewport minus a 50px margin - , maxHeight (calc (pct 100) minus (px 100)) - ] - - -{-| -} -type Attribute msg - = Attribute (Config msg -> Config msg) - - -{-| -} -multipleFocusableElementView : - ({ firstFocusableElement : List (Html.Attribute msg) - , lastFocusableElement : List (Html.Attribute msg) - , autofocusElement : Html.Attribute msg - } - -> Html msg - ) - -> Attribute msg -multipleFocusableElementView f = - Attribute - (\config -> - { config - | content = - \{ firstFocusableElement, lastFocusableElement, autofocusOn } -> - f - { firstFocusableElement = firstFocusableElement - , lastFocusableElement = lastFocusableElement - , autofocusElement = autofocusOn - } - } - ) - - -{-| -} -onlyFocusableElementView : - ({ onlyFocusableElement : List (Html.Attribute msg) - } - -> Html msg - ) - -> Attribute msg -onlyFocusableElementView f = - Attribute - (\config -> - { config - | content = - \{ onlyFocusableElement } -> - f - { onlyFocusableElement = onlyFocusableElement - } - , autofocusOn = Last - } - ) + -- the modal should grow up to the viewport minus a 50px margin + , maxHeight (calc (pct 100) minus (px 100)) + ] titleStyle : Color -> Bool -> List Style @@ -337,13 +215,48 @@ titleStyle titleColor visibleTitle = -- VIEW -view : - (Msg -> msg) - -> String - -> Config msg +{-| -} +info : + { visibleTitle : Bool + , title : String + , wrapMsg : Msg -> msg + , focusManager : FocusManager msg + } -> Model -> Html msg -view wrapMsg ti config model = +info config = + view config + { overlayColor = Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.navy + , titleStyles = titleStyle Colors.navy config.visibleTitle + } + + +{-| -} +warning : + { visibleTitle : Bool + , title : String + , wrapMsg : Msg -> msg + , focusManager : FocusManager msg + } + -> Model + -> Html msg +warning config = + view config + { overlayColor = Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.gray20 + , titleStyles = titleStyle Colors.red config.visibleTitle + } + + +view : + { visibleTitle : Bool + , title : String + , wrapMsg : Msg -> msg + , focusManager : FocusManager msg + } + -> { overlayColor : Color, titleStyles : List Style } + -> Model + -> Html msg +view config styles model = case model of Opened _ -> div @@ -359,10 +272,8 @@ view wrapMsg ti config model = , zIndex (int 1) ] ] - [ viewBackdrop config - , div - [ css [ position relative, config.modalStyle ] ] - [ viewModal config ] + [ viewBackdrop config.wrapMsg styles.overlayColor + , div [ css modalStyle ] [ viewModal config styles ] , Root.node "style" [] [ Root.text "body {overflow: hidden;} " ] ] @@ -370,10 +281,8 @@ view wrapMsg ti config model = text "" -viewBackdrop : - { a | wrapMsg : Msg -> msg, overlayColor : Color } - -> Html msg -viewBackdrop config = +viewBackdrop : (Msg -> msg) -> Color -> Html msg +viewBackdrop wrapMsg overlayColor = Root.div -- We use Root html here in order to allow clicking to exit out of -- the overlay. This behavior is available to non-mouse users as @@ -383,70 +292,58 @@ viewBackdrop config = [ position absolute , width (pct 100) , height (pct 100) - , backgroundColor config.overlayColor + , backgroundColor overlayColor ] - , onClick (config.wrapMsg (CloseModal OverlayClick)) + , onClick (wrapMsg (CloseModal OverlayClick)) ] [] -viewModal : Config msg -> Html msg -viewModal config = +viewModal : + { visibleTitle : Bool + , title : String + , wrapMsg : Msg -> msg + , focusManager : FocusManager msg + } + -> { a | titleStyles : List Style } + -> Html msg +viewModal config styles = section [ Role.dialog , Aria.labeledBy modalTitleId ] - [ h1 [ id modalTitleId, css config.titleStyles ] [ text config.titleString ] - , config.content - (case config.autofocusOn of - Last -> - { onlyFocusableElement = - [ Key.onKeyDown - [ Key.tabBack (Focus firstId) - , Key.tab (Focus firstId) - ] - , id firstId - ] - |> List.map (Attributes.map config.wrapMsg) - , firstFocusableElement = - [ Key.onKeyDown [ Key.tabBack (Focus autofocusId) ] - , id firstId - ] - |> List.map (Attributes.map config.wrapMsg) - , lastFocusableElement = - [ Key.onKeyDown [ Key.tab (Focus firstId) ] - , id autofocusId - ] - |> List.map (Attributes.map config.wrapMsg) - , autofocusOn = - id autofocusId - |> Attributes.map config.wrapMsg - } + [ h1 [ id modalTitleId, css styles.titleStyles ] [ text config.title ] + , viewContent config.visibleTitle <| + case config.focusManager of + OneFocusableElement toContentAndFooter -> + toContentAndFooter + { onlyFocusableElement = + List.map (Attributes.map config.wrapMsg) + [ Key.onKeyDown + [ Key.tabBack (Focus autofocusId) + , Key.tab (Focus autofocusId) + ] + , id autofocusId + ] + , closeButton = closeButton config.wrapMsg + } - _ -> - { onlyFocusableElement = - [ Key.onKeyDown - [ Key.tabBack (Focus firstId) - , Key.tab (Focus firstId) - ] - , id firstId - ] - |> List.map (Attributes.map config.wrapMsg) - , firstFocusableElement = - [ Key.onKeyDown [ Key.tabBack (Focus lastId) ] - , id firstId - ] - |> List.map (Attributes.map config.wrapMsg) - , lastFocusableElement = - [ Key.onKeyDown [ Key.tab (Focus firstId) ] - , id lastId - ] - |> List.map (Attributes.map config.wrapMsg) - , autofocusOn = - id autofocusId - |> Attributes.map config.wrapMsg - } - ) + MultipleFocusableElements toContentAndFooter -> + toContentAndFooter + { firstFocusableElement = + List.map (Attributes.map config.wrapMsg) + [ Key.onKeyDown [ Key.tabBack (Focus lastId) ] + , id firstId + ] + , lastFocusableElement = + List.map (Attributes.map config.wrapMsg) + [ Key.onKeyDown [ Key.tab (Focus firstId) ] + , id lastId + ] + , autofocusElement = + Attributes.map config.wrapMsg (id autofocusId) + , closeButton = closeButton config.wrapMsg + } ] @@ -586,7 +483,7 @@ viewFooter children = {-| -} -closeButton : (Msg -> msg) -> List (Html.Attribute msg) -> Html msg +closeButton : (Msg -> msg) -> List (Attribute msg) -> Html msg closeButton wrapMsg focusableElementAttrs = button (Widget.label "Close modal" diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm index a45f874e..2c1760e7 100644 --- a/styleguide-app/Examples/Modal.elm +++ b/styleguide-app/Examples/Modal.elm @@ -25,9 +25,28 @@ import Nri.Ui.Text.V4 as Text {-| -} type alias State = - { infoModal : Modal.Model - , warningModal : Modal.Model - , visibleTitle : Bool + { state : Modal.Model + , content : Content + , settings : Settings + } + + +{-| -} +init : State +init = + { state = Modal.init + , content = Info + , settings = initModalSettings + } + + +type Content + = Info + | Warning + + +type alias Settings = + { visibleTitle : Bool , showX : Bool , showContinue : Bool , showSecondary : Bool @@ -36,12 +55,9 @@ type alias State = } -{-| -} -init : State -init = - { infoModal = Modal.init - , warningModal = Modal.init - , visibleTitle = True +initModalSettings : Settings +initModalSettings = + { visibleTitle = True , showX = True , showContinue = True , showSecondary = True @@ -53,7 +69,7 @@ init = {-| -} example : Example State Msg example = - { name = "Nri.Ui.Modal.V8" + { name = "Nri.Ui.Modal.V9" , categories = [ Modals ] , atomicDesignType = Organism , keyboardSupport = [] @@ -62,194 +78,169 @@ example = , subscriptions = subscriptions , view = \state -> - [ viewSettings state + [ viewSettings state.settings , Button.button "Launch Info Modal" - [ Button.onClick (InfoModalMsg (Modal.open "launch-info-modal")) + [ Button.onClick (ModalMsg (Modal.open "launch-info-modal")) , Button.custom [ Attributes.id "launch-info-modal" ] , Button.css [ Css.marginRight (Css.px 16) ] , Button.secondary , Button.medium ] , Button.button "Launch Warning Modal" - [ Button.onClick (WarningModalMsg (Modal.open "launch-warning-modal")) + [ Button.onClick (ModalMsg (Modal.open "launch-warning-modal")) , Button.custom [ Attributes.id "launch-warning-modal" ] , Button.secondary , Button.medium ] - , let - params = - ( state, InfoModalMsg, Button.primary ) - in - Modal.info { title = "Modal.info", wrapMsg = InfoModalMsg, visibleTitle = state.visibleTitle } - (getFocusable params) - state.infoModal - , let - params = - ( state, WarningModalMsg, Button.danger ) - in - Modal.warning { title = "Modal.warning", wrapMsg = WarningModalMsg, visibleTitle = state.visibleTitle } - (getFocusable params) - state.warningModal + , case state.content of + Info -> + Modal.info + { title = "Modal.info" + , wrapMsg = ModalMsg + , visibleTitle = state.settings.visibleTitle + , focusManager = makeFocusManager Button.primary state.settings + } + state.state + + Warning -> + Modal.warning + { title = "Modal.warning" + , wrapMsg = ModalMsg + , visibleTitle = state.settings.visibleTitle + , focusManager = makeFocusManager Button.danger state.settings + } + state.state ] } - ---getFocusable : --- ( State, Modal.Msg -> Msg, Button.Attribute Msg ) --- -> --- { viewContent : { content : List (Html Msg), footer : List (Html Msg) } -> Html Msg --- , closeButton : List (Html.Attribute Msg) -> Html Msg --- } --- -> Modal.Focusable Msg - - -getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } = - case ( state.showX, state.showContinue, state.showSecondary ) of +makeFocusManager : Button.Attribute Msg -> Settings -> Modal.FocusManager Msg +makeFocusManager firstButtonStyle settings = + case ( settings.showX, settings.showContinue, settings.showSecondary ) of ( True, True, True ) -> - Modal.multipleFocusableElementView - (\{ firstFocusableElement, autofocusElement, lastFocusableElement } -> - div [] - [ closeButton firstFocusableElement - , viewContent - { content = [ viewModalContent state.longContent ] - , footer = - [ Button.button "Continue" - [ firstButtonStyle - , Button.onClick ForceClose - , Button.large - , Button.custom [ autofocusElement ] - ] - , ClickableText.button "Close" - [ ClickableText.onClick ForceClose - , ClickableText.large - , ClickableText.custom lastFocusableElement - , ClickableText.css [ Css.marginTop (Css.px 12) ] - ] - ] - } + Modal.MultipleFocusableElements <| + \modalOptions -> + { content = + [ modalOptions.closeButton modalOptions.firstFocusableElement + , viewModalContent settings.longContent ] - ) + , footer = + [ Button.button "Continue" + [ firstButtonStyle + , Button.onClick ForceClose + , Button.large + , Button.custom [ modalOptions.autofocusElement ] + ] + , ClickableText.button "Close" + [ ClickableText.onClick ForceClose + , ClickableText.large + , ClickableText.custom modalOptions.lastFocusableElement + , ClickableText.css [ Css.marginTop (Css.px 12) ] + ] + ] + } ( True, False, True ) -> - Modal.multipleFocusableElementView - (\{ firstFocusableElement, autofocusElement, lastFocusableElement } -> - div [] - [ closeButton firstFocusableElement - , viewContent - { content = [ viewModalContent state.longContent ] - , footer = - [ ClickableText.button "Close" - [ ClickableText.onClick ForceClose - , ClickableText.large - , ClickableText.custom (autofocusElement :: lastFocusableElement) - , ClickableText.css [ Css.marginTop (Css.px 12) ] - ] - ] - } + Modal.MultipleFocusableElements <| + \modalOptions -> + { content = + [ modalOptions.closeButton modalOptions.firstFocusableElement + , viewModalContent settings.longContent ] - ) + , footer = + [ ClickableText.button "Close" + [ ClickableText.onClick ForceClose + , ClickableText.large + , ClickableText.custom (modalOptions.autofocusElement :: modalOptions.lastFocusableElement) + , ClickableText.css [ Css.marginTop (Css.px 12) ] + ] + ] + } ( True, False, False ) -> - Modal.onlyFocusableElementView - (\{ onlyFocusableElement } -> - div [] + Modal.OneFocusableElement + (\{ onlyFocusableElement, closeButton } -> + { content = [ closeButton onlyFocusableElement - , viewContent - { content = [ viewModalContent state.longContent ] - , footer = [] - } + , viewModalContent settings.longContent ] + , footer = [] + } ) ( True, True, False ) -> - Modal.multipleFocusableElementView - (\{ firstFocusableElement, autofocusElement, lastFocusableElement } -> - div [] - [ closeButton firstFocusableElement - , viewContent - { content = [ viewModalContent state.longContent ] - , footer = - [ Button.button "Continue" - [ firstButtonStyle - , Button.onClick ForceClose - , Button.custom (autofocusElement :: lastFocusableElement) - , Button.large - ] - ] - } + Modal.MultipleFocusableElements <| + \modalOptions -> + { content = + [ modalOptions.closeButton modalOptions.firstFocusableElement + , viewModalContent settings.longContent ] - ) + , footer = + [ Button.button "Continue" + [ firstButtonStyle + , Button.onClick ForceClose + , Button.custom (modalOptions.autofocusElement :: modalOptions.lastFocusableElement) + , Button.large + ] + ] + } ( False, True, True ) -> - Modal.multipleFocusableElementView - (\{ firstFocusableElement, autofocusElement, lastFocusableElement } -> - div [] - [ viewContent - { content = [ viewModalContent state.longContent ] - , footer = - [ Button.button "Continue" - [ firstButtonStyle - , Button.onClick ForceClose - , Button.custom (autofocusElement :: firstFocusableElement) - , Button.large - ] - , ClickableText.button "Close" - [ ClickableText.onClick ForceClose - , ClickableText.large - , ClickableText.custom lastFocusableElement - , ClickableText.css [ Css.marginTop (Css.px 12) ] - ] - ] - } + Modal.MultipleFocusableElements <| + \modalOptions -> + { content = [ viewModalContent settings.longContent ] + , footer = + [ Button.button "Continue" + [ firstButtonStyle + , Button.onClick ForceClose + , Button.custom (modalOptions.autofocusElement :: modalOptions.firstFocusableElement) + , Button.large + ] + , ClickableText.button "Close" + [ ClickableText.onClick ForceClose + , ClickableText.large + , ClickableText.custom modalOptions.lastFocusableElement + , ClickableText.css [ Css.marginTop (Css.px 12) ] + ] ] - ) + } ( False, False, True ) -> - Modal.onlyFocusableElementView + Modal.OneFocusableElement (\{ onlyFocusableElement } -> - div [] - [ viewContent - { content = [ viewModalContent state.longContent ] - , footer = - [ ClickableText.button "Close" - [ ClickableText.onClick ForceClose - , ClickableText.large - , ClickableText.custom onlyFocusableElement - , ClickableText.css [ Css.marginTop (Css.px 12) ] - ] - ] - } + { content = [ viewModalContent settings.longContent ] + , footer = + [ ClickableText.button "Close" + [ ClickableText.onClick ForceClose + , ClickableText.large + , ClickableText.custom onlyFocusableElement + , ClickableText.css [ Css.marginTop (Css.px 12) ] + ] ] + } ) ( False, True, False ) -> - Modal.onlyFocusableElementView + Modal.OneFocusableElement (\{ onlyFocusableElement } -> - div [] - [ viewContent - { content = [ viewModalContent state.longContent ] - , footer = - [ Button.button "Continue" - [ firstButtonStyle - , Button.onClick ForceClose - , Button.custom onlyFocusableElement - , Button.large - ] - ] - } + { content = [ viewModalContent settings.longContent ] + , footer = + [ Button.button "Continue" + [ firstButtonStyle + , Button.onClick ForceClose + , Button.custom onlyFocusableElement + , Button.large + ] ] + } ) ( False, False, False ) -> - Modal.onlyFocusableElementView + Modal.OneFocusableElement (\_ -> - div [] - [ viewContent - { content = [ viewModalContent state.longContent ] - , footer = [] - } - ] + { content = [ viewModalContent settings.longContent ] + , footer = [] + } ) @@ -276,13 +267,13 @@ viewModalContent longContent = ] -viewSettings : State -> Html Msg -viewSettings state = +viewSettings : Settings -> Html Msg +viewSettings settings = div [] [ Checkbox.viewWithLabel { identifier = "visible-title" , label = "Visible title" - , selected = Checkbox.selectedFromBool state.visibleTitle + , selected = Checkbox.selectedFromBool settings.visibleTitle , setterMsg = SetVisibleTitle , disabled = False , theme = Checkbox.Square @@ -290,7 +281,7 @@ viewSettings state = , Checkbox.viewWithLabel { identifier = "show-x" , label = "Show X button" - , selected = Checkbox.selectedFromBool state.showX + , selected = Checkbox.selectedFromBool settings.showX , setterMsg = SetShowX , disabled = False , theme = Checkbox.Square @@ -298,7 +289,7 @@ viewSettings state = , Checkbox.viewWithLabel { identifier = "show-continue" , label = "Show main button" - , selected = Checkbox.selectedFromBool state.showContinue + , selected = Checkbox.selectedFromBool settings.showContinue , setterMsg = SetShowContinue , disabled = False , theme = Checkbox.Square @@ -306,7 +297,7 @@ viewSettings state = , Checkbox.viewWithLabel { identifier = "show-secondary" , label = "Show secondary button" - , selected = Checkbox.selectedFromBool state.showSecondary + , selected = Checkbox.selectedFromBool settings.showSecondary , setterMsg = SetShowSecondary , disabled = False , theme = Checkbox.Square @@ -314,7 +305,7 @@ viewSettings state = , Checkbox.viewWithLabel { identifier = "dismiss-on-click" , label = "Dismiss on ESC and on backdrop click" - , selected = Checkbox.selectedFromBool state.dismissOnEscAndOverlayClick + , selected = Checkbox.selectedFromBool settings.dismissOnEscAndOverlayClick , setterMsg = SetDismissOnEscAndOverlayClick , disabled = False , theme = Checkbox.Square @@ -322,7 +313,7 @@ viewSettings state = , Checkbox.viewWithLabel { identifier = "long-content" , label = "Display longer content" - , selected = Checkbox.selectedFromBool state.longContent + , selected = Checkbox.selectedFromBool settings.longContent , setterMsg = SetLongContent , disabled = False , theme = Checkbox.Square @@ -332,8 +323,7 @@ viewSettings state = {-| -} type Msg - = InfoModalMsg Modal.Msg - | WarningModalMsg Modal.Msg + = ModalMsg Modal.Msg | ForceClose | SetVisibleTitle Bool | SetShowX Bool @@ -347,55 +337,45 @@ type Msg update : Msg -> State -> ( State, Cmd Msg ) update msg state = let + settings = + state.settings + updateConfig = - { dismissOnEscAndOverlayClick = state.dismissOnEscAndOverlayClick } + { dismissOnEscAndOverlayClick = settings.dismissOnEscAndOverlayClick } in case msg of - InfoModalMsg modalMsg -> - case Modal.update updateConfig modalMsg state.infoModal of + ModalMsg modalMsg -> + case Modal.update updateConfig modalMsg state.state of ( newState, cmds ) -> - ( { state | infoModal = newState } - , Cmd.map InfoModalMsg cmds - ) - - WarningModalMsg modalMsg -> - case Modal.update updateConfig modalMsg state.warningModal of - ( newState, cmds ) -> - ( { state | warningModal = newState } - , Cmd.map WarningModalMsg cmds + ( { state | state = newState } + , Cmd.map ModalMsg cmds ) ForceClose -> - ( { state - | infoModal = Modal.init - , warningModal = Modal.init - } + ( { state | state = Modal.init } , Cmd.none ) SetVisibleTitle value -> - ( { state | visibleTitle = value }, Cmd.none ) + ( { state | settings = { settings | visibleTitle = value } }, Cmd.none ) SetShowX value -> - ( { state | showX = value }, Cmd.none ) + ( { state | settings = { settings | showX = value } }, Cmd.none ) SetShowContinue value -> - ( { state | showContinue = value }, Cmd.none ) + ( { state | settings = { settings | showContinue = value } }, Cmd.none ) SetShowSecondary value -> - ( { state | showSecondary = value }, Cmd.none ) + ( { state | settings = { settings | showSecondary = value } }, Cmd.none ) SetDismissOnEscAndOverlayClick value -> - ( { state | dismissOnEscAndOverlayClick = value }, Cmd.none ) + ( { state | settings = { settings | dismissOnEscAndOverlayClick = value } }, Cmd.none ) SetLongContent value -> - ( { state | longContent = value }, Cmd.none ) + ( { state | settings = { settings | longContent = value } }, Cmd.none ) {-| -} subscriptions : State -> Sub Msg subscriptions model = - Sub.batch - [ Sub.map InfoModalMsg (Modal.subscriptions model.infoModal) - , Sub.map WarningModalMsg (Modal.subscriptions model.warningModal) - ] + Sub.map ModalMsg (Modal.subscriptions model.state)