load history events
This commit is contained in:
parent
5525e61b47
commit
75569e2aae
src
@ -6,11 +6,11 @@
|
||||
<div class="picBoxBig"><div class="placeholderBig">{{room.name.substr(0,2)}}</div></div>
|
||||
<div class="roomInformation">
|
||||
<div class="roomName">{{room.name}}</div>
|
||||
<div class="users">{{room.members.length}} members</div>
|
||||
<div class="users">{{members.length}} members</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 v-if="room.members.length !== 0">members:</h2>
|
||||
<div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender">
|
||||
<h2 v-if="members.length !== 0">members:</h2>
|
||||
<div v-for="member in members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender">
|
||||
<userThumbnail :mxcURL="member.content.avatar_url" :userId="member.sender" :username="member.content.displayname"
|
||||
width="64" height="64" resizeMethod="scale" class="userThumbnail" />
|
||||
<div class="information">
|
||||
@ -18,7 +18,7 @@
|
||||
<div class="status"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="room.members.length>20">and {{room.members.length-20}} other members</p>
|
||||
<p v-if="members.length>20">and {{members.length-20}} other members</p>
|
||||
</div>
|
||||
</div>
|
||||
<icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
|
||||
@ -36,6 +36,11 @@ export default {
|
||||
},
|
||||
props:{
|
||||
room: {}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
members: Object.keys(this.room.currentState.members)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,7 +58,6 @@ export default {
|
||||
box-shadow: 6px 6px 20px #111;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 30rem) {
|
||||
#chatInformation{
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div class="topBanner">
|
||||
<div>
|
||||
<icon @click.native="closeChat()" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
|
||||
<div @click="showChatInfo()" class="smallIcon" id="picTop">{{room.name.substr(0,2)}}</div>
|
||||
<div @click="openChatInfo()" class="smallIcon" id="picTop">{{room.name.substr(0,2)}}</div>
|
||||
<div id="container">
|
||||
<div id="chatName">{{room.name}}</div>
|
||||
<div id="users">{{Object.keys(room.currentState.members).length}} members</div>
|
||||
@ -22,12 +22,8 @@ export default {
|
||||
},
|
||||
props:{
|
||||
room: [Object, undefined],
|
||||
closeChat: Function
|
||||
},
|
||||
methods:{
|
||||
showChatInfo(){
|
||||
document.getElementById("chatInformation").style.display = 'block';
|
||||
}
|
||||
closeChat: Function,
|
||||
openChatInfo: Function
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
@ -7,7 +7,6 @@
|
||||
|
||||
<script>
|
||||
import parseMXC from '@modular-matrix/parse-mxc';
|
||||
import matrix from '@/matrix.js';
|
||||
|
||||
export default {
|
||||
name: "userThumbnail.vue",
|
||||
@ -27,7 +26,6 @@ export default {
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
homeserver: matrix.data().session.baseUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2,6 +2,7 @@
|
||||
<div>
|
||||
<div ref="chatContainer" class="chatContainer">
|
||||
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
||||
<div v-if="loadingStatus" @click="loadEvents()" class="loadMore">{{loadingStatus}}</div>
|
||||
<div id="messages" class="messages" ref="messages">
|
||||
<p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
|
||||
<div class="timeGroup" v-for="timeGroup in splitArray(room.timeline,
|
||||
@ -30,7 +31,7 @@
|
||||
<icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
|
||||
</div>
|
||||
<newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/>
|
||||
<topBanner :room="room" :close-chat="()=>closeChat()" />
|
||||
<topBanner :room="room" :close-chat="()=>closeChat()" :open-chat-info="()=>openChatInfo()"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -38,8 +39,9 @@
|
||||
import message from '@/components/message.vue';
|
||||
import newMessage from '@/components/newMessage.vue';
|
||||
import topBanner from '@/components/topBanner.vue';
|
||||
import Icon from "@/components/icon";
|
||||
import Icon from '@/components/icon';
|
||||
import userThumbnail from '@/components/userThumbnail';
|
||||
import {matrix} from '@/main';
|
||||
|
||||
export default {
|
||||
name: 'chat',
|
||||
@ -53,7 +55,8 @@ export default {
|
||||
props: {
|
||||
room: [Object, undefined],
|
||||
user: String,
|
||||
closeChat: Function
|
||||
closeChat: Function,
|
||||
openChatInfo: Function
|
||||
},
|
||||
methods:{
|
||||
scrollToBottom(){
|
||||
@ -61,17 +64,15 @@ export default {
|
||||
},
|
||||
getTime(time){
|
||||
let date = new Date(time);
|
||||
return `${date.getHours()}:${(date.getMinutes()<10)?"0":""}${date.getMinutes()}`;
|
||||
return `${date.getHours()}:${(date.getMinutes()<10)?'0':''}${date.getMinutes()}`;
|
||||
},
|
||||
getDate(time){
|
||||
let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
||||
let months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
||||
let date = new Date(time);
|
||||
return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
|
||||
},
|
||||
scrollHandler(){
|
||||
if (this.$refs.msgContainer.scrollTop === 0){
|
||||
console.log("load messages")
|
||||
}
|
||||
if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
|
||||
let msg = this.$refs.msgContainer;
|
||||
this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
|
||||
},
|
||||
@ -90,6 +91,11 @@ export default {
|
||||
},
|
||||
isGroup(){
|
||||
return Object.keys(this.room.currentState.members).length > 2;
|
||||
},
|
||||
async loadEvents(){
|
||||
this.loadingStatus = 'loading ...';
|
||||
await matrix.client.paginateEventTimeline(this.room.getLiveTimeline(), {backwards: true})
|
||||
.then(state => this.loadingStatus = state?'load more':false);
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@ -101,7 +107,8 @@ export default {
|
||||
join: 'joined the room',
|
||||
leave: 'left the room',
|
||||
ban: 'was banned'
|
||||
}
|
||||
},
|
||||
loadingStatus: 'load more'
|
||||
}
|
||||
},
|
||||
updated(){
|
||||
@ -191,4 +198,15 @@ export default {
|
||||
.username{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.loadMore{
|
||||
position: relative;
|
||||
background-color: #2d2d2d;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
width: fit-content;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0);
|
||||
margin-top: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
@ -10,7 +10,9 @@
|
||||
<div class="roomListName">{{room.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<chat class="chat" v-if="currentRoom" :room="currentRoom" :user="matrix.user" :close-chat="()=>currentRoom=undefined"/>
|
||||
<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>
|
||||
@ -19,20 +21,20 @@
|
||||
<div class="roomListName">{{room.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<chatInformation v-if="currentRoom" :room="currentRoom"/>-->
|
||||
<chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chat from '@/views/chat.vue';
|
||||
//import chatInformation from "@/components/chatInformation";
|
||||
import chatInformation from "@/components/chatInformation";
|
||||
import {matrix} from "@/main";
|
||||
|
||||
export default {
|
||||
name: "rooms",
|
||||
components:{
|
||||
chat,
|
||||
//chatInformation
|
||||
chatInformation
|
||||
},
|
||||
methods:{
|
||||
openChat(room){
|
||||
@ -45,7 +47,8 @@ export default {
|
||||
data(){
|
||||
return {
|
||||
matrix,
|
||||
currentRoom: undefined
|
||||
currentRoom: undefined,
|
||||
showChatInfo: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
Loading…
Reference in New Issue
Block a user