Update TaskProgressCircle to visually indicate task completion
- Changed the stroke color of the progress circle to green when progress reaches 100%. - Added a green checkmark icon for completed tasks, enhancing visual feedback. - Retained progress percentage display for tasks that are not yet complete, ensuring clarity in task status.
This commit is contained in:
@@ -16,7 +16,7 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke="#3b82f6"
|
||||
stroke={progress === 100 ? "#22c55e" : "#3b82f6"}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
strokeDasharray={circumference}
|
||||
@@ -24,7 +24,16 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
|
||||
strokeLinecap="round"
|
||||
style={{ transition: 'stroke-dashoffset 0.3s' }}
|
||||
/>
|
||||
{task.complete_ratio && <text
|
||||
{progress === 100 ? (
|
||||
// Green checkmark icon
|
||||
<g>
|
||||
<circle cx={size / 2} cy={size / 2} r={radius} fill="#22c55e" opacity="0.15" />
|
||||
<svg x={(size/2)-(size*0.22)} y={(size/2)-(size*0.22)} width={size*0.44} height={size*0.44} viewBox="0 0 24 24">
|
||||
<path d="M5 13l4 4L19 7" stroke="#22c55e" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</g>
|
||||
) : progress > 0 && (
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
@@ -34,7 +43,8 @@ const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ t
|
||||
fontWeight="bold"
|
||||
>
|
||||
{Math.round(progress)}
|
||||
</text>}
|
||||
</text>
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user