diff --git a/android_v2/app/src/main/java/com/blackforestbytes/simplecloudnotifier2/MainActivity.kt b/android_v2/app/src/main/java/com/blackforestbytes/simplecloudnotifier2/MainActivity.kt index de50980..8cd30cf 100644 --- a/android_v2/app/src/main/java/com/blackforestbytes/simplecloudnotifier2/MainActivity.kt +++ b/android_v2/app/src/main/java/com/blackforestbytes/simplecloudnotifier2/MainActivity.kt @@ -3,14 +3,22 @@ package com.blackforestbytes.simplecloudnotifier2 import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Menu +import androidx.compose.material3.CardDefaults import androidx.compose.material3.CenterAlignedTopAppBar +import androidx.compose.material3.ElevatedCard import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.FabPosition import androidx.compose.material3.FloatingActionButton @@ -30,6 +38,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp @@ -81,75 +90,126 @@ fun Content() { ) }, - bottomBar = { - NavigationBar { - NavigationBarItem( - icon = { Icon(painterResource(R.drawable.fas_road), contentDescription = "Channels", modifier = Modifier.size(32.dp)) }, - onClick = {}, - selected = false, - ) - NavigationBarItem( - icon = { Icon(painterResource(R.drawable.fas_computer), contentDescription = "Clients", modifier = Modifier.size(32.dp)) }, - onClick = {}, - selected = false, - ) - NavigationBarItem( - icon = { Icon(painterResource(R.drawable.fas_key), contentDescription = "Keys", modifier = Modifier.size(32.dp)) }, - onClick = {}, - selected = false, - ) - NavigationBarItem( - icon = { }, - onClick = {}, - selected = false, - ) - NavigationBarItem( - icon = { Icon(painterResource(R.drawable.fas_bookmark), contentDescription = "Subscriptions", modifier = Modifier.size(32.dp)) }, - onClick = {}, - selected = false, - ) - NavigationBarItem( - icon = { Icon(painterResource(R.drawable.fas_user), contentDescription = "User", modifier = Modifier.size(32.dp)) }, - onClick = {}, - selected = false, - ) - NavigationBarItem( - icon = { Icon(painterResource(R.drawable.fas_gear), contentDescription = "Settings", modifier = Modifier.size(32.dp)) }, - onClick = {}, - selected = false, - ) - } - }, + bottomBar = { NavBar() }, - floatingActionButton = { - Box(){ - FloatingActionButton( - onClick = { /* stub */ }, - shape = FloatingActionButtonDefaults.shape, - modifier = Modifier - .align(Alignment.Center) - .size(70.dp) - .offset(y = 50.dp) - ) { - Icon( - painter = painterResource(R.drawable.fas_plus), - contentDescription = null, - modifier = Modifier.size(45.dp) - ) - } - } - }, + floatingActionButton = { NavFAB() }, floatingActionButtonPosition = FabPosition.Center, ) { innerPadding -> - Text( - modifier = Modifier.padding(innerPadding), - text = "Hello World" + Column( + modifier = Modifier + .padding(innerPadding) + .padding(16.dp) + .verticalScroll(rememberScrollState()), + verticalArrangement = Arrangement.spacedBy(16.dp), + ) { + MessageCard() + MessageCard() + MessageCard() + MessageCard() + MessageCard() + MessageCard() + MessageCard() + MessageCard() + MessageCard() + } + } +} + +@Composable +fun NavBar() { + NavigationBar { + NavigationBarItem( + icon = { Icon(painterResource(R.drawable.fas_road), contentDescription = "Channels", modifier = Modifier.size(32.dp)) }, + onClick = {}, + selected = false, + ) + NavigationBarItem( + icon = { Icon(painterResource(R.drawable.fas_computer), contentDescription = "Clients", modifier = Modifier.size(32.dp)) }, + onClick = {}, + selected = false, + ) + NavigationBarItem( + icon = { Icon(painterResource(R.drawable.fas_key), contentDescription = "Keys", modifier = Modifier.size(32.dp)) }, + onClick = {}, + selected = false, + ) + NavigationBarItem( + icon = { }, + onClick = {}, + selected = false, + ) + NavigationBarItem( + icon = { Icon(painterResource(R.drawable.fas_bookmark), contentDescription = "Subscriptions", modifier = Modifier.size(32.dp)) }, + onClick = {}, + selected = false, + ) + NavigationBarItem( + icon = { Icon(painterResource(R.drawable.fas_user), contentDescription = "User", modifier = Modifier.size(32.dp)) }, + onClick = {}, + selected = false, + ) + NavigationBarItem( + icon = { Icon(painterResource(R.drawable.fas_gear), contentDescription = "Settings", modifier = Modifier.size(32.dp)) }, + onClick = {}, + selected = false, ) } } +@Composable +fun NavFAB() { + Box(){ + FloatingActionButton( + onClick = { /* stub */ }, + shape = FloatingActionButtonDefaults.shape, + modifier = Modifier + .align(Alignment.Center) + .size(70.dp) + .offset(y = 50.dp) + ) { + Icon( + painter = painterResource(R.drawable.fas_plus), + contentDescription = null, + modifier = Modifier.size(45.dp) + ) + } + } +} + +@Composable +fun MessageCard() { + ElevatedCard( + elevation = CardDefaults.cardElevation( + defaultElevation = 6.dp + ), + modifier = Modifier.fillMaxWidth().height(height = 100.dp) + ) { + Text( + text = "Channel", + modifier = Modifier.padding(16.dp), + textAlign = TextAlign.Center, + ) + Text( + text = "Title", + modifier = Modifier.padding(16.dp), + textAlign = TextAlign.Center, + ) + Text( + text = "Body", + modifier = Modifier.padding(16.dp), + textAlign = TextAlign.Center, + ) + Text( + text = "Date", + modifier = Modifier.padding(16.dp), + textAlign = TextAlign.Center, + ) + } + +} + @Preview(showBackground = true) @Composable fun GreetingPreview() {