github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactor: ui improvements 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/958/head
Pranav C 3 years ago
parent
0ee9059add
commit
0425538b32
23 changed files with 422 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      packages/nc-gui/assets/style.css
  2. 94
      packages/nc-gui/components/ProjectTreeView.vue
  3. 2
      packages/nc-gui/components/authTab.vue
  4. 49
      packages/nc-gui/components/global/xBtn.vue
  5. 2
      packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue
  6. 2
      packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue
  7. 31
      packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
  8. 61
      packages/nc-gui/components/project/spreadsheet/components/shareViewMenu.vue
  9. 2
      packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
  10. 66
      packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
  11. 14
      packages/nc-gui/components/project/spreadsheet/public/xcKanban.vue
  12. 2
      packages/nc-gui/components/project/spreadsheet/public/xcTable.vue
  13. 135
      packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
  14. 2
      packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
  15. 2
      packages/nc-gui/components/project/viewTabs/viewSpreadsheet.vue
  16. 66
      packages/nc-gui/components/projectTabs.vue
  17. 4
      packages/nc-gui/config/vuetify.options.js
  18. 2
      packages/nc-gui/helpers/treeViewDataSerializer.js
  19. 4
      packages/nc-gui/lang/en.json
  20. 38
      packages/nc-gui/layouts/default.vue
  21. 15
      packages/nc-gui/pages/nc/_project_id.vue
  22. 2
      packages/nc-gui/pages/nc/index.vue
  23. 2
      packages/nc-gui/pages/project/xcdb.vue

6
packages/nc-gui/assets/style.css
Unescape View File

@ -275,7 +275,7 @@ tbody tr:nth-of-type(odd) {
} }
.project-tabs > .v-tabs-items { .project-tabs > .v-tabs-items {
height: calc(100% - 35px); height: calc(100% - 30px);
overflow: auto; overflow: auto;
} }
@ -491,3 +491,7 @@ body.dark .toasted .primary.info, body.dark .toasted.toasted-primary.info {
.v-date-picker-table { .v-date-picker-table {
height: auto !important; height: auto !important;
} }
.nc-remove-border{
border: none !important;
}

94
packages/nc-gui/components/ProjectTreeView.vue
Unescape View File

@ -1,13 +1,18 @@
<template> <template>
<div style="height: 100%" class="nc-tree-view" @mouseenter="onMiniHoverEnter" @mouseleave="onMiniHoverLeave"> <div style="height: 100%" class="nc-tree-view" @mouseenter="onMiniHoverEnter" @mouseleave="onMiniHoverLeave">
<!-- :expand-on-hover="mini"--> <!-- :expand-on-hover="mini"-->
<div
class="primary nc-project-title theme--dark"
>
<div>{{ $store.getters["project/GtrProjectName"] }}</div>
</div>
<v-navigation-drawer <v-navigation-drawer
ref="drawer" ref="drawer"
v-model="navigation.shown" v-model="navigation.shown"
permanent permanent
mini-variant-width="50" mini-variant-width="50"
class="pl-2 nc-nav-drawer" class="pl-2 nc-nav-drawer"
style="min-width: 100%; height: 100%" style="min-width: 100%; height: calc(100% - 30px)"
> >
<div class="h-100 d-flex flex-column"> <div class="h-100 d-flex flex-column">
<div class="flex-grow-1" style="overflow-y: auto; min-height: 200px"> <div class="flex-grow-1" style="overflow-y: auto; min-height: 200px">
@ -156,11 +161,11 @@
<v-list-item-title> <v-list-item-title>
<v-tooltip v-if="!isNonAdminAccessAllowed(item)" top> <v-tooltip v-if="!isNonAdminAccessAllowed(item)" top>
<template #activator="{ on }"> <template #activator="{ on }">
<span v-if="item.type === 'tableDir'" class="caption font-weight-regular" v-on="on"> <span v-if="item.type === 'tableDir'" class="body-2 font-weight-medium" v-on="on">
Tables<template v-if="item.children && item.children.length"> ({{ Tables<template v-if="item.children && item.children.length"> ({{
item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length
}})</template></span> }})</template></span>
<span v-else class="caption font-weight-regular" v-on="on"> <span v-else class="body-2 font-weight-medium" v-on="on">
{{ item.name }}</span> {{ item.name }}</span>
</template> </template>
<span class="caption">Only visible to Creator</span> <span class="caption">Only visible to Creator</span>
@ -168,7 +173,7 @@
<template <template
v-else v-else
> >
<span v-if="item.type === 'tableDir'" class="caption font-weight-regular"> <span v-if="item.type === 'tableDir'" class="body-2 font-weight-medium">
Tables<template v-if="item.children && item.children.length"> ({{ Tables<template v-if="item.children && item.children.length"> ({{
item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length
}})</template></span> }})</template></span>
@ -312,7 +317,7 @@
</v-list> </v-list>
</v-menu> </v-menu>
<!-- <v-icon @click.stop="" x-small>mdi-delete-outline</v-icon>--> <!-- <v-icon @click.stop="" x-small>mdi-delete-outline</v-icon>-->
</div> </div>
</template> </template>
</v-list-item> </v-list-item>
@ -392,12 +397,12 @@
<v-list-item> <v-list-item>
<v-list-item-title> <v-list-item-title>
<!-- Settings --> <!-- Settings -->
<span class="body-2 grey--text">{{ $t('treeview.settings.title') }}</span> <span class="body-2 font-weight-medium">{{ $t('treeview.settings.title') }}</span>
<v-tooltip top> <v-tooltip top>
<template #activator="{ on }"> <template #activator="{ on }">
<x-icon <x-icon
class="mt-n1" class="mt-n1"
color="pink grey" color="pink textColor"
icon-class="ml-2" icon-class="ml-2"
small small
v-on="on" v-on="on"
@ -472,6 +477,26 @@
<!-- Meta Management --> <!-- Meta Management -->
{{ $t('treeview.project_metadata.tooltip') }} {{ $t('treeview.project_metadata.tooltip') }}
</v-tooltip> </v-tooltip>
<v-tooltip bottom>
<template #activator="{ on }">
<v-list-item dense class="body-2 nc-settings-projmeta" @click="openAuditTab" v-on="on">
<v-list-item-icon>
<v-icon x-small>
mdi-notebook-outline
</v-icon>
</v-list-item-icon>
<!-- Project Metadata -->
<v-list-item-title>
<span class="font-weight-regular caption">{{
$t('treeview.audit.title')
}}</span>
</v-list-item-title>
</v-list-item>
</template>
<!-- Meta Management -->
{{ $t('treeview.audit.tooltip') }}
</v-tooltip>
</template> </template>
</v-list> </v-list>
<v-divider /> <v-divider />
@ -529,7 +554,7 @@
<v-list v-if="_isUIAllowed('previewAs') || previewAs" dense> <v-list v-if="_isUIAllowed('previewAs') || previewAs" dense>
<v-list-item> <v-list-item>
<!-- Preview as --> <!-- Preview as -->
<span class="body-2 grey--text">{{ $t('treeview.preview_as') }}</span> <span class="body-2 font-weight-medium">{{ $t('treeview.preview_as') }}</span>
<v-icon small class="ml-1"> <v-icon small class="ml-1">
mdi-drama-masks mdi-drama-masks
</v-icon> </v-icon>
@ -718,8 +743,9 @@ export default {
dlgLabelSubmitCancel, dlgLabelSubmitCancel,
}, },
data: () => ({ data: () => ({
drag:false, treeViewStatus: {},
dragOptions:{ drag: false,
dragOptions: {
animation: 200, animation: 200,
group: "description", group: "description",
disabled: false, disabled: false,
@ -970,6 +996,21 @@ export default {
item._nodes.type = 'disableOrEnableModel'; item._nodes.type = 'disableOrEnableModel';
this.$store.dispatch('tabs/ActAddTab', item); this.$store.dispatch('tabs/ActAddTab', item);
} }
}, openAuditTab() {
const tabIndex = this.tabs.findIndex(el => el.key === `migrationsDir`);
if (tabIndex !== -1) {
this.changeActiveTab(tabIndex);
} else {
console.log('add audit tab');
let item = {name: 'Audit', key: `migrationsDir`};
item._nodes = {
env: '_noco',
dbAlias: 'db'
};
item._nodes.type = 'migrationsDir';
item._nodes.dbKey = '';
this.$store.dispatch('tabs/ActAddTab', item);
}
}, },
toggleMini() { toggleMini() {
this.$store.commit('panelSize/MutSize', { this.$store.commit('panelSize/MutSize', {
@ -1097,7 +1138,7 @@ export default {
} }
}, },
isActiveList(item) { isActiveList(item) {
return item.type === this.$route.query.type || item.type === `${this.$route.query.type}Dir`; return true//this.treeViewStatus[item.type] = this.treeViewStatus[item.type] || item.type === this.$route.query.type || item.type === `${this.$route.query.type}Dir`;
}, },
showNode(item) { showNode(item) {
return ( return (
@ -1223,7 +1264,7 @@ export default {
} else if (action === "ENV_DB_TABLES_REFRESH") { } else if (action === "ENV_DB_TABLES_REFRESH") {
await this.loadTables(this.menuItem); await this.loadTables(this.menuItem);
this.$toast.success('Tables refreshed').goAway(1000); this.$toast.success('Tables refreshed').goAway(1000);
}else if (action === 'ENV_DB_VIEWS_REFRESH') { } else if (action === 'ENV_DB_VIEWS_REFRESH') {
await this.loadViews(this.menuItem); await this.loadViews(this.menuItem);
this.$toast.success('Views refreshed').goAway(1000); this.$toast.success('Views refreshed').goAway(1000);
} else if (action === 'IMPORT_EXCEL') { } else if (action === 'IMPORT_EXCEL') {
@ -1861,18 +1902,39 @@ export default {
} }
.flip-list-move {
.flip-list-move {
transition: transform 0.5s; transition: transform 0.5s;
} }
.no-move {
.no-move {
transition: transform 0s; transition: transform 0s;
} }
.ghost {
.ghost {
opacity: 0.5; opacity: 0.5;
background: grey; background: grey;
} }
.nc-project-title {
height: 30px;
width: 100%;
display: flex;
justify-content: center;
}
.nc-project-title > div {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: white;
font-weight: bold;
padding:0 10px 10px 10px;
text-transform: capitalize;
line-height: 20px;
min-width: calc(100% - 30px);
}
</style> </style>
<!-- <!--

2
packages/nc-gui/components/authTab.vue
Unescape View File

@ -9,7 +9,7 @@
</span> </span>
</v-tab> </v-tab>
<v-tab-item class="h-100"> <v-tab-item class="h-100">
<user-management :nodes="nodes" /> <user-management class="backgroundColor" :nodes="nodes" />
</v-tab-item> </v-tab-item>
<template v-if="_isUIAllowed('apiTokenTab')"> <template v-if="_isUIAllowed('apiTokenTab')">

49
packages/nc-gui/components/global/xBtn.vue
Unescape View File

@ -1,31 +1,47 @@
<template> <template>
<v-tooltip v-if="tooltip || $slots['tooltip']" v-bind="tooltipProp"> <v-tooltip v-if="tooltip || $slots['tooltip']" v-bind="tooltipProp">
<template #activator="{ on }"> <template #activator="{ on }">
<v-btn :class="[btnClass,$attrs['btn.class']]" v-bind="$attrs" v-on="{...$listeners,...on}"> <v-hover v-slot="{ hover }">
<template v-if="icon"> <v-btn
<v-icon small> :style="{backgroundColor : hover ? colors[0] : colors[1]}"
{{ icon }} :class="[btnClass,$attrs['btn.class']]"
</v-icon>&nbsp; v-bind="$attrs"
</template> v-on="{...$listeners,...on}"
<slot /> >
</v-btn> <template v-if="icon">
<v-icon small>
{{ icon }}
</v-icon>&nbsp;
</template>
<slot />
</v-btn>
</v-hover>
</template> </template>
<slot name="tooltip"> <slot name="tooltip">
<span>{{ tooltip }}</span> <span>{{ tooltip }}</span>
</slot> </slot>
</v-tooltip> </v-tooltip>
<v-btn v-else ref="btn" v-bind="$attrs" :class="[btnClass,$attrs['btn.class']]" v-on="$listeners"> <v-hover v-else v-slot="{ hover }">
<v-icon v-if="icon"> <v-btn
{{ icon }} ref="btn"
</v-icon> v-bind="$attrs"
<slot /> :class="[btnClass,$attrs['btn.class']]"
</v-btn> :style="{backgroundColor : hover ? colors[0] : colors[1]}"
v-on="$listeners"
>
<v-icon v-if="icon">
{{ icon }}
</v-icon>
<slot />
</v-btn>
</v-hover>
</template> </template>
<script> <script>
export default { export default {
name: 'XBtn', name: 'XBtn',
props: { props: {
color: String,
tooltipProp: { tooltipProp: {
type: Object, type: Object,
default: () => ({ default: () => ({
@ -36,6 +52,11 @@ export default {
tooltip: String, tooltip: String,
icon: String icon: String
}, },
computed: {
colors() {
return this.color ? (Array.isArray(this.color) ? this.color : this.color.split(' ')) : []
}
},
methods: { methods: {
} }
} }

2
packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue
Unescape View File

@ -8,7 +8,7 @@
overlap overlap
> >
<v-btn <v-btn
class="nc-filter-menu-btn px-2" class="nc-filter-menu-btn px-2 nc-remove-border"
:disabled="isLocked" :disabled="isLocked"
outlined outlined
small small

2
packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue
Unescape View File

@ -8,7 +8,7 @@
overlap overlap
> >
<v-btn <v-btn
class="nc-fields-menu-btn px-2" class="nc-fields-menu-btn px-2 nc-remove-border"
:disabled="isLocked" :disabled="isLocked"
outlined outlined
small small

31
packages/nc-gui/components/project/spreadsheet/components/exportImport.vue → packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
Unescape View File

@ -8,7 +8,7 @@
<template #activator="{on}"> <template #activator="{on}">
<v-btn <v-btn
outlined outlined
class="nc-actions-menu-btn caption px-2" class="nc-actions-menu-btn caption px-2 nc-remove-border font-weight-medium"
small small
text text
v-on="on" v-on="on"
@ -16,7 +16,7 @@
<v-icon small color="#777"> <v-icon small color="#777">
mdi-flash-outline mdi-flash-outline
</v-icon> </v-icon>
Actions More
<v-icon small color="#777"> <v-icon small color="#777">
mdi-menu-down mdi-menu-down
@ -56,6 +56,33 @@
</x-icon> version)</span> </x-icon> version)</span>
</v-list-item-title> </v-list-item-title>
</v-list-item> </v-list-item>
<v-list-item
v-if="_isUIAllowed('csvImport') && !isView"
dense
@click="$emit('showAdditionalFeatOverlay', 'shared-views')"
>
<v-list-item-title>
<v-icon small class="mr-1" color="">
mdi-view-list-outline
</v-icon>
<span class="caption ">
Shared View List
</span>
</v-list-item-title>
</v-list-item> <v-list-item
v-if="_isUIAllowed('csvImport') && !isView"
dense
@click="$emit('webhook')"
>
<v-list-item-title>
<v-icon small class="mr-1" color="">
mdi-hook
</v-icon>
<span class="caption ">
Webhooks
</span>
</v-list-item-title>
</v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
<drop-or-select-file-modal v-model="importModal" accept=".csv" text="CSV" @file="onCsvFileSelection" /> <drop-or-select-file-modal v-model="importModal" accept=".csv" text="CSV" @file="onCsvFileSelection" />

61
packages/nc-gui/components/project/spreadsheet/components/shareViewMenu.vue
Unescape View File

@ -0,0 +1,61 @@
<template>
<div>
<!-- <v-menu
open-on-hover
bottom
offset-y
>
<template #activator="{on}">-->
<v-btn
outlined
class="nc-actions-menu-btn caption px-2 nc-remove-border font-weight-medium"
small
text
@click="$emit('share')"
>
<v-icon size="13" class="mr-1" color="#777">
mdi-open-in-new
</v-icon>
Share View
</v-btn>
<!-- </template>
<v-list dense>
<v-list-item
dense
>
<v-list-item-title>
<v-icon small class="mr-1">
mdi-open-in-new
</v-icon>
<span class="caption">
Share View
</span>
</v-list-item-title>
</v-list-item>
<v-list dense>
<v-list-item
dense
>
<v-list-item-title>
<v-icon small class="mr-1">
mdi-download-outline
</v-icon>
<span class="caption">
Shared Views List
</span>
</v-list-item-title>
</v-list-item>
</v-list>
</v-list>
</v-menu>-->
</div>
</template>
<script>
export default {
name: 'ShareViewMenu'
}
</script>
<style scoped />

2
packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
Unescape View File

@ -8,7 +8,7 @@
overlap overlap
> >
<v-btn <v-btn
class="nc-sort-menu-btn px-2" class="nc-sort-menu-btn px-2 nc-remove-border"
:disabled="isLocked" :disabled="isLocked"
small small
text text

66
packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
Unescape View File

@ -13,7 +13,7 @@
<v-list v-if="viewsList && viewsList.length" dense> <v-list v-if="viewsList && viewsList.length" dense>
<v-list-item dense> <v-list-item dense>
<!-- Views --> <!-- Views -->
<span class="body-2 grey--text">{{ $t('nav_drawer.title') }}</span> <span class="body-2 font-weight-medium">{{ $t('nav_drawer.title') }}</span>
</v-list-item> </v-list-item>
<v-list-item-group v-model="selectedViewIdLocal" mandatory color="primary"> <v-list-item-group v-model="selectedViewIdLocal" mandatory color="primary">
<draggable <draggable
@ -138,13 +138,13 @@
> >
<v-list-item dense> <v-list-item dense>
<!-- Create a View --> <!-- Create a View -->
<span class="body-2 grey--text" @dblclick="enableDummyFeat = true"> <span class="body-2 font-weight-medium" @dblclick="enableDummyFeat = true">
{{ $t('nav_drawer.virtual_views.title') }} {{ $t('nav_drawer.virtual_views.title') }}
</span> </span>
<v-tooltip top> <v-tooltip top>
<template #activator="{ on }"> <template #activator="{ on }">
<x-icon <x-icon
color="pink grey" color="pink textColor"
icon-class="ml-2" icon-class="ml-2"
small small
v-on="on" v-on="on"
@ -332,7 +332,7 @@
</v-hover> </v-hover>
</div> </div>
--> -->
<div v-if="_isUIAllowed('table-advanced')"> <!-- <div v-if="_isUIAllowed('table-advanced')">
<v-divider /> <v-divider />
<v-list <v-list
dense dense
@ -342,13 +342,13 @@
> >
<v-list-item dense> <v-list-item dense>
<span <span
class="body-2 grey--text" class="body-2 font-weight-medium"
@dblclick="$emit('update:showAdvanceOptions', !showAdvanceOptions)" @dblclick="$emit('update:showAdvanceOptions', !showAdvanceOptions)"
>Advanced</span> >Advanced</span>
<v-tooltip top> <v-tooltip top>
<template #activator="{ on }"> <template #activator="{ on }">
<x-icon <x-icon
color="pink grey" color="pink textColor"
icon-class="ml-2" icon-class="ml-2"
small small
v-on="on" v-on="on"
@ -359,21 +359,21 @@
</x-icon> </x-icon>
</template> </template>
<span class="caption"> <span class="caption">
<!-- Only visible to Creator --> &lt;!&ndash; Only visible to Creator &ndash;&gt;
{{ $t('nav_drawer.virtual_views.caption') }} {{ $t('nav_drawer.virtual_views.caption') }}
</span> </span>
</v-tooltip> </v-tooltip>
</v-list-item> </v-list-item>
<!-- <v-tooltip bottom>--> &lt;!&ndash; <v-tooltip bottom>&ndash;&gt;
<!-- <template v-slot:activator="{on}">--> &lt;!&ndash; <template v-slot:activator="{on}">&ndash;&gt;
<!-- <v-menu offset-x left>--> &lt;!&ndash; <v-menu offset-x left>&ndash;&gt;
<!-- <template v-slot:activator="{on}">--> &lt;!&ndash; <template v-slot:activator="{on}">&ndash;&gt;
<!-- &lt;!&ndash;
TODO: TODO:
- Add selectedView.show_as === 'kanban' when it is ready - Add selectedView.show_as === 'kanban' when it is ready
--> &ndash;&gt;
<v-list-item &lt;!&ndash; <v-list-item
v-show=" v-show="
selectedView && (selectedView.type === 'view' || selectedView.type === 'table' || selectedView.show_as === 'form' || selectedView.show_as === 'grid' ) selectedView && (selectedView.type === 'view' || selectedView.type === 'table' || selectedView.show_as === 'form' || selectedView.show_as === 'grid' )
" "
@ -384,7 +384,7 @@
mdi-open-in-new mdi-open-in-new
</v-icon> </v-icon>
<span class="caption"> <span class="caption">
<!-- Share View --> &lt;!&ndash; Share View &ndash;&gt;
{{ $t('nav_drawer.advanced.title1') }} {{ $t('nav_drawer.advanced.title1') }}
</span> </span>
<v-spacer /> <v-spacer />
@ -398,34 +398,34 @@
<v-list-item dense @click="$emit('showAdditionalFeatOverlay', 'shared-views')"> <v-list-item dense @click="$emit('showAdditionalFeatOverlay', 'shared-views')">
<v-list-item-title> <v-list-item-title>
<span class="font-weight-regular"> <span class="font-weight-regular">
<!-- Views List --> &lt;!&ndash; Views List &ndash;&gt;
{{ $t('nav_drawer.advanced.views_list') }} {{ $t('nav_drawer.advanced.views_list') }}
</span> </span>
</v-list-item-title> </v-list-item-title>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
</v-list-item> </v-list-item>&ndash;&gt;
<!-- <v-tooltip bottom>--> &lt;!&ndash; <v-tooltip bottom>&ndash;&gt;
<!-- <template #activator="{ on }">--> &lt;!&ndash; <template #activator="{ on }">&ndash;&gt;
<!-- <v-list-item v-on="on" @click="copyapiUrlToClipboard">--> &lt;!&ndash; <v-list-item v-on="on" @click="copyapiUrlToClipboard">&ndash;&gt;
<!-- <v-icon x-small class="mr-2">--> &lt;!&ndash; <v-icon x-small class="mr-2">&ndash;&gt;
<!-- mdi-content-copy--> &lt;!&ndash; mdi-content-copy&ndash;&gt;
<!-- </v-icon>--> &lt;!&ndash; </v-icon>&ndash;&gt;
<!-- &lt;!&ndash; Copy API URL &ndash;&gt;--> &lt;!&ndash; &lt;!&ndash; Copy API URL &ndash;&gt;&ndash;&gt;
<!-- <span class="caption">{{ $t('nav_drawer.advanced.views_list') }}</span>--> &lt;!&ndash; <span class="caption">{{ $t('nav_drawer.advanced.views_list') }}</span>&ndash;&gt;
<!-- </v-list-item>--> &lt;!&ndash; </v-list-item>&ndash;&gt;
<!-- </template>--> &lt;!&ndash; </template>&ndash;&gt;
<!-- &lt;!&ndash; Copy API URL &ndash;&gt;--> &lt;!&ndash; &lt;!&ndash; Copy API URL &ndash;&gt;&ndash;&gt;
<!-- {{ $t('nav_drawer.advanced.views_list') }}--> &lt;!&ndash; {{ $t('nav_drawer.advanced.views_list') }}&ndash;&gt;
<!-- </v-tooltip>--> &lt;!&ndash; </v-tooltip>&ndash;&gt;
<template v-if="_isUIAllowed('model')"> <template v-if="_isUIAllowed('model')">
<v-divider class="advance-menu-divider" /> &lt;!&ndash; <v-divider class="advance-menu-divider" />&ndash;&gt;
<slot /> <slot />
</template> </template>
</v-list> </v-list>
</div> </div>-->
</div> </div>
</v-container> </v-container>

14
packages/nc-gui/components/project/spreadsheet/public/xcKanban.vue
Unescape View File

@ -32,15 +32,15 @@
:class="`cell-height-${cellHeight}`" :class="`cell-height-${cellHeight}`"
style="overflow:auto;transition: width 500ms " style="overflow:auto;transition: width 500ms "
> >
<v-container fluid v-if="loadingData"> <v-container v-if="loadingData" fluid>
<v-row> <v-row>
<v-col v-for="idx in 5" :key="idx"> <v-col v-for="idx in 5" :key="idx">
<v-skeleton-loader type="image@3"></v-skeleton-loader> <v-skeleton-loader type="image@3" />
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
<kanban-view <kanban-view
v-if="!loadingData && kanban.data.length" v-if="!loadingData && kanban.data.length"
:nodes="nodes" :nodes="nodes"
:table="table" :table="table"
:show-fields="showFields" :show-fields="showFields"
@ -64,7 +64,7 @@ import spreadsheet from '../mixins/spreadsheet'
import FieldsMenu from '../components/fieldsMenu' import FieldsMenu from '../components/fieldsMenu'
import SortListMenu from '../components/sortListMenu' import SortListMenu from '../components/sortListMenu'
import ColumnFilterMenu from '../components/columnFilterMenu' import ColumnFilterMenu from '../components/columnFilterMenu'
import CsvExportImport from '~/components/project/spreadsheet/components/exportImport' import CsvExportImport from '~/components/project/spreadsheet/components/moreActions'
import KanbanView from '@/components/project/spreadsheet/views/kanbanView' import KanbanView from '@/components/project/spreadsheet/views/kanbanView'
export default { export default {
name: 'XcKanban', name: 'XcKanban',
@ -153,11 +153,11 @@ export default {
recordCnt: {}, recordCnt: {},
recordTotalCnt: {}, recordTotalCnt: {},
groupingColumnItems: [], groupingColumnItems: [],
loadingData : true, loadingData: true,
selectedExpandRow: null, selectedExpandRow: null,
selectedExpandOldRow: null, selectedExpandOldRow: null,
selectedExpandRowMeta: null, selectedExpandRowMeta: null
}, }
}), }),
computed: { computed: {

2
packages/nc-gui/components/project/spreadsheet/public/xcTable.vue
Unescape View File

@ -199,7 +199,7 @@ import SortListMenu from '../components/sortListMenu'
import ColumnFilterMenu from '../components/columnFilterMenu' import ColumnFilterMenu from '../components/columnFilterMenu'
import XcGridView from '../views/xcGridView' import XcGridView from '../views/xcGridView'
import { SqlUI } from '@/helpers/sqlUi' import { SqlUI } from '@/helpers/sqlUi'
import CsvExportImport from '~/components/project/spreadsheet/components/exportImport' import CsvExportImport from '~/components/project/spreadsheet/components/moreActions'
// import ExpandedForm from "../expandedForm"; // import ExpandedForm from "../expandedForm";
export default { export default {

135
packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<v-container class="h-100 j-excel-container pa-0 ma-0" fluid> <v-container class="h-100 j-excel-container backgroundColor pa-0 ma-0" fluid>
<v-toolbar <v-toolbar
height="32" height="32"
dense dense
@ -11,7 +11,7 @@
<template #activator="{on}"> <template #activator="{on}">
<div style="min-width: 56px" v-on="on"> <div style="min-width: 56px" v-on="on">
<v-icon <v-icon
class="pa-1 pr-0 ml-2" class="ml-2"
small small
color="grey" color="grey"
> >
@ -45,7 +45,7 @@
<v-text-field <v-text-field
v-model="searchQueryVal" v-model="searchQueryVal"
autocomplete="new-password" autocomplete="new-password"
style="min-width: 100px ; width: 300px" style="min-width: 100px ; width: 150px"
flat flat
dense dense
solo solo
@ -63,7 +63,54 @@
>{{ refTable }}({{ >{{ refTable }}({{
relationPrimaryValue relationPrimaryValue
}}) -> {{ relationType === 'hm' ? ' Has Many ' : ' Belongs To ' }} -> {{ table }}</span> }}) -> {{ relationType === 'hm' ? ' Has Many ' : ' Belongs To ' }} -> {{ table }}</span>
<div class="d-inline-flex">
<fields
v-if="!isForm"
v-model="showFields"
:field-list="fieldList"
:meta="meta"
:is-locked="isLocked"
:fields-order.sync="fieldsOrder"
:sql-ui="sqlUi"
:show-system-fields.sync="showSystemFields"
:cover-image-field.sync="coverImageField"
:grouping-field.sync="groupingField"
:is-gallery="isGallery"
:is-kanban="isKanban"
/>
<sort-list
v-if="!isForm"
v-model="sortList"
:is-locked="isLocked"
:field-list="[...realFieldList, ...formulaFieldList]"
/>
<column-filter
v-if="!isForm"
v-model="filters"
:is-locked="isLocked"
:field-list="[...realFieldList, ...formulaFieldList]"
dense
/>
<share-view-menu @share="$refs.drawer && $refs.drawer.genShareLink()" />
<MoreActions
v-if="!isForm"
ref="csvExportImport"
:meta="meta"
:nodes="nodes"
:query-params="{
fieldsOrder,
fieldFilter,
sortList,
showFields
}"
:selected-view="selectedView"
@showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)"
@webhook="showAdditionalFeatOverlay('webhooks')"
/>
</div>
<v-spacer class="h-100" @dblclick="debug=true" /> <v-spacer class="h-100" @dblclick="debug=true" />
<template v-if="!isForm"> <template v-if="!isForm">
@ -185,44 +232,6 @@
<!-- <span class="">Delete table</span>--> <!-- <span class="">Delete table</span>-->
<!-- </v-tooltip>--> <!-- </v-tooltip>-->
</template> </template>
<fields
v-model="showFields"
:field-list="fieldList"
:meta="meta"
:is-locked="isLocked"
:fields-order.sync="fieldsOrder"
:sql-ui="sqlUi"
:show-system-fields.sync="showSystemFields"
:cover-image-field.sync="coverImageField"
:grouping-field.sync="groupingField"
:is-gallery="isGallery"
:is-kanban="isKanban"
/>
<sort-list
v-model="sortList"
:is-locked="isLocked"
:field-list="[...realFieldList, ...formulaFieldList]"
/>
<column-filter
v-model="filters"
:is-locked="isLocked"
:field-list="[...realFieldList, ...formulaFieldList]"
dense
/>
<csv-export-import
ref="csvExportImport"
:meta="meta"
:nodes="nodes"
:query-params="{
fieldsOrder,
fieldFilter,
sortList,
showFields
}"
:selected-view="selectedView"
/>
<!-- Cell height --> <!-- Cell height -->
<!-- <v-menu> <!-- <v-menu>
@ -329,15 +338,15 @@
/> />
</template> </template>
<template v-else-if="isKanban"> <template v-else-if="isKanban">
<v-container fluid v-if="kanban.loadingData"> <v-container v-if="kanban.loadingData" fluid>
<v-row> <v-row>
<v-col v-for="idx in 5" :key="idx"> <v-col v-for="idx in 5" :key="idx">
<v-skeleton-loader type="image@3"></v-skeleton-loader> <v-skeleton-loader type="image@3" />
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
<kanban-view <kanban-view
v-if="!kanban.loadingData && kanban.data.length" v-if="!kanban.loadingData && kanban.data.length"
:nodes="nodes" :nodes="nodes"
:table="table" :table="table"
:show-fields="showFields" :show-fields="showFields"
@ -428,7 +437,7 @@
@loadTableData="loadTableData" @loadTableData="loadTableData"
@showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)" @showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)"
> >
<v-tooltip bottom> <!-- <v-tooltip bottom>
<template #activator="{on}"> <template #activator="{on}">
<v-list-item <v-list-item
v-on="on" v-on="on"
@ -441,7 +450,7 @@
</v-list-item> </v-list-item>
</template> </template>
Create Automations or API Webhooks Create Automations or API Webhooks
</v-tooltip> </v-tooltip>-->
<!-- <v-tooltip bottom> <!-- <v-tooltip bottom>
<template #activator="{on}"> <template #activator="{on}">
<v-list-item <v-list-item
@ -648,12 +657,14 @@ import ExpandedForm from '@/components/project/spreadsheet/components/expandedFo
import Pagination from '@/components/project/spreadsheet/components/pagination' import Pagination from '@/components/project/spreadsheet/components/pagination'
import { SqlUI } from '~/helpers/sqlUi' import { SqlUI } from '~/helpers/sqlUi'
import ColumnFilter from '~/components/project/spreadsheet/components/columnFilterMenu' import ColumnFilter from '~/components/project/spreadsheet/components/columnFilterMenu'
import CsvExportImport from '~/components/project/spreadsheet/components/exportImport' import MoreActions from '~/components/project/spreadsheet/components/moreActions'
import ShareViewMenu from '~/components/project/spreadsheet/components/shareViewMenu'
export default { export default {
name: 'RowsXcDataTable', name: 'RowsXcDataTable',
components: { components: {
CsvExportImport, ShareViewMenu,
MoreActions,
FormView, FormView,
DebugMetas, DebugMetas,
Pagination, Pagination,
@ -772,11 +783,11 @@ export default {
recordCnt: {}, recordCnt: {},
recordTotalCnt: {}, recordTotalCnt: {},
groupingColumnItems: [], groupingColumnItems: [],
loadingData : true, loadingData: true,
selectedExpandRow: null, selectedExpandRow: null,
selectedExpandOldRow: null, selectedExpandOldRow: null,
selectedExpandRowMeta: null, selectedExpandRowMeta: null
}, }
}), }),
watch: { watch: {
isActive(n, o) { isActive(n, o) {
@ -1168,7 +1179,7 @@ export default {
}, },
oldRow: {} oldRow: {}
}) })
if (data[focusRow].row[this.groupingField] === "Uncategorized") { if (data[focusRow].row[this.groupingField] === 'Uncategorized') {
data[focusRow].row[this.groupingField] = null data[focusRow].row[this.groupingField] = null
} }
this.selected = { row: focusRow, col: focusCol } this.selected = { row: focusRow, col: focusCol }
@ -1324,7 +1335,7 @@ export default {
if (initKanbanProps) { if (initKanbanProps) {
this.kanban = kanban this.kanban = kanban
} }
if (this.api) { if (this.api) {
const groupingColumn = this.meta.columns.find(c => c._cn === this.groupingField) const groupingColumn = this.meta.columns.find(c => c._cn === this.groupingField)
@ -1394,7 +1405,7 @@ export default {
} }
}, },
async loadMoreKanbanData(groupingFieldVal) { async loadMoreKanbanData(groupingFieldVal) {
const uncategorized = "uncategorized" const uncategorized = 'uncategorized'
const { const {
data data
} = await this.api.get(`/nc/${this.$store.state.project.projectId}/api/v1/${this.$route.query.name}`, { } = await this.api.get(`/nc/${this.$store.state.project.projectId}/api/v1/${this.$route.query.name}`, {
@ -1402,17 +1413,17 @@ export default {
where: groupingFieldVal === uncategorized ? `(${this.groupingField},is,null)` : `(${this.groupingField},eq,${groupingFieldVal})`, where: groupingFieldVal === uncategorized ? `(${this.groupingField},is,null)` : `(${this.groupingField},eq,${groupingFieldVal})`,
offset: this.kanban.recordCnt[groupingFieldVal] offset: this.kanban.recordCnt[groupingFieldVal]
}) })
data.map(d => { data.map((d) => {
// handle composite primary key // handle composite primary key
d.c_pk = this.meta.columns.filter(c => c.pk).map(c => d[c._cn]).join('___') d.c_pk = this.meta.columns.filter(c => c.pk).map(c => d[c._cn]).join('___')
if (!d.id) { if (!d.id) {
// id is required for <kanban-board/> // id is required for <kanban-board/>
d.id = d.c_pk d.id = d.c_pk
} }
this.kanban.data.push({ this.kanban.data.push({
row: d, row: d,
oldRow: d, oldRow: d,
rowMeta: {}, rowMeta: {}
}) })
this.kanban.blocks.push({ this.kanban.blocks.push({
status: groupingFieldVal, status: groupingFieldVal,
@ -1425,12 +1436,12 @@ export default {
if (rowIdx != -1) { if (rowIdx != -1) {
// not a new record -> find the target record // not a new record -> find the target record
data = this.kanban.data.filter(o => o.row.c_pk == rowIdx)[0] data = this.kanban.data.filter(o => o.row.c_pk == rowIdx)[0]
} }
this.showExpandModal = true this.showExpandModal = true
this.kanban.selectedExpandRow = data.row this.kanban.selectedExpandRow = data.row
this.kanban.selectedExpandOldRow = data.oldRow this.kanban.selectedExpandOldRow = data.oldRow
this.kanban.selectedExpandRowMeta = data.rowMeta this.kanban.selectedExpandRowMeta = data.rowMeta
}, }
}, },
computed: { computed: {
tabsState() { tabsState() {
@ -1473,7 +1484,7 @@ export default {
table: this.meta.tn table: this.meta.tn
}) })
// return this.meta && this.meta._tn ? ApiFactory.create(this.$store.getters['project/GtrProjectType'], this.meta && this.meta._tn, this.meta && this.meta.columns, this, this.meta) : null // return this.meta && this.meta._tn ? ApiFactory.create(this.$store.getters['project/GtrProjectType'], this.meta && this.meta._tn, this.meta && this.meta.columns, this, this.meta) : null
}, }
} }
} }
</script> </script>

2
packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
Unescape View File

@ -9,7 +9,7 @@
> >
<table <table
v-if="data" v-if="data"
class="xc-row-table nc-grid" class="xc-row-table nc-grid backgroundColorDefault"
style=" " style=" "
> >
<thead> <thead>

2
packages/nc-gui/components/project/viewTabs/viewSpreadsheet.vue
Unescape View File

@ -125,7 +125,7 @@
<div <div
:class="`cell-height-${cellHeight}`" :class="`cell-height-${cellHeight}`"
style="overflow:auto;transition: width 500ms ;height : calc(100% - 36px)" style="overflow:auto;transition: width 500ms ;height : calc(100% - 36px)"
class="d-flex" class="d-flex backgroundColor"
> >
<div class="flex-grow-1 h-100" style="overflow-y: auto"> <div class="flex-grow-1 h-100" style="overflow-y: auto">
<div ref="table" style=" overflow: auto;width:100%; height: calc(100% - 36px);"> <div ref="table" style=" overflow: auto;width:100%; height: calc(100% - 36px);">

66
packages/nc-gui/components/projectTabs.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<v-container fluid class="project-container ma-0 pa-0" style="position: relative"> <v-container fluid class="project-container ma-0 pa-0 " style="position: relative">
<v-tabs <v-tabs
ref="projectTabs" ref="projectTabs"
v-model="activeTab" v-model="activeTab"
@ -90,7 +90,11 @@
</sqlLogAndOutput> </sqlLogAndOutput>
</div> </div>
<div v-else-if="tab._nodes.type === 'db'" style="height:100%"> <div v-else-if="tab._nodes.type === 'db'" style="height:100%">
<audit-tab :ref="'tabs'+index" :nodes="tab._nodes" /> <audit-tab
:ref="'tabs'+index"
class="backgroundColor"
:nodes="tab._nodes"
/>
<!-- <sqlLogAndOutput>--> <!-- <sqlLogAndOutput>-->
<!-- <DbTab :nodes="tab._nodes" :ref="'tabs'+index"/>--> <!-- <DbTab :nodes="tab._nodes" :ref="'tabs'+index"/>-->
<!-- </sqlLogAndOutput>--> <!-- </sqlLogAndOutput>-->
@ -104,14 +108,22 @@
</sqlLogAndOutput> </sqlLogAndOutput>
</div> </div>
<div v-else-if="tab._nodes.type === 'migrationsDir'" style="height:100%"> <div v-else-if="tab._nodes.type === 'migrationsDir'" style="height:100%">
<audit-tab :ref="'tabs'+index" :nodes="tab._nodes" /> <audit-tab
:ref="'tabs'+index"
class="backgroundColor"
:nodes="tab._nodes"
/>
<!-- <sqlLogAndOutput>--> <!-- <sqlLogAndOutput>-->
<!-- <DbTab :nodes="tab._nodes" :ref="'tabs'+index"/>--> <!-- <DbTab :nodes="tab._nodes" :ref="'tabs'+index"/>-->
<!-- </sqlLogAndOutput>--> <!-- </sqlLogAndOutput>-->
</div> </div>
<div v-else-if="tab._nodes.type === 'apisDir'" style="height:100%"> <div v-else-if="tab._nodes.type === 'apisDir'" style="height:100%">
<ApisTab :ref="'tabs'+index" :nodes="tab._nodes" /> <ApisTab
:ref="'tabs'+index"
class="backgroundColor"
:nodes="tab._nodes"
/>
</div> </div>
<div <div
v-else-if="tab._nodes.type === 'apiClientDir'" v-else-if="tab._nodes.type === 'apiClientDir'"
@ -143,7 +155,10 @@
v-else-if="tab._nodes.type === 'graphqlClientDir'" v-else-if="tab._nodes.type === 'graphqlClientDir'"
style="height:100%" style="height:100%"
> >
<graphql-client style="height: 100%" /> <graphql-client
class="backgroundColor"
style="height: 100%"
/>
</div> </div>
<div <div
v-else-if="tab._nodes.type === 'swaggerClientDir'" v-else-if="tab._nodes.type === 'swaggerClientDir'"
@ -161,19 +176,31 @@
v-else-if="tab._nodes.type === 'meta'" v-else-if="tab._nodes.type === 'meta'"
style="height:100%" style="height:100%"
> >
<xc-meta style="height: 100%" /> <xc-meta
class="backgroundColor"
style="height: 100%"
/>
</div> </div>
<div <div
v-else-if="tab._nodes.type === 'roles'" v-else-if="tab._nodes.type === 'roles'"
style="height:100%" style="height:100%"
> >
<auth-tab v-if="_isUIAllowed('team-auth')" :nodes="tab._nodes" style="height: 100%" /> <auth-tab
v-if="_isUIAllowed('team-auth')"
class="backgroundColor"
:nodes="tab._nodes"
style="height: 100%"
/>
</div> </div>
<div <div
v-else-if="tab._nodes.type === 'acl'" v-else-if="tab._nodes.type === 'acl'"
style="height:100%" style="height:100%"
> >
<global-acl :nodes="tab._nodes" style="height: 100%" /> <global-acl
class="backgroundColor"
:nodes="tab._nodes"
style="height: 100%"
/>
</div> </div>
<div <div
v-else-if="tab._nodes.type === 'projectSettings'" v-else-if="tab._nodes.type === 'projectSettings'"
@ -181,6 +208,7 @@
> >
<project-settings <project-settings
v-if="_isUIAllowed('settings')" v-if="_isUIAllowed('settings')"
class="backgroundColor"
:nodes="tab._nodes" :nodes="tab._nodes"
style="height: 100%" style="height: 100%"
/> />
@ -191,6 +219,7 @@
> >
<disable-or-enable-models <disable-or-enable-models
v-if="_isUIAllowed('project-metadata')" v-if="_isUIAllowed('project-metadata')"
class="backgroundColor"
:nodes="tab._nodes" :nodes="tab._nodes"
style="height: 100%" style="height: 100%"
/> />
@ -211,7 +240,10 @@
v-else-if="tab._nodes.type === 'appStore'" v-else-if="tab._nodes.type === 'appStore'"
style="height:100%" style="height:100%"
> >
<app-store :nodes="tab._nodes" class="h-100" /> <app-store
:nodes="tab._nodes"
class="backgroundColor h-100"
/>
</div> </div>
<div v-else style="height:100%"> <div v-else style="height:100%">
<h1>{{ tab.name }}</h1> <h1>{{ tab.name }}</h1>
@ -231,20 +263,20 @@
mdi-plus-box mdi-plus-box
</x-icon> </x-icon>
<v-spacer /> <v-spacer />
<div <!-- <div
class="powered-by align-self-center grey--text text--lighten-3 d-flex align-center" class="powered-by align-self-center grey&#45;&#45;text text&#45;&#45;lighten-3 d-flex align-center"
style="margin-right: 34px;font-size: .65rem ;" style="margin-right: 34px;font-size: .65rem ;"
> >
<span>Powered by <a <span>Powered by <a
href="https://nocodb.com" href="https://nocodb.com"
target="_blank" target="_blank"
class=" white--text" class=" white&#45;&#45;text"
style="text-decoration: none" style="text-decoration: none"
>NocoDB</a></span> >NocoDB</a></span>
<v-icon x-small class="ml-1 powered-by-close" color="grey lighten-1" @click="upgradeToEE"> <v-icon x-small class="ml-1 powered-by-close" color="grey lighten-1" @click="upgradeToEE">
mdi-close-circle mdi-close-circle
</v-icon> </v-icon>
</div> </div>-->
</v-tabs> </v-tabs>
<dlg-table-create <dlg-table-create
@ -509,7 +541,7 @@ export default {
} }
/deep/ .project-tabs > .v-tabs-bar { /deep/ .project-tabs > .v-tabs-bar {
max-height: 35px; max-height: 30px;
} }
/*/deep/ .project-tabs .v-tabs-slider-wrapper {*/ /*/deep/ .project-tabs .v-tabs-slider-wrapper {*/
@ -518,9 +550,9 @@ export default {
/deep/ .project-tabs .v-tab.project-tab { /deep/ .project-tabs .v-tab.project-tab {
text-transform: capitalize; text-transform: capitalize;
border-top-left-radius: 6px; border-top-left-radius: 3px;
border-top-right-radius: 6px; border-top-right-radius: 3px;
background: #ffffff22; background: #0002;
margin: 0px 1px 0 1px; margin: 0px 1px 0 1px;
color: white !important; color: white !important;
} }

4
packages/nc-gui/config/vuetify.options.js
Unescape View File

@ -15,6 +15,7 @@ export default function({ app }) {
dark: { dark: {
primary: '#0989ff', primary: '#0989ff',
// primary: '#0989ff',
'x-active': '#e91e63', 'x-active': '#e91e63',
textColor: '#ffffff', textColor: '#ffffff',
text: '#ffffff', text: '#ffffff',
@ -23,7 +24,8 @@ export default function({ app }) {
backgroundColorDefault: '#1f1f1f' backgroundColorDefault: '#1f1f1f'
}, },
light: { light: {
primary: '#0989ff', primary: '#1348ba',
// primary: '#0989ff',
'x-active': '#e91e63', 'x-active': '#e91e63',
textColor: '#333333', textColor: '#333333',
text: '#333333', text: '#333333',

2
packages/nc-gui/helpers/treeViewDataSerializer.js
Unescape View File

@ -105,7 +105,7 @@ function dbparser(data, envKey, env) {
// json.children.push(procedureParser(db.procedures, dbKey, env, db.meta.dbAlias, db)); // json.children.push(procedureParser(db.procedures, dbKey, env, db.meta.dbAlias, db));
// } // }
json.children.push(migrationsParser([], dbKey, env, db.meta.dbAlias, db)); // json.children.push(migrationsParser([], dbKey, env, db.meta.dbAlias, db));
json.children.push(sqlClientParser([], dbKey, env, db.meta.dbAlias, db)); json.children.push(sqlClientParser([], dbKey, env, db.meta.dbAlias, db));
dbs.push(json); dbs.push(json);
} }

4
packages/nc-gui/lang/en.json
Unescape View File

@ -165,6 +165,10 @@
"title": "Project Metadata", "title": "Project Metadata",
"tooltip": "Meta Management" "tooltip": "Meta Management"
}, },
"audit": {
"title": "Audit",
"tooltip": "Audit Log"
},
"preview_as": "Preview as", "preview_as": "Preview as",
"reset_review": "Reset Preview" "reset_review": "Reset Preview"
}, },

38
packages/nc-gui/layouts/default.vue
Unescape View File

@ -8,10 +8,10 @@
clipped-left clipped-left
dense dense
dark dark
height="40" height="48"
@contextmenu="showAirtabLikeLink++" @contextmenu="showAirtabLikeLink++"
> >
{{ $store.state.plugins.brand }} <!-- {{ $store.state.plugins.brand }}-->
<!-- <v-toolbar-side-icon></v-toolbar-side-icon> --> <!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
<v-toolbar-title> <v-toolbar-title>
<v-tooltip bottom> <v-tooltip bottom>
@ -29,25 +29,26 @@
$store.state.project.projectInfo && $store.state.project.projectInfo.version $store.state.project.projectInfo && $store.state.project.projectInfo.version
}})</span> }})</span>
</v-tooltip> </v-tooltip>
<template> <!-- <template>-->
<span class="title"> {{ brandName }}</span> <!-- <span class="title"> {{ brandName }}</span>-->
</template> <!-- </template>-->
</v-toolbar-title> </v-toolbar-title>
<v-toolbar-items class="ml-3"> <v-toolbar-items class="ml-0">
<gh-btns-star <gh-btns-star
icon="mark-github" icon="mark-github"
slug="nocodb/nocodb" slug="nocodb/nocodb"
show-count show-count
class="mr-3 align-self-center" class="mr-3 align-self-center"
:class="{'dark' : isDark}"
> >
{{ ghStarText }} {{ ghStarText }}
</gh-btns-star> </gh-btns-star>
<a <!-- <a
class="align-self-center caption font-weight-bold ml-1 mr-2 white--text" class="align-self-center caption font-weight-bold ml-1 mr-2 white&#45;&#45;text"
href="https://docs.nocodb.com" href="https://docs.nocodb.com"
target="_blank" target="_blank"
>Docs</a> >Docs</a>-->
<!-- <templates-modal v-if="isDashboard && _isUIAllowed('template-import')" v-model="templateModal" class="align-self-center" />--> <!-- <templates-modal v-if="isDashboard && _isUIAllowed('template-import')" v-model="templateModal" class="align-self-center" />-->
<!-- <better-u-x v-if="clickCount" />--> <!-- <better-u-x v-if="clickCount" />-->
@ -83,7 +84,7 @@
/> />
<v-spacer /> <v-spacer />
<div style="position: absolute; top:0;left:0;width:100%; pointer-events: none" class="d-flex align-center"> <!-- <div style="position: absolute; top:0;left:0;width:100%; pointer-events: none" class="d-flex align-center">
<h5 <h5
v-if="isDashboard && $store.getters['project/GtrProjectName'] !== '__project__'" v-if="isDashboard && $store.getters['project/GtrProjectName'] !== '__project__'"
class="text-center mx-auto mb-0 mt-1 title font-weight-bold text-capitalize" class="text-center mx-auto mb-0 mt-1 title font-weight-bold text-capitalize"
@ -101,7 +102,7 @@
Project name Project name
</v-tooltip> </v-tooltip>
</h5> </h5>
</div> </div>-->
<v-spacer /> <v-spacer />
@ -113,8 +114,7 @@
<x-btn <x-btn
v-if="_isUIAllowed('add-user')" v-if="_isUIAllowed('add-user')"
small small
color="white" btn-class="primary--text nc-menu-share white"
btn-class="primary--text nc-menu-share"
@click="rolesTabAdd" @click="rolesTabAdd"
> >
<v-icon small class="mr-1"> <v-icon small class="mr-1">
@ -124,7 +124,7 @@
</x-btn> </x-btn>
</div> </div>
<v-tooltip bottom> <!-- <v-tooltip bottom>
<template #activator="{ on }"> <template #activator="{ on }">
<v-icon <v-icon
v-ripple="{class : 'nc-ripple'}" v-ripple="{class : 'nc-ripple'}"
@ -159,7 +159,7 @@
{{ $vuetify.theme.dark ? 'Click for light theme' : 'Click for dark theme' }} {{ $vuetify.theme.dark ? 'Click for light theme' : 'Click for dark theme' }}
<i /> <i />
</span> </span>
</v-tooltip> </v-tooltip>-->
<span <span
v-shortkey="[ 'ctrl','shift', 'd']" v-shortkey="[ 'ctrl','shift', 'd']"
@ -1061,9 +1061,13 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
/deep/ .gh-button-container > a { /deep/ .gh-button-container{
background: #fff2;
border-radius: 4px;
}
/deep/ .gh-button-container:not(.dark) > a {
background: transparent !important; background: transparent !important;
color: white !important; color: #cdcdcd !important;
} }
a { a {

15
packages/nc-gui/pages/nc/_project_id.vue
Unescape View File

@ -1,6 +1,6 @@
<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 - 48px); position: relative;" class="xc-theme nc-dashboard">
<pane :min-size="showProjectTree? 10 : 1.5" :size="showProjectTree ? paneSize : 1.5" :max-size="showProjectTree? 50 : 1.5" style="position: relative;overflow-x: hidden"> <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 <v-btn
@ -118,6 +118,19 @@ export default {
background: #7f828b33 !important; background: #7f828b33 !important;
border: #7f828b33 !important; border: #7f828b33 !important;
} }
/deep/ .nc-dashboard > .splitpanes__splitter {
margin-top: 30px;
position: relative;
}
/deep/ .nc-dashboard > .splitpanes__splitter::before {
height: 30px;
content: '';
position: absolute;
top:-30px;
left: 0;
width: 100%;
background: var(--v-primary-base);
}
.pane-toggle { .pane-toggle {
position: absolute; position: absolute;
right: 0; right: 0;

2
packages/nc-gui/pages/nc/index.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<v-container fluid class="pa-0 ma-0" style="overflow: auto"> <v-container fluid class="pa-0 ma-0" style="overflow: auto">
<!-- <trialExpired v-if="$store.getters['windows/GtrHasTrialPeriodExpired']"></trialExpired>--> <!-- <trialExpired v-if="$store.getters['windows/GtrHasTrialPeriodExpired']"></trialExpired>-->
<splitpanes style="height:calc(100vh - 40px)" class="xc-theme"> <splitpanes style="height:calc(100vh - 48px)" class="xc-theme">
<pane min-size="10" :size="paneSize" max-size="50" style="overflow: auto"> <pane min-size="10" :size="paneSize" max-size="50" style="overflow: auto">
<ProjectTreeView /> <ProjectTreeView />
</pane> </pane>

2
packages/nc-gui/pages/project/xcdb.vue
Unescape View File

@ -186,6 +186,6 @@ export default {
} }
.main { .main {
height: calc(100vh - 40px) height: calc(100vh - 48px)
} }
</style> </style>

Write Preview
Loading…
Cancel
Save