From e3878e5c758b28e4013ea10be39b6a5315875ed5 Mon Sep 17 00:00:00 2001 From: Miguel Lasa Date: Tue, 5 Mar 2024 20:38:36 +0100 Subject: [PATCH] Create empty screen and phone frame for ui elements. --- .../composeResources/drawable/ic_science.xml | 9 ++++ .../drawable/ic_workspaces.xml | 9 ++++ .../kotlin/ui/components/PhoneFrame.kt | 33 ++++++++++++++ .../kotlin/ui/dashboard/Dashboard.kt | 43 +++++++++++++++++-- .../ui/dashboard/screens/QButtonScreen.kt | 25 ++++++----- 5 files changed, 105 insertions(+), 14 deletions(-) create mode 100644 composeApp/src/commonMain/composeResources/drawable/ic_science.xml create mode 100644 composeApp/src/commonMain/composeResources/drawable/ic_workspaces.xml create mode 100644 composeApp/src/commonMain/kotlin/ui/components/PhoneFrame.kt diff --git a/composeApp/src/commonMain/composeResources/drawable/ic_science.xml b/composeApp/src/commonMain/composeResources/drawable/ic_science.xml new file mode 100644 index 0000000..7d460be --- /dev/null +++ b/composeApp/src/commonMain/composeResources/drawable/ic_science.xml @@ -0,0 +1,9 @@ + + + diff --git a/composeApp/src/commonMain/composeResources/drawable/ic_workspaces.xml b/composeApp/src/commonMain/composeResources/drawable/ic_workspaces.xml new file mode 100644 index 0000000..0f0809d --- /dev/null +++ b/composeApp/src/commonMain/composeResources/drawable/ic_workspaces.xml @@ -0,0 +1,9 @@ + + + diff --git a/composeApp/src/commonMain/kotlin/ui/components/PhoneFrame.kt b/composeApp/src/commonMain/kotlin/ui/components/PhoneFrame.kt new file mode 100644 index 0000000..efb0b63 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/ui/components/PhoneFrame.kt @@ -0,0 +1,33 @@ +package ui.components + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.aspectRatio +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +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 + +@Composable +fun PhoneFrame(content: @Composable () -> Unit) { + // 18.5:9 aspect ratio + Column( + modifier = Modifier.fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Spacer(modifier = Modifier.height(100.dp)) + Box( + modifier = Modifier.weight(1f).aspectRatio(0.486f).background(Color.White), + contentAlignment = Alignment.Center + ) { + content.invoke() + } + Spacer(modifier = Modifier.height(100.dp)) + } +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/ui/dashboard/Dashboard.kt b/composeApp/src/commonMain/kotlin/ui/dashboard/Dashboard.kt index 38f5ac7..52059ee 100644 --- a/composeApp/src/commonMain/kotlin/ui/dashboard/Dashboard.kt +++ b/composeApp/src/commonMain/kotlin/ui/dashboard/Dashboard.kt @@ -1,6 +1,7 @@ package ui.dashboard import QButton +import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* @@ -12,11 +13,19 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import model.UiElement +import org.jetbrains.compose.resources.ExperimentalResourceApi import ui.dashboard.screens.QButtonScreen +import uilab.composeapp.generated.resources.Res +import org.jetbrains.compose.resources.painterResource +import uilab.composeapp.generated.resources.ic_science +import uilab.composeapp.generated.resources.ic_workspaces + @Composable fun Dashboard(viewModel: DashboardViewModel) { @@ -36,6 +45,11 @@ fun Dashboard(viewModel: DashboardViewModel) { } else { Color.Black } + val itemFontWeight = if (item.isSelected) { + FontWeight.SemiBold + } else { + null + } Text( modifier = Modifier.clickable { viewModel.onElementClick(item) @@ -44,20 +58,43 @@ fun Dashboard(viewModel: DashboardViewModel) { .fillMaxWidth() .padding(8.dp), text = item.uiElement.name.lowercase().replaceFirstChar(Char::uppercase), - color = itemTextColor + color = itemTextColor, + fontWeight = itemFontWeight ) } } - Box(modifier = Modifier.fillMaxHeight().weight(1f).background(Color.Red)) { + Box(modifier = Modifier.fillMaxHeight().weight(1f).background(Color.Blue.copy(alpha = 0.1f))) { when (selectedElement) { UiElement.BUTTON -> { QButtonScreen() } null -> { - + EmptyScreen() } } } } +} + +@OptIn(ExperimentalResourceApi::class) +@Composable +fun EmptyScreen() { + Box(modifier = Modifier.fillMaxSize()) { + Column( + modifier = Modifier.align(Alignment.Center), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Image( + modifier = Modifier.size(100.dp), + painter = painterResource(Res.drawable.ic_workspaces), + contentDescription = null + ) + Image( + modifier = Modifier.size(200.dp), + painter = painterResource(Res.drawable.ic_science), + contentDescription = null + ) + } + } } \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/ui/dashboard/screens/QButtonScreen.kt b/composeApp/src/commonMain/kotlin/ui/dashboard/screens/QButtonScreen.kt index bc12b50..c80ddaa 100644 --- a/composeApp/src/commonMain/kotlin/ui/dashboard/screens/QButtonScreen.kt +++ b/composeApp/src/commonMain/kotlin/ui/dashboard/screens/QButtonScreen.kt @@ -9,20 +9,23 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp +import ui.components.PhoneFrame @Composable fun QButtonScreen() { - Row(modifier = Modifier.background(Color.Green).fillMaxSize()) { - Box(modifier = Modifier.background(Color.Blue).fillMaxHeight().weight(1f)) { - QButton( - text = "QButton", - onClick = { }, - colors = ButtonDefaults.buttonColors( - containerColor = Color(0xff6200EE) //colorResource(id = R.color.purple_500) - ), - shape = RoundedCornerShape(16.dp, 1.dp, 16.dp, 1.dp) - ) + Row(modifier = Modifier.fillMaxSize()) { + Box(modifier = Modifier.fillMaxHeight().weight(1f)) { + PhoneFrame { + QButton( + text = "QButton", + onClick = { }, + colors = ButtonDefaults.buttonColors( + containerColor = Color(0xff6200EE) //colorResource(id = R.color.purple_500) + ), + shape = RoundedCornerShape(16.dp, 1.dp, 16.dp, 1.dp) + ) + } } - Column(modifier = Modifier.fillMaxHeight().width(200.dp)) { } + Column(modifier = Modifier.fillMaxHeight().width(300.dp).background(Color.White)) { } } } \ No newline at end of file