mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-01-30 18:29:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-3759]chore: updated module and pages detail header (#6903)

Browse Source 
* chore: added panel collapse and quick action menu for module detail header

* fix: updated pages header swithcer
This commit is contained in:
Vamsi Krishna
2025-04-09 19:36:15 +05:30
committed by GitHub
parent b738e39a4a
commit 14914e8716
2 changed files with 37 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
View File

@@ -1,11 +1,11 @@
"use client";
import { useCallback, useState } from "react";
import { useCallback, useRef, useState } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { useParams } from "next/navigation";
// icons
import { ArrowRight, PanelRight } from "lucide-react";
import { PanelRight } from "lucide-react";
// plane constants
import {
EIssueLayoutTypes,
@@ -23,15 +23,15 @@ import {
IIssueFilterOptions,
} from "@plane/types";
// ui
import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip, Header, CustomSearchSelect } from "@plane/ui";
import { Breadcrumbs, Button, DiceIcon, Tooltip, Header, CustomSearchSelect } from "@plane/ui";
// components
import { ProjectAnalyticsModal } from "@/components/analytics";
import { BreadcrumbLink, SwitcherLabel } from "@/components/common";
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
// helpers
import { ModuleQuickActions } from "@/components/modules";
import { cn } from "@/helpers/common.helper";
import { isIssueFilterActive } from "@/helpers/filter.helper";
import { truncateText } from "@/helpers/string.helper";
// hooks
import {
useEventTracker,
@@ -51,30 +51,9 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
// plane web
import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => {
// router
const { workspaceSlug, projectId } = useParams();
// store hooks
const { getModuleById } = useModule();
// derived values
const moduleDetail = getModuleById(moduleId);
if (!moduleDetail) return null;
return (
<CustomMenu.MenuItem key={moduleDetail.id}>
<Link
href={`/${workspaceSlug}/projects/${projectId}/modules/${moduleDetail.id}`}
className="flex items-center gap-1.5"
>
<DiceIcon className="h-3 w-3" />
{truncateText(moduleDetail.name, 40)}
</Link>
</CustomMenu.MenuItem>
);
};
export const ModuleIssuesHeader: React.FC = observer(() => {
// refs
const parentRef = useRef<HTMLDivElement>(null);
// states
const [analyticsModal, setAnalyticsModal] = useState(false);
// router
@@ -320,14 +299,18 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
)}
<button
type="button"
className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
className="p-1 rounded outline-none hover:bg-custom-sidebar-background-80 bg-custom-background-80/70"
onClick={toggleSidebar}
>
<ArrowRight className={`hidden h-4 w-4 duration-300 md:block ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
<PanelRight
className={cn("block h-4 w-4 md:hidden", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")}
/>
<PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
</button>
<ModuleQuickActions
parentRef={parentRef}
moduleId={moduleId?.toString()}
projectId={projectId.toString()}
workspaceSlug={workspaceSlug.toString()}
customClassName="flex-shrink-0 flex items-center justify-center size-6 bg-custom-background-80/70 rounded"
/>
</Header.RightItem>
</Header>
</>

28
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
View File

@@ -2,9 +2,10 @@
import { observer } from "mobx-react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { FileText, Layers } from "lucide-react";
import { ArchiveIcon, Earth, FileText, Lock } from "lucide-react";
// types
import { ICustomSearchSelectOption } from "@plane/types";
import { EPageAccess } from "@plane/constants";
import { ICustomSearchSelectOption, TPage } from "@plane/types";
// ui
import { Breadcrumbs, Header, CustomSearchSelect } from "@plane/ui";
// components
@@ -19,6 +20,18 @@ import { PageDetailsHeaderExtraActions } from "@/plane-web/components/pages";
// plane web hooks
import { EPageStoreType, usePage, usePageStore } from "@/plane-web/hooks/store";
const PageAccessIcon = (page: TPage) => (
<div>
{page.archived_at ? (
<ArchiveIcon className="h-2.5 w-2.5 text-custom-text-300" />
) : page.access === EPageAccess.PUBLIC ? (
<Earth className="h-2.5 w-2.5 text-custom-text-300" />
) : (
<Lock className="h-2.5 w-2.5 text-custom-text-300" />
)}
</div>
);
export interface IPagesHeaderProps {
showButton?: boolean;
}
@@ -46,9 +59,12 @@ export const PageDetailsHeader = observer(() => {
value: _page.id,
query: _page.name,
content: (
<Link href={pageLink} className="flex gap-2 items-center justify-between">
<SwitcherLabel logo_props={_page.logo_props} name={_page.name} LabelIcon={Layers} />
</Link>
<div className="flex gap-2 items-center justify-between">
<Link href={pageLink} className="flex gap-2 items-center justify-between w-full">
<SwitcherLabel logo_props={_page.logo_props} name={_page.name} LabelIcon={FileText} />
</Link>
<PageAccessIcon {..._page} />
</div>
),
};
})
@@ -94,7 +110,7 @@ export const PageDetailsHeader = observer(() => {
<CustomSearchSelect
value={pageId}
options={switcherOptions}
label={<SwitcherLabel logo_props={page.logo_props} name={page.name} LabelIcon={Layers} />}
label={<SwitcherLabel logo_props={page.logo_props} name={page.name} LabelIcon={FileText} />}
onChange={() => {}}
/>
}