UI fixes (#48)

* UI fixes * Minor fix * Minor fix * Lint fix
canopas · May 20, 2024 · f6d77f3 · f6d77f3
1 parent 6403bbd
commit f6d77f3
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 46 deletions.
diff --git a/app/src/main/java/com/canopas/yourspace/ui/flow/home/map/MapScreen.kt b/app/src/main/java/com/canopas/yourspace/ui/flow/home/map/MapScreen.kt
@@ -188,6 +188,8 @@ fun MapScreenContent(modifier: Modifier) {
                 }
                 MapControlBtn(
                     icon = R.drawable.ic_geofence,
+                    containerColor = AppTheme.colorScheme.primary,
+                    contentColor = AppTheme.colorScheme.onPrimary,
                     show = true
                 ) {
                     viewModel.navigateToPlaces()

diff --git a/app/src/main/java/com/canopas/yourspace/ui/flow/home/map/MapViewModel.kt b/app/src/main/java/com/canopas/yourspace/ui/flow/home/map/MapViewModel.kt
@@ -50,6 +50,7 @@ class MapViewModel @Inject constructor(
             userPreferences.currentSpaceState.collectLatest { spaceId ->
                 locationJob?.cancel()
                 placeJob?.cancel()
+                dismissMemberDetail()
                 if (spaceId.isNotEmpty()) {
                     listenMemberLocation()
                     listenPlaces()

diff --git a/app/src/main/java/com/canopas/yourspace/ui/flow/home/map/component/MapControlBtn.kt b/app/src/main/java/com/canopas/yourspace/ui/flow/home/map/component/MapControlBtn.kt
@@ -10,6 +10,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.SmallFloatingActionButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import com.canopas.yourspace.ui.theme.AppTheme
@@ -18,6 +19,8 @@ import com.canopas.yourspace.ui.theme.AppTheme
 fun MapControlBtn(
     modifier: Modifier = Modifier,
     @DrawableRes icon: Int,
+    containerColor: Color = AppTheme.colorScheme.surface,
+    contentColor: Color = AppTheme.colorScheme.primary,
     show: Boolean = true,
     onClick: () -> Unit
 ) {
@@ -30,8 +33,8 @@ fun MapControlBtn(
     ) {
         SmallFloatingActionButton(
             onClick = { onClick() },
-            containerColor = AppTheme.colorScheme.surface,
-            contentColor = AppTheme.colorScheme.primary
+            containerColor = containerColor,
+            contentColor = contentColor
         ) {
             Icon(
                 painter = painterResource(id = icon),

diff --git a/app/src/main/java/com/canopas/yourspace/ui/flow/journey/components/JourneyMap.kt b/app/src/main/java/com/canopas/yourspace/ui/flow/journey/components/JourneyMap.kt
@@ -6,6 +6,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.platform.LocalContext
 import com.canopas.yourspace.R
 import com.canopas.yourspace.data.models.location.LocationJourney
@@ -34,6 +35,7 @@ fun JourneyMap(
     fromMarkerContent: @Composable () -> Unit,
     toMarkerContent: @Composable () -> Unit,
     polyLineWidth: Float = 5f,
+    anchor: Offset = Offset(0.5f, 1.0f),
     onMapTap: (() -> Unit) = { }
 ) {
     val fromLatLang = LatLng(location?.from_latitude ?: 0.0, location?.from_longitude ?: 0.0)
@@ -100,9 +102,9 @@ fun JourneyMap(
         )
     ) {
         location?.let {
-            FromLocationMarker(fromLatLang, fromMarkerContent)
+            LocationMarker(fromLatLang, anchor, fromMarkerContent)
             if (fromLocation.distanceTo(toLocation) > 200) {
-                ToLocationMarker(toLatLang, toMarkerContent)
+                LocationMarker(toLatLang, anchor, toMarkerContent)
             }
 
             Polyline(
@@ -116,17 +118,14 @@ fun JourneyMap(
 }
 
 @Composable
-fun ToLocationMarker(toLatLang: LatLng, toMarkerContent: @Composable () -> Unit) {
-    MarkerComposable(
-        state = rememberMarkerState(position = toLatLang),
-        content = toMarkerContent
-    )
-}
-
-@Composable
-fun FromLocationMarker(fromLatLang: LatLng, fromMarkerContent: @Composable () -> Unit) {
+private fun LocationMarker(
+    latLang: LatLng,
+    anchor: Offset,
+    markerContent: @Composable () -> Unit
+) {
     MarkerComposable(
-        state = rememberMarkerState(position = fromLatLang),
-        content = fromMarkerContent
+        state = rememberMarkerState(position = latLang),
+        content = markerContent,
+        anchor = anchor
     )
 }
diff --git a/app/src/main/java/com/canopas/yourspace/ui/flow/journey/detail/UserJourneyDetailScreen.kt b/app/src/main/java/com/canopas/yourspace/ui/flow/journey/detail/UserJourneyDetailScreen.kt
@@ -1,15 +1,20 @@
 package com.canopas.yourspace.ui.flow.journey.detail
 
 import android.location.Address
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.CircularProgressIndicator
@@ -29,6 +34,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
@@ -81,7 +88,12 @@ fun UserJourneyDetailScreen() {
 
 @Composable
 private fun FooterContent(loading: Boolean, journey: LocationJourney?) {
-    Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .heightIn(min = 100.dp),
+        contentAlignment = Alignment.Center
+    ) {
         journey?.let { location ->
             JourneyInfo(location)
         }
@@ -96,7 +108,6 @@ private fun JourneyInfo(journey: LocationJourney) {
     Column(
         modifier = Modifier
             .fillMaxWidth()
-            .fillMaxHeight(0.3f)
             .padding(vertical = 16.dp)
     ) {
         val context = LocalContext.current
@@ -134,7 +145,7 @@ private fun JourneyInfo(journey: LocationJourney) {
         Row(
             verticalAlignment = Alignment.Top,
             modifier = Modifier
-                .weight(1f)
+                .height(90.dp)
         ) {
             DottedTimeline(isSteadyLocation = true, isLastItem = false)
             Column(
@@ -149,7 +160,7 @@ private fun JourneyInfo(journey: LocationJourney) {
         Row(
             verticalAlignment = Alignment.Top,
             modifier = Modifier
-                .weight(1f)
+                .height(90.dp)
         ) {
             DottedTimeline(isSteadyLocation = false, isLastItem = true)
             Column(
@@ -211,21 +222,54 @@ private fun ColumnScope.MapView(journey: LocationJourney?) {
         location = journey,
         true,
         fromMarkerContent = {
-            Icon(
-                painter = painterResource(id = R.drawable.ic_tab_places_filled),
-                contentDescription = null,
-                tint = AppTheme.colorScheme.alertColor,
-                modifier = Modifier.size(38.dp)
-            )
+            JourneyMarker(bgColor = AppTheme.colorScheme.primary) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_tab_places_filled),
+                    contentDescription = null,
+                    tint = AppTheme.colorScheme.primary,
+                    modifier = Modifier.size(16.dp)
+                )
+            }
         },
         toMarkerContent = {
-            Icon(
-                painter = painterResource(id = R.drawable.ic_journey_destination),
-                contentDescription = null,
-                tint = AppTheme.colorScheme.successColor,
-                modifier = Modifier.size(40.dp)
-            )
+            JourneyMarker(
+                AppTheme.colorScheme.successColor
+            ) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_journey_destination),
+                    contentDescription = null,
+                    tint = AppTheme.colorScheme.successColor,
+                    modifier = Modifier.size(16.dp)
+                )
+            }
         },
-        polyLineWidth = 8f
+        polyLineWidth = 8f,
+        anchor = Offset(0.5f, 0.5f)
     )
 }
+
+@Composable
+private fun JourneyMarker(bgColor: Color, content: @Composable BoxScope.() -> Unit) {
+    Box(
+        modifier = Modifier
+            .size(80.dp)
+            .background(
+                bgColor.copy(alpha = 0.4f),
+                shape = CircleShape
+            )
+            .border(0.5.dp, bgColor.copy(alpha = 0.8f), shape = CircleShape),
+        contentAlignment = Alignment.Center
+    ) {
+        Box(
+            modifier = Modifier
+                .size(28.dp)
+                .background(
+                    AppTheme.colorScheme.surface,
+                    shape = CircleShape
+                )
+                .padding(5.dp),
+            contentAlignment = Alignment.Center,
+            content = content
+        )
+    }
+}
diff --git a/app/src/main/java/com/canopas/yourspace/ui/flow/journey/member/MemberDetailBottomSheet.kt b/app/src/main/java/com/canopas/yourspace/ui/flow/journey/member/MemberDetailBottomSheet.kt
@@ -19,7 +19,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -108,7 +107,7 @@ private fun UserInfoContent(userInfo: UserInfo, onTapTimeline: () -> Unit) {
 
             IconButton(
                 modifier = Modifier
-                    .size(40.dp)
+                    .size(38.dp)
                     .background(
                         color = AppTheme.colorScheme.primary.copy(alpha = 0.2f),
                         shape = CircleShape

diff --git a/app/src/main/java/com/canopas/yourspace/ui/flow/journey/member/MemberDetailViewModel.kt b/app/src/main/java/com/canopas/yourspace/ui/flow/journey/member/MemberDetailViewModel.kt
@@ -28,31 +28,24 @@ class MemberDetailViewModel @Inject constructor(
     fun fetchUserLocationHistory(
         from: Long,
         to: Long,
-        userInfo: UserInfo? = _state.value.selectedUser,
-        refresh: Boolean = false
+        userInfo: UserInfo? = _state.value.selectedUser
     ) = viewModelScope.launch(appDispatcher.IO) {
         _state.emit(
             _state.value.copy(
                 selectedUser = userInfo,
                 selectedTimeFrom = from,
                 selectedTimeTo = to,
-                locations = if (_state.value.selectedUser != userInfo ||
-                    _state.value.selectedTimeTo != to ||
-                    _state.value.selectedTimeFrom != from
-                ) {
-                    listOf()
-                } else {
-                    _state.value.locations
-                }
+                locations = if (_state.value.selectedUser != userInfo) listOf() else _state.value.locations
             )
         )
+
         loadLocations()
     }
 
     private fun loadLocations() = viewModelScope.launch {
         if (state.value.selectedUser == null) return@launch
 
-        _state.value = _state.value.copy(isLoading = true)
+        _state.value = _state.value.copy(isLoading = state.value.locations.isEmpty())
 
         try {
             val locations = journeyService.getJourneyHistory(