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

fix: ui improvements for multiple source interfaces 

Signed-off-by: mertmit <mertmit99@gmail.com>
pull/3573/head
mertmit 2 years ago
parent
531debb691
commit
dec67fc755
3 changed files with 48 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      packages/nc-gui/components/dashboard/TreeView.vue
  2. 74
      packages/nc-gui/components/dashboard/settings/DataSources.vue
  3. 6
      packages/nc-gui/components/dashboard/settings/Modal.vue

6
packages/nc-gui/components/dashboard/TreeView.vue
Unescape View File

@ -44,6 +44,8 @@ const [searchActive, toggleSearchActive] = useToggle()
let key = $ref(0)
const activeKey = ref([])
const menuRef = $ref<HTMLLIElement>()
let filterQuery = $ref('')
@ -434,7 +436,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
</GeneralTooltip>
</div>
</div>
<a-collapse v-else expand-icon-position="right" :bordered="false" ghost>
<a-collapse v-else v-model:activeKey="activeKey" expand-icon-position="right" :bordered="false" accordion ghost>
<a-collapse-panel :key="index">
<template #header>
<div v-if="index !== '0'" class="flex items-center gap-2">
@ -771,6 +773,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
}
:deep(.ant-collapse-header) {
@apply !border-0 !border-y-1;
@apply !border-0;
}
</style>

74
packages/nc-gui/components/dashboard/settings/DataSources.vue
Unescape View File

@ -133,39 +133,47 @@ watch(
<a-table-column key="action" :title="$t('labels.actions')" :width="180">
<template #default="{ record }">
<div class="flex items-center gap-2">
<a-tooltip>
<template #title>Sync Metadata {{ metadiffbases.includes(record.id) ? '(Out of sync)' : '' }}</template>
<MdiDatabaseSync
class="nc-action-btn cursor-pointer outline-0"
:class="metadiffbases.includes(record.id) ? 'text-primary' : ''"
@click="baseAction(record.id, DataSourcesSubTab.Metadata)"
/>
</a-tooltip>
<a-tooltip>
<template #title>UI ACL</template>
<MdiDatabaseLockOutline
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(record.id, DataSourcesSubTab.UIAcl)"
/>
</a-tooltip>
<a-tooltip>
<template #title>ERD</template>
<MdiGraphOutline
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(record.id, DataSourcesSubTab.ERD)"
/>
</a-tooltip>
<a-tooltip v-if="!record.is_meta">
<template #title>Edit</template>
<MdiEditOutline
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(record.id, DataSourcesSubTab.Edit)"
/>
</a-tooltip>
<a-tooltip v-if="!record.is_meta">
<template #title>Delete</template>
<MdiDeleteOutline class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(record)" />
</a-tooltip>
<a-button
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(record.id, DataSourcesSubTab.Metadata)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<a-tooltip v-if="metadiffbases.includes(record.id)">
<template #title>Out of sync</template>
<MdiDatabaseSync class="text-lg group-hover:text-accent text-primary" />
</a-tooltip>
<MdiDatabaseSync v-else class="text-lg group-hover:text-accent" />
Sync Metadata
</div>
</a-button>
<a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(record.id, DataSourcesSubTab.UIAcl)">
<div class="flex items-center gap-2 text-gray-600 font-light">
<MdiDatabaseLockOutline class="text-lg group-hover:text-accent" />
UI ACL
</div>
</a-button>
<a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(record.id, DataSourcesSubTab.ERD)">
<div class="flex items-center gap-2 text-gray-600 font-light">
<MdiGraphOutline class="text-lg group-hover:text-accent" />
ERD
</div>
</a-button>
<a-button
v-if="!record.is_meta"
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(record.id, DataSourcesSubTab.Edit)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<MdiEditOutline class="text-lg group-hover:text-accent" />
Edit
</div>
</a-button>
<a-button v-if="!record.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(record)">
<div class="flex items-center gap-2 text-red-500 font-light">
<MdiDeleteOutline class="text-lg group-hover:text-accent" />
Delete
</div>
</a-button>
</div>
</template>
</a-table-column>

6
packages/nc-gui/components/dashboard/settings/Modal.vue
Unescape View File

@ -252,10 +252,10 @@ watch(
<a-breadcrumb-item v-else @click="dataSourcesState = ''">Data Sources</a-breadcrumb-item>
<a-breadcrumb-item v-if="dataSourcesState !== ''">{{ dataSourcesState }}</a-breadcrumb-item>
</a-breadcrumb>
<div v-if="dataSourcesState === ''" class="flex flex-row justify-end items-center w-full">
<div v-if="dataSourcesState === ''" class="flex flex-row justify-end items-center w-full gap-1">
<a-button class="self-start nc-btn-new-datasource" @click="dataSourcesState = DataSourcesSubTab.New">
<div v-if="dataSourcesState === ''" class="flex items-center gap-2 text-gray-600 font-light">
<MdiDatabaseOutline class="text-lg group-hover:text-accent" />
<div v-if="dataSourcesState === ''" class="flex items-center gap-2 text-primary font-light">
<MdiDatabasePlusOutline class="text-lg group-hover:text-accent" />
New
</div>
</a-button>

Write Preview
Loading…
Cancel
Save