Browse Source

refactor: ui updates

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/760/head
Pranav C 3 years ago
parent
commit
95e5d27a1f
  1. 2
      packages/nc-gui/components/templates/templatesModal.vue
  2. 16
      packages/nc-gui/pages/nc/_project_id.vue

2
packages/nc-gui/components/templates/templatesModal.vue

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="d-flex align-center">
<span v-ripple class="caption font-weight-bold pointer" @click="templatesModal = true">Templates</span> <span v-ripple class="caption font-weight-bold pointer" @click="templatesModal = true">Templates</span>
<v-dialog v-if="templatesModal" v-model="templatesModal"> <v-dialog v-if="templatesModal" v-model="templatesModal">
<v-card height="90vh"> <v-card height="90vh">

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

@ -1,10 +1,20 @@
<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); position: relative;" class="xc-theme"> <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;"> <pane :min-size="showProjectTree? 10 : 1.5" :size="showProjectTree ? paneSize : 1.5" :max-size="showProjectTree? 50 : 1.5" style="position: relative;overflow-x: hidden">
<ProjectTreeView v-show="showProjectTree" 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-btn
<v-icon small>{{ showProjectTree ? 'mdi-arrow-expand-left' : 'mdi-arrow-expand-right' }}</v-icon> x-small
icon
color="grey"
class="pane-toggle"
style="transition: all 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);right:-8px"
:class="{'pane-toggle-active': showProjectTree}"
@click="toggleTreeView"
>
<v-icon x-small color="rgba(127,130,139)">
{{ showProjectTree ? 'mdi-arrow-left' : 'mdi-arrow-right' }}
</v-icon>
</v-btn> </v-btn>
</pane> </pane>
<pane :size="showProjectTree ? 100 - paneSize : 100"> <pane :size="showProjectTree ? 100 - paneSize : 100">

Loading…
Cancel
Save