From d35667fab26dad1e35f6a28b3bd536b3e3e56a7d Mon Sep 17 00:00:00 2001 From: Ishan Parlikar Date: Tue, 18 Jul 2023 23:53:11 +0530 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20display=20location=20name=20on?= =?UTF-8?q?=20a=20weather=20tile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/en/modules/weather.json | 3 +++ src/widgets/weather/WeatherTile.tsx | 28 +++++++++++++++++++++----- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/public/locales/en/modules/weather.json b/public/locales/en/modules/weather.json index 791f80897..16b034320 100644 --- a/public/locales/en/modules/weather.json +++ b/public/locales/en/modules/weather.json @@ -7,6 +7,9 @@ "displayInFahrenheit": { "label": "Display in Fahrenheit" }, + "displayCityName":{ + "label":"Display City Name" + }, "location": { "label": "Weather location" } diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx index 5f0440284..a16e3d49c 100644 --- a/src/widgets/weather/WeatherTile.tsx +++ b/src/widgets/weather/WeatherTile.tsx @@ -1,7 +1,13 @@ -import { Center, Group, Skeleton, Stack, Text, Title } from '@mantine/core'; +import { Center, Flex, Group, Skeleton, Stack, Text, Title } from '@mantine/core'; import { useElementSize } from '@mantine/hooks'; -import { IconArrowDownRight, IconArrowUpRight, IconCloudRain } from '@tabler/icons-react'; +import { + IconArrowDownRight, + IconArrowUpRight, + IconCloudRain, + IconCurrentLocation, +} from '@tabler/icons-react'; import { api } from '~/utils/api'; + import { defineWidget } from '../helper'; import { IWidget } from '../widgets'; import { WeatherIcon } from './WeatherIcon'; @@ -14,6 +20,10 @@ const definition = defineWidget({ type: 'switch', defaultValue: false, }, + displayCityName: { + type: 'switch', + defaultValue: false, + }, location: { type: 'location', defaultValue: { @@ -80,15 +90,16 @@ function WeatherTile({ widget }: WeatherTileProps) { align="center" style={{ height: '100%', width: '100%' }} > - + - + <Title size={width < 200 ? 'h4' : 'h2'}> {getPerferedUnit( weather.current_weather.temperature, widget.properties.displayInFahrenheit )} - + + {width > 200 && ( @@ -103,6 +114,13 @@ function WeatherTile({ widget }: WeatherTileProps) { )} )} + + {widget.properties.displayCityName && ( + + + {widget.properties.location.name} + + )} ); } From ec34339e1630826bb84820b7c47162477fd9f867 Mon Sep 17 00:00:00 2001 From: Ishan Parlikar Date: Thu, 20 Jul 2023 23:01:32 +0530 Subject: [PATCH 2/4] added dimmed color for location name --- src/widgets/weather/WeatherTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx index a16e3d49c..861d3e6a2 100644 --- a/src/widgets/weather/WeatherTile.tsx +++ b/src/widgets/weather/WeatherTile.tsx @@ -118,7 +118,7 @@ function WeatherTile({ widget }: WeatherTileProps) { {widget.properties.displayCityName && ( - {widget.properties.location.name} + {widget.properties.location.name} )} From 6f0a25926831a8ad2d26ad1cae14fa75523eb3d1 Mon Sep 17 00:00:00 2001 From: Ishan Parlikar Date: Sat, 29 Jul 2023 22:22:59 +0530 Subject: [PATCH 3/4] added icon size and gap changes when tile is small --- src/widgets/weather/WeatherIcon.tsx | 9 ++++++--- src/widgets/weather/WeatherTile.tsx | 8 ++++---- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/widgets/weather/WeatherIcon.tsx b/src/widgets/weather/WeatherIcon.tsx index c55c8a4c9..f44b20a73 100644 --- a/src/widgets/weather/WeatherIcon.tsx +++ b/src/widgets/weather/WeatherIcon.tsx @@ -11,9 +11,11 @@ import { Icon, } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; +import { useElementSize } from '@mantine/hooks'; interface WeatherIconProps { code: number; + size?: number; } /** @@ -21,16 +23,17 @@ interface WeatherIconProps { * @param code weather code from api * @returns weather tile component */ -export const WeatherIcon = ({ code }: WeatherIconProps) => { +export const WeatherIcon = ({ code, size=50 }: WeatherIconProps) => { const { t } = useTranslation('modules/weather'); - + const { width, ref } = useElementSize(); + const { icon: Icon, name } = weatherDefinitions.find((wd) => wd.codes.includes(code)) ?? unknownWeather; return ( - + ); diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx index 861d3e6a2..4d603903b 100644 --- a/src/widgets/weather/WeatherTile.tsx +++ b/src/widgets/weather/WeatherTile.tsx @@ -85,14 +85,14 @@ function WeatherTile({ widget }: WeatherTileProps) { return ( - - - + <Flex align="center" gap={width<120 ? '0.25rem' : 'xs'} justify={'center'} direction={width < 200 ? 'column' : 'row'}> + <WeatherIcon size={width<300 ? 30 : 50} code={weather.current_weather.weathercode} /> + <Title size={width < 300 ? 'h4' : 'h2'}> {getPerferedUnit( weather.current_weather.temperature, widget.properties.displayInFahrenheit From 0331d20a42a6b7d91d8011d85473655861b9c0fe Mon Sep 17 00:00:00 2001 From: ajnart <ajnart@pm.me> Date: Tue, 8 Aug 2023 09:46:10 +0200 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=90=9B=20Fix=20padding=20in=20`Weathe?= =?UTF-8?q?rTile`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/weather/WeatherTile.tsx | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx index 4d603903b..a4443d7cd 100644 --- a/src/widgets/weather/WeatherTile.tsx +++ b/src/widgets/weather/WeatherTile.tsx @@ -5,6 +5,7 @@ import { IconArrowUpRight, IconCloudRain, IconCurrentLocation, + IconMapPin, } from '@tabler/icons-react'; import { api } from '~/utils/api'; @@ -84,15 +85,20 @@ function WeatherTile({ widget }: WeatherTileProps) { // TODO: add widgetWrapper that is generic and uses the definition return ( <Stack - ref={ref} - spacing={width<120 ? "0.25rem" : "xs"} - justify="space-around" - align="center" style={{ height: '100%', width: '100%' }} + justify="space-around" + ref={ref} + spacing={0} + align="center" > - <Flex align="center" gap={width<120 ? '0.25rem' : 'xs'} justify={'center'} direction={width < 200 ? 'column' : 'row'}> - <WeatherIcon size={width<300 ? 30 : 50} code={weather.current_weather.weathercode} /> - <Title size={width < 300 ? 'h4' : 'h2'}> + <Flex + align="center" + gap={width < 120 ? '0.25rem' : 'xs'} + justify={'center'} + direction={width < 200 ? 'column' : 'row'} + > + <WeatherIcon size={width < 300 ? 30 : 50} code={weather.current_weather.weathercode} /> + <Title size={'h2'}> {getPerferedUnit( weather.current_weather.temperature, widget.properties.displayInFahrenheit @@ -116,9 +122,9 @@ function WeatherTile({ widget }: WeatherTileProps) { )} {widget.properties.displayCityName && ( - <Group noWrap spacing="5px" align="center"> - <IconCurrentLocation height={15} width={15} /> - <Text color='dimmed' style={{ whiteSpace: 'nowrap' }}>{widget.properties.location.name}</Text> + <Group noWrap spacing={5} align="center"> + <IconMapPin height={15} width={15} /> + <Text style={{ whiteSpace: 'nowrap' }}>{widget.properties.location.name}</Text> </Group> )} </Stack>