cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-16 04:43:35 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

fix(ui): improve progress bar with local interpolation

Browse Source 
Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
This commit is contained in:
Claude
2026-07-13 15:40:23 +00:00
committed by Carlos Valente
parent f39892dc6e
commit 2e631194e1
8 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss
-2
View File
@@ -38,8 +38,6 @@ $progress-bar-br: 3px;
.multiprogress-bar__indicator-bar {
background-color: var(--background-color-override, $ui-black);
opacity: 0.8;
transition: 1s linear;
transition-property: width;
.multiprogress-bar--ignore-css-override & {
background-color: $ui-black;
apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import { MaybeNumber } from 'ontime-types';
import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
import { getProgress } from '../../utils/getProgress';
import { cx } from '../../utils/styleUtils';
@@ -34,7 +35,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
className = '',
} = props;
const percentRemaining = 100 - getProgress(now, complete);
const percentRemaining = 100 - useAnimatedProgress(now, complete);
const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
const isOvertime = now !== null && now < 0;
apps/client/src/common/components/progress-bar/ProgressBar.scss
-2
View File
@@ -14,6 +14,4 @@ $progress-bar-br: 3px;
.progress-bar__indicator {
height: $progress-bar-size;
background-color: var(--timer-progress-override, $accent-color);
transition: 1s linear;
transition-property: width;
}
apps/client/src/common/components/progress-bar/ProgressBar.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { MaybeNumber } from 'ontime-types';
import { getProgress } from '../../utils/getProgress';
import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
import './ProgressBar.scss';
@@ -12,7 +12,7 @@ interface ProgressBarProps {
export default function ProgressBar(props: ProgressBarProps) {
const { current, duration, className } = props;
const progress = getProgress(current, duration);
const progress = useAnimatedProgress(current, duration);
return (
<div className={`progress-bar__bg ${className}`}>