From a7aa89fafefbb349f3b483a1ce761a49eb30f5e8 Mon Sep 17 00:00:00 2001 From: Bergasha Date: Fri, 28 Aug 2026 10:22:48 +1000 Subject: [PATCH] feat(board+clock): fix item radius zoom, add clock day/night weather colour (#6726) --- .../layout/scaled-board-canvas.module.css | 9 +++++ packages/translation/src/lang/en.json | 10 +++++ packages/widgets/src/clock/advanced-view.tsx | 3 ++ packages/widgets/src/clock/component.tsx | 3 ++ packages/widgets/src/clock/index.ts | 38 +++++++++++++++++++ .../widgets/src/clock/weather-summary.tsx | 18 +++++++-- .../widgets/src/weather/animated-icon.tsx | 2 +- 7 files changed, 78 insertions(+), 5 deletions(-) diff --git a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css index 91dfef8ca..a072d8c74 100644 --- a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css +++ b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css @@ -45,4 +45,13 @@ --mantine-h4-font-size: calc(1.125rem * var(--board-canvas-ui-scale, 1)); --mantine-h5-font-size: calc(1rem * var(--board-canvas-ui-scale, 1)); --mantine-h6-font-size: calc(0.875rem * var(--board-canvas-ui-scale, 1)); + /* Without these, border-radius tokens (e.g. the board's "Item radius" setting) stay at their + * flat rem value while the canvas zoom shrinks the rendered card, so the chosen radius becomes + * imperceptibly small on busy/zoomed-out boards - same class of bug as the spacing/font tokens + * above, just never ported over to radius. */ + --mantine-radius-xs: calc(0.25rem * var(--board-canvas-ui-scale, 1)); + --mantine-radius-sm: calc(0.25rem * var(--board-canvas-ui-scale, 1)); + --mantine-radius-md: calc(0.5rem * var(--board-canvas-ui-scale, 1)); + --mantine-radius-lg: calc(0.75rem * var(--board-canvas-ui-scale, 1)); + --mantine-radius-xl: calc(1rem * var(--board-canvas-ui-scale, 1)); } diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index 8ebdd3511..a52328c0d 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -2430,6 +2430,16 @@ "label": "Animate weather icon", "description": "Animate the weather icon. Disabled by default and always disabled when reduced motion is requested." }, + "colorWeatherByDayNight": { + "label": "Color weather by day/night", + "description": "Tint the weather icon and temperature with a day color or a night color, based on whether it's currently day or night at the chosen location." + }, + "dayWeatherColor": { + "label": "Day color" + }, + "nightWeatherColor": { + "label": "Night color" + }, "worldClockCities": { "label": "World clock cities", "description": "Add and order up to six cities for advanced view." diff --git a/packages/widgets/src/clock/advanced-view.tsx b/packages/widgets/src/clock/advanced-view.tsx index bf9479f63..f438a5fba 100644 --- a/packages/widgets/src/clock/advanced-view.tsx +++ b/packages/widgets/src/clock/advanced-view.tsx @@ -132,6 +132,9 @@ const PrimaryClock = ({ now, options, primary }: Pick diff --git a/packages/widgets/src/clock/component.tsx b/packages/widgets/src/clock/component.tsx index bd656b558..426480297 100644 --- a/packages/widgets/src/clock/component.tsx +++ b/packages/widgets/src/clock/component.tsx @@ -54,6 +54,9 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid locationName={options.weatherLocation.name} isFahrenheit={options.isWeatherFormatFahrenheit} animateIcon={options.animateWeatherIcon} + colorByDayNight={options.colorWeatherByDayNight} + dayColor={options.dayWeatherColor} + nightColor={options.nightWeatherColor} detailed={false} /> diff --git a/packages/widgets/src/clock/index.ts b/packages/widgets/src/clock/index.ts index 8f3fdd06f..e76fa9f3c 100644 --- a/packages/widgets/src/clock/index.ts +++ b/packages/widgets/src/clock/index.ts @@ -12,6 +12,23 @@ import { const timeZoneOptions = getTimeZoneOptions(); +// Mantine theme color names, used to let users pick their own day/night weather colors. +const weatherColorOptions: string[] = [ + "red", + "pink", + "grape", + "violet", + "indigo", + "blue", + "cyan", + "teal", + "green", + "lime", + "yellow", + "orange", + "gray", +]; + export const { definition, componentLoader } = createWidgetDefinition("clock", { icon: IconClock, supportsAdvancedFocus: true, @@ -101,6 +118,18 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", { defaultValue: false, withDescription: true, }), + colorWeatherByDayNight: factory.switch({ + defaultValue: false, + withDescription: true, + }), + dayWeatherColor: factory.select({ + options: weatherColorOptions, + defaultValue: "orange", + }), + nightWeatherColor: factory.select({ + options: weatherColorOptions, + defaultValue: "blue", + }), worldClockCities: factory.timezoneList({ defaultValue: defaultWorldClockCities.map((city) => ({ ...city })), maxValues: maximumWorldClockCities, @@ -131,6 +160,15 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", { animateWeatherIcon: { shouldHide: (options) => !options.showWeather, }, + colorWeatherByDayNight: { + shouldHide: (options) => !options.showWeather, + }, + dayWeatherColor: { + shouldHide: (options) => !options.showWeather || !options.colorWeatherByDayNight, + }, + nightWeatherColor: { + shouldHide: (options) => !options.showWeather || !options.colorWeatherByDayNight, + }, }, ); }, diff --git a/packages/widgets/src/clock/weather-summary.tsx b/packages/widgets/src/clock/weather-summary.tsx index 2dda870bf..89941a6f7 100644 --- a/packages/widgets/src/clock/weather-summary.tsx +++ b/packages/widgets/src/clock/weather-summary.tsx @@ -14,6 +14,9 @@ interface ClockWeatherSummaryProps { locationName: string; isFahrenheit: boolean; animateIcon: boolean; + colorByDayNight: boolean; + dayColor: string; + nightColor: string; detailed: boolean; } @@ -23,6 +26,9 @@ export const ClockWeatherSummary = ({ locationName, isFahrenheit, animateIcon, + colorByDayNight, + dayColor, + nightColor, detailed, }: ClockWeatherSummaryProps) => { const tCommon = useI18n("common"); @@ -46,6 +52,10 @@ export const ClockWeatherSummary = ({ return `${Math.round(preferred)}${unit}`; }; + const weatherColor = colorByDayNight + ? `var(--mantine-color-${weather.current.isDay ? dayColor : nightColor}-5)` + : undefined; + return ( {detailed ? ( @@ -54,9 +64,9 @@ export const ClockWeatherSummary = ({ animated={animateIcon} code={weather.current.weatherCode} isDay={weather.current.isDay} - style={zoomCompensatedSize(28)} + style={{ ...zoomCompensatedSize(28), ...(weatherColor ? { color: weatherColor } : undefined) }} /> - + {Math.round(temperature)} {unit} @@ -68,9 +78,9 @@ export const ClockWeatherSummary = ({ animated={animateIcon} code={weather.current.weatherCode} isDay={weather.current.isDay} - style={zoomCompensatedSize(26)} + style={{ ...zoomCompensatedSize(26), ...(weatherColor ? { color: weatherColor } : undefined) }} /> - + {Math.round(temperature)} {unit} diff --git a/packages/widgets/src/weather/animated-icon.tsx b/packages/widgets/src/weather/animated-icon.tsx index f25720ff5..587e486e7 100644 --- a/packages/widgets/src/weather/animated-icon.tsx +++ b/packages/widgets/src/weather/animated-icon.tsx @@ -26,7 +26,7 @@ export const AnimatedWeatherIcon = ({ animated = false, code, isDay, size = 26, let animationClass = ""; if (animated && (code !== 0 || isDay !== false)) animationClass = getAnimationClass(code); return ( - + );