Browse Source

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

feat: New navbar style and alignment issues correction
pull/5010/head
Pranav C 2 years ago committed by GitHub
parent
commit
de57b911d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. BIN
      packages/nc-gui/assets/img/brand/nocodb-full-color.png
  2. 8
      packages/nc-gui/assets/style.scss
  3. 1
      packages/nc-gui/components.d.ts
  4. 4
      packages/nc-gui/components/cell/SingleSelect.vue
  5. 8
      packages/nc-gui/components/dashboard/TreeView.vue
  6. 7
      packages/nc-gui/components/general/ShareBaseButton.vue
  7. 2
      packages/nc-gui/components/smartsheet/Pagination.vue
  8. 2
      packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
  9. 2
      packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
  10. 2
      packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
  11. 8
      packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
  12. 2
      packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
  13. 2
      packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
  14. 2
      packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
  15. 15
      packages/nc-gui/layouts/base.vue
  16. 12
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue
  17. 54
      packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

BIN
packages/nc-gui/assets/img/brand/nocodb-full-color.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

8
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
}
}

1
packages/nc-gui/components.d.ts vendored

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

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

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

7
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" />
<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>

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

2
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 />

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

2
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" />

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

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

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

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

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

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

54
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;
}
.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>

Loading…
Cancel
Save