[WEB-2273] Chore: header UI (#5467)

* chore: headers + common containers

* fix: filters code splitting

* fix: home header

* fix: header changes

* fix: uncommented filters

* fix: used enums

* fix: enum changes
This commit is contained in:
Akshita Goyal 2024-09-04 14:38:30 +05:30 committed by GitHub
parent 747905a96d
commit 22656d0114
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
64 changed files with 1356 additions and 1119 deletions

View file

@ -6,6 +6,7 @@ import { Plus } from "lucide-react";
// types
import { TStaticViewTypes } from "@plane/types";
// components
import { CustomHeader, EHeaderVariant } from "@plane/ui";
import {
CreateUpdateWorkspaceViewModal,
DefaultWorkspaceViewQuickActions,
@ -103,30 +104,30 @@ export const GlobalViewsHeader: React.FC = observer(() => {
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
return (
<>
<CustomHeader variant={EHeaderVariant.SECONDARY} className="flex gap-4">
<CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
<div className="group relative flex border-b border-custom-border-200">
<div
ref={containerRef}
className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm"
>
{DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
<DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
))}
<div
ref={containerRef}
className="flex h-full w-full items-center overflow-x-auto horizontal-scrollbar scrollbar-sm"
>
{DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
<DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
))}
{currentWorkspaceViews?.map((viewId) => <ViewTab key={viewId} viewId={viewId} />)}
</div>
{isAuthorizedUser && (
<button
type="button"
className="sticky -right-4 flex w-12 flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
onClick={() => setCreateViewModal(true)}
>
<Plus className="h-4 w-4 text-custom-primary-200" />
</button>
)}
{currentWorkspaceViews?.map((viewId) => <ViewTab key={viewId} viewId={viewId} />)}
</div>
</>
{isAuthorizedUser ? (
<button
type="button"
className="sticky -right-4 flex flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
onClick={() => setCreateViewModal(true)}
>
<Plus className="h-4 w-4 text-custom-primary-200" />
</button>
) : (
<></>
)}
</CustomHeader>
);
});