From f12a72871f65f374bd183d30ea5dfb6885866515 Mon Sep 17 00:00:00 2001 From: James Hillyerd Date: Wed, 12 Dec 2018 20:37:39 -0800 Subject: [PATCH] ui: Mailbox purge prompts for confirmation --- ui/src/Main.elm | 12 +++++---- ui/src/Page/Home.elm | 3 ++- ui/src/Page/Mailbox.elm | 58 ++++++++++++++++++++++++++++++++--------- ui/src/Page/Monitor.elm | 3 ++- ui/src/Page/Status.elm | 3 ++- ui/src/Views/Page.elm | 17 ++++++++++-- ui/src/main.css | 21 +++++++++++++++ 7 files changed, 94 insertions(+), 23 deletions(-) diff --git a/ui/src/Main.elm b/ui/src/Main.elm index 401e45a..c56c002 100644 --- a/ui/src/Main.elm +++ b/ui/src/Main.elm @@ -298,13 +298,15 @@ view model = framePage : ActivePage -> (msg -> Msg) - -> { title : String, content : Html msg } + -> { title : String, modal : Maybe (Html msg), content : Html msg } -> Document Msg - framePage page toMsg { title, content } = + framePage page toMsg { title, modal, content } = Document title - [ content - |> Html.map toMsg - |> Page.frame controls model.session page + [ Page.frame controls + model.session + page + (Maybe.map (Html.map toMsg) modal) + (Html.map toMsg content) ] in case model.page of diff --git a/ui/src/Page/Home.elm b/ui/src/Page/Home.elm index fb161bb..f997769 100644 --- a/ui/src/Page/Home.elm +++ b/ui/src/Page/Home.elm @@ -51,9 +51,10 @@ update session msg model = -- VIEW -- -view : Session -> Model -> { title : String, content : Html Msg } +view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg } view session model = { title = "Inbucket" + , modal = Nothing , content = div [ class "page" ] [ Html.node "rendered-html" diff --git a/ui/src/Page/Mailbox.elm b/ui/src/Page/Mailbox.elm index 8557b3d..5a2a7ce 100644 --- a/ui/src/Page/Mailbox.elm +++ b/ui/src/Page/Mailbox.elm @@ -73,13 +73,14 @@ type alias Model = , state : State , bodyMode : Body , searchInput : String + , promptPurge : Bool , now : Posix } init : String -> Maybe MessageID -> ( Model, Cmd Msg, Session.Msg ) init mailboxName selection = - ( Model mailboxName (LoadingList selection) SafeHtmlBody "" (Time.millisToPosix 0) + ( Model mailboxName (LoadingList selection) SafeHtmlBody "" False (Time.millisToPosix 0) , load mailboxName , Session.none ) @@ -133,7 +134,9 @@ type Msg | MarkedSeen (Result Http.Error ()) | DeleteMessage Message | DeletedMessage (Result Http.Error ()) - | PurgeMailbox + | PurgeMailboxPrompt + | PurgeMailboxCanceled + | PurgeMailboxConfirmed | PurgedMailbox (Result Http.Error ()) | OnSearchInput String | Tick Posix @@ -232,8 +235,14 @@ update session msg model = _ -> ( model, Cmd.none, Session.none ) - PurgeMailbox -> - updatePurge model + PurgeMailboxPrompt -> + ( { model | promptPurge = True }, Cmd.none, Session.none ) + + PurgeMailboxCanceled -> + ( { model | promptPurge = False }, Cmd.none, Session.none ) + + PurgeMailboxConfirmed -> + updatePurge session model PurgedMailbox (Ok _) -> ( model, Cmd.none, Session.none ) @@ -291,19 +300,25 @@ updateMessageResult model message = ) -updatePurge : Model -> ( Model, Cmd Msg, Session.Msg ) -updatePurge model = +updatePurge : Session -> Model -> ( Model, Cmd Msg, Session.Msg ) +updatePurge session model = let cmd = - "/api/v1/mailbox/" - ++ model.mailboxName - |> HttpUtil.delete PurgedMailbox + Cmd.batch + [ Route.replaceUrl session.key (Route.Mailbox model.mailboxName) + , "/api/v1/mailbox/" + ++ model.mailboxName + |> HttpUtil.delete PurgedMailbox + ] in case model.state of ShowingList list _ -> - ( { model | state = ShowingList (MessageList [] Nothing "") NoMessage } + ( { model + | promptPurge = False + , state = ShowingList (MessageList [] Nothing "") NoMessage + } , cmd - , Session.none + , Session.DisableRouting ) _ -> @@ -470,9 +485,10 @@ getMessage mailboxName id = -- VIEW -view : Session -> Model -> { title : String, content : Html Msg } +view : Session -> Model -> { title : String, modal : Maybe (Html Msg), content : Html Msg } view session model = { title = model.mailboxName ++ " - Inbucket" + , modal = viewModal model.promptPurge , content = div [ class "page mailbox" ] [ aside [ class "message-list-controls" ] @@ -483,7 +499,7 @@ view session model = , value model.searchInput ] [] - , button [ onClick PurgeMailbox ] [ text "Purge" ] + , button [ onClick PurgeMailboxPrompt ] [ text "Purge" ] ] , viewMessageList session model , main_ @@ -508,6 +524,22 @@ view session model = } +viewModal : Bool -> Maybe (Html Msg) +viewModal promptPurge = + if promptPurge then + Just <| + div [] + [ p [] [ text "Are you sure you want to delete all messages in this mailbox?" ] + , div [ class "button-bar" ] + [ button [ onClick PurgeMailboxConfirmed, class "danger" ] [ text "Yes" ] + , button [ onClick PurgeMailboxCanceled ] [ text "Cancel" ] + ] + ] + + else + Nothing + + viewMessageList : Session -> Model -> Html Msg viewMessageList session model = aside [ class "message-list" ] <| diff --git a/ui/src/Page/Monitor.elm b/ui/src/Page/Monitor.elm index f775842..5c389b9 100644 --- a/ui/src/Page/Monitor.elm +++ b/ui/src/Page/Monitor.elm @@ -82,9 +82,10 @@ update session msg model = -- VIEW -view : Session -> Model -> { title : String, content : Html Msg } +view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg } view session model = { title = "Inbucket Monitor" + , modal = Nothing , content = div [ class "page" ] [ h1 [] [ text "Monitor" ] diff --git a/ui/src/Page/Status.elm b/ui/src/Page/Status.elm index e3aedd9..e583c62 100644 --- a/ui/src/Page/Status.elm +++ b/ui/src/Page/Status.elm @@ -240,9 +240,10 @@ loadServerConfig = -- VIEW -- -view : Session -> Model -> { title : String, content : Html Msg } +view : Session -> Model -> { title : String, modal : Maybe (Html msg), content : Html Msg } view session model = { title = "Inbucket Status" + , modal = Nothing , content = div [ class "page" ] [ h1 [] [ text "Status" ] diff --git a/ui/src/Views/Page.elm b/ui/src/Views/Page.elm index fd4026c..85c9c40 100644 --- a/ui/src/Views/Page.elm +++ b/ui/src/Views/Page.elm @@ -37,8 +37,8 @@ type alias FrameControls msg = } -frame : FrameControls msg -> Session -> ActivePage -> Html msg -> Html msg -frame controls session page content = +frame : FrameControls msg -> Session -> ActivePage -> Maybe (Html msg) -> Html msg -> Html msg +frame controls session page modal content = div [ class "app" ] [ header [] [ ul [ class "navbar", attribute "role" "navigation" ] @@ -62,6 +62,7 @@ frame controls session page content = , errorFlash controls session.flash ] , div [ class "navbar-bg" ] [ text "" ] + , frameModal modal , content , footer [] [ div [ class "footer" ] @@ -74,6 +75,18 @@ frame controls session page content = ] +frameModal : Maybe (Html msg) -> Html msg +frameModal maybeModal = + case maybeModal of + Just modal -> + div [ class "modal-mask" ] + [ div [ class "modal well" ] [ modal ] + ] + + Nothing -> + text "" + + errorFlash : FrameControls msg -> String -> Html msg errorFlash controls message = if message == "" then diff --git a/ui/src/main.css b/ui/src/main.css index 7b14a41..35abfd2 100644 --- a/ui/src/main.css +++ b/ui/src/main.css @@ -162,6 +162,27 @@ h1 { max-width: 1000px; } +.modal-mask { + background-color: rgba(0,0,0,0.4); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.modal { + position: absolute; + top: 50%; + left: 50%; + height: auto; + max-height: 80%; + width: 700px; + max-width: 95%; + transform: translate(-50%, -50%); + padding: 10px !important; +} + /** NAV BAR */ .navbar,