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

chore: project active cycle and linear progress indicator improvement (#3504)

Browse source 
* chore: linear progress indicator improvement

* chore: project active cycle improvement
This commit is contained in:
Anmol Singh Bhatia 2024-01-30 13:59:49 +05:30 • committed by GitHub
parent ef8472ce5e
commit d53a086206
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

25
packages/ui/src/progress/linear-progress-indicator.tsx
View file

@ -1,13 +1,20 @@
import React from "react"; import React from "react";
import { Tooltip } from "../tooltip"; import { Tooltip } from "../tooltip";
import { cn } from "../../helpers";
type Props = { type Props = {
data: any; data: any;
noTooltip?: boolean; noTooltip?: boolean;
inPercentage?: boolean; inPercentage?: boolean;
size?: "sm" | "md" | "lg";
}; };
export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = false, inPercentage = false }) => { export const LinearProgressIndicator: React.FC<Props> = ({
data,
noTooltip = false,
inPercentage = false,
size = "sm",
}) => {
const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0); const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
let progress = 0; let progress = 0;
@ -23,18 +30,24 @@ export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = fal
if (noTooltip) return <div style={style} />; if (noTooltip) return <div style={style} />;
else else
return ( return (
<Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}%`}> <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}${inPercentage ? "%" : ""}`}>
<div style={style} className="first:rounded-l-full last:rounded-r-full" /> <div style={style} className="first:rounded-l-sm last:rounded-r-sm" />
</Tooltip> </Tooltip>
); );
}); });
return ( return (
<div className="flex h-1 w-full items-center justify-between gap-1"> <div
className={cn("flex w-full items-center justify-between gap-[1px] rounded-sm", {
"h-2": size === "sm",
"h-3": size === "md",
"h-3.5": size === "lg",
})}
>
{total === 0 ? ( {total === 0 ? (
<div className="flex h-full w-full gap-1 bg-neutral-500">{bars}</div> <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
) : ( ) : (
<div className="flex h-full w-full gap-1">{bars}</div> <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
)} )}
</div> </div>
); );

4
web/components/cycles/active-cycle-details.tsx
View file

@ -165,7 +165,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
<h3 className="break-words text-lg font-semibold">{truncateText(activeCycle.name, 70)}</h3> <h3 className="break-words text-lg font-semibold">{truncateText(activeCycle.name, 70)}</h3>
</Tooltip> </Tooltip>
</span> </span>
<span className="flex items-center gap-1 capitalize"> <span className="flex items-center gap-1">
<span className="flex gap-1 whitespace-nowrap rounded-sm text-sm px-3 py-0.5 bg-amber-500/10 text-amber-500"> <span className="flex gap-1 whitespace-nowrap rounded-sm text-sm px-3 py-0.5 bg-amber-500/10 text-amber-500">
{`${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`} {`${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`}
</span> </span>
@ -255,7 +255,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
<div className="flex h-full w-full flex-col p-4 text-custom-text-200"> <div className="flex h-full w-full flex-col p-4 text-custom-text-200">
<div className="flex w-full items-center gap-2 py-1"> <div className="flex w-full items-center gap-2 py-1">
<span>Progress</span> <span>Progress</span>
<LinearProgressIndicator data={progressIndicatorData} inPercentage /> <LinearProgressIndicator size="md" data={progressIndicatorData} inPercentage />
</div> </div>
<div className="mt-2 flex flex-col items-center gap-1"> <div className="mt-2 flex flex-col items-center gap-1">
{Object.keys(groupedIssues).map((group, index) => ( {Object.keys(groupedIssues).map((group, index) => (