Moved add server and added explore button to top

This commit is contained in:
supertiger1234 2019-09-20 11:58:19 +01:00
parent b93f0ac1a4
commit 0082f767ae

View file

@ -1,6 +1,16 @@
<template> <template>
<div class="left-panel"> <div class="left-panel">
<MyMiniInformation /> <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"> <div class="list">
<server <server
v-for="(data, index) in servers" v-for="(data, index) in servers"
@ -9,10 +19,6 @@
:open-channel="selectedServerID && selectedServerID === data.server_id" :open-channel="selectedServerID && selectedServerID === data.server_id"
@click.native="toggleChannel(data.server_id, $event)" @click.native="toggleChannel(data.server_id, $event)"
/> />
<server
mode="ADD_SERVER"
@click.native="openAddServer"
/>
</div> </div>
</div> </div>
</template> </template>
@ -20,6 +26,7 @@
<script> <script>
import MyMiniInformation from "@/components/app/MyMiniInformation.vue"; import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
import Server from "@/components/app/ServerTemplate/ServerTemplate.vue"; import Server from "@/components/app/ServerTemplate/ServerTemplate.vue";
import {bus} from '@/main'
export default { export default {
components: { components: {
@ -48,6 +55,9 @@ export default {
this.openedServer = serverID; this.openedServer = serverID;
this.$store.dispatch('servers/setSelectedServerID', serverID) this.$store.dispatch('servers/setSelectedServerID', serverID)
} }
},
openExploreTab() {
bus.$emit('changeTab', 0)
} }
}, },
computed: { computed: {
@ -63,7 +73,8 @@ export default {
} }
}; };
</script> </script>
<style scoped>
<style scoped lang="scss" >
.left-panel { .left-panel {
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.671); background-color: rgba(0, 0, 0, 0.671);
@ -102,4 +113,30 @@ export default {
.list::-webkit-scrollbar-thumb:hover { .list::-webkit-scrollbar-thumb:hover {
background: #f5f5f59e; 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> </style>