diff --git a/app/src/main/java/com/f1rq/lifemap/MainActivity.kt b/app/src/main/java/com/f1rq/lifemap/MainActivity.kt index 39066d7..6b1d68b 100644 --- a/app/src/main/java/com/f1rq/lifemap/MainActivity.kt +++ b/app/src/main/java/com/f1rq/lifemap/MainActivity.kt @@ -3,25 +3,16 @@ package com.f1rq.lifemap import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.wrapContentHeight -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.draw.shadow import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.currentBackStackEntryAsState import androidx.navigation.compose.rememberNavController import com.f1rq.lifemap.navigationbar.NavigationBar -import com.f1rq.lifemap.topappbar.TopAppBar import com.f1rq.lifemap.screens.ListView import com.f1rq.lifemap.screens.MapView import com.f1rq.lifemap.screens.SettingsScreen @@ -29,6 +20,7 @@ import com.f1rq.lifemap.screens.NotificationsScreen import com.f1rq.lifemap.ui.theme.LifeMapTheme import com.f1rq.lifemap.ui.theme.ActiveNavColor import com.f1rq.lifemap.ui.theme.InactiveNavColor +import com.f1rq.lifemap.components.TopBar class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { @@ -39,9 +31,9 @@ class MainActivity : ComponentActivity() { Scaffold( topBar = { - TopAppBar( - onSettingsIconTapped = { navController.navigate("settings")}, - onNotificationsIconTapped = { navController.navigate("notifications")} + TopBar( + onSettingsButtonClick = { navController.navigate("settings")}, + onNotificationsButtonClick = { navController.navigate("notifications")} ) }, bottomBar = { diff --git a/app/src/main/java/com/f1rq/lifemap/components/AddEventCard.kt b/app/src/main/java/com/f1rq/lifemap/components/AddEventCard.kt new file mode 100644 index 0000000..bb8c10c --- /dev/null +++ b/app/src/main/java/com/f1rq/lifemap/components/AddEventCard.kt @@ -0,0 +1,98 @@ +package com.f1rq.lifemap.components + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.* +import androidx.compose.material3.CardDefaults +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.Text +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Edit +import androidx.compose.ui.draw.shadow +import androidx.compose.ui.tooling.preview.Preview +import com.f1rq.lifemap.ui.theme.MainBG +import com.f1rq.lifemap.ui.theme.MainTextColor +import com.f1rq.lifemap.ui.theme.ButtonColor + +@Composable +fun AddEventCard( + modifier: Modifier = Modifier, + onCreateEventClick: () -> Unit = {} +) { + Card( + modifier = modifier + .fillMaxWidth() + .padding(16.dp), + shape = RoundedCornerShape(16.dp), + elevation = CardDefaults.cardElevation(defaultElevation = 6.dp), + colors = CardDefaults.cardColors( + containerColor = MainBG, + ) + ) { + Row( + modifier = Modifier + .padding( + horizontal = 16.dp, + vertical = 12.dp, + ), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween + ) { + Column( + modifier = Modifier + .weight(1f) + ) { + Text( + text = "Add event", + style = MaterialTheme.typography.titleMedium, + color = MainTextColor + ) + Text( + text = "With localization, date etc.", + style = MaterialTheme.typography.bodySmall, + color = MainTextColor + ) + } + + Box( + modifier = Modifier + .shadow( + elevation = 6.dp, + shape = RoundedCornerShape(12.dp), + clip = false + ) + .background( + color = MainBG, + shape = RoundedCornerShape(12.dp) + ) + .size(56.dp) + ) { + IconButton( + onClick = onCreateEventClick, + modifier = Modifier.fillMaxSize() + ) { + Icon( + imageVector = Icons.Default.Edit, + contentDescription = "Edit", + tint = ButtonColor + ) + } + } + + } + } +} + +@Preview(showBackground = true) +@Composable +fun AddEventCardPreview() { + AddEventCard() +} diff --git a/app/src/main/java/com/f1rq/lifemap/components/NavBar.kt b/app/src/main/java/com/f1rq/lifemap/components/NavBar.kt new file mode 100644 index 0000000..6ecea4d --- /dev/null +++ b/app/src/main/java/com/f1rq/lifemap/components/NavBar.kt @@ -0,0 +1,32 @@ +package com.f1rq.lifemap.components + + +import android.graphics.Color +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.requiredHeight +import androidx.compose.foundation.layout.requiredWidth +import androidx.compose.runtime.Composable +import androidx.compose.ui.unit.dp +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview + + +@Composable +fun NavBar( + onWorldViewTapped: () -> Unit = {}, + onListViewTapped: () -> Unit = {}, +) { + Box(modifier = Modifier + .requiredWidth(24.0.dp) + .requiredHeight(24.0.dp) + ) { + + } +} + + +@Preview +@Composable +fun NavBarPreview() { + NavBar() +} \ No newline at end of file diff --git a/app/src/main/java/com/f1rq/lifemap/components/TopBar.kt b/app/src/main/java/com/f1rq/lifemap/components/TopBar.kt new file mode 100644 index 0000000..34cf6f2 --- /dev/null +++ b/app/src/main/java/com/f1rq/lifemap/components/TopBar.kt @@ -0,0 +1,109 @@ +package com.f1rq.lifemap.components + +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.* +import androidx.compose.material3.CardDefaults +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.Text +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.tooling.preview.Preview +import com.f1rq.lifemap.ui.theme.MainBG +import com.f1rq.lifemap.ui.theme.MainTextColor +import com.f1rq.lifemap.ui.theme.ButtonColor +import com.f1rq.lifemap.R.drawable.notifications_button +import com.f1rq.lifemap.R.drawable.settings_button + +@Composable +fun TopBar( + modifier: Modifier = Modifier, + onNotificationsButtonClick: () -> Unit = {}, + onSettingsButtonClick: () -> Unit = {} +) { + Card( + modifier = Modifier + .fillMaxWidth(), + shape = RoundedCornerShape( + topStart = 0.dp, + topEnd = 0.dp, + bottomStart = 16.dp, + bottomEnd = 16.dp + ), + elevation = CardDefaults.cardElevation(defaultElevation = 6.dp), + colors = CardDefaults.cardColors( + containerColor = MainBG, + ) + ) { + Row( + modifier = Modifier + .padding( + start = 20.0.dp, + top = 65.0.dp, + end = 20.0.dp, + bottom = 15.0.dp + ), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween + ) { + Column( + modifier = Modifier + .weight(1f) + ) { + Text( + text = "LifeMap", + style = MaterialTheme.typography.titleMedium, + fontSize = MaterialTheme.typography.titleLarge.fontSize, + fontFamily = MaterialTheme.typography.titleLarge.fontFamily, + fontWeight = FontWeight(700.0.toInt()), + color = MainTextColor, + ) + Text( + text = "Personal life events", + style = MaterialTheme.typography.bodySmall, + fontSize = MaterialTheme.typography.labelMedium.fontSize, + color = MainTextColor + ) + } + Box( + modifier = Modifier + ) { + Row( + horizontalArrangement = Arrangement.spacedBy((-6).dp), + verticalAlignment = Alignment.CenterVertically + ) { + IconButton( + onClick = onNotificationsButtonClick, + ) { + Icon( + painter = painterResource(id = notifications_button), + contentDescription = "Notifications button", + tint = ButtonColor + ) + } + IconButton( + onClick = onSettingsButtonClick, + ) { + Icon( + painter = painterResource(id = settings_button), + contentDescription = "Settings button", + tint = ButtonColor + ) + } + } + } + } + } +} + +@Preview(showBackground = true) +@Composable +fun TopBarPreview() { + TopBar() +} diff --git a/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt b/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt index 3efd0b0..f08f4cb 100644 --- a/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt +++ b/app/src/main/java/com/f1rq/lifemap/screens/MapView.kt @@ -6,15 +6,27 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import com.f1rq.lifemap.addevent.AddEvent +import androidx.compose.ui.tooling.preview.Preview +import com.f1rq.lifemap.components.AddEventCard @Composable fun MapView(modifier: Modifier = Modifier) { Box( - modifier = Modifier.fillMaxSize(), - contentAlignment = Alignment.Center + modifier = Modifier.fillMaxSize() ) { - AddEvent() - Text("Map view") + Text( + text = "Map view", + modifier = Modifier.align(Alignment.Center) + ) + AddEventCard( + onCreateEventClick = {}, + modifier = Modifier.align(Alignment.BottomCenter) + ) } +} + +@Preview +@Composable +fun MapViewPreview() { + MapView() } \ No newline at end of file diff --git a/app/src/main/java/com/f1rq/lifemap/ui/theme/Color.kt b/app/src/main/java/com/f1rq/lifemap/ui/theme/Color.kt index 34b0e2f..1546275 100644 --- a/app/src/main/java/com/f1rq/lifemap/ui/theme/Color.kt +++ b/app/src/main/java/com/f1rq/lifemap/ui/theme/Color.kt @@ -5,10 +5,13 @@ import androidx.compose.ui.graphics.Color val Purple80 = Color(0xFFD0BCFF) val PurpleGrey80 = Color(0xFFCCC2DC) val Pink80 = Color(0xFFEFB8C8) - val Purple40 = Color(0xFF6650a4) val PurpleGrey40 = Color(0xFF625b71) val Pink40 = Color(0xFF7D5260) + +val MainBG = Color(0xFFECECEC) val ActiveNavColor = Color(0xFFDDDDDD) -val InactiveNavColor = Color.Transparent \ No newline at end of file +val InactiveNavColor = Color.Transparent +val MainTextColor = Color(0xFF1D1B20) +val ButtonColor = Color(0xFF49454F) \ No newline at end of file diff --git a/app/src/main/res/drawable/add_event_button.xml b/app/src/main/res/drawable/add_event_button.xml new file mode 100644 index 0000000..c6de098 --- /dev/null +++ b/app/src/main/res/drawable/add_event_button.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/drawable/navbar_listview_button.xml b/app/src/main/res/drawable/navbar_listview_button.xml new file mode 100644 index 0000000..c2a5cda --- /dev/null +++ b/app/src/main/res/drawable/navbar_listview_button.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/drawable/navbar_worldview_button.xml b/app/src/main/res/drawable/navbar_worldview_button.xml new file mode 100644 index 0000000..5c9e21d --- /dev/null +++ b/app/src/main/res/drawable/navbar_worldview_button.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/drawable/notifications_button.xml b/app/src/main/res/drawable/notifications_button.xml new file mode 100644 index 0000000..507a8d3 --- /dev/null +++ b/app/src/main/res/drawable/notifications_button.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/drawable/settings_button.xml b/app/src/main/res/drawable/settings_button.xml new file mode 100644 index 0000000..b7814db --- /dev/null +++ b/app/src/main/res/drawable/settings_button.xml @@ -0,0 +1,9 @@ + + +