From 1f3f3ff1770de32c0afa5bf9b46c684e83fd2d91 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 4 Dec 2020 12:15:47 +0100
Subject: [PATCH] Reworked input field

---
 src/assets/css/chat.scss | 68 ++++++++++++++++++++------------------
 src/components/Chat.vue  | 71 ++++++++++++++++++++++------------------
 2 files changed, 77 insertions(+), 62 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 9db6eca..950a8fb 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -57,49 +57,55 @@ $chat-text-size: 0.7pt;
     }
 
     .input-area {
-        background-color: #cccccc;
+        background-color: #e2e2e2;
         margin: 0;
         padding-left: $chat-standard-padding-s;
         padding-right: $chat-standard-padding-s;
-        .currentImage {
-            width: 6 * $chat-standard-padding-s;
-            height: 6 * $chat-standard-padding-s;
-        }
     }
 
-    .input-message {
-        font-family: 'Titillium Web', sans-serif;
-        font-weight: 300;
-        font-size: 15 * $chat-text-size;
-        font-style: italic;
-        height: 3 * $chat-standard-padding-s;
-        padding: 0 10px 0 10px;
-        margin: $chat-standard-padding-xs 0 0 0;
-        color: #999999;
-        //background-color: #ffffff;
-        overflow: hidden;
-        border: 1px solid #cccccc;
-        border-radius: 0;
-        .v-input__slot {
-            /* Remove text underline */
-            color: transparent !important;
+    .input-area-outer {
+        background-color: #e2e2e2;
+        margin: 0;
+        padding-left: 2 * $chat-standard-padding-s;
+        padding-right: 2 * $chat-standard-padding-s;
+        padding-top: 0px;
+        .typing {
+            font-family: 'Titillium Web', sans-serif;
+            font-weight: 300;
+            font-size: 12 * $chat-text-size;
+            color: #1c242a;
+            text-align: center;
+            min-height: 20px;
         }
-        .v-text-field__slot {
+        .input-area-inner {
+            background-color: white;
+            border-radius: $chat-standard-padding-s;
+        }
+        .input-area-button {
+            margin: 0;
             padding: 0;
-            max-height: 3 * $chat-standard-padding-s;
-            height: 3 * $chat-standard-padding-s;
+            min-width: 48px;
+            min-height: 48px;
         }
-        textarea {
-            line-height: 1.1rem;
-        }
-        .v-input__prepend-outer {
-            margin-top: 0px;
+        .input-area-text {
+            max-height: 30vh;
+            overflow-x: hidden;
+            overflow-y: auto;
+            padding: 0 0 0 0px;
+            margin: 6px 0;
+            font-family: 'Titillium Web', sans-serif;
+            font-weight: 300;
+            font-size: 18 * $chat-text-size;
+            .v-input__slot {
+                /* Remove text underline */
+                color: transparent !important;
+                min-height: 20px;
+            }
         }
     }
 }
 
-.messageJoin,
-.typing {
+.messageJoin {
     font-family: 'Titillium Web', sans-serif;
     font-weight: 300;
     font-size: 15 * $chat-text-size;
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index b3b22b4..176b4a4 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -55,22 +55,19 @@
     </div>
 
     <!-- Input area -->
-    <div v-if="room" class="input-area flex-grow-0 flex-shrink-0">
-      <!-- CONTACT IS TYPING -->
-      <div v-show="contactIsTyping" class="typing">Someone is typing...</div>
-      <v-textarea
-        ref="messageInput"
-        full-width
-        v-model="currentInput"
-        no-resize
-        class="input-message"
-        placeholder="Send message"
-        hide-details
-        background-color="white"
-      >
-        <template v-slot:prepend>
-          <label icon flat>
-            <v-icon>attachment</v-icon>
+    <v-container v-if="room" fluid class="input-area-outer">
+      <v-row class="ma-0 pa-0">
+        <!-- CONTACT IS TYPING -->
+        <div class="typing">
+          {{ contactIsTyping ? "Someone is typing..." : "" }}
+        </div>
+      </v-row>
+      <v-row class="input-area-inner">
+        <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
+          <label icon flat ref="attachmentLabel">
+            <v-btn icon @click="$refs.attachment.click()">
+              <v-icon>attachment</v-icon>
+            </v-btn>
             <input
               ref="attachment"
               type="file"
@@ -80,17 +77,32 @@
               style="display: none"
             />
           </label>
-        </template>
-      </v-textarea>
-      <div align-self="end" class="text-right">
-        <v-btn
-          elevation="0"
-          @click.stop="sendMessage"
-          :disabled="sendButtonDisabled"
-          >Send</v-btn
-        >
-      </div>
-    </div>
+        </v-col>
+
+        <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
+          <v-textarea
+            height="undefined"
+            ref="messageInput"
+            full-width
+            auto-grow
+            rows="1"
+            v-model="currentInput"
+            no-resize
+            class="input-area-text"
+            placeholder="Send message"
+            hide-details
+            background-color="white"
+            v-on:keydown.enter.prevent="() => { sendMessage() }"
+          />
+        </v-col>
+
+        <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
+          <v-btn icon @click.stop="sendMessage" :disabled="sendButtonDisabled">
+            <v-icon>send</v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
 
     <div v-if="currentImageInput">
       <v-dialog v-model="currentImageInput" class="ma-0 pa-0" width="50%">
@@ -227,7 +239,6 @@ export default {
     this.$matrix.on("Room.timeline", this.onEvent);
     this.$matrix.on("RoomMember.typing", this.onUserTyping);
     this.chatContainerSize = this.$refs.chatContainerResizer.$el.clientHeight;
-    console.log("resize initial height: ", this.chatContainerSize);
   },
 
   destroyed() {
@@ -335,11 +346,9 @@ export default {
      * moving focus to the input field, we would still see the last message. Otherwise
      * if would be hidden behind the keyboard.
      */
-    handleChatContainerResize({ width, height }) {
-      console.log("resized", width, height);
+    handleChatContainerResize({ ignoredWidth, height }) {
       const delta = height - this.chatContainerSize;
       this.chatContainerSize = height;
-      console.log("resized delta " + delta);
       const container = this.$refs.chatContainer;
       if (delta < 0) {
         container.scrollTop -= delta;