diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm index 852776e..101c1b8 100644 --- a/src/Scylla/Views.elm +++ b/src/Scylla/Views.elm @@ -12,13 +12,13 @@ import Dict viewFull : Model -> List (Html Msg) viewFull model = let + room r = Maybe.map (\jr -> (r, jr)) + <| Maybe.andThen (Dict.get r) + <| Maybe.andThen .join model.sync.rooms core = case model.route of Login -> loginView model - Base -> baseView model - Room r -> Maybe.withDefault (div [] []) - <| Maybe.map (joinedRoomView model r) - <| Maybe.andThen (Dict.get r) - <| Maybe.andThen .join model.sync.rooms + Base -> baseView model Nothing + Room r -> baseView model <| room r _ -> div [] [] errorList = errorsView model.errors in @@ -30,19 +30,31 @@ errorsView = div [] << List.map errorView errorView : String -> Html Msg errorView s = div [] [ text s ] -baseView : Model -> Html Msg -baseView m = - let +baseView : Model -> Maybe (String, JoinedRoom) -> Html Msg +baseView m jr = + let + roomView = case jr of + Just (id, r) -> joinedRoomView m id r + Nothing -> div [] [] + in + div [ class "base-wrapper" ] + [ roomListView m + , roomView + ] + +roomListView : Model -> Html Msg +roomListView m = + let rooms = Maybe.withDefault (Dict.empty) <| Maybe.andThen .join <| m.sync.rooms - roomList = div [ class "rooms-list" ] <| Dict.values <| Dict.map roomListView rooms + roomList = div [ class "rooms-list" ] <| Dict.values <| Dict.map roomListElementView rooms in div [ class "rooms-wrapper" ] [ h2 [] [ text "Rooms" ] , roomList ] -roomListView : String -> JoinedRoom -> Html Msg -roomListView s jr = +roomListElementView : String -> JoinedRoom -> Html Msg +roomListElementView s jr = let name = Maybe.withDefault "" <| roomName jr in @@ -63,7 +75,7 @@ joinedRoomView m roomId jr = events = Maybe.withDefault [] <| Maybe.andThen .events jr.timeline renderedEvents = List.filterMap (eventView m) events eventWrapper = eventWrapperView m renderedEvents - messageInput = div [] + messageInput = div [ class "message-wrapper" ] [ input [ type_ "text" , onInput <| ChangeRoomText roomId @@ -72,7 +84,11 @@ joinedRoomView m roomId jr = , button [ onClick <| SendRoomText roomId ] [ text "Send" ] ] in - div [] [ eventWrapper, messageInput ] + div [ class "room-wrapper" ] + [ h2 [] [ text <| Maybe.withDefault "" <| roomName jr ] + , eventWrapper + , messageInput + ] eventWrapperView : Model -> List (Html Msg) -> Html Msg eventWrapperView m = div [] diff --git a/static/scss/style.scss b/static/scss/style.scss index 379fe71..d4ececd 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -55,6 +55,11 @@ a { } } +h2 { + margin: 0px; + margin-bottom: 3px; +} + /* * Login Screen */ @@ -68,9 +73,48 @@ div.login-wrapper { input, button { margin: 3px; } +} - h2 { - margin: 0px; - margin-bottom: 3px; +/* + * Base View + */ +div.base-wrapper { + display: flex; + + div { + margin: 3px; + } +} + +/* + * The list of rooms + */ +div.rooms-wrapper { + a { + display: block; + } +} + +/* + * The current room, if any. + */ +div.room-wrapper { + flex-grow: 1; +} + +/* + * The message input and send button. + */ +div.message-wrapper { + display: flex; + + input { + flex-grow: 9; + margin: 3px; + } + + button { + flex-grow: 1; + margin: 3px; } }