dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-06-14 03:51:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

implimented recyclerview to members and recents

Browse source
This commit is contained in:
supertiger1234 2020-02-08 16:37:49 +00:00
parent a2cf7a91bb
commit ea58dbd7b6
7 changed files with 87 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
package-lock.json generated
View file

@ -5886,9 +5886,9 @@
}
},
"globule": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
"integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/globule/-/globule-1.3.0.tgz",
"integrity": "sha512-YlD4kdMqRCQHrhVdonet4TdRtv1/sZKepvoxNT4Nrhrp5HI8XFfc8kFlGlBn2myBo80aGp8Eft259mbcUJhgSg==",
"dev": true,
"requires": {
"glob": "~7.1.1",
@ -6724,13 +6724,10 @@
"dev": true
},
"is-finite": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
"integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
"dev": true,
"requires": {
"number-is-nan": "^1.0.0"
}
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
"integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
"dev": true
},
"is-fullwidth-code-point": {
"version": "2.0.0",
@ -7935,9 +7932,9 @@
}
},
"node-sass": {
"version": "4.13.0",
"resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz",
"integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==",
"version": "4.13.1",
"resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
"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",

3
package.json
View file

@ -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"

2
src/components/app/MemberTemplate.vue
View file

@ -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);
}

85
src/components/app/MembersList.vue
View file

@ -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"
:style="{ color: role.color }"
v-if="noneRoleOnlineMembers.length"
: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
class="tab"
v-if="noneRoleOnlineMembers.length"
:style="{ color: defaultRole.color }"
>
{{ defaultRole.name }} ({{ noneRoleOnlineMembers.length }})
</div>
<member-template
v-for="member in noneRoleOnlineMembers"
:key="member.member.uniqueID"
:type="member.type"
:avatar="member.member.avatar"
:user="member.member"
:member="member"
/>
<div class="tab" v-if="offlineMembers.length">
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
class="tab"
v-if="offlineMembers.length"
:style="{ height: '29' + 'px' }"
>
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"
:style="{ height: '48' + 'px' }"
/>
</virtual-list>
</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;

2
src/components/app/Tabs/DirectMessage.vue
View file

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

1
src/components/app/relationships/FriendsTemplate.vue
View file

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

41
src/components/app/relationships/RecentFriends.vue
View file

@ -1,24 +1,24 @@
<template>
<div class="recents">
<transition name="list">
<div class="list">
<FriendsTemplate
v-for="(channel, key) of channels"
:key="key"
:recents="true"
:channel-i-d="channel.channelID"
:recipient="channel.recipients[0]"
/>
</div>
</transition>
<virtual-list :size="49" :remain="20">
<FriendsTemplate
v-for="(channel, key) of channels"
:key="key"
:recents="true"
:channel-i-d="channel.channelID"
:recipient="channel.recipients[0]"
/>
</virtual-list>
</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;