fix: refine floating workspace controls
Keep ScaleInfo pinned to the map corner and move the centered timeline above collisions, preventing the previous conditional offset from lifting the scale. Remove collapsed Agent rail width reservation and add timeline state transitions.
This commit is contained in:
@@ -32,7 +32,6 @@ import {
|
||||
} from "@/features/map/core";
|
||||
import { env } from "@/shared/config/env";
|
||||
import type { AccessTokenProvider } from "@/shared/auth/keycloak-auth";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
import { AgentTaskTicker } from "./components/agent-task-ticker";
|
||||
import { MapDevPanel } from "./components/map-dev-panel";
|
||||
import { MobileWorkbenchSheet } from "./components/mobile-workbench-sheet";
|
||||
@@ -41,10 +40,10 @@ import { ScheduledConditionFeed } from "./components/scheduled-condition-feed";
|
||||
import { WorkbenchAgentPanels } from "./components/workbench-agent-panels";
|
||||
import { OperationalTimeline } from "./operational-timeline/operational-timeline";
|
||||
import {
|
||||
canDockMapScaleBesideTimeline,
|
||||
createOperationalEvents,
|
||||
getOperationalEventSummary,
|
||||
OPERATIONAL_TIMELINE_LAYOUT,
|
||||
resolveTimelineScaleLayout,
|
||||
type OperationalEvent,
|
||||
type OperationalTimelineMode
|
||||
} from "./operational-timeline/operational-timeline-model";
|
||||
@@ -216,11 +215,14 @@ export function MapWorkbenchPage({
|
||||
() => getOperationalEventSummary(operationalEvents),
|
||||
[operationalEvents]
|
||||
);
|
||||
const scaleInfoBesideTimeline = canDockMapScaleBesideTimeline(
|
||||
const timelineScaleLayout = resolveTimelineScaleLayout(
|
||||
businessWorkspaceWidth,
|
||||
timelineMode,
|
||||
timelineVisible
|
||||
);
|
||||
const timelineBottom = isLargeScreen
|
||||
? timelineScaleLayout.timelineBottom
|
||||
: 12;
|
||||
|
||||
useEffect(() => {
|
||||
setTimelineMode((current) => {
|
||||
@@ -927,8 +929,8 @@ export function MapWorkbenchPage({
|
||||
!timelineVisible
|
||||
? 0
|
||||
: !isLargeScreen
|
||||
? OPERATIONAL_TIMELINE_LAYOUT.mobileSummaryHeight
|
||||
: OPERATIONAL_TIMELINE_LAYOUT[timelineMode].height
|
||||
? OPERATIONAL_TIMELINE_LAYOUT.mobileSummaryHeight + timelineBottom
|
||||
: OPERATIONAL_TIMELINE_LAYOUT[timelineMode].height + timelineBottom
|
||||
}px`
|
||||
} as CSSProperties
|
||||
}
|
||||
@@ -975,7 +977,7 @@ export function MapWorkbenchPage({
|
||||
onCollapseArtifact={artifactWorkspace.collapseArtifact}
|
||||
onDestroyArtifact={artifactWorkspace.destroyArtifact}
|
||||
timelineMode={timelineMode}
|
||||
reserveMapScaleSpace={scaleInfoBesideTimeline}
|
||||
timelineBottom={timelineBottom}
|
||||
timelineContent={(
|
||||
timelineVisible ? <>
|
||||
<div className="hidden lg:block">
|
||||
@@ -1022,17 +1024,17 @@ export function MapWorkbenchPage({
|
||||
<ToolbarPanel {...toolbarPanelProps} />
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute right-0 flex flex-col items-end gap-2",
|
||||
scaleInfoBesideTimeline
|
||||
? "bottom-3"
|
||||
: "bottom-[calc(var(--workbench-timeline-height)+1rem)]"
|
||||
)}
|
||||
className="absolute bottom-0 right-0 flex flex-col items-end gap-2"
|
||||
style={{ bottom: timelineScaleLayout.scaleBottom }}
|
||||
>
|
||||
<div className="flex items-end gap-2 pr-2">
|
||||
<MapZoom mapRef={mapRef} mapReady={mapReady} onHome={fitNetworkBounds} />
|
||||
</div>
|
||||
<MapScaleLine mapRef={mapRef} mapReady={mapReady} />
|
||||
<MapScaleLine
|
||||
className="hidden lg:inline-flex"
|
||||
mapRef={mapRef}
|
||||
mapReady={mapReady}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user