Skip to content

Commit 5b53841

Browse files
Viguru24Viguru24
committed
UX: fix clipped chat button, add check-in visual feedback, label Home button
1 parent e021c0b commit 5b53841

1 file changed

Lines changed: 123 additions & 57 deletions

File tree

‎app/src/main/java/com/example/ui/RadarMap.kt‎

Lines changed: 123 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ import android.graphics.Paint
66
import android.graphics.Typeface
77
import android.graphics.drawable.BitmapDrawable
88
import android.graphics.drawable.Drawable
9+
import androidx.compose.animation.AnimatedVisibility
10+
import androidx.compose.animation.fadeIn
11+
import androidx.compose.animation.fadeOut
12+
import androidx.compose.animation.slideInVertically
13+
import androidx.compose.animation.slideOutVertically
914
import androidx.compose.foundation.BorderStroke
1015
import androidx.compose.foundation.background
1116
import androidx.compose.foundation.border
@@ -31,6 +36,7 @@ import androidx.compose.ui.unit.sp
3136
import androidx.compose.ui.viewinterop.AndroidView
3237
import com.example.data.FamilyMember
3338
import com.example.ui.theme.*
39+
import kotlinx.coroutines.delay
3440
import org.osmdroid.config.Configuration
3541
import org.osmdroid.tileprovider.tilesource.TileSourceFactory
3642
import org.osmdroid.util.GeoPoint
@@ -465,21 +471,6 @@ fun RadarMap(
465471
)
466472
}
467473

468-
// 2. WHATSAPP CHAT BUTTON (Themed green border & clear chat bubble)
469-
Surface(
470-
modifier = Modifier
471-
.size(42.dp)
472-
.clickable { onOpenWhatsApp() }
473-
.testTag("whatsapp_chat_button"),
474-
color = Color.White,
475-
shape = CircleShape,
476-
border = BorderStroke(1.5.dp, Color(0xFF25D366)), // Real WhatsApp Green!
477-
shadowElevation = 6.dp
478-
) {
479-
Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
480-
Text("💬", fontSize = 18.sp)
481-
}
482-
}
483474
}
484475

485476
// 1d. CAM FOLLOW ACTIVE FLOATING BADGE
@@ -556,7 +547,46 @@ fun RadarMap(
556547
}
557548
}
558549

559-
// 4. CAPSULE ACTION OVERLAYS (Bottom row of map)
550+
// 4. BOTTOM ACTION ROW — Check in | WhatsApp | [spacer] | SOS
551+
var checkInPressed by remember { mutableStateOf(false) }
552+
var showCheckInConfirm by remember { mutableStateOf(false) }
553+
val checkInScope = rememberCoroutineScope()
554+
555+
// Check in confirmation banner — slides up above the bottom bar when sent
556+
AnimatedVisibility(
557+
visible = showCheckInConfirm,
558+
enter = slideInVertically { it } + fadeIn(),
559+
exit = slideOutVertically { it } + fadeOut(),
560+
modifier = Modifier
561+
.align(Alignment.BottomStart)
562+
.padding(start = 14.dp, bottom = bottomPadding + 58.dp)
563+
) {
564+
Surface(
565+
color = Color(0xFF1B5E20),
566+
shape = RoundedCornerShape(14.dp),
567+
border = BorderStroke(1.dp, Color(0xFF00C853)),
568+
shadowElevation = 8.dp
569+
) {
570+
Row(
571+
modifier = Modifier.padding(horizontal = 14.dp, vertical = 10.dp),
572+
horizontalArrangement = Arrangement.spacedBy(8.dp),
573+
verticalAlignment = Alignment.CenterVertically
574+
) {
575+
Text("✅", fontSize = 16.sp)
576+
Column {
577+
Text(
578+
"Check-in sent to your family circle!",
579+
color = Color.White, fontSize = 12.sp, fontWeight = FontWeight.Bold
580+
)
581+
Text(
582+
"Everyone can see you're safe.",
583+
color = Color.White.copy(alpha = 0.75f), fontSize = 10.sp
584+
)
585+
}
586+
}
587+
}
588+
}
589+
560590
Row(
561591
modifier = Modifier
562592
.fillMaxWidth()
@@ -565,37 +595,76 @@ fun RadarMap(
565595
horizontalArrangement = Arrangement.SpaceBetween,
566596
verticalAlignment = Alignment.Bottom
567597
) {
568-
// "Check in" floating action capsule
569-
Surface(
570-
modifier = Modifier
571-
.height(44.dp)
572-
.clickable { onTriggerCheckIn() },
573-
color = Color.White,
574-
shape = RoundedCornerShape(22.dp),
575-
border = BorderStroke(1.dp, SlateBorder),
576-
shadowElevation = 6.dp
598+
// Left cluster: Check in + WhatsApp
599+
Row(
600+
horizontalArrangement = Arrangement.spacedBy(8.dp),
601+
verticalAlignment = Alignment.CenterVertically
577602
) {
578-
Row(
579-
modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp),
580-
horizontalArrangement = Arrangement.spacedBy(6.dp),
581-
verticalAlignment = Alignment.CenterVertically
603+
// Check in — turns green + confirms when pressed
604+
Surface(
605+
modifier = Modifier
606+
.height(44.dp)
607+
.clickable {
608+
onTriggerCheckIn()
609+
checkInPressed = true
610+
showCheckInConfirm = true
611+
checkInScope.launch {
612+
delay(3000)
613+
showCheckInConfirm = false
614+
checkInPressed = false
615+
}
616+
},
617+
color = if (checkInPressed) Color(0xFF00C853) else Color.White,
618+
shape = RoundedCornerShape(22.dp),
619+
border = BorderStroke(1.5.dp, if (checkInPressed) Color(0xFF00C853) else SlateBorder),
620+
shadowElevation = 6.dp
582621
) {
583-
Text("🛡️", fontSize = 14.sp)
584-
Text(
585-
text = "Check in",
586-
color = Color(0xFF5D2EE6), // Purple color matches image
587-
fontSize = 12.sp,
588-
fontWeight = FontWeight.Bold
589-
)
622+
Row(
623+
modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp),
624+
horizontalArrangement = Arrangement.spacedBy(6.dp),
625+
verticalAlignment = Alignment.CenterVertically
626+
) {
627+
Text(if (checkInPressed) "✅" else "🛡️", fontSize = 14.sp)
628+
Text(
629+
text = if (checkInPressed) "Sent!" else "Check in",
630+
color = if (checkInPressed) Color.White else Color(0xFF5D2EE6),
631+
fontSize = 12.sp,
632+
fontWeight = FontWeight.Bold
633+
)
634+
}
635+
}
636+
637+
// WhatsApp — moved out of the overcrowded top bar
638+
Surface(
639+
modifier = Modifier
640+
.height(44.dp)
641+
.clickable { onOpenWhatsApp() }
642+
.testTag("whatsapp_chat_button"),
643+
color = Color.White,
644+
shape = RoundedCornerShape(22.dp),
645+
border = BorderStroke(1.5.dp, Color(0xFF25D366)),
646+
shadowElevation = 6.dp
647+
) {
648+
Row(
649+
modifier = Modifier.padding(horizontal = 14.dp, vertical = 4.dp),
650+
horizontalArrangement = Arrangement.spacedBy(6.dp),
651+
verticalAlignment = Alignment.CenterVertically
652+
) {
653+
Text("💬", fontSize = 14.sp)
654+
Text(
655+
"WhatsApp",
656+
color = Color(0xFF25D366), fontSize = 12.sp, fontWeight = FontWeight.Bold
657+
)
658+
}
590659
}
591660
}
592661

593-
// "SOS" panic safety capsule
662+
// SOS
594663
Surface(
595664
modifier = Modifier
596665
.height(44.dp)
597666
.clickable { onTriggerSOS() },
598-
color = Color(0xFFE53935), // Urgent Red SOS pill background
667+
color = Color(0xFFE53935),
599668
shape = RoundedCornerShape(22.dp),
600669
border = BorderStroke(1.5.dp, Color.White),
601670
shadowElevation = 8.dp
@@ -657,13 +726,14 @@ fun RadarMap(
657726
}
658727
}
659728

660-
// ANCHOR RECENTER COMPASS FAB (HOME)
729+
// ANCHOR RECENTER: GO TO HOME
661730
Surface(
662731
modifier = Modifier
663-
.size(44.dp)
732+
.width(64.dp)
733+
.height(44.dp)
664734
.clickable {
665-
isCameraFollowingMe = false // Disable tracking
666-
onSelectMember(null) // Reset selected member focus
735+
isCameraFollowingMe = false
736+
onSelectMember(null)
667737
mapViewRef?.let {
668738
it.controller.animateTo(GeoPoint(homeLat, homeLng))
669739
it.controller.setZoom(15.5)
@@ -674,22 +744,18 @@ fun RadarMap(
674744
border = BorderStroke(1.dp, SlateBorder),
675745
shadowElevation = 6.dp
676746
) {
677-
Box(
678-
contentAlignment = Alignment.Center,
679-
modifier = Modifier.fillMaxSize()
747+
Column(
748+
modifier = Modifier.fillMaxSize(),
749+
horizontalAlignment = Alignment.CenterHorizontally,
750+
verticalArrangement = Arrangement.Center
680751
) {
681-
Box(
682-
modifier = Modifier
683-
.size(16.dp)
684-
.border(1.5.dp, PrimaryCosmic, CircleShape),
685-
contentAlignment = Alignment.Center
686-
) {
687-
Box(
688-
modifier = Modifier
689-
.size(5.dp)
690-
.background(PrimaryCosmic, CircleShape)
691-
)
692-
}
752+
Text("🏠", fontSize = 14.sp)
753+
Text(
754+
"Home",
755+
fontSize = 8.sp,
756+
fontWeight = FontWeight.Bold,
757+
color = PrimaryCosmic
758+
)
693759
}
694760
}
695761
}

0 commit comments

Comments
 (0)