Create empty screen and phone frame for ui elements.

thisisqubika · Mar 5, 2024 · e3878e5 · e3878e5
1 parent 03ca0dc
commit e3878e5
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 14 deletions.
diff --git a/composeApp/src/commonMain/composeResources/drawable/ic_science.xml b/composeApp/src/commonMain/composeResources/drawable/ic_science.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:fillColor="#ffffff"
+      android:pathData="M200,840Q149,840 127.5,794.5Q106,749 138,710L360,440L360,200L320,200Q303,200 291.5,188.5Q280,177 280,160Q280,143 291.5,131.5Q303,120 320,120L640,120Q657,120 668.5,131.5Q680,143 680,160Q680,177 668.5,188.5Q657,200 640,200L600,200L600,440L822,710Q854,749 832.5,794.5Q811,840 760,840L200,840ZM200,760L760,760L520,468L520,200L440,200L440,468L200,760ZM480,480L480,480L480,480L480,480L480,480L480,480L480,480Z"/>
+</vector>
diff --git a/composeApp/src/commonMain/composeResources/drawable/ic_workspaces.xml b/composeApp/src/commonMain/composeResources/drawable/ic_workspaces.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:fillColor="#ffffff"
+      android:pathData="M240,840Q174,840 127,793Q80,746 80,680Q80,614 127,567Q174,520 240,520Q306,520 353,567Q400,614 400,680Q400,746 353,793Q306,840 240,840ZM720,840Q654,840 607,793Q560,746 560,680Q560,614 607,567Q654,520 720,520Q786,520 833,567Q880,614 880,680Q880,746 833,793Q786,840 720,840ZM240,760Q273,760 296.5,736.5Q320,713 320,680Q320,647 296.5,623.5Q273,600 240,600Q207,600 183.5,623.5Q160,647 160,680Q160,713 183.5,736.5Q207,760 240,760ZM720,760Q753,760 776.5,736.5Q800,713 800,680Q800,647 776.5,623.5Q753,600 720,600Q687,600 663.5,623.5Q640,647 640,680Q640,713 663.5,736.5Q687,760 720,760ZM480,440Q414,440 367,393Q320,346 320,280Q320,214 367,167Q414,120 480,120Q546,120 593,167Q640,214 640,280Q640,346 593,393Q546,440 480,440ZM480,360Q513,360 536.5,336.5Q560,313 560,280Q560,247 536.5,223.5Q513,200 480,200Q447,200 423.5,223.5Q400,247 400,280Q400,313 423.5,336.5Q447,360 480,360ZM480,280Q480,280 480,280Q480,280 480,280Q480,280 480,280Q480,280 480,280Q480,280 480,280Q480,280 480,280Q480,280 480,280Q480,280 480,280ZM720,680Q720,680 720,680Q720,680 720,680Q720,680 720,680Q720,680 720,680Q720,680 720,680Q720,680 720,680Q720,680 720,680Q720,680 720,680ZM240,680Q240,680 240,680Q240,680 240,680Q240,680 240,680Q240,680 240,680Q240,680 240,680Q240,680 240,680Q240,680 240,680Q240,680 240,680Z"/>
+</vector>
diff --git a/composeApp/src/commonMain/kotlin/ui/components/PhoneFrame.kt 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))
+    }
+}
diff --git 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
+            )
+        }
+    }
 }
diff --git 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)) {  }
     }
 }