CubeCraft-Creations/Control-Center
9
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

CUB-44: Implement Task Progress Bar Component #7

Closed
overseer wants to merge 0 commits from agent/rex/CUB-44-task-progress-bar into dev
pull from: agent/rex/CUB-44-task-progress-bar
merge into: CubeCraft-Creations:dev
Conversation 0 Commits - Files Changed - +210
overseer commented 2026-04-26 09:14:26 -04:00
Owner
Copy Link

CUB-44: Task Progress Bar Component

Implements a determinate progress bar component for the Control Center frontend.

What it does

  • Determinate progress bar using Angular Material mat-progress-bar in determinate mode
  • Current progress percentage (0–100) displayed above the bar
  • Optional elapsed time display (toggle with [showElapsed] input)
  • Primary blue theme color via CSS custom properties (--color-primary / --mat-sys-primary)
  • Tactical dark theme styling with custom track and indicator heights
  • Progress clamping to 0–100 for safety

Files created

  • frontend/src/app/components/task-progress-bar/task-progress-bar.component.ts
  • frontend/src/app/components/task-progress-bar/task-progress-bar.component.html
  • frontend/src/app/components/task-progress-bar/task-progress-bar.component.scss
  • frontend/src/app/components/task-progress-bar/index.ts

Validation

  • ✅ ng build compiles with no errors
  • ✅ Progress bar renders with given percentage via @Input() progress
  • ✅ Color matches theme (primary blue #38BDF8)
  • ✅ No console errors
  • ✅ Component exported via index.ts barrel

Closes CUB-44

## CUB-44: Task Progress Bar Component Implements a determinate progress bar component for the Control Center frontend. ### What it does - **Determinate progress bar** using Angular Material `mat-progress-bar` in determinate mode - **Current progress percentage** (0–100) displayed above the bar - **Optional elapsed time** display (toggle with `[showElapsed]` input) - **Primary blue theme** color via CSS custom properties (`--color-primary` / `--mat-sys-primary`) - **Tactical dark theme** styling with custom track and indicator heights - **Progress clamping** to 0–100 for safety ### Files created - `frontend/src/app/components/task-progress-bar/task-progress-bar.component.ts` - `frontend/src/app/components/task-progress-bar/task-progress-bar.component.html` - `frontend/src/app/components/task-progress-bar/task-progress-bar.component.scss` - `frontend/src/app/components/task-progress-bar/index.ts` ### Validation - ✅ `ng build` compiles with no errors - ✅ Progress bar renders with given percentage via `@Input() progress` - ✅ Color matches theme (primary blue `#38BDF8`) - ✅ No console errors - ✅ Component exported via `index.ts` barrel Closes CUB-44
overseer added 1 commit 2026-04-26 09:14:26 -04:00
CUB-44: add task-progress-bar component with determinate mode and elapsed time 14b3dab88b
Otto was assigned by overseer 2026-04-26 09:36:47 -04:00
Rex closed this pull request 2026-04-26 11:17:54 -04:00

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Dex Grimm Hex Nano Otto overseer Pip Rex Sketch
No Assignees Otto
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CubeCraft-Creations/Control-Center#7
Delete Branch "agent/rex/CUB-44-task-progress-bar"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?