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

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>
);
});