fix(android): consider bottom inset in chart views #260

Akylas · Dec 6, 2024 · bf8da61 · bf8da61
1 parent 3be14a1
commit bf8da61
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/app/components/HourlyChartPage.svelte b/app/components/HourlyChartPage.svelte
@@ -7,7 +7,7 @@
     import type { NativeViewElementNode } from 'svelte-native/dom';
     import { l, lc } from '~/helpers/locale';
     import { WeatherData } from '~/services/providers/weather';
-    import { colors, screenWidthDips } from '~/variables';
+    import { colors, screenWidthDips, windowInset } from '~/variables';
 
     import { NavigatedData, Page } from '@nativescript/core';
     import { onDestroy, onMount } from 'svelte';
@@ -181,8 +181,8 @@
                         verticalAlignment={chartHeight ? 'center' : 'stretch'}
                         on:layoutChanged={onLayoutChanged} /> -->
                 </gridlayout>
-                <gridlayout prop:bottomDrawer backgroundColor={new Color(colorBackground).setAlpha(200)} columns="*" height={40} rows="*">
-                    <collectionview colWidth={150} height="40" items={legends} orientation="horizontal">
+                <gridlayout prop:bottomDrawer backgroundColor={new Color(colorBackground).setAlpha(200)} columns="*" height={40 + $windowInset.bottom} rows="*">
+                    <collectionview colWidth={150} height="40" items={legends} orientation="horizontal" verticalAlignment="top">
                         <Template let:item>
                             <canvasview rippleColor={item.color || colorOnSurface} on:draw={(event) => onDrawLegend(item, event)} on:tap={(event) => toggleLegend(item, event)} />
                         </Template>

diff --git a/app/components/compare/CompareLineChart.svelte b/app/components/compare/CompareLineChart.svelte
@@ -28,7 +28,7 @@
     import { DailyData, Hourly, WeatherData } from '~/services/providers/weather';
     import { convertWeatherValueToUnit, propToUnit } from '~/services/weatherData';
     import { showError } from '@shared/utils/showError';
-    import { colors, fontScale, screenWidthDips } from '~/variables';
+    import { colors, fontScale, screenWidthDips, windowInset } from '~/variables';
 
     const legendIconPaint = new Paint();
     legendIconPaint.textSize = 13;
@@ -314,7 +314,7 @@
             },
             backDrop: {
                 // translateX: side === 'right' ? -delta : delta,
-                opacity: progress * 0.05
+                opacity: 0
             }
         } as any;
 
@@ -472,8 +472,8 @@
             {/each}
         </label> -->
     </gridlayout>
-    <gridlayout prop:bottomDrawer backgroundColor={new Color(colorBackground).setAlpha(200)} columns="*" height={40} rows="*">
-        <collectionview colWidth={150} height="40" items={legends} orientation="horizontal">
+    <gridlayout prop:bottomDrawer backgroundColor={new Color(colorBackground).setAlpha(200)} columns="*" height={40 + $windowInset.bottom} rows="*">
+        <collectionview colWidth={150} height="40" items={legends} orientation="horizontal" verticalAlignment="top">
             <Template let:item>
                 <canvasview rippleColor={item.color} on:draw={(event) => onDrawLegend(item, event)} on:tap={(event) => toggleLegend(item, event)} />
             </Template>

diff --git a/app/components/compare/CompareWeather.svelte b/app/components/compare/CompareWeather.svelte
@@ -18,7 +18,7 @@
     import { getProviderForType, providers } from '~/services/providers/weatherproviderfactory';
     import { AVAILABLE_COMPARE_WEATHER_DATA, WeatherProps, getWeatherDataIcon, getWeatherDataTitle } from '~/services/weatherData';
     import { showError } from '@shared/utils/showError';
-    import { actionBarButtonHeight, colors } from '~/variables';
+    import { actionBarButtonHeight, colors, windowInset } from '~/variables';
     import CompareLineChart from './CompareLineChart.svelte';
     import CompareWeatherIcons from './CompareWeatherIcons.svelte';
 
@@ -299,6 +299,7 @@
         }}
         leftClosedDrawerAllowDraging={false}
         rightClosedDrawerAllowDraging={false}
+
         on:close={onDrawerClose}
         on:start={onDrawerStart}>
         <gridlayout rows="auto,*" prop:mainContent>