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

chatInformation render bugfix

Browse Source
This commit is contained in:
adb 2020-11-23 15:40:50 +01:00
parent 68a373cbe5
commit 490c4036fe
3 changed files with 61 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/chatInformation.vue
View File

@ -3,24 +3,23 @@
<div id="box"> <div id="box">
<div class="scrollContainer"> <div class="scrollContainer">
<div class="informationBox"> <div class="informationBox">
<div class="picBoxBig"><div class="placeholderBig">{{session.currentRoom.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">{{session.currentRoom.name}}</div> <div class="roomName">{{room.name}}</div>
<div class="users">{{session.currentRoom.members.length}} members</div> <div class="users">{{room.members.length}} members</div>
</div> </div>
</div> </div>
<h2 v-if="session.currentRoom.members.length !== 0">members:</h2> <h2 v-if="room.members.length !== 0">members:</h2>
<div v-for="member in session.currentRoom.members" :key="member.sender"> <div v-for="member in room.members.slice(0,20)" :key="member.sender" class="contentBox">
<div class="contentBox"> <!---<img v-if="member.content.avatar_url" class="picBox"
<img v-if="member.content.avatar_url" class="picBox" :src="`https://adb.sh/_matrix/media/r0/thumbnail/adb.sh/${member.content.avatar_url.split('/',4)[3]}?width=64&height=64&method=crop`"/>-->
:src="`https://adb.sh/_matrix/media/r0/thumbnail/adb.sh/${member.content.avatar_url.split('/',4)[3]}?width=64&height=64&method=crop`"/> <div class="picBox"><p>{{member.content.displayname?member.content.displayname.substr(0,2):member.sender.substr(1,2)}}</p></div>
<div v-else class="picBox"><p>{{member.content.displayname.substr(0,2)}}</p></div> <div class="information">
</div> <div class="userName">{{member.content.displayname?member.content.displayname:member.sender}}</div>
<div class="information"> <div v-if="member.content.displayname" class="status">{{member.sender}}</div>
<div class="userName">{{member.content.displayname}}</div> </div>
<div class="status">{{member.sender}}</div>
</div>
</div> </div>
<p v-if="room.members.length>20">and {{room.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" />
@ -28,17 +27,14 @@
</template> </template>
<script> <script>
import icon from './icon.vue'; import icon from './icon.vue';
import matrix from '@/matrix.js'
export default { export default {
name: "chatInformation", name: "chatInformation",
components:{ components:{
icon icon
}, },
data(){ props:{
return { room: {}
session: matrix.data().session
}
} }
} }
@ -91,6 +87,9 @@ export default {
} }
.scrollContainer{ .scrollContainer{
padding: 1rem 0 1rem 0; padding: 1rem 0 1rem 0;
position: absolute;
width: 100%;
height: auto;
} }
.picBoxBig{ .picBoxBig{
text-align: center; text-align: center;
@ -116,33 +115,38 @@ export default {
color: #9c9c9c; color: #9c9c9c;
} }
.contentBox{ .contentBox{
margin-top: 0.2rem; position: relative;
height: 3.2rem; margin-top: 0.5rem;
padding: 0.2rem; height: 3rem;
max-height: 48px; width: 100%;
} }
.picBox{ .picBox{
position: absolute; position: absolute;
left: 1rem; left: 0;
top: 0;
background-color: #42a7b9; background-color: #42a7b9;
width: 3rem; width: 3rem;
height:3rem; height: 3rem;
border-radius: 2rem; border-radius: 1.5rem;
} }
img.picBox{ img.picBox{
background-color: unset; background-color: unset;
} }
.information{ .information{
position: relative; position: absolute;
text-align: left; left: 4rem;
margin-top: -2.4rem; top: 0;
margin-left: 3.7rem; width: calc(100% - 4rem);
} }
.userName{ .userName{
position: absolute;
top: 0.75rem;
color: white; color: white;
} }
.status{ .status{
position: absolute;
font-size: 0.8rem; font-size: 0.8rem;
top: 1.75rem;
color: #9c9c9c; color: #9c9c9c;
} }
</style> </style>

14
src/views/chat.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div @scroll="loadMessages()" ref="msgContainer" id="messagesContainer" class="messagesContainer"> <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
<div id="messages" class="messages"> <div id="messages" class="messages">
<p v-if="session.currentRoom.messages.length === 0" class="info">this room is empty</p> <p v-if="session.currentRoom.messages.length === 0" class="info">this room is empty</p>
<div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts"> <div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<newMessage /> <newMessage />
<icon v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" /> <icon v-if="showScrollBtn" v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
<topBanner /> <topBanner />
</div> </div>
</template> </template>
@ -44,7 +44,6 @@ export default {
scrollToBottom(){ scrollToBottom(){
let msgContainer = document.getElementById("messagesContainer") let msgContainer = document.getElementById("messagesContainer")
msgContainer.scrollTo(0, msgContainer.scrollHeight) msgContainer.scrollTo(0, msgContainer.scrollHeight)
document.getElementById("scrollDown").style.display = "none"
}, },
getTime(time){ getTime(time){
let date = new Date(time); let date = new Date(time);
@ -55,16 +54,19 @@ export default {
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()}`;
}, },
loadMessages(){ scrollHandler(){
if (this.$refs.msgContainer.scrollTop === 0){ if (this.$refs.msgContainer.scrollTop === 0){
console.log("load messages") console.log("load messages")
} }
let msgContainer = document.getElementById("messagesContainer")
this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
} }
}, },
data(){ data(){
return { return {
chatroom: main.data().chatroom, chatroom: main.data().chatroom,
session: matrix.data().session session: matrix.data().session,
showScrollBtn: false
} }
} }
} }
@ -90,7 +92,7 @@ export default {
background-color: #fff; background-color: #fff;
bottom: 5rem; bottom: 5rem;
right: 1rem; right: 1rem;
display: none; display: block;
} }
.info{ .info{
text-align: center; text-align: center;

23
src/views/rooms.vue
View File

@ -8,16 +8,17 @@
<div class="roomListName">{{room.name}}</div> <div class="roomListName">{{room.name}}</div>
</div> </div>
</div> </div>
<chat class="chat" v-if="session.currentRoom" />
<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>
<h2>—</h2> <h2>—</h2>
<div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name"> <div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
<div class="roomImgPlaceholder small">{{room.name.substr(0,2)}}</div> <div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
<div class="roomListName">{{room.name}}</div>
</div> </div>
</div> </div>
<chat class="chat" v-if="session.currentRoom" /> <chatInformation v-if="session.currentRoom" :room="session.currentRoom"/>
<div class="noRoomSelected" v-else>Please select a room to be displayed.</div>
<chatInformation v-if="session.currentRoom"/>
</div> </div>
</template> </template>
@ -93,6 +94,20 @@ export default {
display: none; display: none;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
animation: ease;
animation-duration: 0.2s;
scrollbar-width: none;
}
.roomListSmall:hover{
width: 18rem;
scrollbar-width: thin;
box-shadow: 0 0 20px #111;
}
.roomListSmall::-webkit-scrollbar {
width: 0;
}
.roomListSmall:hover::-webkit-scrollbar {
width: 0.5rem;
} }
.noRoomSelected{ .noRoomSelected{
position: absolute; position: absolute;