github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
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
a1b12e83cd
commit
5a991ae994
4 changed files with 66 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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save