Add visual progress bar to task indicator
This commit is contained in:
parent
0ca955796e
commit
218781e038
1 changed files with 20 additions and 5 deletions
|
|
@ -147,14 +147,29 @@ export function TaskIndicator({ taskID, onTaskCancelled }: TaskIndicatorProps) {
|
|||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center gap-1.5 cursor-default">
|
||||
<div className="flex items-center gap-2 cursor-default">
|
||||
{getStatusIcon()}
|
||||
<span className="text-xs text-muted-foreground hidden sm:inline">
|
||||
{isInProgress ? getProgressText() : taskStatus}
|
||||
</span>
|
||||
{isInProgress && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-24 h-1.5 bg-primary/20 rounded-full overflow-hidden hidden sm:block">
|
||||
<div
|
||||
className="h-full bg-primary transition-all duration-300 ease-out rounded-full"
|
||||
style={{ width: `${Math.min(progressPercentage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground hidden sm:inline min-w-[60px]">
|
||||
{getProgressText()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{!isInProgress && (
|
||||
<span className="text-xs text-muted-foreground hidden sm:inline">
|
||||
{taskStatus}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue