diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm index f3d48ce..c0e7db8 100644 --- a/src/Scylla/Views.elm +++ b/src/Scylla/Views.elm @@ -12,9 +12,9 @@ import Svg import Svg.Attributes import Url.Builder import Json.Decode as Decode -import Html exposing (Html, Attribute, div, input, text, button, div, span, a, h2, table, td, tr, img) -import Html.Attributes exposing (type_, value, href, class, style, src, id) -import Html.Events exposing (onInput, onClick, on) +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, rows) +import Html.Events exposing (onInput, onClick, preventDefaultOn) import Dict contentRepositoryDownloadUrl : ApiUrl -> String -> String @@ -125,8 +125,8 @@ joinedRoomView m roomId jr = _ -> " are typing..." typingWrapper = div [ class "typing-wrapper" ] [ text <| typingText ++ typingSuffix ] messageInput = div [ class "message-wrapper" ] - [ input - [ type_ "text" + [ textarea + [ rows 1 , onInput <| ChangeRoomText roomId , onEnterKey <| SendRoomText roomId , value <| Maybe.withDefault "" <| Dict.get roomId m.roomText @@ -146,9 +146,12 @@ joinedRoomView m roomId jr = onEnterKey : Msg -> Attribute Msg onEnterKey msg = 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 - on "keydown" (Decode.andThen isEnter <| Decode.field "keyCode" Decode.int) + preventDefaultOn "keydown" decoder iconView : String -> Html Msg iconView name = diff --git a/static/scss/style.scss b/static/scss/style.scss index a587b6d..49ae7b6 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -28,9 +28,11 @@ body { outline: none; transition: background-color $transition-duration; + font-family: inherit; + font-size: inherit; } -input { +input, textarea { @include input-common(); background-color: $inactive-input-color; color: black; @@ -134,7 +136,7 @@ div.message-wrapper { display: flex; flex-shrink: 0; - input { + input, textarea { flex-grow: 12; margin: 3px; }