fix: align small icons to right in the current weather data. better l…

…ayout!
Akylas · Nov 29, 2024 · 76d56c0 · 76d56c0
1 parent b9ad351
commit 76d56c0
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 15 deletions.
diff --git a/app/components/TopWeatherView.svelte b/app/components/TopWeatherView.svelte
@@ -62,7 +62,7 @@
     }
     let lineChart: NativeViewElementNode<LineChart>;
     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"
     /> -->
     <!-- the gridlayout is there to ensure a max width for the chart -->
-    <gridlayout height={90} marginBottom={60} verticalAlignment="bottom" width={300}>
+    <gridlayout height={90} marginBottom={45 * $fontScale} verticalAlignment="bottom" width={300}>
         <linechart bind:this={lineChart} visibility={hasPrecip ? 'visible' : 'hidden'} />
     </gridlayout>
     <WeatherIcon {animated} col={1} horizontalAlignment="right" iconData={[item.iconId, item.isDay]} marginTop={15} size={weatherIconSize * (2 - $fontScale)} verticalAlignment="middle" on:tap />

diff --git 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
@@ -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
@@ -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
@@ -34,7 +34,7 @@
         <cgroup paddingBottom={item.subtitle ? 10 : 0} verticalAlignment="middle">
             <cspan fontFamily={leftIconFonFamily} fontSize={iconFontSize * $fontScale} paddingLeft="8" text={item.icon} visibility={item.icon ? 'visible' : 'hidden'} width={iconFontSize * 2} />
         </cgroup>
-        <cgroup paddingLeft={(item.icon ? 38 : 0) + extraPaddingLeft} textAlignment="left" verticalAlignment="middle">
+        <cgroup paddingLeft={(item.icon ? 38 * $fontScale : 0) + extraPaddingLeft} textAlignment="left" verticalAlignment="middle">
             <cspan fontSize={(item.fontSize || fontSize) * $fontScale} {fontWeight} text={item.title || item.name} />
             <cspan
                 color={item.subtitleColor || subtitleColor || colorOnSurfaceVariant}

diff --git a/app/components/common/OptionSelect.svelte b/app/components/common/OptionSelect.svelte
@@ -231,7 +231,16 @@
                     }} />
             </gridlayout>
         {/if}
-        <collectionView {itemTemplateSelector} items={filteredOptions} row={2} {rowHeight} on:dataPopulated={onDataPopulated} ios:contentInsetAdjustmentBehavior={2} {estimatedItemSize} {isScrollEnabled} {autoSize}>
+        <collectionView
+            {autoSize}
+            {estimatedItemSize}
+            {isScrollEnabled}
+            {itemTemplateSelector}
+            items={filteredOptions}
+            row={2}
+            {rowHeight}
+            on:dataPopulated={onDataPopulated}
+            ios:contentInsetAdjustmentBehavior={2}>
             <Template key="checkbox" let:item>
                 <svelte:component
                     this={component}