chatInformation render bugfix

src/components/chatInformation.vue

@@ -3,24 +3,23 @@
     <div id="box">
       <div class="scrollContainer">
         <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="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>
-        <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>
           <div class="information">
-              <div class="userName">{{member.content.displayname}}</div>
+            <div class="userName">{{member.content.displayname?member.content.displayname:member.sender}}</div>
-              <div class="status">{{member.sender}}</div>
+            <div v-if="member.content.displayname" class="status">{{member.sender}}</div>
           </div>
         </div>
+        <p v-if="room.members.length>20">and {{room.members.length-20}} other members</p>
       </div>
     </div>
     <icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
@@ -28,17 +27,14 @@
 </template>
 <script>
 import icon from './icon.vue';
-import matrix from '@/matrix.js'
 
 export default {
   name: "chatInformation",
   components:{
     icon
   },
-  data(){
+  props:{
-    return {
+    room: {}
-      session: matrix.data().session
-    }
   }
 }
 
@@ -91,6 +87,9 @@ export default {
 }
 .scrollContainer{
   padding: 1rem 0 1rem 0;
+  position: absolute;
+  width: 100%;
+  height: auto;
 }
 .picBoxBig{
   text-align: center;
@@ -116,33 +115,38 @@ export default {
   color: #9c9c9c;
 }
 .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{
   position: absolute;
-  left: 1rem;
+  left: 0;
+  top: 0;
   background-color: #42a7b9;
   width: 3rem;
   height: 3rem;
-  border-radius: 2rem;
+  border-radius: 1.5rem;
 }
 img.picBox{
   background-color: unset;
 }
 .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{
+  position: absolute;
+  top: 0.75rem;
   color: white;
 }
 .status{
+  position: absolute;
   font-size: 0.8rem;
+  top: 1.75rem;
   color: #9c9c9c;
 }
 </style>

src/views/chat.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div @scroll="loadMessages()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
+    <div @scroll="scrollHandler()" ref="msgContainer" id="messagesContainer" class="messagesContainer">
       <div id="messages" class="messages">
         <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">
@@ -17,7 +17,7 @@
       </div>
     </div>
     <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 />
   </div>
 </template>
@@ -44,7 +44,6 @@ export default {
     scrollToBottom(){
       let msgContainer = document.getElementById("messagesContainer")
       msgContainer.scrollTo(0, msgContainer.scrollHeight)
-      document.getElementById("scrollDown").style.display = "none"
     },
     getTime(time){
       let date = new Date(time);
@@ -55,16 +54,19 @@ export default {
       let date = new Date(time);
       return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
     },
-    loadMessages(){
+    scrollHandler(){
       if (this.$refs.msgContainer.scrollTop === 0){
         console.log("load messages")
       }
+      let msgContainer = document.getElementById("messagesContainer")
+      this.showScrollBtn = msgContainer.scrollHeight - msgContainer.scrollTop > msgContainer.offsetHeight + 200;
     }
   },
   data(){
     return {
       chatroom: main.data().chatroom,
-      session: matrix.data().session
+      session: matrix.data().session,
+      showScrollBtn: false
     }
   }
 }
@@ -90,7 +92,7 @@ export default {
   background-color: #fff;
   bottom: 5rem;
   right: 1rem;
-  display: none;
+  display: block;
 }
 .info{
   text-align: center;

src/views/rooms.vue

@@ -8,16 +8,17 @@
         <div class="roomListName">{{room.name}}</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">
       <h1>[c]</h1>
       <h2>—</h2>
       <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>
-    <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>
 </template>
 
@@ -93,6 +94,20 @@ export default {
   display: none;
   overflow-y: auto;
   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{
   position: absolute;