jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(rflows): rename progress bar to Repayment Progress, make it minimizable 

- Timeline bar now shows "Repayment Progress" label
- Added minimize button (─/▶) to collapse the bar to a compact toggle
- When minimized, hides the track, label, and tick counter

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-16 01:15:26 +00:00
parent 039e3c8f8a
commit 7e430490ba
2 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
modules/rflows/components/flows.css
View File

@ -898,7 +898,16 @@
position: absolute; bottom: 36px; left: 10px; right: 80px; z-index: 10; position: absolute; bottom: 36px; left: 10px; right: 80px; z-index: 10;
align-items: center; gap: 8px; align-items: center; gap: 8px;
background: var(--rs-glass-bg); border-radius: 6px; padding: 4px 10px; background: var(--rs-glass-bg); border-radius: 6px; padding: 4px 10px;
transition: all 0.25s ease;
} }
.flows-timeline__label {
font-size: 10px; font-weight: 600; color: var(--rs-text-secondary); white-space: nowrap;
}
.flows-timeline__minimize {
background: none; border: none; color: var(--rs-text-secondary); cursor: pointer;
font-size: 12px; padding: 0 4px; line-height: 1;
}
.flows-timeline__minimize:hover { color: var(--rs-text-primary); }
.flows-timeline__track { .flows-timeline__track {
flex: 1; height: 4px; background: var(--rs-border-strong); border-radius: 2px; overflow: hidden; flex: 1; height: 4px; background: var(--rs-border-strong); border-radius: 2px; overflow: hidden;
} }
@ -909,6 +918,14 @@
.flows-timeline__tick { .flows-timeline__tick {
font-size: 10px; color: var(--rs-text-secondary); white-space: nowrap; min-width: 50px; font-size: 10px; color: var(--rs-text-secondary); white-space: nowrap; min-width: 50px;
} }
.flows-timeline.minimized {
right: auto; width: auto; padding: 4px 8px; gap: 4px;
}
.flows-timeline.minimized .flows-timeline__label,
.flows-timeline.minimized .flows-timeline__track,
.flows-timeline.minimized .flows-timeline__tick {
display: none;
}
/* Overflow splash animation */ /* Overflow splash animation */
.edge-splash { pointer-events: none; } .edge-splash { pointer-events: none; }

14
modules/rflows/components/folk-flows-app.ts
View File

@ -1087,6 +1087,8 @@ class FolkFlowsApp extends HTMLElement {
<span class="flows-speed-label" id="sim-speed-label">${this.simSpeedMs}ms</span> <span class="flows-speed-label" id="sim-speed-label">${this.simSpeedMs}ms</span>
</div> </div>
<div class="flows-timeline" id="sim-timeline" style="display:${this.isSimulating ? "flex" : "none"}"> <div class="flows-timeline" id="sim-timeline" style="display:${this.isSimulating ? "flex" : "none"}">
<button class="flows-timeline__minimize" id="timeline-minimize">─</button>
<span class="flows-timeline__label">Repayment Progress</span>
<div class="flows-timeline__track"> <div class="flows-timeline__track">
<div class="flows-timeline__fill" id="timeline-fill" style="width:0%"></div> <div class="flows-timeline__fill" id="timeline-fill" style="width:0%"></div>
</div> </div>
@ -1635,6 +1637,18 @@ class FolkFlowsApp extends HTMLElement {
}); });
} }
// Timeline minimize
const timelineMin = this.shadow.getElementById("timeline-minimize");
if (timelineMin) {
timelineMin.addEventListener("click", () => {
const timeline = this.shadow.getElementById("sim-timeline");
if (timeline) {
const isMin = timeline.classList.toggle("minimized");
timelineMin.textContent = isMin ? "▶" : "─";
}
});
}
// Edge layer — edge selection + drag handles // Edge layer — edge selection + drag handles
const edgeLayer = this.shadow.getElementById("edge-layer"); const edgeLayer = this.shadow.getElementById("edge-layer");
if (edgeLayer) { if (edgeLayer) {