From b0e796ee16c02713f03b0f249b8f6732a9b9326c Mon Sep 17 00:00:00 2001 From: Danila Fedorin Date: Thu, 27 Dec 2018 00:12:48 -0800 Subject: [PATCH] Add a button to reconnect. --- src/Main.elm | 4 +++- src/Scylla/Model.elm | 2 ++ src/Scylla/Views.elm | 22 +++++++++++++++------- static/scss/style.scss | 24 +++++++++++++++++++++--- 4 files changed, 41 insertions(+), 11 deletions(-) diff --git a/src/Main.elm b/src/Main.elm index 09a8320..418b705 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -49,6 +49,7 @@ init _ url key = , roomText = Dict.empty , transactionId = 0 , userData = Dict.empty + , connected = True } cmd = getStoreValuePort "scylla.loginInfo" in @@ -94,6 +95,7 @@ update msg model = case msg of SendFileResponse _ -> (model, Cmd.none) ReceiveMarkdown md -> updateMarkdown model md DismissError i -> updateDismissError model i + AttemptReconnect -> ({ model | connected = True }, firstSync model.apiUrl (Maybe.withDefault "" model.token)) updateDismissError : Model -> Int -> (Model, Cmd Msg) updateDismissError m i = ({ m | errors = (List.take i m.errors) ++ (List.drop (i+1) m.errors)}, Cmd.none) @@ -319,7 +321,7 @@ updateSyncResponse model r notify = , setScrollCmd sr , setReadReceiptCmd sr ]) - _ -> (model, Cmd.none) + _ -> ({ model | connected = False }, Cmd.none) subscriptions : Model -> Sub Msg subscriptions m = diff --git a/src/Scylla/Model.elm b/src/Scylla/Model.elm index 6fb8a6b..150be74 100644 --- a/src/Scylla/Model.elm +++ b/src/Scylla/Model.elm @@ -29,6 +29,7 @@ type alias Model = , roomText : Dict String String , transactionId : Int , userData : Dict Username UserData + , connected : Bool } type Msg = @@ -64,6 +65,7 @@ type Msg = | SendFileResponse (Result Http.Error ()) | ReceiveMarkdown MarkdownResponse | DismissError Int + | AttemptReconnect displayName : Model -> Username -> String displayName m s = Maybe.withDefault (senderName s) <| Maybe.andThen .displayName <| Dict.get s m.userData diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm index e6c5738..b5ca917 100644 --- a/src/Scylla/Views.elm +++ b/src/Scylla/Views.elm @@ -18,6 +18,9 @@ import Html.Events exposing (onInput, onClick, preventDefaultOn) import Dict exposing (Dict) import Tuple +maybeHtml : List (Maybe (Html Msg)) -> List (Html Msg) +maybeHtml = List.filterMap (\i -> i) + contentRepositoryDownloadUrl : ApiUrl -> String -> String contentRepositoryDownloadUrl apiUrl s = let @@ -59,14 +62,19 @@ errorView i s = div [ class "error-wrapper", onClick <| DismissError i ] [ iconV baseView : Model -> Maybe (String, JoinedRoom) -> Html Msg baseView m jr = let - roomView = case jr of - Just (id, r) -> joinedRoomView m id r - Nothing -> div [] [] + roomView = Maybe.map (\(id, r) -> joinedRoomView m id r) jr + reconnect = reconnectView m in - div [ class "base-wrapper" ] - [ roomListView m - , roomView - ] + div [ class "base-wrapper" ] <| maybeHtml + [ Just <| roomListView m + , roomView + , reconnect + ] + +reconnectView : Model -> Maybe (Html Msg) +reconnectView m = if m.connected + then Nothing + else Just <| div [ class "reconnect-wrapper", onClick AttemptReconnect ] [ iconView "zap", text "Disconnected. Click here to reconnect." ] roomListView : Model -> Html Msg roomListView m = diff --git a/static/scss/style.scss b/static/scss/style.scss index fe75e4c..d991a46 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -2,17 +2,20 @@ $primary-color: #53C0FA; $primary-color-highlight: #4298C7; $primary-color-light: #9FDBFB; -$active-input-color: #282d30; + $background-color: #1b1e21; $background-color-dark: darken($background-color, 4%); + $error-color: #f01d43; $error-color-dark: darken(#f01d43, 10%); -$transition-duration: .125s; -$inactive-input-color: darken($active-input-color, 3%); +$active-input-color: #282d30; $active-input-border-color: $primary-color; +$inactive-input-color: darken($active-input-color, 3%); $inactive-input-border-color: darken($inactive-input-color, 10%); +$transition-duration: .125s; + html, body { height: 100vh; } @@ -160,6 +163,21 @@ div.room-link-wrapper { } } +div.reconnect-wrapper { + position: fixed; + bottom: 20px; + left: 20px; + display: flex; + align-items: center; + background-color: $inactive-input-color; + border: 1px solid $inactive-input-border-color; + border-radius: 3px; + + .feather-icon { + margin-right: 10px; + } +} + /* * The current room, if any. */