Browse Source

refactor: scrollbar and other padding corrections

pull/8510/head
Pranav C 6 months ago
parent
commit
6c01e5df4f
  1. 24
      packages/nc-gui/components/dashboard/settings/DataSources.vue
  2. 19
      packages/nc-gui/components/dashboard/settings/Modal.vue

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

@ -282,7 +282,7 @@ const openedTab = ref('erd')
</div>
</NcButton>
</div>
<div data-testid="nc-settings-datasources" class="flex flex-row w-full h-full nc-data-sources-view flex-grow">
<div data-testid="nc-settings-datasources" class="flex flex-row w-full nc-data-sources-view flex-grow min-h-0">
<template v-if="activeSource">
<NcTabs v-model:activeKey="openedTab" class="nc-source-tab w-full">
<a-tab-pane key="erd">
@ -291,8 +291,8 @@ const openedTab = ref('erd')
<div>{{ $t('title.erdView') }}</div>
</div>
</template>
<div class="h-[300vh]">
<LazyDashboardSettingsErd class="mt-4 overflow-scroll" :source-id="activeSource.id" :show-all-columns="false" />
<div class="h-full pt-4">
<LazyDashboardSettingsErd class="h-full overflow-auto" :source-id="activeSource.id" :show-all-columns="false" />
</div>
</a-tab-pane>
<a-tab-pane v-if="activeSource.is_meta || activeSource.is_local" key="audit">
@ -301,8 +301,9 @@ const openedTab = ref('erd')
<div>{{ $t('title.auditLogs') }}</div>
</div>
</template>
<LazyDashboardSettingsBaseAudit class="mt-4" :source-id="activeSource.id" />
<div class="p-4 h-full overflow-auto">
<LazyDashboardSettingsBaseAudit :source-id="activeSource.id" />
</div>
</a-tab-pane>
<a-tab-pane v-if="!activeSource.is_meta && !activeSource.is_local" key="audit">
<template #tab>
@ -310,7 +311,7 @@ const openedTab = ref('erd')
<div>{{ $t('labels.connectionDetails') }}</div>
</div>
</template>
<div class="p-6 mt-4 flex">
<div class="p-6 mt-4 flex h-full">
<LazyDashboardSettingsDataSourcesEditBase
class="w-600px"
:source-id="activeSource.id"
@ -336,7 +337,6 @@ const openedTab = ref('erd')
</template>
<LazyDashboardSettingsMetadata class="mt-4 w-full" :source-id="activeSource.id" @source-synced="loadBases(true)" />
</a-tab-pane>
</NcTabs>
</template>
<div v-else class="flex flex-col w-full overflow-auto mt-1">
@ -480,7 +480,7 @@ const openedTab = ref('erd')
</div>
</template>
<style>
<style scoped lang="scss">
.ds-table-head {
@apply flex items-center border-0 text-gray-500;
}
@ -524,7 +524,11 @@ const openedTab = ref('erd')
@apply bg-gray-50/60;
}
:deep(.ant-tabs-content){
@apply !h-full !overflow-auto;
:deep(.ant-tabs-content),
:deep(.ant-tabs) {
@apply !h-full;
}
:deep(.ant-tabs-content-holder) {
@apply !min-h-0 !flex-shrink;
}
</style>

19
packages/nc-gui/components/dashboard/settings/Modal.vue

@ -1,7 +1,7 @@
<script setup lang="ts">
import type { FunctionalComponent, SVGAttributes } from 'vue'
import DataSources from '~/components/dashboard/settings/DataSources.vue'
import Misc from './Misc.vue'
import DataSources from '~/components/dashboard/settings/DataSources.vue'
interface Props {
modelValue?: boolean
@ -156,12 +156,11 @@ watch(
:footer="null"
width="max(90vw, 600px)"
:closable="false"
class="!top-50px !bottom-50px"
wrap-class-name="nc-modal-settings"
@cancel="emits('update:modelValue', false)"
>
<div class="min-h-[75vh]">
<!-- Settings -->
<!-- Settings -->
<div class="flex flex-row justify-between w-full items-center mb-1">
<a-typography-title class="ml-4 select-none" type="secondary" :level="5">
{{ $t('activity.settings') }}
@ -194,7 +193,7 @@ watch(
</a-layout-sider>
<!-- Sub Tabs -->
<a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500">
<a-layout-content class="h-auto h-80vh px-4 scrollbar-thumb-gray-500">
<a-menu
v-if="selectedTabKeys[0] !== 'dataSources'"
v-model:selectedKeys="selectedSubTabKeys"
@ -211,13 +210,18 @@ watch(
</a-menu-item>
</a-menu>
<div class="h-[600px]">
<div
class="overflow-auto"
:class="{
'h-full': selectedSubTabKeys[0] === 'dataSources',
}"
>
<component
:is="selectedSubTab?.body"
v-if="selectedSubTabKeys[0] === 'dataSources'"
v-model:state="vDataState"
v-model:reload="dataSourcesReload"
class="px-2 pb-2"
class="px-2 pb-2 h-full"
:data-testid="`nc-settings-subtab-${selectedSubTab.key}`"
:base-id="baseId"
/>
@ -231,7 +235,6 @@ watch(
</div>
</a-layout-content>
</a-layout>
</div>
</a-modal>
</template>

Loading…
Cancel
Save