bugfix: able to use map area between buttons

AtB-AS · Jan 13, 2025 · 1ceff98 · 1ceff98
1 parent 3353742
commit 1ceff98
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 37 deletions.
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
@@ -305,40 +305,48 @@ export const Map = (props: MapProps) => {
             />
           )}
         </MapboxGL.MapView>
-        <View style={controlStyles.controlsContainer}>
-          <View>
-            {isBonusProgramEnabled &&
-              props.selectionMode === 'ExploreEntities' && (
-                <BonusProgramMapButton
-                  onPress={() => onMapClick({source: 'bonus-program-button'})}
-                />
-              )}
-          </View>
-
-          <View>
-            <ExternalRealtimeMapButton onMapClick={onMapClick} />
-
-            {(props.vehicles || props.stations) && (
-              <MapFilter
-                onPress={() => onMapClick({source: 'filters-button'})}
-                isLoading={
-                  (props.vehicles?.isLoading || props.stations?.isLoading) ??
-                  false
-                }
+        <View
+          style={[
+            controlStyles.mapButtonsContainer,
+            controlStyles['mapButtonsContainer--left'],
+          ]}
+        >
+          {isBonusProgramEnabled &&
+            props.selectionMode === 'ExploreEntities' && (
+              <BonusProgramMapButton
+                onPress={() => onMapClick({source: 'bonus-program-button'})}
               />
             )}
-            <PositionArrow
-              onPress={async () => {
-                const coordinates = await getCurrentCoordinates(true);
-                if (coordinates) {
-                  onMapClick({
-                    source: 'my-position',
-                    coords: coordinates,
-                  });
-                }
-              }}
+        </View>
+
+        <View
+          style={[
+            controlStyles.mapButtonsContainer,
+            controlStyles['mapButtonsContainer--right'],
+          ]}
+        >
+          <ExternalRealtimeMapButton onMapClick={onMapClick} />
+
+          {(props.vehicles || props.stations) && (
+            <MapFilter
+              onPress={() => onMapClick({source: 'filters-button'})}
+              isLoading={
+                (props.vehicles?.isLoading || props.stations?.isLoading) ??
+                false
+              }
             />
-          </View>
+          )}
+          <PositionArrow
+            onPress={async () => {
+              const coordinates = await getCurrentCoordinates(true);
+              if (coordinates) {
+                onMapClick({
+                  source: 'my-position',
+                  coords: coordinates,
+                });
+              }
+            }}
+          />
         </View>
         {isShmoDeepIntegrationEnabled && (
           <ShmoTesting selectedVehicleId={selectedFeature?.properties?.id} />

diff --git a/src/components/map/hooks/use-control-styles.ts b/src/components/map/hooks/use-control-styles.ts
@@ -27,17 +27,21 @@ export function useControlPositionsStyle(extraPaddingBottom = false) {
         top: top + theme.spacing.medium,
         right: theme.spacing.medium,
       },
-      controlsContainer: {
+
+      mapButtonsContainer: {
         position: 'absolute',
-        width: '100%',
         bottom:
           (extraPaddingBottom ? bottom : 0) +
           bottomPaddingIfBottomSheetIsOpen +
           theme.spacing.medium,
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'flex-end',
-        paddingHorizontal: theme.spacing.medium,
+      },
+
+      'mapButtonsContainer--left': {
+        left: theme.spacing.medium,
+      },
+
+      'mapButtonsContainer--right': {
+        right: theme.spacing.medium,
       },
       locationContainer: {
         position: 'absolute',