mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-07-03 10:00:41 +00:00
Moved add server and added explore button to top
This commit is contained in:
parent
b93f0ac1a4
commit
0082f767ae
1 changed files with 42 additions and 5 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue