Browse Source

Merge pull request #659 from lielfr/project_toggle_drawer

feat: toggle nav drawer in workspace
pull/662/head
Navi 3 years ago committed by GitHub
parent
commit
ea32bb0ba4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 39
      packages/nc-gui/pages/nc/_project_id.vue

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

@ -1,10 +1,13 @@
<template> <template>
<v-container fluid class="pa-0 ma-0" style="overflow: auto"> <v-container fluid class="pa-0 ma-0" style="overflow: auto">
<splitpanes style="height:calc(100vh - 40px)" class="xc-theme"> <splitpanes style="height:calc(100vh - 40px); position: relative;" class="xc-theme">
<pane min-size="10" :size="paneSize" max-size="50" style="overflow: auto"> <pane :min-size="showProjectTree? 10 : 1.5" :size="showProjectTree ? paneSize : 1.5" :max-size="showProjectTree? 50 : 1.5" style="overflow: auto;">
<ProjectTreeView ref="treeview" /> <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>
<pane :size="100 - paneSize"> <pane :size="showProjectTree ? 100 - paneSize : 100">
<ProjectTabs :key="pid" @tableCreate="tableCreate" /> <ProjectTabs :key="pid" @tableCreate="tableCreate" />
</pane> </pane>
</splitpanes> </splitpanes>
@ -26,7 +29,8 @@ export default {
data() { data() {
return { return {
paneSize: 18, paneSize: 18,
mainPanelSize: 82 mainPanelSize: 82,
showProjectTree: true
} }
}, },
computed: { computed: {
@ -92,6 +96,9 @@ export default {
spread: 120, spread: 120,
startVelocity: 45 startVelocity: 45
}) })
},
toggleTreeView() {
this.showProjectTree = !this.showProjectTree
} }
} }
} }
@ -101,6 +108,27 @@ export default {
background: #7f828b33 !important; background: #7f828b33 !important;
border: #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> </style>
<!-- <!--
/** /**
@ -109,6 +137,7 @@ export default {
* @author Naveen MR <oof1lab@gmail.com> * @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com> * @author Pranav C Balan <pranavxc@gmail.com>
* @author Wing-Kam Wong <wingkwong.code@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 * @license GNU AGPL version 3 or any later version
* *

Loading…
Cancel
Save