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

Styling changes

Browse source 
Also, add "x is typing"
This commit is contained in:
N-Pex 2020-12-09 21:50:53 +01:00
parent 7d3124c934
commit 3530f4a162
10 changed files with 88 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/Chat.vue
View file

@ -60,7 +60,7 @@
<v-row class="ma-0 pa-0">
<!-- CONTACT IS TYPING -->
<div class="typing">
{{ contactIsTyping ? "Someone is typing..." : "" }}
{{ typingMembersString }}
</div>
</v-row>
<v-row class="input-area-inner">
@ -215,7 +215,7 @@ export default {
return {
events: [],
currentInput: "",
contactIsTyping: false,
typingMembers: [],
timelineWindow: null,
scrollPosition: null,
currentImageInput: null,
@ -261,6 +261,16 @@ export default {
sendButtonDisabled() {
return this.currentInput.length == 0;
},
typingMembersString() {
const count = this.typingMembers.length;
if (count > 1) {
return "" + count + " members are typing";
} else if (count > 0) {
return this.typingMembers[0].name + " is typing";
} else {
return "";
}
}
},
watch: {
@ -271,7 +281,7 @@ export default {
// Clear old events
this.events = [];
this.timelineWindow = null;
this.contactIsTyping = false;
this.typingMembers = [];
if (!room) {
return; // no room
@ -437,11 +447,21 @@ export default {
}
},
onUserTyping(event) {
if (event.getRoomId() !== this.roomId) {
onUserTyping(event, member) {
if (member.roomId !== this.roomId) {
return; // Not for this room
}
console.log("Typing:", event);
if (member.typing) {
if (!this.typingMembers.includes(member)) {
this.typingMembers.push(member);
}
} else {
const index = this.typingMembers.indexOf(member);
if (index > -1) {
this.typingMembers.splice(index, 1);
}
}
console.log("Typing: ", this.typingMembers);
},
sendMessage() {

2
src/components/ChatHeader.vue
View file

@ -4,7 +4,7 @@
<v-col
class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0"
>
<v-avatar>
<v-avatar size="40">
<v-img :src="room.avatar" />
</v-avatar>
</v-col>

8
src/components/messages/MessageIncomingAudio.vue
View file

@ -1,12 +1,10 @@
<template>
<div>
<div class="messageIn">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="messageIn">
<div class="audio-bubble">
<audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<v-avatar class="avatar" size="40" color="grey">
<v-avatar class="avatar" size="32" color="#ededed">
<img
v-if="messageEventAvatar(event)"
:src="messageEventAvatar(event)"
@ -15,7 +13,7 @@
messageEventDisplayName(event).substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</div>
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>

6
src/components/messages/MessageIncomingImage.vue
View file

@ -1,7 +1,5 @@
<template>
<div>
<div class="messageIn">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="messageIn">
<div class="bubble image-bubble">
<v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
<QuickReactions :event="event" :reactions="reactions" />
@ -15,7 +13,7 @@
messageEventDisplayName(event).substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</div>
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>

8
src/components/messages/MessageIncomingText.vue
View file

@ -1,8 +1,6 @@
<template>
<div>
<div class="messageIn">
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<v-avatar class="avatar" size="40" color="grey">
<div class="messageIn">
<v-avatar class="avatar" size="32" color="#ededed">
<img
v-if="messageEventAvatar(event)"
:src="messageEventAvatar(event)"
@ -18,7 +16,7 @@
</div>
<QuickReactions :event="event" :reactions="reactions" />
</div>
</div>
<div class="sender">{{ messageEventDisplayName(event) }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>

8
src/components/messages/MessageOutgoingAudio.vue
View file

@ -1,16 +1,14 @@
<template>
<div>
<div class="messageOut">
<div class="sender">{{ "You" }}</div>
<div class="messageOut">
<div class="audio-bubble">
<audio controls :src="src">Audio file</audio>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="status">{{ event.status }}</div>
</div>
<!-- <div class="sender">{{ "You" }}</div> -->
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>
<div class="status">{{ event.status }}</div>
</div>
</template>

8
src/components/messages/MessageOutgoingImage.vue
View file

@ -1,15 +1,13 @@
<template>
<div>
<div class="messageOut">
<div class="sender">{{ "You" }}</div>
<div class="messageOut">
<div class="bubble image-bubble">
<v-img :aspect-ratio="16/9" ref="image" :src="src" cover />
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="status">{{ event.status }}</div>
</div>
<!-- <div class="sender">{{ "You" }}</div> -->
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
<div class="status">{{ event.status }}</div>
</div>
</div>
</template>

8
src/components/messages/MessageOutgoingText.vue
View file

@ -1,18 +1,16 @@
<template>
<div>
<div class="messageOut">
<div class="sender">{{ "You" }}</div>
<div class="messageOut">
<div class="bubble">
<div class="message">{{ event.getContent().body }}
<span class="edit-marker" v-if="event.replacingEventId()">(edited)</span>
</div>
<QuickReactions :event="event" :reactions="reactions" />
</div>
<div class="status">{{ event.status }}</div>
</div>
<!-- <div class="sender">{{ "You" }}</div> -->
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
</div>
<div class="status">{{ event.status }}</div>
</div>
</template>