Merge pull request #4996 from nocodb/feat/white-navbar

feat: New navbar style and alignment issues correction
2 years ago · de57b911d4
17 changed files with 95 additions and 42 deletions
--- a/packages/nc-gui/assets/img/brand/nocodb-full-color.png
+++ b/packages/nc-gui/assets/img/brand/nocodb-full-color.png
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@ -6,6 +6,8 @@
  --header-height: 42px;
  --toolbar-height: 48px;
  --tw-text-opacity: 1;
+  --navbar-bg: #FAFAFA;
+  --navbar-border: #e0e0e0;
 }

 .ant-layout-header {
@ -303,3 +305,9 @@ a {
    @apply text-gray-300 italic;
  }
 }
+
+.ant-btn-loading-icon{
+  & > span {
+    @apply block bg-red-500
+  }
+}
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@ -81,6 +81,7 @@ declare module '@vue/runtime-core' {
    ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
    EvaEmailOutline: typeof import('~icons/eva/email-outline')['default']
    IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']
+    Icon: typeof import('~icons/ic/on')['default']
    IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
    IcRoundEdit: typeof import('~icons/ic/round-edit')['default']
    IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@ -322,4 +322,8 @@ useEventListener(document, 'click', handleClose, true)
 :deep(.ant-select-selection-search-input) {
  @apply !text-xs;
 }
+
+:deep(.ant-select-clear > span) {
+  @apply block;
+}
 </style>
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@ -360,8 +360,8 @@ onMounted(async () => {
          </Transition>

          <Transition name="layout" mode="out-in">
-            <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
-            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
+            <MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+            <IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" />
          </Transition>
        </div>
        <div
@ -387,8 +387,8 @@ onMounted(async () => {
          </Transition>

          <Transition name="slide-right" mode="out-in">
-            <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
-            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="onSearchIconClick" />
+            <MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
+            <IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchIconClick" />
          </Transition>

          <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@ -43,9 +43,12 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
        <template #title>
          <span class="text-xs">{{ $t('activity.inviteTeam') }}</span>
        </template>
-        <div class="flex items-center space-x-1 cursor-pointer">
-          <MdiAccountPlusOutline class="mr-1 nc-share-base text-gray-300 hover:text-accent" />
-        </div>
+        <a-button type="primary" class="!rounded-md mr-1" size="medium">
+          <div class="flex items-center space-x-1 cursor-pointer text-xs font-weight-bold">
+            <MdiAccountPlusOutline class="mr-1 nc-share-base hover:text-accent text-sm" />
+            {{ $t('activity.share') }}
+          </div>
+        </a-button>
      </a-tooltip>
    </div>

--- a/packages/nc-gui/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui/components/smartsheet/Pagination.vue
@ -59,6 +59,6 @@ const page = computed({
 }

 :deep(.ant-pagination-item-link) {
-  @apply text-gray-500;
+  @apply text-gray-500 flex items-center justify-center;
 }
 </style>
--- a/packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
@ -11,7 +11,7 @@ const onClick = () => {
 <template>
  <div :class="{ 'nc-active-btn': isOpen }">
    <a-button size="small" class="nc-toggle-right-navbar" @click="onClick">
-      <div class="flex items-center gap-1 text-xs" :class="{ 'text-gray-500': !isOpen }">
+      <div class="flex items-center gap-1 text-[0.6rem] text-gray-500" :class="{ 'text-gray-500': !isOpen }">
        <AntDesignMenuUnfoldOutlined v-if="isOpen" />

        <AntDesignMenuFoldOutlined v-else />
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@ -76,7 +76,7 @@ useMenuCloseOnEsc(open)
        <div class="flex items-center gap-1">
          <MdiFilterOutline />
          <!-- Filter -->
-          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.filter') }}</span>
+          <span class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.filter') }}</span>
          <MdiMenuDown class="text-grey" />

          <span v-if="filtersLength" class="nc-count-badge">{{ filtersLength }}</span>
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@ -151,7 +151,7 @@ useMenuCloseOnEsc(open)
          <MdiEyeOffOutline />

          <!-- Fields -->
-          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('objects.fields') }}</span>
+          <span class="text-capitalize !text-xs font-weight-normal">{{ $t('objects.fields') }}</span>

          <MdiMenuDown class="text-grey" />

--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@ -73,7 +73,7 @@ function onPressEnter() {
    <a-input
      v-model:value="search.query"
      size="small"
-      class="max-w-[200px]"
+      class="max-w-[200px] !text-xs"
      :placeholder="$t('placeholder.filterQuery')"
      :bordered="false"
      data-testid="search-data-input"
@ -83,3 +83,9 @@ function onPressEnter() {
    </a-input>
  </div>
 </template>
+
+<style scoped>
+:deep(input::placeholder) {
+  @apply !text-xs;
+}
+</style>
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@ -237,7 +237,7 @@ const copyIframeCode = async () => {
      <div class="flex items-center gap-1">
        <MdiOpenInNew />
        <!-- Share View -->
-        <span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span>
+        <span class="!text-xs font-weight-normal"> {{ $t('activity.shareView') }}</span>
      </div>
    </a-button>

--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@ -66,7 +66,7 @@ useMenuCloseOnEsc(open)
          <MdiSort />

          <!-- Sort -->
-          <span class="text-capitalize !text-sm font-weight-normal">{{ $t('activity.sort') }}</span>
+          <span class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.sort') }}</span>
          <MdiMenuDown class="text-grey" />

          <span v-if="sorts?.length" class="nc-count-badge">{{ sorts.length }}</span>
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@ -94,7 +94,7 @@ useMenuCloseOnEsc(open)
        <div class="flex gap-2 items-center">
          <GeneralViewIcon :meta="selectedView"></GeneralViewIcon>

-          <span class="!text-sm font-weight-normal">
+          <span class="!text-xs font-weight-normal">
            <GeneralTruncateText :key="selectedView?.title">{{ selectedView?.title }}</GeneralTruncateText>
          </span>

--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@ -37,10 +37,7 @@ hooks.hook('page:finish', () => {
    </Transition>

    <a-layout class="!flex-col">
-      <a-layout-header
-        v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
-        class="flex !bg-primary items-center text-white !pl-2 !pr-5"
-      >
+      <a-layout-header v-if="!route.meta.public && signedIn && !route.meta.hideHeader" class="nc-navbar">
        <div
          v-if="!route.params.projectType"
          v-e="['c:navbar:home']"
@ -53,8 +50,8 @@ hooks.hook('page:finish', () => {
              {{ currentVersion }}
            </template>
            <div class="flex items-center gap-2">
-              <img width="25" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-              <img v-show="!isDashboard" width="90" alt="NocoDB" src="~/assets/img/brand/text.png" />
+              <img v-if="!isDashboard" width="120" alt="NocoDB" src="~/assets/img/brand/nocodb-full-color.png" />
+              <img v-else width="25" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
            </div>
          </a-tooltip>
        </div>
@ -83,7 +80,7 @@ hooks.hook('page:finish', () => {
          <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-user-accounts-menu">
            <MdiDotsVertical
              data-testid="nc-menu-accounts"
-              class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white"
+              class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts"
              @click.prevent
            />

@ -161,4 +158,8 @@ hooks.hook('page:finish', () => {
    @apply ring ring-accent ring-opacity-100;
  }
 }
+
+.nc-navbar {
+  @apply flex !bg-white items-center !pl-2 !pr-5;
+}
 </style>
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@ -252,9 +252,9 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
        theme="light"
      >
        <div
-          style="height: var(--header-height)"
+          style="height: var(--header-height); border-bottom-width: 1px"
          :class="isOpen ? 'pl-4' : ''"
-          class="flex items-center !bg-primary text-white px-1 gap-1"
+          class="flex items-center text-primary px-1 gap-1 nc-sidebar-header"
        >
          <div
            v-if="isOpen && !isSharedBase"
@ -267,7 +267,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
              <template #title>
                {{ currentVersion }}
              </template>
-              <img width="25" class="-mr-1" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+              <img width="25" class="-mr-1" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
            </a-tooltip>
          </div>

@ -589,7 +589,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {

 .nc-left-sidebar {
  .nc-sidebar-left-toggle-icon {
-    @apply opacity-0 transition-opactity duration-200 transition-color text-white/80 hover:text-white/100;
+    @apply opacity-0 transition-opactity duration-200 transition-color text-gray-500/80 hover:text-gray-500/100;

    .nc-left-sidebar {
      @apply !border-r-0;
@ -604,4 +604,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 :deep(.ant-dropdown-menu-submenu-title) {
  @apply py-0;
 }
+
+.nc-sidebar-header {
+  @apply border-[var(--navbar-border)] !bg-[var(--navbar-bg)];
+}
 </style>
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@ -31,20 +31,20 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
 <template>
  <div class="h-full w-full nc-container">
    <div class="h-full w-full flex flex-col">
-      <div class="flex items-end !min-h-[var(--header-height)] !bg-primary nc-tab-bar">
+      <div class="flex items-end !min-h-[var(--header-height)] !bg-white-500 nc-tab-bar">
        <div
          v-if="!isOpen"
-          class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3"
+          class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3 mb-1"
        >
          <MdiMenu
            v-e="['c:grid:toggle-navdraw']"
-            class="cursor-pointer transform transition-transform duration-500 text-white"
+            class="cursor-pointer transform transition-transform duration-500 text-gray-500/80 hover:text-gray-500"
            :class="{ 'rotate-180': !isOpen }"
            @click="toggle(!isOpen)"
          />
        </div>

-        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit">
+        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs min-w-[500px]" type="editable-card" @edit="onEdit">
          <a-tab-pane v-for="(tab, i) of tabs" :key="i">
            <template #tab>
              <div class="flex items-center gap-2" data-testid="nc-tab-title">
@ -78,8 +78,8 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
          </div>
        </div>

-        <LazyGeneralShareBaseButton />
-        <LazyGeneralFullScreen class="nc-fullscreen-icon" />
+        <LazyGeneralShareBaseButton class="mb-1px" />
+        <LazyGeneralFullScreen class="nc-fullscreen-icon mb-1px" />
      </div>

      <div class="w-full min-h-[300px] flex-auto">
@ -108,23 +108,39 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
    }

    .ant-tabs-nav-more {
-      @apply text-white;
+      @apply py-1.5;
    }

    & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
-      & > .ant-tabs-tab-active {
-        @apply font-weight-medium;
+      & > .ant-tabs-tab {
+        @apply border-0 !text-sm py-2 font-weight-medium  z-2;
+
+        border-top-right-radius: 8px;
+        border-top-left-radius: 8px;
+
+        & + .ant-tabs-tab {
+          @apply ml-1;
+        }
      }

-      & > .ant-tabs-tab {
-        @apply border-0;
+      & > .ant-tabs-tab-active {
+        @apply relative bg-white w-full h-full overflow-y-visible;
+
+        border-top: 1px solid white;
+        border-left: 1px solid white;
+        border-right: 1px solid white;
+        @apply !border-[var(--navbar-border)];
+
+        &:after {
+          @apply absolute content-[''] left-0 -bottom-[1px] w-full h-[1px] bg-inherit z-100;
+        }
      }

      & > .ant-tabs-tab:not(.ant-tabs-tab-active) {
-        //@apply bg-gray-100 text-gray-500;
-        @apply bg-white/10 text-white/90;
+        @apply bg-gray-50 text-gray-500;
+
        .ant-tabs-tab-remove {
-          @apply !text-white;
+          @apply !text-default;
        }
      }
    }
@ -141,7 +157,17 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
  @apply !border-none;
 }

-:deep(.ant-tabs-tab-remove) {
-  @apply flex mt-[2px];
+.nc-tab-bar {
+  @apply border-gray-150 !bg-gray-50 relative z-1;
+
+  :deep(.ant-tabs-tab-remove) {
+    @apply flex mt-[2px];
+  }
+
+  background: linear-gradient(0deg, var(--navbar-border) 1px, var(--navbar-bg) 1px) !important;
+
+  :deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) {
+    background: linear-gradient(0deg, var(--navbar-border) 1px, #f2f2f2 1px) !important;
+  }
 }
 </style>