Matrix-Programs/Scylla
1
0
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity

Use a text area for multiline input.

Browse Source
This commit is contained in:
Danila Fedorin 2018-12-22 00:05:32 -08:00
parent ee21fa199d
commit d9ede51428
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/Scylla/Views.elm
View File

@ -12,9 +12,9 @@ import Svg
import Svg.Attributes import Svg.Attributes
import Url.Builder import Url.Builder
import Json.Decode as Decode import Json.Decode as Decode
import Html exposing (Html, Attribute, div, input, text, button, div, span, a, h2, table, td, tr, img) import Html exposing (Html, Attribute, div, input, text, button, div, span, a, h2, table, td, tr, img, textarea)
import Html.Attributes exposing (type_, value, href, class, style, src, id) import Html.Attributes exposing (type_, value, href, class, style, src, id, rows)
import Html.Events exposing (onInput, onClick, on) import Html.Events exposing (onInput, onClick, preventDefaultOn)
import Dict import Dict
contentRepositoryDownloadUrl : ApiUrl -> String -> String contentRepositoryDownloadUrl : ApiUrl -> String -> String
@ -125,8 +125,8 @@ joinedRoomView m roomId jr =
_ -> " are typing..." _ -> " are typing..."
typingWrapper = div [ class "typing-wrapper" ] [ text <| typingText ++ typingSuffix ] typingWrapper = div [ class "typing-wrapper" ] [ text <| typingText ++ typingSuffix ]
messageInput = div [ class "message-wrapper" ] messageInput = div [ class "message-wrapper" ]
[ input [ textarea
[ type_ "text" [ rows 1
, onInput <| ChangeRoomText roomId , onInput <| ChangeRoomText roomId
, onEnterKey <| SendRoomText roomId , onEnterKey <| SendRoomText roomId
, value <| Maybe.withDefault "" <| Dict.get roomId m.roomText , value <| Maybe.withDefault "" <| Dict.get roomId m.roomText
@ -146,9 +146,12 @@ joinedRoomView m roomId jr =
onEnterKey : Msg -> Attribute Msg onEnterKey : Msg -> Attribute Msg
onEnterKey msg = onEnterKey msg =
let let
isEnter code = if code == 13 then Decode.succeed msg else Decode.fail "Not ENTER" eventDecoder = Decode.map2 (\l r -> (l, r)) (Decode.field "keyCode" Decode.int) (Decode.field "shiftKey" Decode.bool)
msgFor (code, shift) = if code == 13 && not shift then Decode.succeed msg else Decode.fail "Not ENTER"
pairTrue v = (v, True)
decoder = Decode.map pairTrue <| Decode.andThen msgFor <| eventDecoder
in in
on "keydown" (Decode.andThen isEnter <| Decode.field "keyCode" Decode.int) preventDefaultOn "keydown" decoder
iconView : String -> Html Msg iconView : String -> Html Msg
iconView name = iconView name =

6
static/scss/style.scss
View File

@ -28,9 +28,11 @@ body {
outline: none; outline: none;
transition: background-color $transition-duration; transition: background-color $transition-duration;
font-family: inherit;
font-size: inherit;
} }
input { input, textarea {
@include input-common(); @include input-common();
background-color: $inactive-input-color; background-color: $inactive-input-color;
color: black; color: black;
@ -134,7 +136,7 @@ div.message-wrapper {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
input { input, textarea {
flex-grow: 12; flex-grow: 12;
margin: 3px; margin: 3px;
} }