diff --git a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt index b890985..353568f 100644 --- a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt +++ b/app/src/main/java/com/aiosman/riderpro/MainActivity.kt @@ -105,6 +105,9 @@ fun NavigationController(navController: NavHostController) { composable(route="ModificationList") { ModificationListScreen() } + composable(route="MyMessage") { + NotificationsScreen() + } } } diff --git a/app/src/main/java/com/aiosman/riderpro/MessageList.kt b/app/src/main/java/com/aiosman/riderpro/MessageList.kt new file mode 100644 index 0000000..adbd0b1 --- /dev/null +++ b/app/src/main/java/com/aiosman/riderpro/MessageList.kt @@ -0,0 +1,238 @@ +package com.aiosman.riderpro + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp + + + +@Preview(showBackground = true) +@Composable +fun NotificationsScreen() { + Column( + modifier = Modifier.fillMaxSize() + ) { + Box( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 24.dp, vertical = 16.dp) + ) { + Image( + painter = painterResource(id = R.drawable.rider_pro_message_title), + contentDescription = "Back", + modifier = Modifier.width(120.dp) + ) + } + Row( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 16.dp), + horizontalArrangement = Arrangement.SpaceBetween, + ) { + NotificationIndicator(10, R.drawable.rider_pro_like, "LIKE") + NotificationIndicator(10, R.drawable.rider_pro_followers, "FOLLOWERS") + NotificationIndicator(10, R.drawable.rider_pro_comments, "COMMENTS") + } + HorizontalDivider(color = Color(0xFFEbEbEb), modifier = Modifier.padding(16.dp)) + NotificationCounterItem(24) + LazyColumn( + modifier = Modifier + .weight(1f) + .fillMaxSize() + ) { + item { + repeat(20) { + MessageItem( + MessageItemData( + userName = "Onyama Limba", + message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + timeAgo = "3 days ago", + profileImage = R.drawable.default_avatar + ) + ) + } + + + } + + + } + } +} + +@Composable +fun NotificationIndicator(notificationCount: Int, iconRes: Int, label: String) { + Box( + modifier = Modifier + ) { + Box( + modifier = Modifier + .padding(16.dp) + .align(Alignment.TopCenter) + ) { + if (notificationCount > 0) { + Box( + modifier = Modifier + .background(Color(0xFFE53935), RoundedCornerShape(8.dp)) + .padding(4.dp) + .align(Alignment.TopEnd) + ) { + Text( + text = notificationCount.toString(), + color = Color.White, + fontSize = 10.sp, + fontWeight = FontWeight.Bold, + modifier = Modifier.align(Alignment.Center) + ) + } + } + Column( + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Box( + modifier = Modifier.padding(16.dp) + ) { + Image( + painter = painterResource(id = iconRes), + contentDescription = label, + modifier = Modifier.size(24.dp) + ) + } + Box( + modifier = Modifier + ) { + Text(label, modifier = Modifier.align(Alignment.Center)) + } + + } + } + } + +} + +@Composable +fun NotificationCounterItem(count: Int) { + Row( + modifier = Modifier.padding(vertical = 16.dp, horizontal = 32.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Box( + + ) { + Image( + painter = painterResource(id = R.drawable.rider_pro_notification), + contentDescription = "", + modifier = Modifier + .size(24.dp) + + ) + + } + Spacer(modifier = Modifier.width(24.dp)) + Text("NOTIFICATIONS", fontSize = 18.sp) + Spacer(modifier = Modifier.weight(1f)) + if (count > 0) { + Box( + modifier = Modifier + .background(Color(0xFFE53935), RoundedCornerShape(16.dp)) + .padding(horizontal = 8.dp, vertical = 2.dp) + ) { + Text( + text = count.toString(), + color = Color.White, + fontSize = 12.sp, + fontWeight = FontWeight.Bold, + modifier = Modifier.padding(4.dp) + ) + } + } + } +} +data class MessageItemData( + val userName: String, + val message: String, + val timeAgo: String, + val profileImage: Int +) +@Composable +fun MessageItem(messageItemData: MessageItemData) { + Row( + modifier = Modifier.padding(16.dp) + ) { + Box() { + Image( + painter = painterResource(id = R.drawable.default_avatar), + contentDescription = "", + modifier = Modifier + .size(48.dp) + .clip(RoundedCornerShape(4.dp)) + ) + } + Column( + modifier = Modifier.weight(1f) + ) { + Text( + text = "Onyama Limba", + fontSize = 16.sp, + modifier = Modifier.padding(start = 16.dp) + ) + Spacer(modifier = Modifier.height(8.dp)) + Text( + text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + fontSize = 14.sp, + modifier = Modifier.padding(start = 16.dp), + maxLines = 1, + color = Color(0x99000000) + ) + } +// Spacer(modifier = Modifier.weight(1f)) + Column( + horizontalAlignment = Alignment.End + ) { + Text( + text = "3 days ago", + fontSize = 14.sp, + color = Color(0x66000000) + ) + Spacer(modifier = Modifier.height(6.dp)) + Box( + modifier = Modifier + .clip(RoundedCornerShape(12.dp)) + .background(Color(0xFFE53935)) + .padding(4.dp) + ) { + Text( + text = "24", + color = Color.White, + fontSize = 12.sp, + fontWeight = FontWeight.Bold, + modifier = Modifier.align(Alignment.Center) + ) + } + } + } +} \ No newline at end of file diff --git a/app/src/main/java/com/aiosman/riderpro/Profile.kt b/app/src/main/java/com/aiosman/riderpro/Profile.kt index 6a68b56..9dfafc4 100644 --- a/app/src/main/java/com/aiosman/riderpro/Profile.kt +++ b/app/src/main/java/com/aiosman/riderpro/Profile.kt @@ -171,7 +171,9 @@ fun CommunicationOperatorGroup(){ } Box(modifier = Modifier .size(width = 142.dp, height = 40.dp) - .padding(start = 6.dp), + .padding(start = 6.dp).clickable { + navController.navigate("MyMessage") + }, contentAlignment = Alignment.Center){ Image(modifier = Modifier.fillMaxSize(),painter = painterResource(id = R.drawable.rider_pro_profile_message), contentDescription = "") Text(text = "MESSAGE", fontSize = 16.sp, color = Color.White, style = TextStyle(fontWeight = FontWeight.Bold)) diff --git a/app/src/main/res/drawable/rider_pro_message_title.png b/app/src/main/res/drawable/rider_pro_message_title.png new file mode 100644 index 0000000..02d9dd6 Binary files /dev/null and b/app/src/main/res/drawable/rider_pro_message_title.png differ