mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-25 22:53:34 +03:00
Configure when the x shows
This commit is contained in:
parent
a049f6a167
commit
a006d2836b
@ -2,7 +2,7 @@ module Nri.Ui.Modal.V5 exposing
|
|||||||
( Model
|
( Model
|
||||||
, info
|
, info
|
||||||
, warning
|
, warning
|
||||||
, Msg, closeButton, init, launchButton, subscriptions, toOverlayColor, update, viewFooter, viewModalContainer, viewTitle
|
, FocusableElement(..), Msg, closeButton, init, launchButton, subscriptions, toOverlayColor, update, viewFooter, viewModalContainer, viewTitle
|
||||||
)
|
)
|
||||||
|
|
||||||
{-| Changes from V4:
|
{-| Changes from V4:
|
||||||
@ -190,8 +190,14 @@ viewTitle { visibleTitle, title } color =
|
|||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
closeButton : msg -> Html msg
|
type FocusableElement
|
||||||
closeButton msg =
|
= OnlyFocusableElement
|
||||||
|
| FirstFocusableElement
|
||||||
|
| LastFocusableElement
|
||||||
|
|
||||||
|
|
||||||
|
closeButton : FocusableElement -> Html Msg
|
||||||
|
closeButton focusableElement =
|
||||||
Nri.Ui.styled button
|
Nri.Ui.styled button
|
||||||
"close-button-container"
|
"close-button-container"
|
||||||
[ Css.position Css.absolute
|
[ Css.position Css.absolute
|
||||||
@ -206,9 +212,21 @@ closeButton msg =
|
|||||||
, Css.hover [ Css.color Colors.azureDark ]
|
, Css.hover [ Css.color Colors.azureDark ]
|
||||||
, Css.property "transition" "color 0.1s"
|
, Css.property "transition" "color 0.1s"
|
||||||
]
|
]
|
||||||
[ onClick msg
|
(Widget.label "Close modal"
|
||||||
, Widget.label "Close modal"
|
:: (Modal.closeOnClick
|
||||||
]
|
:: (case focusableElement of
|
||||||
|
OnlyFocusableElement ->
|
||||||
|
Modal.singleFocusableElement
|
||||||
|
|
||||||
|
FirstFocusableElement ->
|
||||||
|
Modal.firstFocusableElement
|
||||||
|
|
||||||
|
LastFocusableElement ->
|
||||||
|
Modal.lastFocusableElement
|
||||||
|
)
|
||||||
|
|> List.map Html.Styled.Attributes.fromUnstyled
|
||||||
|
)
|
||||||
|
)
|
||||||
[ Nri.Ui.Svg.V1.toHtml Nri.Ui.SpriteSheet.xSvg
|
[ Nri.Ui.Svg.V1.toHtml Nri.Ui.SpriteSheet.xSvg
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -20,6 +20,7 @@ type alias State =
|
|||||||
{ infoModal : Modal.Model
|
{ infoModal : Modal.Model
|
||||||
, warningModal : Modal.Model
|
, warningModal : Modal.Model
|
||||||
, visibleTitle : Bool
|
, visibleTitle : Bool
|
||||||
|
, showX : Bool
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -29,6 +30,7 @@ init =
|
|||||||
{ infoModal = Modal.init
|
{ infoModal = Modal.init
|
||||||
, warningModal = Modal.init
|
, warningModal = Modal.init
|
||||||
, visibleTitle = True
|
, visibleTitle = True
|
||||||
|
, showX = False
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -47,6 +49,14 @@ example parentMessage state =
|
|||||||
, disabled = False
|
, disabled = False
|
||||||
, theme = Checkbox.Square
|
, theme = Checkbox.Square
|
||||||
}
|
}
|
||||||
|
, Checkbox.viewWithLabel
|
||||||
|
{ identifier = "show-x"
|
||||||
|
, label = "Show X button"
|
||||||
|
, selected = Checkbox.selectedFromBool state.showX
|
||||||
|
, setterMsg = SetShowX
|
||||||
|
, disabled = False
|
||||||
|
, theme = Checkbox.Square
|
||||||
|
}
|
||||||
, h4 [] [ text "Modals" ]
|
, h4 [] [ text "Modals" ]
|
||||||
, Modal.info
|
, Modal.info
|
||||||
{ launchButton = Modal.launchButton [] "Launch Info Modal"
|
{ launchButton = Modal.launchButton [] "Launch Info Modal"
|
||||||
@ -56,7 +66,9 @@ example parentMessage state =
|
|||||||
, visibleTitle =
|
, visibleTitle =
|
||||||
state.visibleTitle
|
state.visibleTitle
|
||||||
}
|
}
|
||||||
, content = text "This is where the content goes!"
|
, content =
|
||||||
|
viewContent state
|
||||||
|
|> Html.map InfoModalMsg
|
||||||
, parentMsg = InfoModalMsg
|
, parentMsg = InfoModalMsg
|
||||||
}
|
}
|
||||||
state.infoModal
|
state.infoModal
|
||||||
@ -68,7 +80,9 @@ example parentMessage state =
|
|||||||
, visibleTitle =
|
, visibleTitle =
|
||||||
state.visibleTitle
|
state.visibleTitle
|
||||||
}
|
}
|
||||||
, content = text "This is where the content goes!"
|
, content =
|
||||||
|
viewContent state
|
||||||
|
|> Html.map WarningModalMsg
|
||||||
, parentMsg = WarningModalMsg
|
, parentMsg = WarningModalMsg
|
||||||
}
|
}
|
||||||
state.warningModal
|
state.warningModal
|
||||||
@ -77,11 +91,24 @@ example parentMessage state =
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
viewContent : State -> Html Modal.Msg
|
||||||
|
viewContent state =
|
||||||
|
div []
|
||||||
|
[ if state.showX then
|
||||||
|
Modal.closeButton Modal.OnlyFocusableElement
|
||||||
|
|
||||||
|
else
|
||||||
|
text ""
|
||||||
|
, text "This is where the content goes!"
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
{-| -}
|
||||||
type Msg
|
type Msg
|
||||||
= InfoModalMsg Modal.Msg
|
= InfoModalMsg Modal.Msg
|
||||||
| WarningModalMsg Modal.Msg
|
| WarningModalMsg Modal.Msg
|
||||||
| SetVisibleTitle Bool
|
| SetVisibleTitle Bool
|
||||||
|
| SetShowX Bool
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
{-| -}
|
||||||
@ -105,6 +132,9 @@ update msg state =
|
|||||||
SetVisibleTitle value ->
|
SetVisibleTitle value ->
|
||||||
( { state | visibleTitle = value }, Cmd.none )
|
( { state | visibleTitle = value }, Cmd.none )
|
||||||
|
|
||||||
|
SetShowX value ->
|
||||||
|
( { state | showX = value }, Cmd.none )
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
{-| -}
|
||||||
subscriptions : State -> Sub Msg
|
subscriptions : State -> Sub Msg
|
||||||
|
Loading…
Reference in New Issue
Block a user