Fix typing menu to stay the same size.

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 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
 
 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
+            [ textarea
-                [ type_ "text"
+                [ 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 =

static/js/markdown.js

@@ -1,4 +1,4 @@
-function setupNotificationPorts(app) {
+function setupMarkdownPorts(app) {
     app.ports.requestMarkdownPort.subscribe(function(data) {
         app.ports.receiveMarkdownPort.send({
             "roomId" : data.roomId,

static/scss/style.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans|Source+Code+Pro');
 $primary-color: #53C0FA;
 $primary-color-highlight: #4298C7;
 $primary-color-light: #9FDBFB;
@@ -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;
@@ -125,6 +127,8 @@ div.room-wrapper {
 
 div.typing-wrapper {
     padding: 5px;
+    height: 12px;
+    flex-shrink: 0;
 }
 
 /*
@@ -134,7 +138,7 @@ div.message-wrapper {
     display: flex;
     flex-shrink: 0;
 
-    input {
+    input, textarea {
         flex-grow: 12;   
         margin: 3px;
     }
@@ -188,10 +192,31 @@ div.markdown-wrapper {
     p {
         margin: 0px;
     }
+
+    blockquote {
+        margin: 0px 0px 0px 0px;
+        padding-left: 5px;
+        border-left: 4px solid $primary-color;
+    }
+
+    code {
+        font-family: Iosevka, "Source Code Pro", monospace, 
+    }
+
+    pre code {
+        width: 100%;
+        overflow: auto;
+        display: block;
+        box-sizing: border-box;
+        padding: 10px;
+        background-color: $background-color;
+        border-radius: 3px;
+        box-shadow: inset 0px 0px 5px rgba(0, 0, 0, .15);
+    }
 }
 
 span.sender-wrapper {
-    border-radius: 2px;
+    border-radius: 3px;
     padding-left: 5px;
     padding-right: 5px;
     display: inline-block;