121 lines
2.9 KiB
Vue
121 lines
2.9 KiB
Vue
<template>
|
|
<aside class="neko-menu">
|
|
<div class="tabs-container">
|
|
<ul>
|
|
<li :class="{ active: tab === 'chat' }" @click.stop.prevent="change('chat')">
|
|
<i class="fas fa-comment-alt" />
|
|
<span>{{ $t('side.chat') }}</span>
|
|
</li>
|
|
<li v-if="filetransferAllowed" :class="{ active: tab === 'files' }" @click.stop.prevent="change('files')">
|
|
<i class="fas fa-file" />
|
|
<span>{{ $t('side.files') }}</span>
|
|
</li>
|
|
<li :class="{ active: tab === 'settings' }" @click.stop.prevent="change('settings')">
|
|
<i class="fas fa-sliders-h" />
|
|
<span>{{ $t('side.settings') }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="page-container">
|
|
<neko-chat v-if="tab === 'chat'" />
|
|
<neko-files v-if="tab === 'files'" />
|
|
<neko-settings v-if="tab === 'settings'" />
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.neko-menu {
|
|
width: $side-width;
|
|
background-color: $background-primary;
|
|
flex-shrink: 0;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tabs-container {
|
|
background: $background-tertiary;
|
|
height: $menu-height;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
|
|
ul {
|
|
display: inline-block;
|
|
padding: 16px 0 0 0;
|
|
|
|
li {
|
|
background: $background-secondary;
|
|
border-radius: 3px 3px 0 0;
|
|
border-bottom: none;
|
|
display: inline-block;
|
|
padding: 5px 10px;
|
|
margin-right: 4px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
|
|
i {
|
|
margin-right: 4px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
&.active {
|
|
background: $background-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-container {
|
|
max-height: 100%;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
overflow: auto;
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component, Watch } from 'vue-property-decorator'
|
|
|
|
import Settings from '~/components/settings.vue'
|
|
import Chat from '~/components/chat.vue'
|
|
import Files from '~/components/files.vue'
|
|
|
|
@Component({
|
|
name: 'neko',
|
|
components: {
|
|
'neko-settings': Settings,
|
|
'neko-chat': Chat,
|
|
'neko-files': Files,
|
|
},
|
|
})
|
|
export default class extends Vue {
|
|
get filetransferAllowed() {
|
|
return (
|
|
(this.$accessor.user.admin && this.$accessor.settings.file_transfer) ||
|
|
this.$accessor.settings.unpriv_file_transfer
|
|
)
|
|
}
|
|
|
|
get tab() {
|
|
return this.$accessor.client.tab
|
|
}
|
|
|
|
@Watch('tab', { immediate: true })
|
|
onTabChange() {
|
|
// do not show the files tab if file transfer is disabled
|
|
if (this.tab === 'files' && !this.filetransferAllowed) {
|
|
this.change('chat')
|
|
}
|
|
}
|
|
|
|
change(tab: string) {
|
|
this.$accessor.client.setTab(tab)
|
|
}
|
|
}
|
|
</script>
|