Browse Source

refactor(gui-v2): apply tab style only for the root tab

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3114/head
Pranav C 2 years ago
parent
commit
f8c6ef2cef
  1. 2
      packages/nc-gui-v2/pages/nc/[projectId]/index.vue
  2. 35
      packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue

2
packages/nc-gui-v2/pages/nc/[projectId]/index.vue

@ -56,7 +56,7 @@ await loadTables()
collapsible
theme="light"
>
<div style="height: var(--header-height)" class="flex items-center !bg-primary text-white px-1 pl-6 gap-2">
<div style="height: var(--header-height)" class="flex items-center !bg-primary text-white px-1 pl-5 gap-2">
<div
v-if="isOpen"
class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105"

35
packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue

@ -46,7 +46,7 @@ const icon = (tab: TabItem) => {
<div class="h-full w-full nc-container pt-[9px]">
<div class="h-full w-full flex flex-col">
<div>
<a-tabs v-model:activeKey="activeTabIndex" type="editable-card" @edit="closeTab">
<a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab">
<a-tab-pane v-for="(tab, i) in tabs" :key="i">
<template #tab>
<div class="flex align-center gap-2">
@ -154,14 +154,29 @@ const icon = (tab: TabItem) => {
</div>
</template>
<style scoped>
<style scoped lang="scss">
.nc-container {
height: calc(100% - var(--header-height));
flex: 1 1 100%;
}
:deep(.ant-tabs-nav) {
@apply !mb-0;
:deep(.nc-root-tabs) {
& > .ant-tabs-nav {
@apply !mb-0;
& > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
& > .ant-tabs-nav-add {
@apply !hidden;
}
& > .ant-tabs-tab-active {
@apply font-weight-medium;
}
& > .ant-tabs-tab:not(.ant-tabs-tab-active) {
@apply bg-gray-100;
}
}
}
}
:deep(.ant-menu-item-selected) {
@ -173,16 +188,4 @@ const icon = (tab: TabItem) => {
:deep(.ant-menu-submenu::after) {
@apply !border-none;
}
:deep(.ant-tabs-nav-add) {
@apply !hidden;
}
:deep(.ant-tabs-tab-active) {
@apply font-weight-medium;
}
:deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) {
@apply bg-gray-100;
}
</style>

Loading…
Cancel
Save