Allow cancel of edit

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

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) {