add sticky time and update scrollToBottom

update_chat
adb 4 years ago
parent 5a3a49ab43
commit 4963bec650

@ -16,7 +16,9 @@
<userThumbnail v-if="(message.sender !== session.user) && (i===session.currentRoom.messages.length-1 || session.currentRoom.messages[i+1].sender!==message.sender)" <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" /> :userId="message.sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
</div>--> </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="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="username" v-if="group[0].sender !== user">{{group[0].sender}}</div>
<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" /> <userThumbnail v-if="group[0].sender !== user && room._membersPromise.length > 2" :userId="group[0].sender" width="64" height="64" resizeMethod="scale" class="userThumbnail" />
@ -29,6 +31,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!--<newMessage />--> <!--<newMessage />-->
<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" />
<!--<topBanner />--> <!--<topBanner />-->
@ -57,8 +60,7 @@ export default {
}, },
methods:{ methods:{
scrollToBottom(){ scrollToBottom(){
let msgContainer = document.getElementById("messagesContainer") this.$nextTick(() => this.$refs.msgContainer.scrollTop = this.$refs.msgContainer.scrollHeight);
msgContainer.scrollTo(0, msgContainer.scrollHeight)
}, },
getTime(time){ getTime(time){
let date = new Date(time); let date = new Date(time);
@ -148,6 +150,18 @@ export default {
width: 3rem; width: 3rem;
} }
.username{ .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> </style>

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

Loading…
Cancel
Save