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

Moved add server and added explore button to top

Browse source
This commit is contained in:
supertiger1234 2019-09-20 11:58:19 +01:00
parent b93f0ac1a4
commit 0082f767ae
1 changed files with 42 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/components/app/ServerList.vue
View file

@ -1,6 +1,16 @@
<template>
<div class="left-panel">
<MyMiniInformation />
<div class="actions">
<div class="action" @click="openAddServer">
<div class="material-icons">add</div>
<div class="text">Add Server</div>
</div>
<div class="action" @click="openExploreTab">
<div class="material-icons">explore</div>
<div class="text">Explore</div>
</div>
</div>
<div class="list">
<server
v-for="(data, index) in servers"
@ -9,10 +19,6 @@
:open-channel="selectedServerID && selectedServerID === data.server_id"
@click.native="toggleChannel(data.server_id, $event)"
/>
<server
mode="ADD_SERVER"
@click.native="openAddServer"
/>
</div>
</div>
</template>
@ -20,6 +26,7 @@
<script>
import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
import Server from "@/components/app/ServerTemplate/ServerTemplate.vue";
import {bus} from '@/main'
export default {
components: {
@ -48,6 +55,9 @@ export default {
this.openedServer = serverID;
this.$store.dispatch('servers/setSelectedServerID', serverID)
}
},
openExploreTab() {
bus.$emit('changeTab', 0)
}
},
computed: {
@ -63,7 +73,8 @@ export default {
}
};
</script>
<style scoped>
<style scoped lang="scss" >
.left-panel {
height: 100%;
background-color: rgba(0, 0, 0, 0.671);
@ -102,4 +113,30 @@ export default {
.list::-webkit-scrollbar-thumb:hover {
background: #f5f5f59e;
}
.actions {
color: white;
display: flex;
justify-content: center;
flex-shrink: 0;
user-select: none;
.action {
display: flex;
padding: 5px;
margin: 2px;
align-items: center;
align-content: center;
cursor: pointer;
color: rgb(223, 223, 223);
border-radius: 5px;
transition: 0.2s;
.material-icons {
color: white;
margin-right: 5px;
}
&:hover {
background: rgba(0, 0, 0, 0.24);
}
}
}
</style>