Browse Source

refactor(gui): ui rearrangements

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4134/head
Pranav C 2 years ago
parent
commit
6e89746e3b
  1. BIN
      packages/nc-gui/assets/img/brand/full-logo.png
  2. BIN
      packages/nc-gui/assets/img/brand/text.png
  3. 6
      packages/nc-gui/components/account/UserList.vue
  4. 4
      packages/nc-gui/components/account/UsersModal.vue
  5. 9
      packages/nc-gui/layouts/base.vue
  6. 14
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue
  7. 34
      packages/nc-gui/pages/account/index.vue

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
packages/nc-gui/assets/img/brand/text.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

6
packages/nc-gui/components/account/UserList.vue

@ -184,18 +184,18 @@ const copyPasswordResetUrl = async (user: User) => {
<a-select <a-select
v-else v-else
v-model:value="record.roles" v-model:value="record.roles"
class="w-[220px]" class="w-[220px] nc-user-roles"
:dropdown-match-select-width="false" :dropdown-match-select-width="false"
@change="updateRole(record.id, record.roles)" @change="updateRole(record.id, record.roles)"
> >
<a-select-option :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)"> <a-select-option class="nc-role-option" :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
<div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div> <div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
<span class="text-gray-500 text-xs whitespace-normal"> <span class="text-gray-500 text-xs whitespace-normal">
{{ $t('msg.info.roles.orgCreator') }} {{ $t('msg.info.roles.orgCreator') }}
</span> </span>
</a-select-option> </a-select-option>
<a-select-option :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)"> <a-select-option class="nc-role-option" :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
<div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div> <div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
<span class="text-gray-500 text-xs whitespace-normal"> <span class="text-gray-500 text-xs whitespace-normal">
{{ $t('msg.info.roles.orgViewer') }} {{ $t('msg.info.roles.orgViewer') }}

4
packages/nc-gui/components/account/UsersModal.vue

@ -213,14 +213,14 @@ const emailInput = ref((el) => {
<div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div> <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
<a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role"> <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
<a-select-option :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)"> <a-select-option class="nc-role-option" :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
<div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div> <div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
<span class="text-gray-500 text-xs whitespace-normal"> <span class="text-gray-500 text-xs whitespace-normal">
{{ $t('msg.info.roles.orgCreator') }} {{ $t('msg.info.roles.orgCreator') }}
</span> </span>
</a-select-option> </a-select-option>
<a-select-option :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)"> <a-select-option class="nc-role-option" :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
<div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div> <div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
<span class="text-gray-500 text-xs whitespace-normal"> <span class="text-gray-500 text-xs whitespace-normal">
{{ $t('msg.info.roles.orgViewer') }} {{ $t('msg.info.roles.orgViewer') }}

9
packages/nc-gui/layouts/base.vue

@ -22,6 +22,8 @@ const logout = () => {
const { hooks } = useNuxtApp() const { hooks } = useNuxtApp()
const isDashboard = computed(() => !!route.params.projectType)
/** when page suspensions have finished, check if a sidebar element was teleported into the layout */ /** when page suspensions have finished, check if a sidebar element was teleported into the layout */
hooks.hook('page:finish', () => { hooks.hook('page:finish', () => {
if (sidebar.value) { if (sidebar.value) {
@ -39,7 +41,7 @@ hooks.hook('page:finish', () => {
<a-layout class="!flex-col"> <a-layout class="!flex-col">
<a-layout-header <a-layout-header
v-if="!route.meta.public && signedIn && !route.meta.hideHeader" v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
class="flex !bg-primary items-center text-white pl-4 pr-5" class="flex !bg-primary items-center text-white !pl-2 !pr-5"
> >
<div <div
v-if="!route.params.projectType" v-if="!route.params.projectType"
@ -52,7 +54,10 @@ hooks.hook('page:finish', () => {
<template #title> <template #title>
{{ currentVersion }} {{ currentVersion }}
</template> </template>
<img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" /> <div class="flex items-center gap-2">
<img width="25" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
<img width="90" v-show="!isDashboard" alt="NocoDB" src="~/assets/img/brand/text.png" />
</div>
</a-tooltip> </a-tooltip>
</div> </div>

14
packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@ -189,20 +189,20 @@ onBeforeUnmount(reset)
<div <div
style="height: var(--header-height)" style="height: var(--header-height)"
:class="isOpen ? 'pl-4' : ''" :class="isOpen ? 'pl-4' : ''"
class="flex items-center !bg-primary text-white px-1 gap-2" class="flex items-center !bg-primary text-white px-1 gap-1"
> >
<div <div
v-if="isOpen && !isSharedBase" v-if="isOpen && !isSharedBase"
v-e="['c:navbar:home']" v-e="['c:navbar:home']"
data-testid="nc-noco-brand-icon" data-testid="nc-noco-brand-icon"
class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105 nc-noco-brand-icon" class="w-[29px] min-w-[29px] transition-all duration-200 py-1 pl-1 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
@click="navigateTo('/')" @click="navigateTo('/')"
> >
<a-tooltip placement="bottom"> <a-tooltip placement="bottom">
<template #title> <template #title>
{{ currentVersion }} {{ currentVersion }}
</template> </template>
<img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" /> <img width="25" class="-mr-1" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
</a-tooltip> </a-tooltip>
</div> </div>
@ -216,7 +216,7 @@ onBeforeUnmount(reset)
<template #title> <template #title>
{{ currentVersion }} {{ currentVersion }}
</template> </template>
<img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" /> <img width="25" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
</a-tooltip> </a-tooltip>
</a> </a>
@ -234,12 +234,12 @@ onBeforeUnmount(reset)
> >
<template v-if="isOpen"> <template v-if="isOpen">
<a-tooltip v-if="project.title?.length > 12" placement="bottom"> <a-tooltip v-if="project.title?.length > 12" placement="bottom">
<div class="text-lg font-semibold truncate">{{ project.title }}</div> <div class="text-md font-semibold truncate">{{ project.title }}</div>
<template #title> <template #title>
<div class="text-sm">{{ project.title }}</div> <div class="text-sm">{{ project.title }}</div>
</template> </template>
</a-tooltip> </a-tooltip>
<div v-else class="text-lg font-semibold truncate">{{ project.title }}</div> <div v-else class="text-md font-semibold truncate capitalize">{{ project.title }}</div>
<MdiChevronDown class="min-w-[17px] group-hover:text-accent text-md" /> <MdiChevronDown class="min-w-[17px] group-hover:text-accent text-md" />
</template> </template>
@ -257,7 +257,7 @@ onBeforeUnmount(reset)
<MdiFolder class="group-hover:text-accent text-xl" /> <MdiFolder class="group-hover:text-accent text-xl" />
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-lg group-hover:(!text-primary) font-semibold"> <div class="text-lg group-hover:(!text-primary) font-semibold capitalize">
<GeneralTruncateText>{{ project.title }}</GeneralTruncateText> <GeneralTruncateText>{{ project.title }}</GeneralTruncateText>
</div> </div>

34
packages/nc-gui/pages/account/index.vue

@ -9,12 +9,12 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
</script> </script>
<template> <template>
<div class="container mx-auto h-full"> <div class="mx-auto h-full">
<a-layout class="h-full overflow-y-auto flex"> <a-layout class="h-full overflow-y-auto flex">
<!-- Side tabs --> <!-- Side tabs -->
<a-layout-sider> <a-layout-sider>
<div class="pt-4 h-full bg-white nc-user-sidebar"> <div class="h-full bg-white nc-user-sidebar">
<a-menu :inline-indent="12" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" <a-menu :inline-indent="16" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys"
class="tabs-menu h-full" mode="inline"> class="tabs-menu h-full" mode="inline">
<!-- <a-menu-item <!-- <a-menu-item
key="users-old" key="users-old"
@ -28,21 +28,25 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
</div> </div>
</a-menu-item> --> </a-menu-item> -->
<div class="text-xs text-gray-500 ml-4 pt-4 pb-2 font-weight-bold">Account Settings</div>
<a-sub-menu key="users" class="!bg-white"> <a-sub-menu key="users" class="!bg-white">
<template #icon> <template #icon>
<MdiAccountSupervisorOutline /> <MdiAccountSupervisorOutline />
</template> </template>
<template #title>Users</template> <template #title>Users</template>
<a-menu-item v-if="isUIAllowed('superAdminUserManagement')" key="list" class="text-xs" <a-menu-item v-if="isUIAllowed('superAdminUserManagement')" key="list" class="text-xs"
@click="navigateTo('/account/users/list')"> @click="navigateTo('/account/users/list')">
<span class="ml-4">User Management</span> <span class="ml-4">User Management</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="settings" class="text-xs" @click="navigateTo('/account/users/settings')">
<span class="ml-4">Settings</span>
</a-menu-item>
<a-menu-item key="password-reset" class="text-xs" @click="navigateTo('/account/users/password-reset')"> <a-menu-item key="password-reset" class="text-xs" @click="navigateTo('/account/users/password-reset')">
<span class="ml-4">Reset Password</span> <span class="ml-4">Reset Password</span>
</a-menu-item> </a-menu-item>
<a-menu-item key="settings" class="text-xs" @click="navigateTo('/account/users/settings')">
<span class="ml-4">Settings</span>
</a-menu-item>
</a-sub-menu> </a-sub-menu>
<a-menu-item <a-menu-item
@ -73,7 +77,9 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
<!-- Sub Tabs --> <!-- Sub Tabs -->
<a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500"> <a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500">
<div class="container mx-auto">
<NuxtPage /> <NuxtPage />
</div>
</a-layout-content> </a-layout-content>
</a-layout> </a-layout>
</div> </div>
@ -83,4 +89,20 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
:deep(.nc-user-sidebar .ant-menu-sub.ant-menu-inline) { :deep(.nc-user-sidebar .ant-menu-sub.ant-menu-inline) {
@apply bg-transparent; @apply bg-transparent;
} }
:deep(.nc-user-sidebar .ant-menu-item-only-child), :deep(.ant-menu-submenu-title) {
@apply !h-[30px] !leading-[30px];
}
:deep(.ant-menu-submenu-arrow){
@apply !text-gray-400;
}
:deep(.ant-menu-submenu-selected .ant-menu-submenu-arrow){
@apply !text-inherit;
}
</style> </style>

Loading…
Cancel
Save