Browse Source

feat: toggle nav drawer in workspace

Signed-off-by: Liel Fridman <lielft@gmail.com>
pull/659/head
Liel Fridman 3 years ago
parent
commit
bc1d63b59b
  1. 39
      packages/nc-gui/pages/nc/_project_id.vue

39
packages/nc-gui/pages/nc/_project_id.vue

@ -1,10 +1,13 @@
<template>
<v-container fluid class="pa-0 ma-0" style="overflow: auto">
<splitpanes style="height:calc(100vh - 40px)" class="xc-theme">
<pane min-size="10" :size="paneSize" max-size="50" style="overflow: auto">
<ProjectTreeView ref="treeview" />
<splitpanes style="height:calc(100vh - 40px); position: relative;" class="xc-theme">
<pane :min-size="showProjectTree? 10 : 1.5" :size="showProjectTree ? paneSize : 1.5" :max-size="showProjectTree? 50 : 1.5" style="overflow: auto;">
<ProjectTreeView v-show="showProjectTree" ref="treeview" />
<v-btn icon color="grey" class="pane-toggle" :style="'transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);' + (showProjectTree?`left: calc(${paneSize}% - 1.25rem);`:'left: calc(1.5% - 1.25rem);')" :class="{'pane-toggle-active': showProjectTree}" @click="toggleTreeView">
<v-icon small>{{ showProjectTree ? 'mdi-arrow-expand-left' : 'mdi-arrow-expand-right' }}</v-icon>
</v-btn>
</pane>
<pane :size="100 - paneSize">
<pane :size="showProjectTree ? 100 - paneSize : 100">
<ProjectTabs :key="pid" @tableCreate="tableCreate" />
</pane>
</splitpanes>
@ -26,7 +29,8 @@ export default {
data() {
return {
paneSize: 18,
mainPanelSize: 82
mainPanelSize: 82,
showProjectTree: true
}
},
computed: {
@ -92,6 +96,9 @@ export default {
spread: 120,
startVelocity: 45
})
},
toggleTreeView() {
this.showProjectTree = !this.showProjectTree
}
}
}
@ -101,6 +108,27 @@ export default {
background: #7f828b33 !important;
border: #7f828b33 !important;
}
.pane-toggle {
position: absolute;
right: 0;
top: 50%;
bottom: 50%;
z-index: 2;
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), all 0s;
}
.pane-toggle-active {
}
.theme--light .pane-toggle {
background-color: #FFFFFF;
border: 2px solid rgba(0, 0, 0, 0.12);
}
.theme--dark .pane-toggle {
background-color: #363636;
}
</style>
<!--
/**
@ -109,6 +137,7 @@ export default {
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
* @author Wing-Kam Wong <wingkwong.code@gmail.com>
* @author Liel Fridman <lielft@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*

Loading…
Cancel
Save