clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-05-02 05:26:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Nc feat: header revamp (#9204)

Browse Source 
* fix(nc-gui): update topbar breadcrumb divider

* feat(nc-gui): custom list component setup

* fix(nc-gui): update reload view data tooltip

* feat(nc-gui): custom list component

* feat(nc-gui): add table list menu

* fix(nc-gui): small changes

* fix(nc-gui): add bases list dropdown

* fix(nc-gui): show chevron icon in mobile view

* feat(nc-gui): add view list dropdown in topbar

* fix(nc-gui): auto scroll selected list option on open dropdown

* feat(nc-gui): add typedocs for each fun from custom list component

* chore(nc-gui): add typedocs for new functions

* fix(nc-gui): view search issue on default view

* fix(nc-gui): reset selected option hover state on search input

* fix(nc-gui): font weight issue

* fix(nc-gui): show reload data topbar option

* fix(nc-gui): change view action menu position

* fix(nc-gui): font weight issue

* feat(nc-gui): create new table/view from topbar

* fix(nc-gui): update other page headers

* fix(nc-gui): project view header

* fix(nc-gui): update admin panel workspaces page header

* fix(nc-gui): admin panel base/workspace user page header

* fix(nc-gui): admin panel scroll issue

* fix(nc-gui): update project home page

* fix(nc-gui): table list scroll issue

* chore(nc-gui): lint

* fix(nc-gui): reset breadcrumb btn hover state on open dropdown

* fix(nc-gui): review changes

* fix(nc-gui): use slash icon instead of text

* fix(nc-gui): pr review changes

* fix(nc-gui): details tab height issue

* fix(nc-gui): add user account pages breadcrumb

* fix(nc-gui): hide rename view option

* fix(nc-gui): disable scrollIntoView on base rename

* fix(nc-gui): on rename view select text

* fix(nc-gui): user menu overflow issue if sidebar baselist is scrollable

* feat(nc-gui): use virtual scrolling for NcList component

* fix(nc-gui): reduce chevron icon opacity

* chore(nc-gui): lint

* fix(nc-gui): ai review changes

* fix(nc-gui): view rename input focus issue

* fix(nc-gui): topbar width issue

* fix(nc-gui): udpate toolbar height

* fix(nc-gui): update chevron icon from breadcrumb

* fix(nc-gui): update breadcrumb icon size

* fix(nc-gui): add min width for breadcrumb

* fix(nc-gui): add topbar bottom border

* fix(nc-gui): details tab heigth and alignment issue

* fix(nc-gui): hide basename and show only icon

* fix(nc-gui): update NcList component

* fix(nc-gui): update admin panel header

* fix(nc-gui): add header in account settings pages

* fix(nc-gui): add account pages header oss

* fix(nc-gui): udpate max width

* chore(nc-gui): lint

* fix(nc-gui(: reduce topbar top padding

* fix(nc-gui): typo error

* fix(nc-gui): review changes

* fix(nc-gui): review changes

* fix(nc-gui): slash icon conflict

* fix(nc-gui): review changes

* fix(nc-gui): remove chevron icon & add list wrapper div to control height

* fix(nc-gui): ncList keyboard navigation issue

* chore(nc-gui): lint
This commit is contained in:
Ramesh Mane
2024-08-14 15:42:45 +05:30
committed by GitHub
parent 0bb5ab9982
commit 57c36d9d71
54 changed files with 2605 additions and 1246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
packages/nc-gui/components/workspace/View.vue
View File

@@ -17,7 +17,7 @@ const { activeWorkspace: _activeWorkspace, workspaces } = storeToRefs(workspaceS
const { loadCollaborators, loadWorkspace } = workspaceStore
const orgStore = useOrg()
const { orgId } = storeToRefs(orgStore)
const { orgId, org } = storeToRefs(orgStore)
const currentWorkspace = computedAsync(async () => {
let ws
@@ -68,38 +68,62 @@ onMounted(() => {
</script>
<template>
<div v-if="currentWorkspace" class="flex w-full px-6 max-w-[97.5rem] flex-col nc-workspace-settings">
<div v-if="!props.workspaceId" class="flex gap-2 items-center min-w-0 py-4">
<h1 class="text-base capitalize font-weight-bold tracking-[0.5px] mb-0 nc-workspace-title truncate min-w-10 capitalize">
<span class="text-gray-500">{{ currentWorkspace?.title }} ></span> {{ $t('title.teamAndSettings') }}
</h1>
</div>
<div v-else>
<div class="font-bold w-full !mb-5 text-2xl" data-rec="true">
<div class="flex items-center gap-3">
<NuxtLink
:href="`/admin/${orgId}/workspaces`"
class="!hover:(text-black underline-gray-600) flex items-center !text-black !underline-transparent ml-0.75 max-w-1/4"
>
<component :is="iconMap.arrowLeft" class="text-3xl" />
{{ $t('labels.workspaces') }}
</NuxtLink>
<span class="text-2xl"> / </span>
<GeneralWorkspaceIcon :workspace="currentWorkspace" hide-label />
<span class="text-base capitalize">
{{ currentWorkspace?.title }}
</span>
<div v-if="currentWorkspace" class="flex w-full max-w-[97.5rem] flex-col nc-workspace-settings">
<div v-if="!props.workspaceId" class="min-w-0 pt-2 px-2">
<div class="nc-breadcrumb nc-workspace-title">
<div class="nc-breadcrumb-item capitalize">
{{ currentWorkspace?.title }}
</div>
<GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
<h1 class="nc-breadcrumb-item active">
{{ $t('title.teamAndSettings') }}
</h1>
</div>
</div>
<template v-else>
<div class="nc-breadcrumb px-2">
<div class="nc-breadcrumb-item">
{{ org.title }}
</div>
<GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
<NuxtLink
:href="`/admin/${orgId}/workspaces`"
class="!hover:(text-gray-800 underline-gray-600) flex items-center !text-gray-700 !underline-transparent ml-0.75 max-w-1/4"
>
<div class="nc-breadcrumb-item">
{{ $t('labels.workspaces') }}
</div>
</NuxtLink>
<GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
<div class="nc-breadcrumb-item active truncate capitalize">
{{ currentWorkspace?.title }}
</div>
</div>
<NcPageHeader>
<template #icon>
<div class="flex justify-center items-center h-6 w-6">
<GeneralWorkspaceIcon :workspace="currentWorkspace" hide-label size="small" />
</div>
</template>
<template #title>
<span data-rec="true" class="capitalize">
{{ currentWorkspace?.title }}
</span>
</template>
</NcPageHeader>
</template>
<NcTabs v-model:activeKey="tab">
<template #leftExtra>
<div class="w-3"></div>
</template>
<template v-if="isUIAllowed('workspaceSettings')">
<a-tab-pane key="collaborators" class="w-full">
<template #tab>
<div class="flex flex-row items-center pb-1 gap-x-1.5">
<div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5">
<GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
Members
</div>
@@ -111,7 +135,7 @@ onMounted(() => {
<template v-if="isUIAllowed('workspaceManage')">
<a-tab-pane key="settings" class="w-full">
<template #tab>
<div class="flex flex-row items-center pb-1 gap-x-1.5" data-testid="nc-workspace-settings-tab-settings">
<div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5" data-testid="nc-workspace-settings-tab-settings">
<GeneralIcon icon="settings" />
Settings
</div>
@@ -123,12 +147,12 @@ onMounted(() => {
<template v-if="isUIAllowed('workspaceAuditList') && !props.workspaceId">
<a-tab-pane key="audit" class="w-full">
<template #tab>
<div class="flex flex-row items-center pb-1 gap-x-1.5">
<div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5">
<GeneralIcon icon="audit" class="!h-3.5 !w-3.5" />
Audit Logs
</div>
</template>
<div class="h-[calc(100vh-92px)]">
<div class="h-[calc(100vh-92px)] px-6">
<WorkspaceAuditLogs :workspace-id="currentWorkspace.id" />
</div>
</a-tab-pane>
@@ -139,7 +163,7 @@ onMounted(() => {
<style lang="scss" scoped>
.nc-workspace-avatar {
@apply min-w-6 h-6 rounded-[6px] flex items-center justify-center text-white font-weight-bold uppercase;
@apply min-w-5 h-5 w-5 rounded-[6px] flex items-center justify-center text-white font-weight-bold uppercase;
font-size: 0.7rem;
}