From ad0e5788aa04c2272525d5ca2b93fa8d51bcbbf6 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Mon, 14 Dec 2020 17:12:29 +0100
Subject: [PATCH] Allow cancel of edit

---
 src/assets/css/chat.scss |  2 +-
 src/components/Chat.vue  | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 30a5554..54ac879 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -276,7 +276,7 @@ $chat-text-size: 0.7pt;
 .message-operations {
     position: absolute;
     width: auto;
-    background-color: #ffe2e2;
+    background-color: #e2e2e2;
     &.incoming {
         right: 30%;
     }
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 93c6603..c0d604a 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -81,7 +81,7 @@
       <v-row class="input-area-inner align-center">
         <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
           <label icon flat ref="attachmentLabel">
-            <v-btn icon large color="black" @click="showAttachmentPicker">
+            <v-btn icon large color="black" @click="showAttachmentPicker" :disabled="attachButtonDisabled">
               <v-icon x-large>add_circle_outline</v-icon>
             </v-btn>
             <input
@@ -112,9 +112,14 @@
           />
         </v-col>
 
+        <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1" v-if="editedEvent">
+          <v-btn fab small elevation="0" color="black" @click.stop="cancelEdit">
+            <v-icon color="white">cancel</v-icon>
+          </v-btn>
+        </v-col>
         <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
           <v-btn fab small elevation="0" color="black" @click.stop="sendMessage" :disabled="sendButtonDisabled">
-            <v-icon color="white">arrow_upward</v-icon>
+            <v-icon color="white">{{ editedEvent ? 'save' : 'arrow_upward' }}</v-icon>
           </v-btn>
         </v-col>
       </v-row>
@@ -292,6 +297,9 @@ export default {
       }
       return this.room.roomId;
     },
+    attachButtonDisabled() {
+      return this.editedEvent || this.currentInput.length > 0;
+    },
     sendButtonDisabled() {
       return this.currentInput.length == 0;
     },
@@ -676,6 +684,11 @@ export default {
       this.$refs.messageInput.focus();
     },
 
+    cancelEdit() {
+      this.currentInput = "";
+      this.editedEvent = null;
+    },
+
     emojiSelected(e) {
       this.showEmojiPicker = false;
       if (this.selectedEvent) {