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
Split 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"
@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') }}
</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"
@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
:data-testid="`nc-sidebar-base-${source.alias}`"
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="flex items-center gap-2">
<a-button
<NcButton
v-if="!sources[0].is_meta && !sources[0].is_local"
class="nc-action-btn cursor-pointer outline-0"
type="text"
size="small"
@click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
>
<div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="sync" class="group-hover:text-accent" />
{{ $t('tooltip.metaSync') }}
<div class="nc-action-btn-label">
{{ $t('tooltip.metaSync') }}
</div>
</div>
</a-button>
<a-button
</NcButton>
<NcButton
size="small"
class="nc-action-btn cursor-pointer outline-0"
type="text"
@click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
>
<div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="erd" class="group-hover:text-accent" />
{{ $t('title.relations') }}
<div class="nc-action-btn-label">
{{ $t('title.relations') }}
</div>
</div>
</a-button>
<a-button
</NcButton>
<NcButton
size="small"
class="nc-action-btn cursor-pointer outline-0"
type="text"
@click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
>
<div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="acl" class="group-hover:text-accent" />
{{ $t('labels.uiAcl') }}
<div class="nc-action-btn-label">
{{ $t('labels.uiAcl') }}
</div>
</div>
</a-button>
<a-button
</NcButton>
<NcButton
size="small"
class="nc-action-btn cursor-pointer outline-0"
type="text"
@click="baseAction(sources[0].id, DataSourcesSubTab.Audit)"
>
<div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="book" class="group-hover:text-accent" />
{{ $t('title.audit') }}
<div class="nc-action-btn-label">
{{ $t('title.audit') }}
</div>
</div>
</a-button>
</NcButton>
</div>
</div>
<div class="ds-table-col ds-table-crud">
<a-button
<NcButton
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"
type="text"
@click="baseAction(sources[0].id, DataSourcesSubTab.Edit)"
>
<GeneralIcon icon="edit" class="text-gray-600" />
</a-button>
</NcButton>
</div>
</div>
</template>
@ -419,12 +432,12 @@ const isEditBaseModalOpen = computed({
</a-tooltip>
</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" />
<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 }}
</div>
</span>
</div>
<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="flex items-center gap-2">
<a-button
<NcButton
size="small"
class="nc-action-btn cursor-pointer outline-0"
type="text"
@click="baseAction(source.id, DataSourcesSubTab.ERD)"
>
<div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="erd" class="group-hover:text-accent" />
{{ $t('title.relations') }}
<div class="nc-action-btn-label">
{{ $t('title.relations') }}
</div>
</div>
</a-button>
<a-button
</NcButton>
<NcButton
size="small"
type="text"
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(source.id, DataSourcesSubTab.UIAcl)"
>
<div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="acl" class="group-hover:text-accent" />
{{ $t('labels.uiAcl') }}
<div class="nc-action-btn-label">
{{ $t('labels.uiAcl') }}
</div>
</div>
</a-button>
<a-button
</NcButton>
<NcButton
v-if="!source.is_meta && !source.is_local"
size="small"
type="text"
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(source.id, DataSourcesSubTab.Metadata)"
>
<div class="flex items-center gap-2 text-gray-600">
<GeneralIcon icon="sync" class="group-hover:text-accent" />
{{ $t('tooltip.metaSync') }}
<div class="nc-action-btn-label">
{{ $t('tooltip.metaSync') }}
</div>
</div>
</a-button>
</NcButton>
</div>
</div>
<div class="ds-table-col ds-table-crud justify-end gap-x-1">
<a-button
<NcButton
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"
type="text"
@click="baseAction(source.id, DataSourcesSubTab.Edit)"
>
<GeneralIcon icon="edit" class="text-gray-600 -mt-0.5" />
</a-button>
<a-button
</NcButton>
<NcButton
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"
type="text"
@click="openDeleteBase(source)"
>
<GeneralIcon icon="delete" class="text-red-500 -mt-0.5" />
</a-button>
</NcButton>
</div>
</div>
</template>
@ -550,7 +574,7 @@ const isEditBaseModalOpen = computed({
<style>
.ds-table-head {
@apply flex items-center border-0 text-gray-400;
@apply flex items-center border-0 text-gray-500;
}
.ds-table-body {
@ -578,7 +602,7 @@ const isEditBaseModalOpen = computed({
}
.ds-table-actions {
@apply col-span-7;
@apply sm:col-span-6 xl:col-span-7;
}
.ds-table-crud {
@ -592,4 +616,8 @@ const isEditBaseModalOpen = computed({
.ds-table-handle {
@apply cursor-pointer justify-self-start mr-2;
}
.nc-action-btn-label {
@apply sm:hidden xl:flex;
}
</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 MdiDatabaseOutline from '~icons/mdi/database-outline'
const { baseType } = defineProps<{ baseType?: string }>()
const { sourceType } = defineProps<{ sourceType?: string }>()
const baseIcon = computed(() => {
switch (baseType) {
switch (sourceType) {
case ClientType.MYSQL:
return LogosMysqlIcon
case ClientType.PG:

4
packages/nc-gui/components/project/AllTables.vue
Unescape View File

@ -147,8 +147,8 @@ const onCreateBaseClick = () => {
</div>
<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-else>
<GeneralBaseLogo :source-type="sources.get(table.source_id!)?.type" class="w-4 mr-1" />
<div v-else class="capitalize flex flex-row items-center gap-x-0.5">
<GeneralBaseLogo class="w-4 mr-1" />
{{ sources.get(table.source_id!)?.alias }}
</div>
</div>

Write Preview
Loading…
Cancel
Save