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

add sticky time and update scrollToBottom

Browse Source
This commit is contained in:
adb 2021-03-15 11:54:46 +01:00
parent 5a3a49ab43
commit 4963bec650
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/chat.vue
View File

@ -16,15 +16,18 @@
<userThumbnail v-if="(message.sender !== session.user) && (i===session.currentRoom.messages.length-1 || session.currentRoom.messages[i+1].sender!==message.sender)"
:userId="message.sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
</div>-->
<div class="eventGroup" v-for="group in splitArray(room.timeline, obj => obj.event.sender, obj => obj.event)" :key="group[0].origin_server_ts">
<div class="username" v-if="group[0].sender !== user">{{group[0].sender}}</div>
<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>
<div class="event" v-for="event in group" :key="event.origin_server_ts">
<message :type="event.sender === user?'send':'receive'"
:group="room._membersPromise.length > 2"
:msg=event.content.body :time=getTime(event.origin_server_ts) />
<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">
<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="username" v-if="group[0].sender !== user">{{group[0].sender}}</div>
<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>
<div class="event" v-for="event in group" :key="event.origin_server_ts">
<message :type="event.sender === user?'send':'receive'"
:group="room._membersPromise.length > 2"
:msg=event.content.body :time=getTime(event.origin_server_ts) />
</div>
</div>
</div>
</div>
@ -57,8 +60,7 @@ export default {
},
methods:{
scrollToBottom(){
let msgContainer = document.getElementById("messagesContainer")
msgContainer.scrollTo(0, msgContainer.scrollHeight)
this.$nextTick(() => this.$refs.msgContainer.scrollTop = this.$refs.msgContainer.scrollHeight);
},
getTime(time){
let date = new Date(time);
@ -148,6 +150,18 @@ export default {
width: 3rem;
}
.username{
margin-left: 3rem;
margin-left: 1rem;
}
.time{
top: 0.25rem;
position: sticky;
z-index: 100;
background-color: #2d2d2d;
padding: 0.5rem;
border-radius: 0.5rem;
width: fit-content;
left: 50%;
transform: translate(-50%,0);
margin-top: 0.5rem;
}
</style>

2
src/views/login.vue
View File

@ -43,7 +43,7 @@ export default {
}
matrix.login(this.user, this.password, this.homeServer, (error) => {
this.loginError = `login failed: ${error}`;
}, (token)=> {
}, token => {
let cookie = new cookieHandler();
cookie.setCookie({
baseUrl: this.homeServer,