refactor/split to roomListElement/userListElement
parent
5f536adc8f
commit
63d3f6fb47
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="roomListElement" :title="room.name">
|
||||
<div class="imageContainer">
|
||||
<avatar
|
||||
class="roomImage"
|
||||
:mxcURL="getMxcFromRoom(room)"
|
||||
:fallback="room.roomId"
|
||||
:size="3"
|
||||
/>
|
||||
</div>
|
||||
<div class="roomListName">{{room.name}}</div>
|
||||
<div class="status">{{getPreviewString(room)}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import avatar from "@/components/avatar";
|
||||
import {getMxcFromRoom} from "@/lib/getMxc";
|
||||
import {getTime} from "@/lib/getTimeStrings";
|
||||
import {matrix} from "@/main";
|
||||
|
||||
export default {
|
||||
name: "userListElement",
|
||||
components:{
|
||||
avatar
|
||||
},
|
||||
props:{
|
||||
room: Object
|
||||
},
|
||||
methods:{
|
||||
getPreviewString(room){
|
||||
let event = this.getLatestEvent(room);
|
||||
if (!event) return '';
|
||||
return `${this.calcUserName(event.sender)}: ${event.content.body||'unknown event'} ${getTime(event.origin_server_ts)}`;
|
||||
},
|
||||
getLatestEvent(room){
|
||||
if (!room.timeline[room.timeline.length-1]) return undefined;
|
||||
return room.timeline[room.timeline.length-1].event;
|
||||
},
|
||||
calcUserName(userId) {
|
||||
if (matrix.user === userId) return 'you';
|
||||
return matrix.client.getUser(userId).displayName || userId;
|
||||
},
|
||||
getMxcFromRoom
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.roomListElement{
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
.imageContainer{
|
||||
position: absolute;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
left: 0.5rem;
|
||||
.roomImage {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
.roomListName{
|
||||
position: absolute;
|
||||
left: 4rem;
|
||||
top: 0.25rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: calc(100% - 5rem);
|
||||
text-align: left;
|
||||
}
|
||||
.status{
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
left: 4rem;
|
||||
font-size: 0.8rem;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 4.5rem);
|
||||
}
|
||||
}
|
||||
.roomListElement:hover{
|
||||
background-color: #4444;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="userListElement" :title="user.userId">
|
||||
<div class="imageContainer">
|
||||
<avatar
|
||||
class="userImage"
|
||||
:mxcURL="user.avatarUrl"
|
||||
:fallback="user.userId"
|
||||
:size="3"
|
||||
/>
|
||||
<div v-if="user.currentlyActive" class="online"></div>
|
||||
</div>
|
||||
<div class="userListName">{{user.displayName || user.userId}}</div>
|
||||
<div class="status">{{user.presence}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import avatar from "@/components/avatar";
|
||||
|
||||
export default {
|
||||
name: "userListElement",
|
||||
components:{
|
||||
avatar
|
||||
},
|
||||
props:{
|
||||
user: Object
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.userListElement{
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
.imageContainer{
|
||||
position: absolute;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
left: 0.5rem;
|
||||
.userImage {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
.online {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 0.6rem;
|
||||
width: 0.6rem;
|
||||
background-color: #42b983;
|
||||
border-radius: 50%;
|
||||
border: 0.2rem solid #222;
|
||||
}
|
||||
}
|
||||
.userListName{
|
||||
position: absolute;
|
||||
left: 4rem;
|
||||
top: 0.25rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: calc(100% - 5rem);
|
||||
text-align: left;
|
||||
}
|
||||
.status{
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
left: 4rem;
|
||||
font-size: 0.8rem;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 4.5rem);
|
||||
}
|
||||
}
|
||||
.userListElement:hover{
|
||||
background-color: #4444;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
import sdk from 'matrix-js-sdk'
|
||||
import {matrix} from "@/main";
|
||||
|
||||
export function getMxcFromUser(user){
|
||||
return user.avatarUrl;
|
||||
}
|
||||
|
||||
export function getMxcFromUserId(userId){
|
||||
return matrix.client.getUser(userId).avatarUrl;
|
||||
}
|
||||
|
||||
export function getMxcFromRoom(room){
|
||||
let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents("m.room.avatar");
|
||||
return avatarState.length>0?avatarState[avatarState.length-1].getContent().url:undefined;
|
||||
}
|
||||
|
||||
export function getMxcFromRoomId(roomId){
|
||||
return getMxcFromRoom(matrix.client.getRoom(roomId));
|
||||
}
|
||||
Loading…
Reference in New Issue