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

add userThumbnail to rooms

Browse Source
This commit is contained in:
adb 2021-03-16 21:08:09 +01:00
parent 3c07329931
commit a953f9c68e
3 changed files with 64 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/message.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="`${type==='send'?'messageSend':'messageReceive'} ${group?'groupMessage':''}`" class="message">
<div :class="type==='send'?'messageSend':'messageReceive'" class="message">
<div v-html="solveTextLinks(msg.replace(/</g, '&lt')
.replace(/>/g, '&gt'))"></div>
<div class="time">{{time}}</div>
@ -12,8 +12,7 @@ export default {
props: {
msg: String,
time: String,
type: String,
group: Boolean
type: String
},
methods:{
solveTextLinks(text){
@ -56,13 +55,6 @@ export default {
background-color: #42a7b9;
border-radius: 1rem 1rem 0 1rem;
}
.messageReceive.groupMessage{
margin-left: 3rem;
max-width: calc(100% - 7rem);
}
.messageSend.groupMessage{
max-width: calc(100% - 6rem);
}
.time{
position: relative;
bottom: -0.2rem;

55
src/components/timeline.vue
View File

@ -1,33 +1,36 @@
<template>
<div class="timeline">
<div class="timeGroup" v-for="timeGroup in splitArray(timeline,
obj => getDate(obj.event.origin_server_ts),obj => obj.event)" :key="timeGroup[0].origin_server_ts">
<div class="timeGroup"
v-for="timeGroup in splitArray(timeline,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="eventGroup" v-for="group in splitArray(timeGroup, obj => obj.sender)" :key="group[0].origin_server_ts">
<div class="thumbnailContainer">
<div class="filler"></div>
<userThumbnail v-if="group[0].sender !== user && groupTimeline"
:fallback="group[0].sender"
class="userThumbnail"
:mxcURL="getUser(group[0].sender).avatarUrl"
:size="2"
:title="group[0].sender"
/>
</div>
<div :class="groupTimeline?'indent username':'username'"
v-if="group[0].sender !== user && groupTimeline">{{getUser(group[0].sender).displayName || group[0].sender}}
</div>
<div :class="groupTimeline?'indent event':'event'"
v-for="event in group" :key="event.origin_server_ts"
:title="`${group[0].sender} at ${getTime(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 class="thumbnailContainer">
<div class="filler"></div>
<userThumbnail
v-if="group[0].sender !== user && groupTimeline"
:fallback="group[0].sender"
class="userThumbnail"
:mxcURL="getUser(group[0].sender).avatarUrl"
:size="2"
:title="group[0].sender"
/>
</div>
<div :class="groupTimeline?'indent username':'username'"
v-if="group[0].sender !== user && groupTimeline">{{getUser(group[0].sender).displayName || group[0].sender}}
</div>
<div :class="groupTimeline?'indent event':'event'"
v-for="event in group" :key="event.origin_server_ts"
:title="`${group[0].sender} at ${getTime(event.origin_server_ts)}`"
>
<message v-if="event.content.msgtype==='m.text'"
:type="event.sender === user?'send':'receive'"
: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>

47
src/views/rooms.vue
View File

@ -6,18 +6,33 @@
<div id="roomList" class="roomList">
<h1>[chat]</h1>
<div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
<div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
<userThumbnail
class="roomImg"
:mxcURL="getUrl(room)"
:fallback="room.roomId"
:size="3"
/>
<div class="roomListName">{{room.name}}</div>
</div>
</div>
<chat class="chat" v-if="currentRoom" :room="currentRoom" :user="matrix.user"
:close-chat="()=>currentRoom=undefined"
:open-chat-info="()=>showChatInfo=true"/>
<chat
class="chat"
v-if="currentRoom"
:room="currentRoom"
:user="matrix.user"
:close-chat="()=>currentRoom=undefined"
:open-chat-info="()=>showChatInfo=true"
/>
<div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
<div class="roomListSmall">
<h1>[c]</h1>
<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>
<userThumbnail
class="roomImg"
:mxcURL="getUrl(room)"
:fallback="room.roomId"
:size="3"
/>
<div class="roomListName">{{room.name}}</div>
</div>
</div>
@ -28,13 +43,16 @@
<script>
import chat from '@/views/chat.vue';
import chatInformation from "@/components/chatInformation";
import userThumbnail from "@/components/userThumbnail";
import {matrix} from "@/main";
import sdk from "matrix-js-sdk";
export default {
name: "rooms",
components:{
chat,
chatInformation
chatInformation,
userThumbnail
},
methods:{
openChat(room){
@ -42,6 +60,11 @@ export default {
this.$router.push(`/rooms/${room.roomId}`);
this.$forceUpdate();
//chat.methods.scrollToBottom();
},
getUrl(room){
let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents("m.room.avatar");
return avatarState.length>0?avatarState[avatarState.length-1].getContent().url:undefined;
//return this.room.getLiveTimeline().getStateEvents("m.room.avatar");
}
},
data(){
@ -123,17 +146,13 @@ export default {
left: 20rem;
text-align: center;
}
.roomImgPlaceholder{
.roomImg{
position: absolute;
left: 1rem;
height: 2rem;
left: 0.5rem;
height: 3rem;
width: 3rem;
padding-top: 1rem;
background-color: #42a7b9;
border-radius: 1.5rem;
text-align: center;
}
.roomImgPlaceholder.small{
.roomImg.small{
margin-left: calc(50% - 2rem);
}