apps/mapix
4
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

feat: clarify timeline selection states

Browse Source
This commit is contained in:
Arne Baeumler
2026-06-13 08:32:30 +02:00
parent 8eec2d4ca4
commit 0ea9e4310f
2 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/app.ts
View File

@@ -770,12 +770,14 @@ function updateTimelineBrushOverlay(startX, endX) {
const leftX = clamp(Math.min(startX, endX), 0, width);
const rightX = clamp(Math.max(startX, endX), 0, width);
timelineChart.classList.add("selecting");
timelineBrush.classList.add("visible");
timelineBrush.style.left = leftX + "px";
timelineBrush.style.width = Math.max(1, rightX - leftX) + "px";
}
function clearTimelineBrushOverlay() {
timelineChart.classList.remove("selecting");
timelineBrush.classList.remove("visible");
timelineBrush.style.left = "0";
timelineBrush.style.width = "0";

24
src/server/app-assets.ts
View File

@@ -54,10 +54,10 @@ export const APP_STYLES = ` :root {
--timeline-axis-color: rgba(148, 163, 184, 0.5);
--timeline-axis-label: #d1d5db;
--timeline-meta: rgba(209, 213, 219, 0.72);
--timeline-selection-border: rgba(148, 163, 184, 0.34);
--timeline-selection-bg: rgba(148, 163, 184, 0.08);
--timeline-brush-border: rgba(148, 163, 184, 0.56);
--timeline-brush-bg: rgba(148, 163, 184, 0.14);
--timeline-selection-border: rgba(191, 219, 254, 0.36);
--timeline-selection-bg: rgba(148, 163, 184, 0.16);
--timeline-brush-border: rgba(226, 232, 240, 0.68);
--timeline-brush-bg: rgba(148, 163, 184, 0.24);
--chart-grid: rgba(255, 255, 255, 0.05);
--accent-shadow: rgba(148, 163, 184, 0.18);
--spinner-track: rgba(125, 211, 252, 0.26);
@@ -114,10 +114,10 @@ export const APP_STYLES = ` :root {
--timeline-axis-color: rgba(107, 114, 128, 0.52);
--timeline-axis-label: #303030;
--timeline-meta: rgba(48, 48, 48, 0.72);
--timeline-selection-border: rgba(107, 114, 128, 0.3);
--timeline-selection-bg: rgba(107, 114, 128, 0.08);
--timeline-brush-border: rgba(107, 114, 128, 0.52);
--timeline-brush-bg: rgba(107, 114, 128, 0.12);
--timeline-selection-border: rgba(75, 85, 99, 0.42);
--timeline-selection-bg: rgba(107, 114, 128, 0.14);
--timeline-brush-border: rgba(55, 65, 81, 0.62);
--timeline-brush-bg: rgba(107, 114, 128, 0.2);
--chart-grid: rgba(15, 23, 42, 0.06);
--accent-shadow: rgba(100, 116, 139, 0.16);
--spinner-track: rgba(96, 165, 250, 0.22);
@@ -787,6 +787,10 @@ export const APP_STYLES = ` :root {
box-shadow: none;
}
.timeline-chart.selecting {
cursor: ew-resize;
}
.timeline-selection,
.timeline-brush {
position: absolute;
@@ -802,6 +806,7 @@ export const APP_STYLES = ` :root {
.timeline-selection {
background: var(--timeline-selection-bg);
border: 1px solid var(--timeline-selection-border);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
z-index: 0;
}
@@ -812,6 +817,7 @@ export const APP_STYLES = ` :root {
.timeline-brush {
background: var(--timeline-brush-bg);
border: 1px solid var(--timeline-brush-border);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(15, 23, 42, 0.12);
z-index: 2;
}
@@ -865,6 +871,8 @@ export const APP_STYLES = ` :root {
.timeline-bar.selected .timeline-bar-fill {
background: var(--timeline-bar-fill-selected);
border-color: var(--timeline-border-strong);
box-shadow: 0 0 0 1px var(--timeline-selection-border);
}
.timeline-bar.active .timeline-bar-fill {