fix(android): ensure option select dialog allows to show all options

Akylas · Aug 1, 2024 · 9d9de0c · 9d9de0c
1 parent 7bb1981
commit 9d9de0c
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 25 deletions.
diff --git a/app/components/layers/LayerOptionsBottomSheet.svelte b/app/components/layers/LayerOptionsBottomSheet.svelte
@@ -3,7 +3,7 @@
     import { HillshadeRasterTileLayer, RasterTileFilterMode, RasterTileLayer } from '@nativescript-community/ui-carto/layers/raster';
     import { closeBottomSheet } from '@nativescript-community/ui-material-bottomsheet/svelte';
     import { action, confirm } from '@nativescript-community/ui-material-dialogs';
-    import { ApplicationSettings, Color, File, StackLayout } from '@nativescript/core';
+    import { ApplicationSettings, Color, File, ScrollView, StackLayout } from '@nativescript/core';
     import { onMount } from 'svelte';
     import { formatSize } from '~/helpers/formatter';
     import { lc } from '~/helpers/locale';
@@ -113,22 +113,25 @@
                     break;
                 }
                 case 'download_area': {
+                    const view = createView(ScrollView);
                     const stackLayout = createView(StackLayout, {
                         padding: 10
                     });
                     const SettingsSlider = (await import('~/components/settings/SettingsSlider.svelte')).default;
                     const cartoMap = mapContext.getMap();
                     const minSliderInstance = resolveComponentElement(SettingsSlider, {
-                        title: lc('dowload_area_minzoom'),
+                        title: lc('min_zoom'),
+                        subtitle: lc('dowload_area_minzoom'),
                         icon: 'mdi-chevron-down',
                         max: item.provider.sourceOptions.maxZoom,
                         step: 1,
                         valueFormatter: (value) => value + '',
                         min: 0,
-                        value: cartoMap.getZoom()
+                        value: Math.round(cartoMap.getZoom())
                     });
                     const maxSliderInstance = resolveComponentElement(SettingsSlider, {
-                        title: lc('dowload_area_maxzoom'),
+                        title: lc('max_zoom'),
+                        subtitle: lc('dowload_area_maxzoom'),
                         icon: 'mdi-chevron-up',
                         max: item.provider.sourceOptions.maxZoom,
                         min: 0,
@@ -138,10 +141,11 @@
                     });
                     stackLayout.addChild(minSliderInstance.element.nativeView);
                     stackLayout.addChild(maxSliderInstance.element.nativeView);
+                    view.content = stackLayout;
                     const result = await confirm({
                         title: lc('download'),
                         message: lc('confirm_area_download'),
-                        view: stackLayout,
+                        view,
                         okButtonText: lc('ok'),
                         cancelButtonText: lc('cancel')
                     });

diff --git a/app/components/map/Map.svelte b/app/components/map/Map.svelte
@@ -74,9 +74,10 @@
     import { navigate } from '~/utils/svelte/ui';
     import { hideLoading, onBackButton, showAlertOptionSelect, showLoading, showPopoverMenu } from '~/utils/ui';
     import { clearTimeout, disableShowWhenLockedAndTurnScreenOn, enableShowWhenLockedAndTurnScreenOn, setTimeout } from '~/utils/utils';
-    import { colors, windowInset } from '../../variables';
+    import { colors, screenHeightDips, windowInset } from '../../variables';
     import dayjs from 'dayjs';
     import { request } from '@nativescript-community/perms';
+    import { ALERT_OPTION_MAX_HEIGHT } from '~/utils/constants';
 
     $: ({ colorPrimary, colorError, colorBackground } = $colors);
     $: ({ top: windowInsetTop, bottom: windowInsetBottom, left: windowInsetLeft, right: windowInsetRight } = $windowInset);
@@ -1398,25 +1399,26 @@
                 styles.push(
                     ...subs
                         .filter((s) => s.name.endsWith('.json') || s.name.endsWith('.xml'))
-                        .map((s) => ({ name: s.name.split('.')[0] + '/' + e.name.toUpperCase(), data: e.name + '~' + s.name.split('.')[0] }))
+                        .map((s) => ({ name: s.name.split('.')[0], subtitle: e.name.toUpperCase(), data: e.name + '~' + s.name.split('.')[0] }))
                 );
             } else {
                 try {
                     const assetsNames = nativeVectorToArray(new ZippedAssetPackage({ zipPath: e.path }).getAssetNames());
-                    DEV_LOG && console.log('assetsNames', assetsNames);
-                    styles.push(...assetsNames.filter((s) => s.endsWith('.xml')).map((s) => ({ name: s.split('.')[0] + '/' + e.name.toUpperCase(), data: e.name + '~' + s.split('.')[0] })));
+                    // DEV_LOG && console.log('assetsNames', assetsNames);
+                    styles.push(...assetsNames.filter((s) => s.endsWith('.xml')).map((s) => ({ name: s.split('.')[0], subtitle: e.name.toUpperCase(), data: e.name + '~' + s.split('.')[0] })));
                 } catch (error) {
                     console.error(error, error.stack);
                 }
             }
         }
 
+        DEV_LOG && console.log('selectStyle', screenHeightDips, ALERT_OPTION_MAX_HEIGHT);
         const actions = styles;
         const component = (await import('~/components/common/OptionSelect.svelte')).default;
         const result = await showAlertOptionSelect(
             component,
             {
-                height: Math.min(actions.length * 56, 400),
+                height: Math.min(actions.length * 56, ALERT_OPTION_MAX_HEIGHT),
                 rowHeight: 56,
                 options: actions.map((d) => ({
                     ...d,

diff --git a/app/components/settings/Settings.svelte b/app/components/settings/Settings.svelte
@@ -6,7 +6,6 @@
     import { openFilePicker, pickFolder, saveFile } from '@nativescript-community/ui-document-picker';
     import { showBottomSheet } from '@nativescript-community/ui-material-bottomsheet/svelte';
     import { alert, confirm, prompt } from '@nativescript-community/ui-material-dialogs';
-    import { showSnack } from '~/utils/ui';
     import { TextField } from '@nativescript-community/ui-material-textfield';
     import { TextView } from '@nativescript-community/ui-material-textview';
     import { ApplicationSettings, File, Folder, ObservableArray, ScrollView, StackLayout, Utils, View, path } from '@nativescript/core';
@@ -18,14 +17,16 @@
     import { getThemeDisplayName, onThemeChanged, selectTheme } from '~/helpers/theme';
     import { getMapContext } from '~/mapModules/MapModule';
     import { onServiceLoaded } from '~/services/BgService.common';
+    import { ALERT_OPTION_MAX_HEIGHT } from '~/utils/constants';
     import { showError } from '~/utils/error';
+    import { Sentry } from '~/utils/sentry';
     import { share } from '~/utils/share';
+    import { showSnack } from '~/utils/ui';
     import { createView, hideLoading, openLink, showAlertOptionSelect, showLoading } from '~/utils/ui/index.common';
     import { ANDROID_30, getAndroidRealPath, getItemsDataFolder, getSavedMBTilesDir, moveFileOrFolder, resetItemsDataFolder, restartApp, setItemsDataFolder, setSavedMBTilesDir } from '~/utils/utils';
     import { colors, fonts, windowInset } from '~/variables';
     import CActionBar from '../common/CActionBar.svelte';
     import ListItemAutoSize from '../common/ListItemAutoSize.svelte';
-    import { Sentry } from '~/utils/sentry';
     $: ({ colorOnSurfaceVariant, colorOutlineVariant } = $colors);
     $: ({ bottom: windowInsetBottom } = $windowInset);
 
@@ -599,7 +600,7 @@
                         const result = await showAlertOptionSelect(
                             OptionSelect,
                             {
-                                height: Math.min(options.length * 56, 400),
+                                height: Math.min(options.length * 56, ALERT_OPTION_MAX_HEIGHT),
                                 rowHeight: 56,
                                 selectedIndex,
                                 options

diff --git a/app/components/settings/SettingsSlider.svelte b/app/components/settings/SettingsSlider.svelte
@@ -74,7 +74,7 @@
     <!-- <canvasview bind:this={canvas} on:draw={onDraw} /> -->
 
     <label color={colorOnSurface} fontFamily={$fonts.mdi} fontSize={24} text={icon} verticalTextAlignment="center" visibility={icon ? 'visible' : 'collapse'} />
-    <label col={1} colSpan={2} color={colorOnSurface} fontSize={15} lineBreak="end" maxLines={2} padding="0 10 0 0" text={title} textWrap={true} verticalTextAlignment="center" />
+    <label col={1} color={colorOnSurface} fontSize={15} lineBreak="end" maxLines={2} padding="0 10 0 0" text={title} textWrap={true} verticalTextAlignment="center" />
     <label
         col={1}
         color={colorOnSurfaceVariant}

diff --git a/app/helpers/locale.ts b/app/helpers/locale.ts
@@ -1,4 +1,4 @@
-import { capitalize, l, lc, loadLocaleJSON, lt, lu, overrideNativeLocale, titlecase } from '@nativescript-community/l';
+import { capitalize, l, lc, loadLocaleJSON, lt, lu, overrideNativeLocale } from '@nativescript-community/l';
 import { Application, ApplicationSettings, Device, EventData, File, Utils } from '@nativescript/core';
 import { getString } from '@nativescript/core/application-settings';
 import dayjs from 'dayjs';
@@ -11,9 +11,10 @@ import utc from 'dayjs/plugin/utc';
 
 import { derived, get, writable } from 'svelte/store';
 import { prefs } from '~/services/preferences';
+import { ALERT_OPTION_MAX_HEIGHT } from '~/utils/constants';
 import { showError } from '~/utils/error';
-import { showAlertOptionSelect } from '~/utils/ui';
 import { createGlobalEventListener, globalObservable } from '~/utils/svelte/ui';
+import { showAlertOptionSelect } from '~/utils/ui';
 const supportedLanguages = SUPPORTED_LOCALES;
 
 // dayjs.extend(updateLocale);
@@ -219,7 +220,7 @@ async function internalSelectLanguage() {
     return showAlertOptionSelect(
         component,
         {
-            height: Math.min(actions.length * 56, 400),
+            height: Math.min(actions.length * 56, ALERT_OPTION_MAX_HEIGHT),
             rowHeight: 56,
             options: [{ name: lc('auto'), data: 'auto' }].concat(actions.map((k) => ({ name: getLocaleDisplayName(k.replace('_', '-')), data: k }))).map((d) => ({
                 ...d,

diff --git a/app/helpers/theme.ts b/app/helpers/theme.ts
@@ -1,15 +1,16 @@
 import Theme from '@nativescript-community/css-theme';
-import { Application, ApplicationSettings, Device, EventData, SystemAppearanceChangedEventData, Utils } from '@nativescript/core';
+import { closePopover } from '@nativescript-community/ui-popover/svelte';
+import { Application, ApplicationSettings, SystemAppearanceChangedEventData, Utils } from '@nativescript/core';
 import { getBoolean, getString, setString } from '@nativescript/core/application-settings';
+import { SDK_VERSION } from '@nativescript/core/utils';
+import { get, writable } from 'svelte/store';
+import { lc } from '~/helpers/locale';
 import { prefs } from '~/services/preferences';
+import { ALERT_OPTION_MAX_HEIGHT } from '~/utils/constants';
 import { showError } from '~/utils/error';
 import { createGlobalEventListener, globalObservable } from '~/utils/svelte/ui';
-import { updateThemeColors } from '~/variables';
-import { lc } from '~/helpers/locale';
-import { get, writable } from 'svelte/store';
-import { SDK_VERSION } from '@nativescript/core/utils';
 import { showAlertOptionSelect } from '~/utils/ui';
-import { closePopover } from '@nativescript-community/ui-popover/svelte';
+import { updateThemeColors } from '~/variables';
 
 export type Themes = 'auto' | 'light' | 'dark' | 'black' | 'eink';
 
@@ -68,7 +69,7 @@ export async function selectTheme() {
         const result = await showAlertOptionSelect(
             component,
             {
-                height: Math.min(actions.length * 56, 400),
+                height: Math.min(actions.length * 56, ALERT_OPTION_MAX_HEIGHT),
                 rowHeight: 56,
                 options: actions
                     .map((k) => ({ name: getThemeDisplayName(k), data: k }))

diff --git a/app/i18n/en.json b/app/i18n/en.json
@@ -344,8 +344,10 @@
     "mast_communications": "mast communications",
     "mast_lighting": "mast lighting",
     "max_hiking_difficulty": "max hiking difficulty",
+    "max_zoom": "max zoom",
     "medical_supply": "medical supply",
     "memorial": "memorial",
+    "min_zoom": "min zoom",
     "miniature_golf": "miniature golf",
     "missing_api_token": "cant add that source without an API token",
     "missing_manage_permission": "missing manage all files permission",

diff --git a/app/utils/constants.ts b/app/utils/constants.ts
@@ -0,0 +1,3 @@
+import { Screen } from '@nativescript/core';
+
+export const ALERT_OPTION_MAX_HEIGHT = Screen.mainScreen.heightDIPs * 0.47;
diff --git a/app/utils/ui/index.common.ts b/app/utils/ui/index.common.ts
@@ -203,7 +203,7 @@ export async function showPopoverMenu<T = any>({
             backgroundColor: colorSurfaceContainer,
             containerColumns: 'auto',
             rowHeight: !!props?.autoSizeListItem ? null : rowHeight,
-            height: Math.min(rowHeight * options.length, props?.maxHeight || 400),
+            height: Math.min(rowHeight * options.length, props?.maxHeight ?? 300),
             width: 200 * get(fontScale),
             options,
             onLongPress,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { Screen } from '@nativescript/core';

		export const ALERT_OPTION_MAX_HEIGHT = Screen.mainScreen.heightDIPs * 0.47;