From d9ede514289e31b06b30d68dd3d9a50365802eed Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sat, 22 Dec 2018 00:05:32 -0800
Subject: [PATCH] Use a text area for multiline input.

---
 src/Scylla/Views.elm   | 17 ++++++++++-------
 static/scss/style.scss |  6 ++++--
 2 files changed, 14 insertions(+), 9 deletions(-)

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;
     }