binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[PWA-17] chore: project view list header improvement (#5425)

Browse source 
* chore: project view list header improvement

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-08-28 14:31:27 +05:30 • committed by GitHub
parent 7efda1c392
commit 59697d34f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 93 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx
View file

@ -3,11 +3,12 @@
import { AppHeader, ContentWrapper } from "@/components/core";
// local components
import { ProjectViewsHeader } from "./header";
import { ViewMobileHeader } from "./mobile-header";
export default function ProjectViewsListLayout({ children }: { children: React.ReactNode }) {
return (
<>
<AppHeader header={<ProjectViewsHeader />} />
<AppHeader header={<ProjectViewsHeader />} mobileHeader={<ViewMobileHeader />} />
<ContentWrapper>{children}</ContentWrapper>
</>
);

57
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx Normal file
View file

@ -0,0 +1,57 @@
"use client";
import { observer } from "mobx-react";
// icons
import { ChevronDown, ListFilter } from "lucide-react";
// components
import { FiltersDropdown } from "@/components/issues/issue-layouts";
import { ViewFiltersSelection } from "@/components/views/filters/filter-selection";
import { ViewOrderByDropdown } from "@/components/views/filters/order-by";
// hooks
import { useMember, useProjectView } from "@/hooks/store";
export const ViewMobileHeader = observer(() => {
// store hooks
const { filters, updateFilters } = useProjectView();
const {
project: { projectMemberIds },
} = useMember();
return (
<>
<div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
<div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
<ViewOrderByDropdown
sortBy={filters.sortBy}
sortKey={filters.sortKey}
onChange={(val) => {
if (val.key) updateFilters("sortKey", val.key);
if (val.order) updateFilters("sortBy", val.order);
}}
isMobile
/>
</div>
<div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
<FiltersDropdown
icon={<ListFilter className="h-3 w-3" />}
title="Filters"
placement="bottom-end"
isFiltersApplied={false}
menuButton={
<span className="flex items-center text-sm text-custom-text-200">
Filters
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
</span>
}
>
<ViewFiltersSelection
filters={filters}
handleFiltersUpdate={updateFilters}
memberIds={projectMemberIds ?? undefined}
/>
</FiltersDropdown>
</div>
</div>
</>
);
});

21
web/core/components/views/filters/order-by.tsx
View file

@ -7,17 +7,16 @@ import { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
import { CustomMenu, getButtonStyling } from "@plane/ui";
// constants
import { VIEW_SORTING_KEY_OPTIONS } from "@/constants/views";
// helpers
import { cn } from "@/helpers/common.helper";
type Props = {
onChange: (value: { key?: TViewFiltersSortKey; order?: TViewFiltersSortBy }) => void;
sortBy: TViewFiltersSortBy;
sortKey: TViewFiltersSortKey;
isMobile?: boolean;
};
export const ViewOrderByDropdown: React.FC<Props> = (props) => {
const { onChange, sortBy, sortKey } = props;
const { onChange, sortBy, sortKey, isMobile = false } = props;
const orderByDetails = VIEW_SORTING_KEY_OPTIONS.find((option) => sortKey === option.key);
const isDescending = sortBy === "desc";
@ -27,14 +26,20 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
{ key: "desc", label: "Descending", isSelected: isDescending },
];
const buttonClassName = isMobile
? "flex items-center text-sm text-custom-text-200"
: `${getButtonStyling("neutral-primary", "sm")} px-2 text-custom-text-300`;
const chevronClassName = isMobile ? "h-4 w-4 text-custom-text-200" : "h-3 w-3";
return (
<CustomMenu
customButton={
<div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
<ArrowDownWideNarrow className="h-3 w-3" />
{orderByDetails?.label}
<ChevronDown className="h-3 w-3" strokeWidth={2} />
</div>
<span className={buttonClassName}>
{!isMobile && <ArrowDownWideNarrow className="h-3 w-3" />}
<span className="flex-shrink-0"> {orderByDetails?.label}</span>
<ChevronDown className={chevronClassName} strokeWidth={2} />
</span>
}
placement="bottom-end"
maxHeight="lg"

40
web/core/components/views/view-list-header.tsx
View file

@ -89,26 +89,28 @@ export const ViewListHeader = observer(() => {
)}
</div>
</div>
<ViewOrderByDropdown
sortBy={filters.sortBy}
sortKey={filters.sortKey}
onChange={(val) => {
if (val.key) updateFilters("sortKey", val.key);
if (val.order) updateFilters("sortBy", val.order);
}}
/>
<FiltersDropdown
icon={<ListFilter className="h-3 w-3" />}
title="Filters"
placement="bottom-end"
isFiltersApplied={false}
>
<ViewFiltersSelection
filters={filters}
handleFiltersUpdate={updateFilters}
memberIds={projectMemberIds ?? undefined}
<div className="hidden md:flex items-center gap-2">
<ViewOrderByDropdown
sortBy={filters.sortBy}
sortKey={filters.sortKey}
onChange={(val) => {
if (val.key) updateFilters("sortKey", val.key);
if (val.order) updateFilters("sortBy", val.order);
}}
/>
</FiltersDropdown>
<FiltersDropdown
icon={<ListFilter className="h-3 w-3" />}
title="Filters"
placement="bottom-end"
isFiltersApplied={false}
>
<ViewFiltersSelection
filters={filters}
handleFiltersUpdate={updateFilters}
memberIds={projectMemberIds ?? undefined}
/>
</FiltersDropdown>
</div>
</div>
);
});