example: Make it like os2 design

miuix-kotlin-multiplatform · Sep 1, 2024 · abf55fd · abf55fd
1 parent cc49476
commit abf55fd
Show file tree

Hide file tree

Showing 17 changed files with 378 additions and 267 deletions.
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -16,7 +16,7 @@ plugins {
 
 val appName = "Miuix"
 val pkgName = "top.yukonga.miuix.uitest"
-val verName = "1.0.0"
+val verName = "1.0.1"
 val xcf = XCFramework(appName + "Framework")
 
 kotlin {
@@ -86,7 +86,7 @@ android {
         applicationId = pkgName
         minSdk = libs.versions.android.minSdk.get().toInt()
         targetSdk = libs.versions.android.targetSdk.get().toInt()
-        versionCode = 11
+        versionCode = 12
         versionName = verName
     }
     val properties = Properties()

diff --git a/composeApp/src/commonMain/kotlin/MainPage.kt b/composeApp/src/commonMain/kotlin/MainPage.kt
@@ -1,7 +1,6 @@
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.runtime.Composable
 import component.OtherComponent
-import component.SecondComponent
 import component.TextComponent
 import top.yukonga.miuix.kmp.MiuixScrollBehavior
 import top.yukonga.miuix.kmp.basic.MiuixLazyColumn
@@ -20,9 +19,6 @@ fun MainPage(
         item {
             TextComponent()
         }
-        item {
-            SecondComponent()
-        }
         item {
             OtherComponent(padding)
         }

diff --git a/composeApp/src/commonMain/kotlin/UITest.kt b/composeApp/src/commonMain/kotlin/UITest.kt
@@ -94,7 +94,7 @@ fun UITest(
                 MiuixTopAppBar(
                     navigationIcon = {
                         IconButton(
-                            modifier = Modifier.padding(start = 16.dp),
+                            modifier = Modifier.padding(start = 12.dp),
                             onClick = {}
                         ) {
                             Icon(
@@ -106,7 +106,7 @@ fun UITest(
                     },
                     actions = {
                         IconButton(
-                            modifier = Modifier.padding(end = 16.dp),
+                            modifier = Modifier.padding(end = 12.dp),
                             onClick = {
                                 uriHandler.openUri("https://github.com/miuix-kotlin-multiplatform/miuix")
                             }

diff --git a/composeApp/src/commonMain/kotlin/component/OtherComponent.kt b/composeApp/src/commonMain/kotlin/component/OtherComponent.kt
@@ -1,10 +1,13 @@
 package component
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.runtime.Composable
@@ -20,6 +23,7 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import top.yukonga.miuix.kmp.basic.MiuixButton
 import top.yukonga.miuix.kmp.basic.MiuixCard
 import top.yukonga.miuix.kmp.basic.MiuixSlider
 import top.yukonga.miuix.kmp.basic.MiuixText
@@ -28,17 +32,71 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 
 @Composable
 fun OtherComponent(padding: PaddingValues) {
+
+    var buttonText by remember { mutableStateOf("Button") }
+    var submitButtonText by remember { mutableStateOf("Submit") }
+    var clickCount by remember { mutableStateOf(0) }
+    var submitClickCount by remember { mutableStateOf(0) }
     val focusManager = LocalFocusManager.current
     var text1 by remember { mutableStateOf("") }
     var text2 by remember { mutableStateOf("Text") }
     var progress by remember { mutableStateOf(0.5f) }
     val progressDisable by remember { mutableStateOf(0.5f) }
 
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 24.dp, vertical = 20.dp),
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        MiuixButton(
+            modifier = Modifier.weight(1f),
+            text = buttonText,
+            onClick = {
+                clickCount++
+                buttonText = "Click: $clickCount"
+            }
+        )
+        Spacer(Modifier.width(20.dp))
+        MiuixButton(
+            modifier = Modifier.weight(1f),
+            text = submitButtonText,
+            submit = true,
+            onClick = {
+                submitClickCount++
+                submitButtonText = "Click: $submitClickCount"
+            }
+        )
+    }
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 24.dp),
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        MiuixButton(
+            modifier = Modifier.weight(1f),
+            text = "Disabled",
+            submit = true,
+            enabled = false,
+            onClick = {}
+        )
+        Spacer(Modifier.width(20.dp))
+        MiuixButton(
+            modifier = Modifier.weight(1f),
+            text = "Disabled",
+            submit = false,
+            enabled = false,
+            onClick = {}
+        )
+    }
+
     MiuixTextField(
         value = text1,
         onValueChange = { text1 = it },
         label = "Text Field",
-        modifier = Modifier.padding(horizontal = 28.dp, vertical = 20.dp),
+        modifier = Modifier.padding(horizontal = 24.dp, vertical = 20.dp),
         keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
         keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
     )
@@ -48,28 +106,28 @@ fun OtherComponent(padding: PaddingValues) {
         onValueChange = { text2 = it },
         backgroundColor = MiuixTheme.colorScheme.primaryContainer,
         label = "Text Field",
-        modifier = Modifier.padding(horizontal = 28.dp),
+        modifier = Modifier.padding(horizontal = 24.dp),
         keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
         keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
     )
 
     MiuixSlider(
         progress = progress,
         onProgressChange = { newProgress -> progress = newProgress },
-        modifier = Modifier.padding(horizontal = 28.dp, vertical = 20.dp)
+        modifier = Modifier.padding(horizontal = 24.dp, vertical = 20.dp)
     )
 
     MiuixSlider(
         progress = progressDisable,
         onProgressChange = {},
         enabled = false,
-        modifier = Modifier.padding(horizontal = 28.dp)
+        modifier = Modifier.padding(horizontal = 24.dp)
     )
 
     MiuixCard(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(horizontal = 28.dp, vertical = 20.dp),
+            .padding(horizontal = 24.dp, vertical = 20.dp),
         insideMargin = DpSize(18.dp, 18.dp)
     ) {
         CardView()
@@ -78,13 +136,14 @@ fun OtherComponent(padding: PaddingValues) {
     MiuixCard(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(horizontal = 28.dp)
+            .padding(horizontal = 24.dp)
             .padding(bottom = 20.dp + padding.calculateBottomPadding()),
         color = MiuixTheme.colorScheme.primary,
         insideMargin = DpSize(18.dp, 18.dp)
     ) {
         CardView(color = Color.White)
     }
+
 }
 
 @Composable

diff --git a/composeApp/src/commonMain/kotlin/component/SecondComponent.kt b/composeApp/src/commonMain/kotlin/component/SecondComponent.kt