diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index c326916..30a5554 100644 --- a/src/assets/css/chat.scss +++ b/src/assets/css/chat.scss @@ -120,6 +120,21 @@ $chat-text-size: 0.7pt; } } } + + .op-button { + position:absolute; + right:-30px; + top:0; + .v-icon { + color: #cccccc; + &:hover { + color: #888888; + } + } + } + .messageOut .op-button { + right:70%; + } } .messageJoin { @@ -139,6 +154,9 @@ $chat-text-size: 0.7pt; border-radius: 10px 10px 0 10px; padding: 8px; } + .audio-bubble { + overflow: scroll; + } .bubble.image-bubble { padding: 0px; overflow: hidden; @@ -179,6 +197,7 @@ $chat-text-size: 0.7pt; } .audio-bubble { margin-left: 40px; + overflow: scroll; } .bubble.image-bubble { padding: 0px; @@ -248,14 +267,21 @@ $chat-text-size: 0.7pt; margin: 20px; } -.messageOperations { +.message-operations-strut { + position: relative; + height: 0px; + z-index: 1; +} + +.message-operations { position: absolute; - bottom: 10px; + width: auto; + background-color: #ffe2e2; &.incoming { - left: -20px; + right: 30%; } &.outgoing { - right: 20px; + left: 30%; } } diff --git a/src/components/Chat.vue b/src/components/Chat.vue index f7cc318..c0d5c00 100644 --- a/src/components/Chat.vue +++ b/src/components/Chat.vue @@ -6,17 +6,32 @@ ref="chatContainer" style="overflow-x: hidden; overflow-y: auto" v-on:scroll="onScroll" + @click.prevent="closeContextMenuIfOpen" > +
+ +
+ +
- + /> -->
@@ -239,6 +255,7 @@ export default { currentSendError: null, showEmojiPicker: false, selectedEvent: null, + editedEvent: null, showContextMenu: false, /** * Current chat container size. We need to keep track of this so that if and when @@ -287,7 +304,18 @@ export default { } else { return ""; } + }, + opStyle() { + // Calculate where to show the context menu. + // + const ref = this.selectedEvent && this.$refs[this.selectedEvent.getId()]; + if (ref && ref[0]) { + const offset = ref[0].offsetTop - this.scrollPosition.node.offsetTop; + return "top:" + offset + "px"; + } + return "top:0px"; } + }, watch: { @@ -459,7 +487,7 @@ export default { ) { scrollToSeeNew = true; } - if (event.forwardLooking) { + if (event.forwardLooking && !event.isRelation()) { this.handleScrolledToBottom(scrollToSeeNew); } }, @@ -483,6 +511,13 @@ export default { sendMessage() { if (this.currentInput.length > 0) { + // Is this an edit? + if (this.editedEvent) { + console.log("Edit"); + } + + this.editedEvent = null; //TODO - Is this a good place to reset this? + util .sendTextMessage( this.$matrix.matrixClient, @@ -640,6 +675,11 @@ export default { this.showEmojiPicker = true; }, + edit(event) { + this.editedEvent = event; + this.currentInput = event.getContent().body; + }, + emojiSelected(e) { this.showEmojiPicker = false; if (this.selectedEvent) { @@ -664,6 +704,22 @@ export default { console.log("Failed to send quick reaction:", err); }); }, + + showContextMenuForEvent(event) { + const ref = this.$refs[event.getId()]; + if (ref) { + console.log("Got the ref", ref); + } + this.selectedEvent = event; + this.showContextMenu = true; + }, + + closeContextMenuIfOpen(e) { + if (this.showContextMenu) { + this.showContextMenu = false; + e.preventDefault(); + } + } }, }; diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue index 16a286d..482414b 100644 --- a/src/components/RoomInfo.vue +++ b/src/components/RoomInfo.vue @@ -44,6 +44,16 @@ + + Your account + +
+
You don't have a Keanu account, yet ;)
+ Login +
+
+
+ @@ -130,6 +140,16 @@ export default { } return null; }, + + upgradeAccount() { + this.$matrix.upgradeGuestAccount() + .then(() => { + console.log("Done"); + }) + .catch(err => { + console.log("ERROR", err); + }) + } }, }; diff --git a/src/components/messages/MessageIncomingAudio.vue b/src/components/messages/MessageIncomingAudio.vue index d18876e..f8c08f9 100644 --- a/src/components/messages/MessageIncomingAudio.vue +++ b/src/components/messages/MessageIncomingAudio.vue @@ -1,19 +1,19 @@