Add a button to reconnect.

This commit is contained in:
Danila Fedorin 2018-12-27 00:12:48 -08:00
parent 4de9063e67
commit b0e796ee16
4 changed files with 41 additions and 11 deletions

View File

@ -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 =

View File

@ -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

View File

@ -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 =

View File

@ -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.
*/