implimented recyclerview to members and recents

package-lock.json

@@ -5886,9 +5886,9 @@
       }
     },
     "globule": {
-      "version": "1.2.1",
+      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.0.tgz",
-      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
+      "integrity": "sha512-YlD4kdMqRCQHrhVdonet4TdRtv1/sZKepvoxNT4Nrhrp5HI8XFfc8kFlGlBn2myBo80aGp8Eft259mbcUJhgSg==",
       "dev": true,
       "requires": {
         "glob": "~7.1.1",
@@ -6724,13 +6724,10 @@
       "dev": true
     },
     "is-finite": {
-      "version": "1.0.2",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
-      "dev": true,
+      "dev": true
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
     },
     "is-fullwidth-code-point": {
       "version": "2.0.0",
@@ -7935,9 +7932,9 @@
       }
     },
     "node-sass": {
-      "version": "4.13.0",
+      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
-      "integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==",
+      "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
       "dev": true,
       "requires": {
         "async-foreach": "^0.1.3",
@@ -12000,6 +11997,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-virtual-scroll-list": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.4.tgz",
+      "integrity": "sha512-wU7FDpd9Xy4f62pf8SBg/ak21jMI/pdx4s4JPah+z/zuhmeAafQgp8BjtZvvt+b0BZOsOS1FJuCfUH7azTkivQ=="
+    },
     "vuedraggable": {
       "version": "2.23.2",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",

package.json

@@ -23,6 +23,7 @@
     "vue-recaptcha": "^1.3.0",
     "vue-router": "^3.1.3",
     "vue-socket.io-extended": "^4.0.1",
+    "vue-virtual-scroll-list": "^1.4.4",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.1.2"
   },
@@ -37,7 +38,7 @@
     "eslint": "^5.16.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.13.1",
     "prettier": "^1.19.1",
     "sass-loader": "^8.0.0",
     "vue-template-compiler": "^2.6.10"

src/components/app/MemberTemplate.vue

@@ -123,7 +123,6 @@ export default {
 <style scoped>
 .member {
   display: flex;
-  padding: 3px;
   align-items: center;
   align-content: center;
   transition: 0.2s;
@@ -154,7 +153,6 @@ export default {
   padding: 4px;
   border-radius: 2px;
   font-size: 12px;
-  height: 100%;
   margin-right: 10px;
   background: rgb(255, 71, 71);
 }

src/components/app/MembersList.vue

@@ -4,59 +4,69 @@
       <div class="title">Members ({{ members.length }})</div>
     </div>
     <div class="members">
-      <div class="roles" v-for="role in serverRoles" :key="role.id">
+      <virtual-list :size="49" :remain="20" :variable="true">
+        <div class="roles" v-for="role in serverRoles" :key="role.id">
+          <div
+            class="tab"
+            v-if="serverRoles.length"
+            :style="{ color: role.color, height: '29' + 'px' }"
+          >
+            {{ role.name }} ({{ role.members.length }})
+          </div>
+          <member-template
+            v-for="member in role.members"
+            :key="member.member.uniqueID"
+            :type="member.type"
+            :avatar="member.member.avatar"
+            :user="member.member"
+            :member="member"
+            :style="{ height: '48' + 'px' }"
+          />
+        </div>
+
         <div
           class="tab"
-          v-if="serverRoles.length"
+          v-if="noneRoleOnlineMembers.length"
-          :style="{ color: role.color }"
+          :style="{ color: defaultRole.color, height: '29' + 'px' }"
         >
-          {{ role.name }} ({{ role.members.length }})
+          {{ defaultRole.name }} ({{ noneRoleOnlineMembers.length }})
         </div>
         <member-template
-          v-for="member in role.members"
+          v-for="member in noneRoleOnlineMembers"
           :key="member.member.uniqueID"
           :type="member.type"
           :avatar="member.member.avatar"
           :user="member.member"
           :member="member"
+          :style="{ height: '48' + 'px' }"
         />
-      </div>
 
-      <div
+        <div
-        class="tab"
+          class="tab"
-        v-if="noneRoleOnlineMembers.length"
+          v-if="offlineMembers.length"
-        :style="{ color: defaultRole.color }"
+          :style="{ height: '29' + 'px' }"
-      >
+        >
-        {{ defaultRole.name }} ({{ noneRoleOnlineMembers.length }})
+          Offline ({{ offlineMembers.length }})
-      </div>
+        </div>
-      <member-template
+        <member-template
-        v-for="member in noneRoleOnlineMembers"
+          v-for="member in offlineMembers"
-        :key="member.member.uniqueID"
+          :key="member.member.uniqueID"
-        :type="member.type"
+          :type="member.type"
-        :avatar="member.member.avatar"
+          :avatar="member.member.avatar"
-        :user="member.member"
+          :user="member.member"
-        :member="member"
+          :member="member"
-      />
+          :style="{ height: '48' + 'px' }"
-
+        />
-      <div class="tab" v-if="offlineMembers.length">
+      </virtual-list>
-        Offline ({{ offlineMembers.length }})
-      </div>
-      <member-template
-        v-for="member in offlineMembers"
-        :key="member.member.uniqueID"
-        :type="member.type"
-        :avatar="member.member.avatar"
-        :user="member.member"
-        :member="member"
-      />
     </div>
   </div>
 </template>
 
 <script>
+import VirtualList from "vue-virtual-scroll-list";
 import MemberTemplate from "@/components/app/MemberTemplate";
 export default {
-  components: { MemberTemplate },
+  components: { MemberTemplate, VirtualList },
   computed: {
     selectedServerID() {
       return this.$store.getters["servers/selectedServerID"];
@@ -172,10 +182,13 @@ export default {
   margin: auto;
 }
 .members {
-  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-shrink: 0;
+  overflow: hidden;
 }
 .tab {
-  padding: 5px;
   user-select: none;
   cursor: default;
   color: #b5c4ca;

src/components/app/Tabs/DirectMessage.vue

@@ -24,7 +24,7 @@ export default {
   },
   data() {
     return {
-      showLeftPanel: true
+      showLeftPanel: false
     };
   },
   mounted() {

src/components/app/relationships/FriendsTemplate.vue

@@ -152,6 +152,7 @@ export default {
   color: white;
   padding: 5px;
   display: flex;
+  height: 34px;
   transition: 0.3s;
   position: relative;
   overflow: hidden;

src/components/app/relationships/RecentFriends.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="recents">
-    <transition name="list">
+    <virtual-list :size="49" :remain="20">
-      <div class="list">
+      <FriendsTemplate
-        <FriendsTemplate
+        v-for="(channel, key) of channels"
-          v-for="(channel, key) of channels"
+        :key="key"
-          :key="key"
+        :recents="true"
-          :recents="true"
+        :channel-i-d="channel.channelID"
-          :channel-i-d="channel.channelID"
+        :recipient="channel.recipients[0]"
-          :recipient="channel.recipients[0]"
+      />
-        />
+    </virtual-list>
-      </div>
-    </transition>
   </div>
 </template>
 
 <script>
+import VirtualList from "vue-virtual-scroll-list";
 import FriendsTemplate from "./FriendsTemplate.vue";
 export default {
   components: {
-    FriendsTemplate
+    FriendsTemplate,
+    VirtualList
   },
   computed: {
     user() {
@@ -78,21 +78,18 @@ export default {
 };
 </script>
 <style scoped>
-.list-enter-active,
+
-.list-leave-active {
-  transition: 0.3s;
-}
-.list-enter, .list-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  transform: translateY(-20px);
-  opacity: 0;
-}
 
 .recents {
   background-color: rgba(0, 0, 0, 0);
   user-select: none;
-  padding-bottom: 3px;
-  border-radius: 5px;
   transition: 0.3s;
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-shrink: 0;
+  overflow: hidden;
 }
 .tab {
   transition: 0.3s;