chatview: add multiline messages support
Change the text input to a text area to send multiline messages and show
messages in a HTML "pre" block to show spaces and new lines.
Change-Id: Iaab46e6e0972784a7b65ac430c5b0e94e8e81191
diff --git a/web/chatview.css b/web/chatview.css
index ce14d19..1dce00f 100644
--- a/web/chatview.css
+++ b/web/chatview.css
@@ -25,30 +25,31 @@
#sendMessage {
display: flex;
- width: 97%;
position: relative;
- transform: translateZ(0);
- height: 50px;
border-top : 2px solid #d3d3d3;
- padding-right: 10px;
- margin-left: 1%;
- margin-right: 1.5%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-left: 8px;
+ overflow: hidden;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ align-items: center;
+
}
#message {
- width: 100%;
- border: 0;
- height: 55px;
- overflow: hidden;
- padding-right: 20px;
- color: black;
- padding-left: 8px;
flex: 1;
+ margin-right: 10px;
+ border: 0;
+ overflow-y: scroll;
+ color: black;
+ max-height: 150px;
+ padding-left: 8px;
+ resize: none;
}
#message:focus,
#message.focus {
- border: 0;
outline: none;
}
@@ -61,7 +62,7 @@
border: 0;
width: 40px;
height: 40px;
- margin-top: 8px;
+ align-self: center;
transition: all 0.3s ease;
}
@@ -194,6 +195,17 @@
overflow: hidden;
}
+pre {
+ font : inherit;
+ font-family : inherit;
+ font-size : inherit;
+ font-style : inherit;
+ font-variant : inherit;
+ font-weight : inherit;
+ margin: 0;
+ padding: 0;
+}
+
.message_out {
flex-direction: row-reverse;
}