You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
3 years ago
|
<template>
|
||
|
<div class="roomListElement" :title="room.name">
|
||
|
<div class="imageContainer">
|
||
|
<avatar
|
||
3 years ago
|
class="roomImage"
|
||
|
:mxcURL="getMxcFromChat(room)"
|
||
|
:fallback="room.roomId"
|
||
|
:size="3"
|
||
3 years ago
|
/>
|
||
|
</div>
|
||
|
<div class="roomListName">{{room.name}}</div>
|
||
3 years ago
|
<div class="status">{{previewString}}</div>
|
||
3 years ago
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
3 years ago
|
import avatar from '@/components/matrix/avatar';
|
||
|
import {getMxcFromChat} from '@/lib/getMxc';
|
||
3 years ago
|
import {getTime} from '@/lib/getTimeStrings';
|
||
|
import {calcUserName} from '@/lib/matrixUtils';
|
||
3 years ago
|
|
||
|
export default {
|
||
3 years ago
|
name: 'roomListElement',
|
||
3 years ago
|
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){
|
||
3 years ago
|
return room.timeline[room.timeline.length-1]
|
||
|
&& room.timeline[room.timeline.length-1].event;
|
||
3 years ago
|
},
|
||
3 years ago
|
getMxcFromChat,
|
||
3 years ago
|
calcUserName,
|
||
3 years ago
|
},
|
||
|
data(){
|
||
|
return {
|
||
|
previewString: 'loading'
|
||
|
}
|
||
|
},
|
||
|
created() {
|
||
|
this.previewString = this.getPreviewString(this.room);
|
||
3 years ago
|
}
|
||
|
}
|
||
|
</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>
|