butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Allow cancel of edit

Browse source
This commit is contained in:
N-Pex 2020-12-14 17:12:29 +01:00
parent a4c329100d
commit ad0e5788aa
2 changed files with 16 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/assets/css/chat.scss
View file

@ -276,7 +276,7 @@ $chat-text-size: 0.7pt;
.message-operations { .message-operations {
position: absolute; position: absolute;
width: auto; width: auto;
background-color: #ffe2e2; background-color: #e2e2e2;
&.incoming { &.incoming {
right: 30%; right: 30%;
} }

17
src/components/Chat.vue
View file

@ -81,7 +81,7 @@
<v-row class="input-area-inner align-center"> <v-row class="input-area-inner align-center">
<v-col class="input-area-button text-center flex-grow-0 flex-shrink-1"> <v-col class="input-area-button text-center flex-grow-0 flex-shrink-1">
<label icon flat ref="attachmentLabel"> <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-icon x-large>add_circle_outline</v-icon>
</v-btn> </v-btn>
<input <input
@ -112,9 +112,14 @@
/> />
</v-col> </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-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-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-btn>
</v-col> </v-col>
</v-row> </v-row>
@ -292,6 +297,9 @@ export default {
} }
return this.room.roomId; return this.room.roomId;
}, },
attachButtonDisabled() {
return this.editedEvent || this.currentInput.length > 0;
},
sendButtonDisabled() { sendButtonDisabled() {
return this.currentInput.length == 0; return this.currentInput.length == 0;
}, },
@ -676,6 +684,11 @@ export default {
this.$refs.messageInput.focus(); this.$refs.messageInput.focus();
}, },
cancelEdit() {
this.currentInput = "";
this.editedEvent = null;
},
emojiSelected(e) { emojiSelected(e) {
this.showEmojiPicker = false; this.showEmojiPicker = false;
if (this.selectedEvent) { if (this.selectedEvent) {