adb
/
matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

add events and floating icons

Browse Source
update_chat
adb 4 years ago
parent 7e611a96f5
commit 5525e61b47
4 changed files with 65 additions and 35 deletions
Show Stats Download Patch File Download Diff File

12
src/components/topBanner.vue
Unescape Escape View File

@ -1,11 +1,11 @@
<template> <template>
<div class="topBanner"> <div class="topBanner">
<div> <div>
<icon @click.native="session.currentRoom = undefined" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" /> <icon @click.native="closeChat()" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
<div @click="showChatInfo()" class="smallIcon" id="picTop">{{session.currentRoom.name.substr(0,2)}}</div> <div @click="showChatInfo()" class="smallIcon" id="picTop">{{room.name.substr(0,2)}}</div>
<div id="container"> <div id="container">
<div id="chatName">{{session.currentRoom.name}}</div> <div id="chatName">{{room.name}}</div>
<div id="users">{{session.currentRoom.members.length}} members</div> <div id="users">{{Object.keys(room.currentState.members).length}} members</div>
</div> </div>
</div> </div>
</div> </div>
@ -20,6 +20,10 @@ export default {
components:{ components:{
icon, icon,
}, },
props:{
room: [Object, undefined],
closeChat: Function
},
methods:{ methods:{
showChatInfo(){ showChatInfo(){
document.getElementById("chatInformation").style.display = 'block'; document.getElementById("chatInformation").style.display = 'block';

2
src/components/userThumbnail.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template> <template>
<img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail" /> <img v-if="mxcURL" :src="thumbnailUrl()" class="userThumbnail" />
<div v-else class="userThumbnail"> <div v-else class="userThumbnail">
<p>{{username?username.substr(0,2):userId.substr(1,2)}}</p> {{username?username.substr(0,2):userId.substr(1,2)}}
</div> </div>
</template> </template>

80
src/views/chat.vue
Unescape Escape View File

@ -3,19 +3,25 @@
<div ref="chatContainer" class="chatContainer"> <div ref="chatContainer" class="chatContainer">
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer"> <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
<div id="messages" class="messages" ref="messages"> <div id="messages" class="messages" ref="messages">
<p v-if="room.timeline.length === 0" class="info">this room is empty</p> <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
<div class="timeGroup" v-for="timeGroup in splitArray(room.timeline, <div class="timeGroup" v-for="timeGroup in splitArray(room.timeline,
obj => getDate(obj.event.origin_server_ts),obj => obj.event)" :key="timeGroup[0].origin_server_ts"> obj => getDate(obj.event.origin_server_ts),obj => obj.event)" :key="timeGroup[0].origin_server_ts">
<div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div> <div class="time">{{getDate(timeGroup[0].origin_server_ts)}}</div>
<div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts"> <div class="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
<div class="username" v-if="group[0].sender !== user">{{group[0].sender}}</div> <div :class="isGroup()?'groupEvent':'eventContainer'">
<div class="thumbnailContainer"> <div class="thumbnailContainer">
<userThumbnail v-if="group[0].sender !== user && room._membersPromise.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" /> <div class="filler"></div>
</div> <userThumbnail v-if="group[0].sender !== user && isGroup()" :userId="group[0].sender"
<div class="event" v-for="event in group" :key="event.origin_server_ts"> width="64" height="64" resizeMethod="scale" class="userThumbnail" />
<message v-if="event.content.msgtype==='m.text'" :type="event.sender === user?'send':'receive'" </div>
:group="room._membersPromise.length > 2" <div class="username" v-if="group[0].sender !== user && isGroup()">{{group[0].sender}}</div>
:msg=event.content.body :time=getTime(event.origin_server_ts) /> <div class="event" v-for="event in group" :key="event.origin_server_ts">
<message v-if="event.content.msgtype==='m.text'" :type="event.sender === user?'send':'receive'"
:group="false"
:msg=event.content.body :time=getTime(event.origin_server_ts) />
<div v-else-if="event.type==='m.room.member'" class="info">{{membershipEvents[event.content.membership]}}</div>
<div v-else class="info">unknown event</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -23,15 +29,15 @@
</div> </div>
<icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" /> <icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
</div> </div>
<newMessage :onResize="(height)=>resize(height)" :roomId="room.roomId"/> <newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
<!--<topBanner />--> <topBanner :room="room" :close-chat="()=>closeChat()" />
</div> </div>
</template> </template>
<script> <script>
import message from '@/components/message.vue'; import message from '@/components/message.vue';
import newMessage from '@/components/newMessage.vue'; import newMessage from '@/components/newMessage.vue';
//import topBanner from '@/components/topBanner.vue'; import topBanner from '@/components/topBanner.vue';
import Icon from "@/components/icon"; import Icon from "@/components/icon";
import userThumbnail from '@/components/userThumbnail'; import userThumbnail from '@/components/userThumbnail';
@ -41,16 +47,17 @@ export default {
Icon, Icon,
message, message,
newMessage, newMessage,
//topBanner, topBanner,
userThumbnail userThumbnail
}, },
props: { props: {
room: {}, room: [Object, undefined],
user: String user: String,
closeChat: Function
}, },
methods:{ methods:{
scrollToBottom(){ scrollToBottom(){
this.$nextTick(() => this.$refs.msgContainer.scrollTop = this.$refs.msgContainer.scrollHeight); this.$refs.msgContainer.scrollTop = this.$refs.msgContainer.scrollHeight;
}, },
getTime(time){ getTime(time){
let date = new Date(time); let date = new Date(time);
@ -80,16 +87,28 @@ export default {
}, },
resize(height){ resize(height){
this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3rem)`; this.$refs.chatContainer.style.height = `calc(100% - ${height}px - 3rem)`;
},
isGroup(){
return Object.keys(this.room.currentState.members).length > 2;
} }
}, },
data(){ data(){
return { return {
showScrollBtn: false, showScrollBtn: false,
scrollOnUpdate: true scrollOnUpdate: true,
membershipEvents:{
invite: 'was invented',
join: 'joined the room',
leave: 'left the room',
ban: 'was banned'
}
} }
}, },
updated(){ updated(){
//this.scrollToBottom(); //this.scrollToBottom();
},
mounted(){
//this.scrollToBottom();
} }
} }
</script> </script>
@ -114,8 +133,12 @@ export default {
width: 100%; width: 100%;
height: fit-content; height: fit-content;
margin-top: 0.75rem; margin-top: 0.75rem;
.info{
font-style: italic;
margin: 1rem;
}
} }
.info{ .chatInfo{
text-align: center; text-align: center;
font-style: italic; font-style: italic;
margin: 1rem; margin: 1rem;
@ -145,20 +168,25 @@ export default {
width: 2rem; width: 2rem;
} }
} }
.userThumbnail{ .groupEvent{
position: absolute; margin-left: 2rem;
left: 0;
bottom: 0;
width: 2rem;
height: 2rem;
margin-left: 0.5rem;
} }
.thumbnailContainer{ .thumbnailContainer{
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
width: 3rem; .filler{
height: calc(100% - 2rem);
}
.userThumbnail{
position: sticky;
bottom: 0.5rem;
width: 2rem;
height: 2rem;
margin-left: 0.5rem;
}
} }
.username{ .username{
margin-left: 1rem; margin-left: 1rem;

6
src/views/rooms.vue
Unescape Escape View File

@ -10,11 +10,10 @@
<div class="roomListName">{{room.name}}</div> <div class="roomListName">{{room.name}}</div>
</div> </div>
</div> </div>
<chat class="chat" v-if="currentRoom" :room="currentRoom" :user="matrix.user" /> <chat class="chat" v-if="currentRoom" :room="currentRoom" :user="matrix.user" :close-chat="()=>currentRoom=undefined"/>
<div class="noRoomSelected" v-else>Please select a room to be displayed.</div> <div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
<div class="roomListSmall"> <div class="roomListSmall">
<h1>[c]</h1> <h1>[c]</h1>
<h2>—</h2>
<div v-for="(room, index) in matrix.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name"> <div v-for="(room, index) in matrix.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
<div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div> <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
<div class="roomListName">{{room.name}}</div> <div class="roomListName">{{room.name}}</div>
@ -38,10 +37,9 @@ export default {
methods:{ methods:{
openChat(room){ openChat(room){
this.currentRoom = room; this.currentRoom = room;
chat.data().room = room;
chat.data().user = matrix.user;
this.$router.push(`/rooms/${room.roomId}`); this.$router.push(`/rooms/${room.roomId}`);
this.$forceUpdate(); this.$forceUpdate();
//chat.methods.scrollToBottom();
} }
}, },
data(){ data(){

Write Preview
Loading…
Cancel
Save