butter/keanu-weblite
3
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

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

@ -140,7 +140,7 @@ $chat-text-size: 0.7pt;
margin-left: 30% !important;
text-align: right;
.bubble {
background-color: #00eea0;
background-color: #88eec0;
border-radius: 10px 10px 0 10px;
padding: 8px;
}
@ -148,8 +148,23 @@ $chat-text-size: 0.7pt;
padding: 0px;
overflow: hidden;
}
.message {
color: white;
.sender {
font-family: 'Titillium Web', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10 * $chat-text-size;
color: rgba(#000000, 0.6);
display: inline-block;
margin-left: 40px;
margin-right: 8px;
}
.time {
font-family: 'Titillium Web', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10 * $chat-text-size;
color: rgba(#000000, 0.6);
display: inline-block;
}
}
@ -159,12 +174,16 @@ $chat-text-size: 0.7pt;
text-align: left;
position: relative;
.bubble {
background-color: white;
border-radius: 10px 10px 10px 0;
background-color: #eeeeee;
border-radius: 0px 10px 10px 10px;
padding: 8px;
border-width: 1px !important;
border-style: solid !important;
border-color: #cccccc !important;
border-color: #eeeeee !important;
margin-left: 40px;
}
.audio-bubble {
margin-left: 40px;
}
.bubble.image-bubble {
padding: 0px;
@ -177,8 +196,22 @@ $chat-text-size: 0.7pt;
border: 2px solid white;
}
.sender {
position: relative;
left: 40px;
font-family: 'Titillium Web', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10 * $chat-text-size;
color: rgba(#000000, 0.6);
display: inline-block;
margin-left: 40px;
margin-right: 8px;
}
.time {
font-family: 'Titillium Web', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10 * $chat-text-size;
color: rgba(#000000, 0.6);
display: inline-block;
}
}
@ -193,7 +226,7 @@ $chat-text-size: 0.7pt;
.message {
font-family: 'Titillium Web', sans-serif;
font-weight: 400;
font-size: 22 * $chat-text-size;
font-size: 14 * $chat-text-size;
color: #000000;
overflow-wrap: break-word;
.edit-marker {
@ -207,8 +240,8 @@ $chat-text-size: 0.7pt;
font-weight: 300;
font-style: italic;
font-size: 15 * $chat-text-size;
text-align: center;
color: #1c242a;
display: inline-block;
}
.statusEvent {

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

@ -1,3 +1,3 @@
$background: #008860;
$background: #ffffff;
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

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>