Skip to content

Commit 5b6ab8c

Browse files
YuKongAYuKongA
committed
library: Sync OS2 design
1 parent 3296ed6 commit 5b6ab8c

File tree

16 files changed

+158
-99
lines changed

16 files changed

+158
-99
lines changed

‎composeApp/src/commonMain/kotlin/MainPage.kt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ import androidx.compose.ui.graphics.BlendModeColorFilter
1717
import androidx.compose.ui.unit.dp
1818
import component.OtherComponent
1919
import component.TextComponent
20-
import top.yukonga.miuix.kmp.basic.ScrollBehavior
2120
import top.yukonga.miuix.kmp.basic.BasicComponent
2221
import top.yukonga.miuix.kmp.basic.InputField
2322
import top.yukonga.miuix.kmp.basic.LazyColumn
23+
import top.yukonga.miuix.kmp.basic.ScrollBehavior
2424
import top.yukonga.miuix.kmp.basic.SearchBar
2525
import top.yukonga.miuix.kmp.basic.Text
2626
import top.yukonga.miuix.kmp.icon.MiuixIcons
@@ -41,7 +41,7 @@ fun MainPage(
4141
) {
4242
item {
4343
SearchBar(
44-
modifier = Modifier.padding(horizontal = 16.dp, vertical = 14.dp),
44+
modifier = Modifier.padding(horizontal = 12.dp, vertical = 12.dp),
4545
inputField = {
4646
InputField(
4747
query = miuixSearchValue,
@@ -52,7 +52,7 @@ fun MainPage(
5252
label = "Search",
5353
leadingIcon = {
5454
Image(
55-
modifier = Modifier.padding(horizontal = 14.dp),
55+
modifier = Modifier.padding(horizontal = 12.dp),
5656
imageVector = MiuixIcons.Search,
5757
colorFilter = BlendModeColorFilter(
5858
MiuixTheme.colorScheme.onPrimary,
@@ -66,7 +66,7 @@ fun MainPage(
6666
outsideRightAction = {
6767
Text(
6868
modifier = Modifier
69-
.padding(start = 24.dp)
69+
.padding(start = 12.dp)
7070
.clickable(
7171
interactionSource = null,
7272
indication = null

‎composeApp/src/commonMain/kotlin/component/OtherComponent.kt‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ fun OtherComponent(padding: PaddingValues) {
4747
Row(
4848
modifier = Modifier
4949
.fillMaxWidth()
50-
.padding(horizontal = 24.dp, vertical = 20.dp),
50+
.padding(horizontal = 12.dp, vertical = 12.dp),
5151
horizontalArrangement = Arrangement.SpaceBetween
5252
) {
5353
Button(
@@ -58,7 +58,7 @@ fun OtherComponent(padding: PaddingValues) {
5858
buttonText = "Click: $clickCount"
5959
}
6060
)
61-
Spacer(Modifier.width(20.dp))
61+
Spacer(Modifier.width(12.dp))
6262
Button(
6363
modifier = Modifier.weight(1f),
6464
text = submitButtonText,
@@ -73,7 +73,7 @@ fun OtherComponent(padding: PaddingValues) {
7373
Row(
7474
modifier = Modifier
7575
.fillMaxWidth()
76-
.padding(horizontal = 24.dp),
76+
.padding(horizontal = 12.dp),
7777
horizontalArrangement = Arrangement.SpaceBetween
7878
) {
7979
Button(
@@ -83,7 +83,7 @@ fun OtherComponent(padding: PaddingValues) {
8383
enabled = false,
8484
onClick = {}
8585
)
86-
Spacer(Modifier.width(20.dp))
86+
Spacer(Modifier.width(12.dp))
8787
Button(
8888
modifier = Modifier.weight(1f),
8989
text = "Disabled",
@@ -96,8 +96,7 @@ fun OtherComponent(padding: PaddingValues) {
9696
TextField(
9797
value = text1,
9898
onValueChange = { text1 = it },
99-
insideMargin = DpSize(14.dp, 14.dp),
100-
modifier = Modifier.padding(horizontal = 24.dp, vertical = 20.dp),
99+
modifier = Modifier.padding(horizontal = 12.dp, vertical = 12.dp),
101100
keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
102101
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done)
103102
)
@@ -107,40 +106,40 @@ fun OtherComponent(padding: PaddingValues) {
107106
onValueChange = { text2 = it },
108107
backgroundColor = MiuixTheme.colorScheme.primaryContainer,
109108
label = "Text Field",
110-
modifier = Modifier.padding(horizontal = 24.dp),
109+
modifier = Modifier.padding(horizontal = 12.dp),
111110
keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
112111
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done)
113112
)
114113

115114
Slider(
116115
progress = progress,
117116
onProgressChange = { newProgress -> progress = newProgress },
118-
modifier = Modifier.padding(horizontal = 24.dp, vertical = 20.dp)
117+
modifier = Modifier.padding(horizontal = 12.dp, vertical = 12.dp)
119118
)
120119

121120
Slider(
122121
progress = progressDisable,
123122
onProgressChange = {},
124123
enabled = false,
125-
modifier = Modifier.padding(horizontal = 24.dp)
124+
modifier = Modifier.padding(horizontal = 12.dp)
126125
)
127126

128127
Card(
129128
modifier = Modifier
130129
.fillMaxWidth()
131-
.padding(horizontal = 24.dp, vertical = 20.dp),
132-
insideMargin = DpSize(18.dp, 18.dp)
130+
.padding(horizontal = 12.dp, vertical = 12.dp),
131+
insideMargin = DpSize(16.dp, 16.dp)
133132
) {
134133
CardView()
135134
}
136135

137136
Card(
138137
modifier = Modifier
139138
.fillMaxWidth()
140-
.padding(horizontal = 24.dp)
141-
.padding(bottom = 20.dp + padding.calculateBottomPadding()),
139+
.padding(horizontal = 12.dp)
140+
.padding(bottom = 12.dp + padding.calculateBottomPadding()),
142141
color = MiuixTheme.colorScheme.primary,
143-
insideMargin = DpSize(18.dp, 18.dp)
142+
insideMargin = DpSize(16.dp, 16.dp)
144143
) {
145144
CardView(color = Color.White)
146145
}
@@ -156,7 +155,7 @@ fun CardView(color: Color = MiuixTheme.colorScheme.onBackground) {
156155
fontWeight = FontWeight.SemiBold,
157156
fontSize = 16.sp
158157
)
159-
Spacer(Modifier.height(10.dp))
158+
Spacer(Modifier.height(6.dp))
160159
Text(
161160
color = color,
162161
text = "123456789",

‎composeApp/src/commonMain/kotlin/component/TextComponent.kt‎

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ import androidx.compose.animation.fadeIn
66
import androidx.compose.animation.fadeOut
77
import androidx.compose.animation.shrinkVertically
88
import androidx.compose.foundation.Image
9+
import androidx.compose.foundation.background
910
import androidx.compose.foundation.layout.Arrangement
1011
import androidx.compose.foundation.layout.Row
1112
import androidx.compose.foundation.layout.Spacer
1213
import androidx.compose.foundation.layout.fillMaxWidth
1314
import androidx.compose.foundation.layout.padding
15+
import androidx.compose.foundation.layout.size
1416
import androidx.compose.foundation.layout.width
1517
import androidx.compose.material.icons.Icons
1618
import androidx.compose.material.icons.filled.Person
@@ -20,26 +22,29 @@ import androidx.compose.runtime.getValue
2022
import androidx.compose.runtime.mutableStateOf
2123
import androidx.compose.runtime.remember
2224
import androidx.compose.runtime.setValue
25+
import androidx.compose.ui.Alignment
2326
import androidx.compose.ui.Modifier
27+
import androidx.compose.ui.draw.clip
2428
import androidx.compose.ui.graphics.ColorFilter
25-
import androidx.compose.ui.unit.DpSize
2629
import androidx.compose.ui.unit.dp
27-
import top.yukonga.miuix.kmp.extra.CheckboxLocation
28-
import top.yukonga.miuix.kmp.extra.SuperArrow
29-
import top.yukonga.miuix.kmp.extra.SuperCheckbox
30-
import top.yukonga.miuix.kmp.extra.SuperDialog
31-
import top.yukonga.miuix.kmp.extra.SuperDropdown
32-
import top.yukonga.miuix.kmp.extra.SuperSwitch
3330
import top.yukonga.miuix.kmp.basic.BasicComponent
31+
import top.yukonga.miuix.kmp.basic.Box
3432
import top.yukonga.miuix.kmp.basic.Button
3533
import top.yukonga.miuix.kmp.basic.Card
3634
import top.yukonga.miuix.kmp.basic.Checkbox
3735
import top.yukonga.miuix.kmp.basic.SmallTitle
3836
import top.yukonga.miuix.kmp.basic.Switch
3937
import top.yukonga.miuix.kmp.basic.Text
38+
import top.yukonga.miuix.kmp.extra.CheckboxLocation
39+
import top.yukonga.miuix.kmp.extra.SuperArrow
40+
import top.yukonga.miuix.kmp.extra.SuperCheckbox
41+
import top.yukonga.miuix.kmp.extra.SuperDialog
42+
import top.yukonga.miuix.kmp.extra.SuperDropdown
43+
import top.yukonga.miuix.kmp.extra.SuperSwitch
4044
import top.yukonga.miuix.kmp.theme.MiuixTheme
4145
import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissDialog
4246
import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.showDialog
47+
import top.yukonga.miuix.kmp.utils.squircleshape.SquircleShape
4348

4449
@Composable
4550
fun TextComponent() {
@@ -55,7 +60,7 @@ fun TextComponent() {
5560
var miuixSuperCheckboxState by remember { mutableStateOf(false) }
5661
var miuixSuperRightCheckbox by remember { mutableStateOf("false") }
5762
var miuixSuperRightCheckboxState by remember { mutableStateOf(false) }
58-
var miuixSuperSwitch by remember { mutableStateOf("State: false") }
63+
var miuixSuperSwitch by remember { mutableStateOf("false") }
5964
var miuixSuperSwitchState by remember { mutableStateOf(false) }
6065
var miuixSuperSwitchAnimState by remember { mutableStateOf(false) }
6166

@@ -67,7 +72,7 @@ fun TextComponent() {
6772
},
6873
rightActions = {
6974
Text(text = "Right1")
70-
Spacer(Modifier.width(8.dp))
75+
Spacer(Modifier.width(6.dp))
7176
Text(text = "Right2")
7277
},
7378
onClick = {}
@@ -81,11 +86,19 @@ fun TextComponent() {
8186

8287
SuperArrow(
8388
leftAction = {
84-
Image(
85-
colorFilter = ColorFilter.tint(MiuixTheme.colorScheme.onBackground),
86-
imageVector = Icons.Default.Person,
87-
contentDescription = "Person",
88-
)
89+
Box(
90+
contentAlignment = Alignment.Center,
91+
modifier = Modifier
92+
.size(42.dp)
93+
.clip(SquircleShape(14.dp))
94+
.background(MiuixTheme.colorScheme.primary.copy(alpha = 0.2f))
95+
) {
96+
Image(
97+
colorFilter = ColorFilter.tint(MiuixTheme.colorScheme.onBackground),
98+
imageVector = Icons.Default.Person,
99+
contentDescription = "Person",
100+
)
101+
}
89102
},
90103
title = "Person",
91104
summary = "An introduction",
@@ -95,7 +108,7 @@ fun TextComponent() {
95108
Row(
96109
modifier = Modifier
97110
.fillMaxWidth()
98-
.padding(horizontal = 24.dp, vertical = 14.dp),
111+
.padding(horizontal = 12.dp, vertical = 12.dp),
99112
horizontalArrangement = Arrangement.SpaceBetween
100113
) {
101114
Checkbox(
@@ -127,26 +140,26 @@ fun TextComponent() {
127140
Row(
128141
modifier = Modifier
129142
.fillMaxWidth()
130-
.padding(horizontal = 24.dp, vertical = 14.dp),
143+
.padding(horizontal = 12.dp, vertical = 12.dp),
131144
horizontalArrangement = Arrangement.SpaceBetween
132145
) {
133146
Switch(
134147
checked = switch,
135148
onCheckedChange = { switch = it }
136149
)
137150
Switch(
138-
modifier = Modifier.padding(start = 8.dp),
151+
modifier = Modifier.padding(start = 6.dp),
139152
checked = switchTrue,
140153
onCheckedChange = { switchTrue = it }
141154
)
142155
Switch(
143-
modifier = Modifier.padding(start = 8.dp),
156+
modifier = Modifier.padding(start = 6.dp),
144157
enabled = false,
145158
checked = false,
146159
onCheckedChange = { }
147160
)
148161
Switch(
149-
modifier = Modifier.padding(start = 8.dp),
162+
modifier = Modifier.padding(start = 6.dp),
150163
enabled = false,
151164
checked = true,
152165
onCheckedChange = { }
@@ -158,27 +171,15 @@ fun TextComponent() {
158171
Card(
159172
modifier = Modifier
160173
.fillMaxWidth()
161-
.padding(horizontal = 16.dp)
174+
.padding(horizontal = 12.dp)
162175
) {
163176
SuperCheckbox(
164-
insideMargin = DpSize(18.dp, 18.dp),
165-
title = "Checkbox",
166-
summary = miuixSuperCheckbox,
167-
checked = miuixSuperCheckboxState,
168-
onCheckedChange = {
169-
miuixSuperCheckboxState = it
170-
miuixSuperCheckbox = "State: $it"
171-
},
172-
)
173-
174-
SuperCheckbox(
175-
insideMargin = DpSize(18.dp, 18.dp),
176177
checkboxLocation = CheckboxLocation.Right,
177178
title = "Checkbox",
178179
checked = miuixSuperRightCheckboxState,
179180
rightActions = {
180181
Text(
181-
modifier = Modifier.padding(end = 8.dp),
182+
modifier = Modifier.padding(end = 6.dp),
182183
text = miuixSuperRightCheckbox,
183184
color = MiuixTheme.colorScheme.subTextBase
184185
)
@@ -189,8 +190,17 @@ fun TextComponent() {
189190
},
190191
)
191192

193+
SuperCheckbox(
194+
title = "Checkbox",
195+
summary = miuixSuperCheckbox,
196+
checked = miuixSuperCheckboxState,
197+
onCheckedChange = {
198+
miuixSuperCheckboxState = it
199+
miuixSuperCheckbox = "State: $it"
200+
},
201+
)
202+
192203
SuperSwitch(
193-
insideMargin = DpSize(18.dp, 18.dp),
194204
title = "Switch",
195205
summary = "Click to expand a Switch",
196206
checked = miuixSuperSwitchAnimState,
@@ -205,19 +215,23 @@ fun TextComponent() {
205215
exit = fadeOut() + shrinkVertically()
206216
) {
207217
SuperSwitch(
208-
insideMargin = DpSize(18.dp, 18.dp),
209218
title = "Switch",
210-
summary = miuixSuperSwitch,
211219
checked = miuixSuperSwitchState,
220+
rightActions = {
221+
Text(
222+
modifier = Modifier.padding(end = 6.dp),
223+
text = miuixSuperSwitch,
224+
color = MiuixTheme.colorScheme.subTextBase
225+
)
226+
},
212227
onCheckedChange = {
213228
miuixSuperSwitchState = it
214-
miuixSuperSwitch = "State: $it"
229+
miuixSuperSwitch = "$it"
215230
},
216231
)
217232
}
218233

219234
SuperArrow(
220-
insideMargin = DpSize(18.dp, 18.dp),
221235
title = "Dialog",
222236
summary = "Click to show a Dialog",
223237
onClick = {
@@ -226,7 +240,6 @@ fun TextComponent() {
226240
)
227241

228242
SuperDropdown(
229-
insideMargin = DpSize(18.dp, 18.dp),
230243
title = "Dropdown",
231244
summary = "Popup near click",
232245
items = dropdownOptions,
@@ -235,7 +248,6 @@ fun TextComponent() {
235248
)
236249

237250
SuperDropdown(
238-
insideMargin = DpSize(18.dp, 18.dp),
239251
title = "Dropdown",
240252
summary = "Popup always on right",
241253
alwaysRight = true,

0 commit comments

Comments
 (0)