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

Standarding priority icons across the platform (#2776)

Browse source
This commit is contained in:
Ankush Deshmukh 2023-11-14 20:52:43 +05:30 • committed by sriram veeraghanta
parent 002dc7a5f3
commit 2d1536e44d
7 changed files with 46 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

48
web/components/issues/issue-layouts/filters/header/filters/priority.tsx
View file

@ -1,53 +1,15 @@
import React, { useState } from "react";
import { observer } from "mobx-react-lite";
// ui
import { PriorityIcon } from "@plane/ui";
// components
import { FilterHeader, FilterOption } from "components/issues";
// icons
import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
// constants
import { ISSUE_PRIORITIES } from "constants/issue";
const PriorityIcons = ({
priority,
size = 12,
strokeWidth = 1.5,
}: {
priority: string;
size?: number;
strokeWidth?: number;
}) => {
if (priority === "urgent")
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-red-500 bg-red-500 text-white flex justify-center items-center">
<AlertCircle size={size} strokeWidth={strokeWidth} />
</div>
);
if (priority === "high")
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-red-500 flex justify-center items-center pl-1">
<SignalHigh size={size} strokeWidth={strokeWidth} />
</div>
);
if (priority === "medium")
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-orange-500 flex justify-center items-center pl-1">
<SignalMedium size={size} strokeWidth={strokeWidth} />
</div>
);
if (priority === "low")
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-green-500 flex justify-center items-center pl-1">
<SignalLow size={size} strokeWidth={strokeWidth} />
</div>
);
return (
<div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-custom-text-400 flex justify-center items-center">
<Ban size={size} strokeWidth={strokeWidth} />
</div>
);
};
type Props = {
appliedFilters: string[] | null;
handleUpdate: (val: string) => void;
@ -78,7 +40,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
key={priority.key}
isChecked={appliedFilters?.includes(priority.key) ? true : false}
onClick={() => handleUpdate(priority.key)}
icon={<PriorityIcons priority={priority.key} />}
icon={<PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />}
title={priority.title}
/>
))

33
web/components/issues/issue-layouts/kanban/headers/priority.tsx
View file

@ -5,6 +5,9 @@ import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-re
import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
// Icons
import { PriorityIcon } from "@plane/ui";
export interface IPriorityHeader {
column_id: string;
column_value: any;
@ -16,32 +19,6 @@ export interface IPriorityHeader {
handleKanBanToggle: any;
}
const Icon = ({ priority }: any) => (
<div className="w-full h-full">
{priority === "urgent" ? (
<div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
<AlertCircle size={14} strokeWidth={2} />
</div>
) : priority === "high" ? (
<div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
<SignalHigh size={14} strokeWidth={2} className="pl-[3px]" />
</div>
) : priority === "medium" ? (
<div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
<SignalMedium size={14} strokeWidth={2} className="pl-[3px]" />
</div>
) : priority === "low" ? (
<div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
<SignalLow size={14} strokeWidth={2} className="pl-[3px]" />
</div>
) : (
<div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
<Ban size={14} strokeWidth={2} />
</div>
)}
</div>
);
export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
const {
column_id,
@ -62,7 +39,7 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
(sub_group_by && header_type === "sub_group_by" ? (
<HeaderSubGroupByCard
column_id={column_id}
icon={<Icon priority={priority?.key} />}
icon={<PriorityIcon priority={priority?.key} />}
title={priority?.title || ""}
count={issues_count}
kanBanToggle={kanBanToggle}
@ -73,7 +50,7 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
sub_group_by={sub_group_by}
group_by={group_by}
column_id={column_id}
icon={<Icon priority={priority?.key} />}
icon={<PriorityIcon priority={priority?.key} />}
title={priority?.title || ""}
count={issues_count}
kanBanToggle={kanBanToggle}