From 76d56c043e2f125b52bf642bdbec184c9e91821b Mon Sep 17 00:00:00 2001 From: farfromrefug Date: Fri, 29 Nov 2024 16:30:29 +0100 Subject: [PATCH] fix: align small icons to right in the current weather data. better layout! --- app/components/TopWeatherView.svelte | 18 +++++++++--------- app/components/WeatherComponent.svelte | 7 +++++-- app/components/WeatherMapPage.svelte | 10 +++++++++- app/components/WeatherPage.svelte | 2 +- app/components/common/ListItem.svelte | 2 +- app/components/common/OptionSelect.svelte | 11 ++++++++++- 6 files changed, 35 insertions(+), 15 deletions(-) diff --git a/app/components/TopWeatherView.svelte b/app/components/TopWeatherView.svelte index 75382630..102f39ea 100644 --- a/app/components/TopWeatherView.svelte +++ b/app/components/TopWeatherView.svelte @@ -62,7 +62,7 @@ } let lineChart: NativeViewElementNode; const weatherIconSize = 140; - const topViewHeight = 230 * $fontScale; + $: topViewHeight = 220 * $fontScale; let chartInitialized = false; let precipChartSet: LineDataSet; let cloudChartSet: LineDataSet; @@ -342,21 +342,21 @@ textPaint.setColor(colorOutline); canvas.drawLine(0, h, w, h - 1, textPaint); - const smallItemsToDraw = weatherDataService.getSmallIconsData({ item, type: 'currently' }); + const smallItemsToDraw = weatherDataService.getSmallIconsData({ item, type: 'currently' }).reverse(); let iconRight = PADDING_LEFT; - const iconsBottom = 30; + const iconsBottom = 26 * $fontScale; for (let index = 0; index < smallItemsToDraw.length; index++) { const c = smallItemsToDraw[index]; const paint = c.paint || textIconPaint; - paint.setTextAlign(Align.LEFT); + paint.setTextAlign(Align.RIGHT); paint.setTextSize(c.iconFontSize); paint.setColor(c.color || colorOnSurface); if (c.customDraw) { - const result = c.customDraw(canvas, $fontScale, paint, c, iconRight, h - iconsBottom - 15 * $fontScale, false); + const result = c.customDraw(canvas, $fontScale, paint, c, w - iconRight, h - iconsBottom - 15 * $fontScale, false); iconRight += result; } else if (c.icon) { - canvas.drawText(c.icon, iconRight, h - iconsBottom, paint); + canvas.drawText(c.icon, w - iconRight, h - iconsBottom, paint); iconRight += 24 * $fontScale; } } @@ -367,7 +367,7 @@ textPaint.setTextAlign(Align.LEFT); textIconPaint.setTextAlign(Align.CENTER); textIconPaint.color = colorOutline; - const iconsTop = hasPrecip ? 45 : (topViewHeight * $fontScale) / 2 - 20 * $fontScale; + const iconsTop = (hasPrecip ? 45 : topViewHeight / 2 - 20) * $fontScale; const lineHeight = 20 * $fontScale; const lineWidth = 100 * $fontScale; const nbLines = Math.ceil(centeredItemsToDraw.length / 2); @@ -439,7 +439,7 @@ } default: case 'default': { - const iconsTop = hasPrecip ? 45 : (topViewHeight * $fontScale) / 2 - 20 * $fontScale; + const iconsTop = (hasPrecip ? 45 : (topViewHeight * $fontScale) / 2 - 20) * $fontScale; const iconsLeft = 26; centeredItemsToDraw.forEach((c, index) => { const x = index * 45 * $fontScale + iconsLeft; @@ -509,7 +509,7 @@ horizontalAlignment="left" /> --> - + diff --git a/app/components/WeatherComponent.svelte b/app/components/WeatherComponent.svelte index 702f8882..f26fb4ab 100644 --- a/app/components/WeatherComponent.svelte +++ b/app/components/WeatherComponent.svelte @@ -11,7 +11,7 @@ import { iconService, onIconAnimationsChanged } from '~/services/icon'; import { prefs } from '~/services/preferences'; import { createEventDispatcher } from '@shared/utils/svelte/ui'; - import { actionBarHeight, onFontScaleChanged, onUnitsChanged, screenHeightDips, screenWidthDips, windowInset } from '~/variables'; + import { actionBarHeight, fontScale, onFontScaleChanged, onUnitsChanged, screenHeightDips, screenWidthDips, windowInset } from '~/variables'; export let items: any[]; export let weatherLocation: WeatherLocation; @@ -27,7 +27,10 @@ }); $: { topHeight = Math.max( - Math.min(Math.max(screenWidthDips, screenHeightDips) - $actionBarHeight - windowInsetBottom - windowInsetTop - 100, showHourlyChart ? (__IOS__ ? 450 : 400) : __IOS__ ? 500 : 450), + Math.min( + Math.max(screenWidthDips, screenHeightDips) - $actionBarHeight - windowInsetBottom - windowInsetTop - 100, + (showHourlyChart ? (__IOS__ ? 450 : 400) : __IOS__ ? 500 : 450) * $fontScale + ), 370 ); collectionView?.nativeView?.refresh(); diff --git a/app/components/WeatherMapPage.svelte b/app/components/WeatherMapPage.svelte index 6c4aab7e..4573cf07 100644 --- a/app/components/WeatherMapPage.svelte +++ b/app/components/WeatherMapPage.svelte @@ -6,7 +6,15 @@ import { NativeViewElementNode } from 'svelte-native/dom'; import CActionBar from '~/components/common/CActionBar.svelte'; import { VerticalPosition } from '@nativescript-community/ui-popover'; - import { SETTINGS_WEATHER_MAP_ANIMATION_SPEED, SETTINGS_WEATHER_MAP_COLORS, SETTINGS_WEATHER_MAP_LAYER_OPACITY, WEATHER_MAP_ANIMATION_SPEED, WEATHER_MAP_COLORS, WEATHER_MAP_COLOR_SCHEMES, WEATHER_MAP_LAYER_OPACITY } from '~/helpers/constants'; + import { + SETTINGS_WEATHER_MAP_ANIMATION_SPEED, + SETTINGS_WEATHER_MAP_COLORS, + SETTINGS_WEATHER_MAP_LAYER_OPACITY, + WEATHER_MAP_ANIMATION_SPEED, + WEATHER_MAP_COLORS, + WEATHER_MAP_COLOR_SCHEMES, + WEATHER_MAP_LAYER_OPACITY + } from '~/helpers/constants'; import { l, lc } from '~/helpers/locale'; import { hideLoading, showAlertOptionSelect, showLoading, showPopoverMenu } from '~/utils/ui'; import { actionBarHeight, screenWidthDips, systemFontScale, windowInset } from '~/variables'; diff --git a/app/components/WeatherPage.svelte b/app/components/WeatherPage.svelte index 68d15ade..917e1759 100644 --- a/app/components/WeatherPage.svelte +++ b/app/components/WeatherPage.svelte @@ -135,7 +135,7 @@ anchor: event.object, vertPos: VerticalPosition.BELOW, props: { - width: 220 * $systemFontScale, + width: 220 * $fontScale, maxHeight: Screen.mainScreen.heightDIPs - $actionBarHeight // autoSizeListItem: true }, diff --git a/app/components/common/ListItem.svelte b/app/components/common/ListItem.svelte index 06ddc8b4..093989eb 100644 --- a/app/components/common/ListItem.svelte +++ b/app/components/common/ListItem.svelte @@ -34,7 +34,7 @@ - + {/if} - +