trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #604 from trails-cool/feat/planner-colormode-select

Browse source 
feat(planner): restyle color-mode selector + chart header on tokens
This commit is contained in:
Ullrich Schäfer 2026-07-16 01:07:11 +02:00 • committed by GitHub
commit d2d2d057cd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

17
apps/planner/app/components/ElevationChart.tsx
View file

@ -14,6 +14,7 @@ import {
} from "@trails-cool/map-core"; } from "@trails-cool/map-core";
import { drawElevationChart, PADDING } from "~/lib/elevation-chart-draw"; import { drawElevationChart, PADDING } from "~/lib/elevation-chart-draw";
import { useElevationData } from "~/lib/use-elevation-data"; import { useElevationData } from "~/lib/use-elevation-data";
import { Select } from "@trails-cool/ui";
import { setColorMode, type ColorMode } from "~/lib/route-data"; import { setColorMode, type ColorMode } from "~/lib/route-data";
interface ElevationChartProps { interface ElevationChartProps {
@ -378,7 +379,7 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
if (points.length < 2) return null; if (points.length < 2) return null;
return ( return (
<div className="border-t border-gray-200 px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]"> <div className="border-t border-border px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
<div className="mb-1 flex items-center gap-2 px-2"> <div className="mb-1 flex items-center gap-2 px-2">
{(() => { {(() => {
const osmLinks: Record<string, string> = { const osmLinks: Record<string, string> = {
@ -402,14 +403,14 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
const title = titles[colorMode] ?? t("elevation.profile"); const title = titles[colorMode] ?? t("elevation.profile");
const link = osmLinks[colorMode]; const link = osmLinks[colorMode];
return link ? ( return link ? (
<a href={link} target="_blank" rel="noopener" className="shrink-0 text-xs font-medium text-gray-500 hover:text-blue-600 hover:underline"> <a href={link} target="_blank" rel="noopener" className="shrink-0 text-xs font-medium text-text-md hover:text-accent hover:underline">
{title} {title}
</a> </a>
) : ( ) : (
<p className="shrink-0 text-xs font-medium text-gray-500">{title}</p> <p className="shrink-0 text-xs font-medium text-text-md">{title}</p>
); );
})()} })()}
<div className="flex flex-1 items-center justify-center gap-1.5 text-[10px] text-gray-400"> <div className="flex flex-1 items-center justify-center gap-1.5 text-[10px] text-text-lo">
{colorMode === "grade" && (<> {colorMode === "grade" && (<>
<span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#22c55e" }} />{"<3%"}</span> <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#22c55e" }} />{"<3%"}</span>
<span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#eab308" }} />{"<6%"}</span> <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#eab308" }} />{"<6%"}</span>
@ -480,10 +481,12 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
<span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#d4d4d8" }} />None</span> <span className="flex items-center gap-0.5"><span className="inline-block h-1.5 w-2.5 rounded-sm" style={{ background: "#d4d4d8" }} />None</span>
</>)} </>)}
</div> </div>
<select <Select
size="sm"
value={colorMode} value={colorMode}
onChange={(e) => setMode(e.target.value)} onChange={(e) => setMode(e.target.value)}
className="shrink-0 rounded border border-gray-200 px-1.5 py-0.5 text-[11px] text-gray-500" aria-label={t("elevation.profile")}
className="shrink-0"
> >
<option value="plain">{t("colorMode.plain")}</option> <option value="plain">{t("colorMode.plain")}</option>
<option value="elevation">{t("colorMode.elevation")}</option> <option value="elevation">{t("colorMode.elevation")}</option>
@ -495,7 +498,7 @@ export function ElevationChart({ yjs, onHover, highlightDistance, onClickPositio
<option value="tracktype">{t("colorMode.tracktype")}</option> <option value="tracktype">{t("colorMode.tracktype")}</option>
<option value="cycleway">{t("colorMode.cycleway")}</option> <option value="cycleway">{t("colorMode.cycleway")}</option>
<option value="bikeroute">{t("colorMode.bikeroute")}</option> <option value="bikeroute">{t("colorMode.bikeroute")}</option>
</select> </Select>
</div> </div>
<canvas <canvas
ref={canvasRef} ref={canvasRef}