Browse Source

fix(nc-gui): Data sources table now makes button icon only on small screen and fixed issue with base logo

pull/6607/head
Muhammed Mustafa 1 year ago
parent
commit
5a991ae994
  1. 4
      packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
  2. 92
      packages/nc-gui/components/dashboard/settings/DataSources.vue
  3. 4
      packages/nc-gui/components/general/BaseLogo.vue
  4. 4
      packages/nc-gui/components/project/AllTables.vue

4
packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@ -657,7 +657,7 @@ const projectDelete = () => {
class="source-context flex items-center gap-2 text-gray-800 nc-sidebar-node-title" class="source-context flex items-center gap-2 text-gray-800 nc-sidebar-node-title"
@contextmenu="setMenuContext('source', source)" @contextmenu="setMenuContext('source', source)"
> >
<GeneralBaseLogo :source-type="source.type" class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" /> <GeneralBaseLogo class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" />
{{ $t('general.default') }} {{ $t('general.default') }}
</div> </div>
<div <div
@ -665,7 +665,7 @@ const projectDelete = () => {
class="source-context flex flex-grow items-center gap-1.75 text-gray-800 min-w-1/20 max-w-full" class="source-context flex flex-grow items-center gap-1.75 text-gray-800 min-w-1/20 max-w-full"
@contextmenu="setMenuContext('source', source)" @contextmenu="setMenuContext('source', source)"
> >
<GeneralBaseLogo :source-type="source.type" class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" /> <GeneralBaseLogo class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" />
<div <div
:data-testid="`nc-sidebar-base-${source.alias}`" :data-testid="`nc-sidebar-base-${source.alias}`"
class="nc-sidebar-node-title flex capitalize text-ellipsis overflow-hidden select-none" class="nc-sidebar-node-title flex capitalize text-ellipsis overflow-hidden select-none"

92
packages/nc-gui/components/dashboard/settings/DataSources.vue

@ -351,58 +351,71 @@ const isEditBaseModalOpen = computed({
<div class="ds-table-col ds-table-actions"> <div class="ds-table-col ds-table-actions">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<a-button <NcButton
v-if="!sources[0].is_meta && !sources[0].is_local" v-if="!sources[0].is_meta && !sources[0].is_local"
class="nc-action-btn cursor-pointer outline-0" class="nc-action-btn cursor-pointer outline-0"
type="text" type="text"
size="small"
@click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)" @click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
> >
<div class="flex items-center gap-2 text-gray-600"> <div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="sync" class="group-hover:text-accent" /> <GeneralIcon icon="sync" class="group-hover:text-accent" />
{{ $t('tooltip.metaSync') }} <div class="nc-action-btn-label">
{{ $t('tooltip.metaSync') }}
</div>
</div> </div>
</a-button> </NcButton>
<a-button <NcButton
size="small"
class="nc-action-btn cursor-pointer outline-0" class="nc-action-btn cursor-pointer outline-0"
type="text" type="text"
@click="baseAction(sources[0].id, DataSourcesSubTab.ERD)" @click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
> >
<div class="flex items-center gap-2 text-gray-600"> <div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="erd" class="group-hover:text-accent" /> <GeneralIcon icon="erd" class="group-hover:text-accent" />
{{ $t('title.relations') }} <div class="nc-action-btn-label">
{{ $t('title.relations') }}
</div>
</div> </div>
</a-button> </NcButton>
<a-button <NcButton
size="small"
class="nc-action-btn cursor-pointer outline-0" class="nc-action-btn cursor-pointer outline-0"
type="text" type="text"
@click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)" @click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
> >
<div class="flex items-center gap-2 text-gray-600"> <div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="acl" class="group-hover:text-accent" /> <GeneralIcon icon="acl" class="group-hover:text-accent" />
{{ $t('labels.uiAcl') }} <div class="nc-action-btn-label">
{{ $t('labels.uiAcl') }}
</div>
</div> </div>
</a-button> </NcButton>
<a-button <NcButton
size="small"
class="nc-action-btn cursor-pointer outline-0" class="nc-action-btn cursor-pointer outline-0"
type="text" type="text"
@click="baseAction(sources[0].id, DataSourcesSubTab.Audit)" @click="baseAction(sources[0].id, DataSourcesSubTab.Audit)"
> >
<div class="flex items-center gap-2 text-gray-600"> <div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="book" class="group-hover:text-accent" /> <GeneralIcon icon="book" class="group-hover:text-accent" />
{{ $t('title.audit') }} <div class="nc-action-btn-label">
{{ $t('title.audit') }}
</div>
</div> </div>
</a-button> </NcButton>
</div> </div>
</div> </div>
<div class="ds-table-col ds-table-crud"> <div class="ds-table-col ds-table-crud">
<a-button <NcButton
v-if="!sources[0].is_meta && !sources[0].is_local" v-if="!sources[0].is_meta && !sources[0].is_local"
size="small"
class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg" class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg"
type="text" type="text"
@click="baseAction(sources[0].id, DataSourcesSubTab.Edit)" @click="baseAction(sources[0].id, DataSourcesSubTab.Edit)"
> >
<GeneralIcon icon="edit" class="text-gray-600" /> <GeneralIcon icon="edit" class="text-gray-600" />
</a-button> </NcButton>
</div> </div>
</div> </div>
</template> </template>
@ -419,12 +432,12 @@ const isEditBaseModalOpen = computed({
</a-tooltip> </a-tooltip>
</div> </div>
</div> </div>
<div class="ds-table-col ds-table-name font-medium"> <div class="ds-table-col ds-table-name font-medium w-full">
<GeneralIcon v-if="sources.length > 2" icon="dragVertical" small class="ds-table-handle" /> <GeneralIcon v-if="sources.length > 2" icon="dragVertical" small class="ds-table-handle" />
<div v-if="source.is_meta || source.is_local">-</div> <div v-if="source.is_meta || source.is_local">-</div>
<div v-else class="flex items-center gap-1"> <span v-else class="truncate">
{{ source.is_meta || source.is_local ? $t('general.base') : source.alias }} {{ source.is_meta || source.is_local ? $t('general.base') : source.alias }}
</div> </span>
</div> </div>
<div class="ds-table-col ds-table-type"> <div class="ds-table-col ds-table-type">
@ -437,56 +450,67 @@ const isEditBaseModalOpen = computed({
<div class="ds-table-col ds-table-actions"> <div class="ds-table-col ds-table-actions">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<a-button <NcButton
size="small"
class="nc-action-btn cursor-pointer outline-0" class="nc-action-btn cursor-pointer outline-0"
type="text" type="text"
@click="baseAction(source.id, DataSourcesSubTab.ERD)" @click="baseAction(source.id, DataSourcesSubTab.ERD)"
> >
<div class="flex items-center gap-2 text-gray-600"> <div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="erd" class="group-hover:text-accent" /> <GeneralIcon icon="erd" class="group-hover:text-accent" />
{{ $t('title.relations') }} <div class="nc-action-btn-label">
{{ $t('title.relations') }}
</div>
</div> </div>
</a-button> </NcButton>
<a-button <NcButton
size="small"
type="text" type="text"
class="nc-action-btn cursor-pointer outline-0" class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(source.id, DataSourcesSubTab.UIAcl)" @click="baseAction(source.id, DataSourcesSubTab.UIAcl)"
> >
<div class="flex items-center gap-2 text-gray-600"> <div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="acl" class="group-hover:text-accent" /> <GeneralIcon icon="acl" class="group-hover:text-accent" />
{{ $t('labels.uiAcl') }} <div class="nc-action-btn-label">
{{ $t('labels.uiAcl') }}
</div>
</div> </div>
</a-button> </NcButton>
<a-button <NcButton
v-if="!source.is_meta && !source.is_local" v-if="!source.is_meta && !source.is_local"
size="small"
type="text" type="text"
class="nc-action-btn cursor-pointer outline-0" class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(source.id, DataSourcesSubTab.Metadata)" @click="baseAction(source.id, DataSourcesSubTab.Metadata)"
> >
<div class="flex items-center gap-2 text-gray-600"> <div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="sync" class="group-hover:text-accent" /> <GeneralIcon icon="sync" class="group-hover:text-accent" />
{{ $t('tooltip.metaSync') }} <div class="nc-action-btn-label">
{{ $t('tooltip.metaSync') }}
</div>
</div> </div>
</a-button> </NcButton>
</div> </div>
</div> </div>
<div class="ds-table-col ds-table-crud justify-end gap-x-1"> <div class="ds-table-col ds-table-crud justify-end gap-x-1">
<a-button <NcButton
v-if="!source.is_meta && !source.is_local" v-if="!source.is_meta && !source.is_local"
size="small"
class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5" class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5"
type="text" type="text"
@click="baseAction(source.id, DataSourcesSubTab.Edit)" @click="baseAction(source.id, DataSourcesSubTab.Edit)"
> >
<GeneralIcon icon="edit" class="text-gray-600 -mt-0.5" /> <GeneralIcon icon="edit" class="text-gray-600 -mt-0.5" />
</a-button> </NcButton>
<a-button <NcButton
v-if="!source.is_meta && !source.is_local" v-if="!source.is_meta && !source.is_local"
size="small"
class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5" class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg mt-0.5"
type="text" type="text"
@click="openDeleteBase(source)" @click="openDeleteBase(source)"
> >
<GeneralIcon icon="delete" class="text-red-500 -mt-0.5" /> <GeneralIcon icon="delete" class="text-red-500 -mt-0.5" />
</a-button> </NcButton>
</div> </div>
</div> </div>
</template> </template>
@ -550,7 +574,7 @@ const isEditBaseModalOpen = computed({
<style> <style>
.ds-table-head { .ds-table-head {
@apply flex items-center border-0 text-gray-400; @apply flex items-center border-0 text-gray-500;
} }
.ds-table-body { .ds-table-body {
@ -578,7 +602,7 @@ const isEditBaseModalOpen = computed({
} }
.ds-table-actions { .ds-table-actions {
@apply col-span-7; @apply sm:col-span-6 xl:col-span-7;
} }
.ds-table-crud { .ds-table-crud {
@ -592,4 +616,8 @@ const isEditBaseModalOpen = computed({
.ds-table-handle { .ds-table-handle {
@apply cursor-pointer justify-self-start mr-2; @apply cursor-pointer justify-self-start mr-2;
} }
.nc-action-btn-label {
@apply sm:hidden xl:flex;
}
</style> </style>

4
packages/nc-gui/components/general/BaseLogo.vue

@ -6,10 +6,10 @@ import SimpleIconsMicrosoftsqlserver from '~icons/simple-icons/microsoftsqlserve
import LogosSnowflakeIcon from '~icons/logos/snowflake-icon' import LogosSnowflakeIcon from '~icons/logos/snowflake-icon'
import MdiDatabaseOutline from '~icons/mdi/database-outline' import MdiDatabaseOutline from '~icons/mdi/database-outline'
const { baseType } = defineProps<{ baseType?: string }>() const { sourceType } = defineProps<{ sourceType?: string }>()
const baseIcon = computed(() => { const baseIcon = computed(() => {
switch (baseType) { switch (sourceType) {
case ClientType.MYSQL: case ClientType.MYSQL:
return LogosMysqlIcon return LogosMysqlIcon
case ClientType.PG: case ClientType.PG:

4
packages/nc-gui/components/project/AllTables.vue

@ -147,8 +147,8 @@ const onCreateBaseClick = () => {
</div> </div>
<div class="w-1/5 text-gray-600" data-testid="proj-view-list__item-type"> <div class="w-1/5 text-gray-600" data-testid="proj-view-list__item-type">
<div v-if="table.source_id === defaultBase?.id" class="ml-0.75">-</div> <div v-if="table.source_id === defaultBase?.id" class="ml-0.75">-</div>
<div v-else> <div v-else class="capitalize flex flex-row items-center gap-x-0.5">
<GeneralBaseLogo :source-type="sources.get(table.source_id!)?.type" class="w-4 mr-1" /> <GeneralBaseLogo class="w-4 mr-1" />
{{ sources.get(table.source_id!)?.alias }} {{ sources.get(table.source_id!)?.alias }}
</div> </div>
</div> </div>

Loading…
Cancel
Save