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

load history events

Browse Source
update_chat
adb 4 years ago
parent 5525e61b47
commit 75569e2aae
5 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File

14
src/components/chatInformation.vue
Unescape Escape View File

@ -6,11 +6,11 @@
<div class="picBoxBig"><div class="placeholderBig">{{room.name.substr(0,2)}}</div></div> <div class="picBoxBig"><div class="placeholderBig">{{room.name.substr(0,2)}}</div></div>
<div class="roomInformation"> <div class="roomInformation">
<div class="roomName">{{room.name}}</div> <div class="roomName">{{room.name}}</div>
<div class="users">{{room.members.length}} members</div> <div class="users">{{members.length}} members</div>
</div> </div>
</div> </div>
<h2 v-if="room.members.length !== 0">members:</h2> <h2 v-if="members.length !== 0">members:</h2>
<div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox" :title="member.sender"> <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" <userThumbnail :mxcURL="member.content.avatar_url" :userId="member.sender" :username="member.content.displayname"
width="64" height="64" resizeMethod="scale" class="userThumbnail" /> width="64" height="64" resizeMethod="scale" class="userThumbnail" />
<div class="information"> <div class="information">
@ -18,7 +18,7 @@
<div class="status"></div> <div class="status"></div>
</div> </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>
</div> </div>
<icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" /> <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
@ -36,6 +36,11 @@ export default {
}, },
props:{ props:{
room: {} room: {}
},
data(){
return{
members: Object.keys(this.room.currentState.members)
}
} }
} }
@ -53,7 +58,6 @@ export default {
box-shadow: 6px 6px 20px #111; box-shadow: 6px 6px 20px #111;
border-radius: 1rem; border-radius: 1rem;
text-align: center; text-align: center;
display: none;
} }
@media (max-width: 30rem) { @media (max-width: 30rem) {
#chatInformation{ #chatInformation{

10
src/components/topBanner.vue
Unescape Escape View File

@ -2,7 +2,7 @@
<div class="topBanner"> <div class="topBanner">
<div> <div>
<icon @click.native="closeChat()" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" /> <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="container">
<div id="chatName">{{room.name}}</div> <div id="chatName">{{room.name}}</div>
<div id="users">{{Object.keys(room.currentState.members).length}} members</div> <div id="users">{{Object.keys(room.currentState.members).length}} members</div>
@ -22,12 +22,8 @@ export default {
}, },
props:{ props:{
room: [Object, undefined], room: [Object, undefined],
closeChat: Function closeChat: Function,
}, openChatInfo: Function
methods:{
showChatInfo(){
document.getElementById("chatInformation").style.display = 'block';
}
}, },
data(){ data(){
return { return {

2
src/components/userThumbnail.vue
Unescape Escape View File

@ -7,7 +7,6 @@
<script> <script>
import parseMXC from '@modular-matrix/parse-mxc'; import parseMXC from '@modular-matrix/parse-mxc';
import matrix from '@/matrix.js';
export default { export default {
name: "userThumbnail.vue", name: "userThumbnail.vue",
@ -27,7 +26,6 @@ export default {
}, },
data(){ data(){
return { return {
homeserver: matrix.data().session.baseUrl
} }
} }
} }

36
src/views/chat.vue
Unescape Escape View File

@ -2,6 +2,7 @@
<div> <div>
<div ref="chatContainer" class="chatContainer"> <div ref="chatContainer" class="chatContainer">
<div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer"> <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"> <div id="messages" class="messages" ref="messages">
<p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p> <p v-if="room.timeline.length === 0" class="chatInfo">this room is empty</p>
<div class="timeGroup" v-for="timeGroup in splitArray(room.timeline, <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" /> <icon v-if="showScrollBtn" @click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
</div> </div>
<newMessage :onResize="height=>resize(height)" :roomId="room.roomId"/> <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> </div>
</template> </template>
@ -38,8 +39,9 @@
import message from '@/components/message.vue'; import message from '@/components/message.vue';
import newMessage from '@/components/newMessage.vue'; import newMessage from '@/components/newMessage.vue';
import topBanner from '@/components/topBanner.vue'; import topBanner from '@/components/topBanner.vue';
import Icon from "@/components/icon"; import Icon from '@/components/icon';
import userThumbnail from '@/components/userThumbnail'; import userThumbnail from '@/components/userThumbnail';
import {matrix} from '@/main';
export default { export default {
name: 'chat', name: 'chat',
@ -53,7 +55,8 @@ export default {
props: { props: {
room: [Object, undefined], room: [Object, undefined],
user: String, user: String,
closeChat: Function closeChat: Function,
openChatInfo: Function
}, },
methods:{ methods:{
scrollToBottom(){ scrollToBottom(){
@ -61,17 +64,15 @@ export default {
}, },
getTime(time){ getTime(time){
let date = new Date(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){ 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); let date = new Date(time);
return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`; return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
}, },
scrollHandler(){ scrollHandler(){
if (this.$refs.msgContainer.scrollTop === 0){ if (this.$refs.msgContainer.scrollTop === 0) this.loadEvents();
console.log("load messages")
}
let msg = this.$refs.msgContainer; let msg = this.$refs.msgContainer;
this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200; this.showScrollBtn = msg.scrollHeight - msg.scrollTop > msg.offsetHeight + 200;
}, },
@ -90,6 +91,11 @@ export default {
}, },
isGroup(){ isGroup(){
return Object.keys(this.room.currentState.members).length > 2; 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(){ data(){
@ -101,7 +107,8 @@ export default {
join: 'joined the room', join: 'joined the room',
leave: 'left the room', leave: 'left the room',
ban: 'was banned' ban: 'was banned'
} },
loadingStatus: 'load more'
} }
}, },
updated(){ updated(){
@ -191,4 +198,15 @@ export default {
.username{ .username{
margin-left: 1rem; 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> </style>

13
src/views/rooms.vue
Unescape Escape View File

@ -10,7 +10,9 @@
<div class="roomListName">{{room.name}}</div> <div class="roomListName">{{room.name}}</div>
</div> </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="noRoomSelected" v-else>Please select a room to be displayed.</div>
<div class="roomListSmall"> <div class="roomListSmall">
<h1>[c]</h1> <h1>[c]</h1>
@ -19,20 +21,20 @@
<div class="roomListName">{{room.name}}</div> <div class="roomListName">{{room.name}}</div>
</div> </div>
</div> </div>
<!--<chatInformation v-if="currentRoom" :room="currentRoom"/>--> <chatInformation v-if="currentRoom && showChatInfo" :room="currentRoom"/>
</div> </div>
</template> </template>
<script> <script>
import chat from '@/views/chat.vue'; import chat from '@/views/chat.vue';
//import chatInformation from "@/components/chatInformation"; import chatInformation from "@/components/chatInformation";
import {matrix} from "@/main"; import {matrix} from "@/main";
export default { export default {
name: "rooms", name: "rooms",
components:{ components:{
chat, chat,
//chatInformation chatInformation
}, },
methods:{ methods:{
openChat(room){ openChat(room){
@ -45,7 +47,8 @@ export default {
data(){ data(){
return { return {
matrix, matrix,
currentRoom: undefined currentRoom: undefined,
showChatInfo: false
} }
}, },
mounted() { mounted() {

Write Preview
Loading…
Cancel
Save