Skip to content

Commit 8705269

Browse files
authored
Merge pull request #1585 from DimensionDev/feature/ios_compose_ui
add experimental compose ui for ios
2 parents 4f04b47 + a1f603a commit 8705269

File tree

25 files changed

+226
-193
lines changed

25 files changed

+226
-193
lines changed

compose-ui/src/androidMain/kotlin/dev/dimension/flare/ui/theme/PlatformColorScheme.android.kt

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,8 @@ internal actual object PlatformColorScheme {
3232
actual val onCard: Color
3333
@Composable
3434
get() = MaterialTheme.colorScheme.onSurface
35+
36+
actual val text: Color
37+
@Composable
38+
get() = MaterialTheme.colorScheme.onBackground
3539
}

compose-ui/src/androidMain/kotlin/dev/dimension/flare/ui/theme/PlatformTypography.android.kt

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,8 @@ internal actual object PlatformTypography {
3333
actual val h6: TextStyle
3434
@Composable
3535
get() = MaterialTheme.typography.titleSmall
36+
37+
actual val body: TextStyle
38+
@Composable
39+
get() = MaterialTheme.typography.bodyMedium
3640
}

compose-ui/src/commonMain/kotlin/dev/dimension/flare/ui/component/status/FeedComponent.kt

Lines changed: 63 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import androidx.compose.ui.unit.dp
1515
import dev.dimension.flare.ui.component.DateTimeText
1616
import dev.dimension.flare.ui.component.NetworkImage
1717
import dev.dimension.flare.ui.component.platform.PlatformText
18-
import dev.dimension.flare.ui.component.platform.isBigScreen
1918
import dev.dimension.flare.ui.model.ClickContext
2019
import dev.dimension.flare.ui.model.UiTimeline
2120
import dev.dimension.flare.ui.theme.PlatformTheme
@@ -26,7 +25,6 @@ internal fun FeedComponent(
2625
data: UiTimeline.ItemContent.Feed,
2726
modifier: Modifier = Modifier,
2827
) {
29-
val bigScreen = isBigScreen()
3028
val uriHandler = LocalUriHandler.current
3129
Column(
3230
modifier =
@@ -35,95 +33,77 @@ internal fun FeedComponent(
3533
data.onClicked.invoke(
3634
ClickContext(uriHandler::openUri),
3735
)
38-
}.let {
39-
if (bigScreen) {
40-
it
41-
} else {
42-
it.padding(
43-
horizontal = screenHorizontalPadding,
44-
vertical = 8.dp,
45-
)
46-
}
47-
}.then(modifier),
36+
}.padding(
37+
horizontal = screenHorizontalPadding,
38+
vertical = 8.dp,
39+
).then(modifier),
40+
verticalArrangement = Arrangement.spacedBy(4.dp),
4841
) {
49-
Column(
50-
modifier =
51-
Modifier
52-
.let {
53-
if (bigScreen) {
54-
it.padding(8.dp)
55-
} else {
56-
it
57-
}
58-
},
59-
verticalArrangement = Arrangement.spacedBy(4.dp),
42+
Row(
43+
horizontalArrangement = Arrangement.spacedBy(8.dp),
44+
verticalAlignment = androidx.compose.ui.Alignment.CenterVertically,
6045
) {
61-
Row(
62-
horizontalArrangement = Arrangement.spacedBy(8.dp),
63-
verticalAlignment = androidx.compose.ui.Alignment.CenterVertically,
64-
) {
65-
data.sourceIcon?.let {
66-
NetworkImage(
67-
it,
68-
contentDescription = data.source,
69-
modifier = Modifier.size(16.dp),
70-
)
71-
}
72-
PlatformText(
73-
text = data.source,
74-
style = PlatformTheme.typography.caption,
75-
modifier = Modifier.weight(1f),
76-
maxLines = 1,
46+
data.sourceIcon?.let {
47+
NetworkImage(
48+
it,
49+
contentDescription = data.source,
50+
modifier = Modifier.size(16.dp),
7751
)
78-
data.createdAt?.let {
79-
DateTimeText(
80-
it,
81-
style = PlatformTheme.typography.caption,
82-
color = PlatformTheme.colorScheme.caption,
83-
)
84-
}
8552
}
8653
PlatformText(
87-
text = data.title,
88-
style = PlatformTheme.typography.title,
54+
text = data.source,
55+
style = PlatformTheme.typography.caption,
56+
modifier = Modifier.weight(1f),
57+
maxLines = 1,
8958
)
90-
Row(
91-
horizontalArrangement = Arrangement.spacedBy(8.dp),
92-
) {
93-
data.description?.let {
94-
PlatformText(
95-
text = it,
96-
style = PlatformTheme.typography.caption,
97-
maxLines = 5,
98-
color = PlatformTheme.colorScheme.caption,
99-
modifier =
100-
Modifier.let {
101-
if (data.image != null) {
102-
it.weight(1f)
59+
data.createdAt?.let {
60+
DateTimeText(
61+
it,
62+
style = PlatformTheme.typography.caption,
63+
color = PlatformTheme.colorScheme.caption,
64+
)
65+
}
66+
}
67+
PlatformText(
68+
text = data.title,
69+
style = PlatformTheme.typography.title,
70+
)
71+
Row(
72+
horizontalArrangement = Arrangement.spacedBy(8.dp),
73+
) {
74+
data.description?.let {
75+
PlatformText(
76+
text = it,
77+
style = PlatformTheme.typography.caption,
78+
maxLines = 5,
79+
color = PlatformTheme.colorScheme.caption,
80+
modifier =
81+
Modifier.let {
82+
if (data.image != null) {
83+
it.weight(1f)
84+
} else {
85+
it
86+
}
87+
},
88+
)
89+
}
90+
data.image?.let {
91+
NetworkImage(
92+
model = it,
93+
contentDescription = data.title,
94+
modifier =
95+
Modifier
96+
.let {
97+
if (data.description != null) {
98+
it.size(80.dp)
10399
} else {
104-
it
100+
it.aspectRatio(16f / 9f)
105101
}
106-
},
107-
)
108-
}
109-
data.image?.let {
110-
NetworkImage(
111-
model = it,
112-
contentDescription = data.title,
113-
modifier =
114-
Modifier
115-
.let {
116-
if (data.description != null) {
117-
it.size(80.dp)
118-
} else {
119-
it.aspectRatio(16f / 9f)
120-
}
121-
}.clip(
122-
PlatformTheme.shapes.medium,
123-
),
124-
customHeaders = data.imageHeaders,
125-
)
126-
}
102+
}.clip(
103+
PlatformTheme.shapes.medium,
104+
),
105+
customHeaders = data.imageHeaders,
106+
)
127107
}
128108
}
129109
}

compose-ui/src/commonMain/kotlin/dev/dimension/flare/ui/component/status/StatusActionButton.kt

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.height
1919
import androidx.compose.foundation.layout.padding
2020
import androidx.compose.foundation.layout.width
2121
import androidx.compose.runtime.Composable
22+
import androidx.compose.runtime.CompositionLocalProvider
2223
import androidx.compose.runtime.getValue
2324
import androidx.compose.runtime.mutableStateOf
2425
import androidx.compose.runtime.remember
@@ -40,6 +41,7 @@ import dev.dimension.flare.ui.component.platform.PlatformTextStyle
4041
import dev.dimension.flare.ui.component.platform.rippleIndication
4142
import dev.dimension.flare.ui.model.Digit
4243
import dev.dimension.flare.ui.theme.PlatformContentColor
44+
import dev.dimension.flare.ui.theme.PlatformTheme
4345
import kotlinx.collections.immutable.ImmutableList
4446

4547
@Composable
@@ -182,15 +184,20 @@ internal fun StatusActionGroup(
182184
enabled = enabled,
183185
withTextMinWidth = withTextMinWidth,
184186
)
185-
PlatformDropdownMenu(
186-
expanded = showMenu,
187-
onDismissRequest = { showMenu = false },
187+
CompositionLocalProvider(
188+
PlatformContentColor provides PlatformTheme.colorScheme.text,
189+
PlatformTextStyle provides PlatformTheme.typography.body,
188190
) {
189-
subMenus.invoke(
190-
this,
191-
{ showMenu = false },
192-
showMenu,
193-
)
191+
PlatformDropdownMenu(
192+
expanded = showMenu,
193+
onDismissRequest = { showMenu = false },
194+
) {
195+
subMenus.invoke(
196+
this,
197+
{ showMenu = false },
198+
showMenu,
199+
)
200+
}
194201
}
195202
}
196203
}

compose-ui/src/commonMain/kotlin/dev/dimension/flare/ui/theme/PlatformColorScheme.kt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,7 @@ internal expect object PlatformColorScheme {
3030

3131
@get:Composable
3232
val onCard: Color
33+
34+
@get:Composable
35+
val text: Color
3336
}

compose-ui/src/commonMain/kotlin/dev/dimension/flare/ui/theme/PlatformTypography.kt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,7 @@ internal expect object PlatformTypography {
3030

3131
@get:Composable
3232
val h6: TextStyle
33+
34+
@get:Composable
35+
val body: TextStyle
3336
}

compose-ui/src/iosMain/kotlin/dev/dimension/flare/ui/component/platform/PlatformDropdown.ios.kt

Lines changed: 54 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
11
package dev.dimension.flare.ui.component.platform
22

3-
import androidx.compose.foundation.background
4-
import androidx.compose.foundation.clickable
5-
import androidx.compose.foundation.layout.ColumnScope
6-
import androidx.compose.foundation.layout.padding
73
import androidx.compose.runtime.Composable
8-
import androidx.compose.runtime.CompositionLocalProvider
4+
import androidx.compose.runtime.remember
95
import androidx.compose.ui.Modifier
10-
import androidx.compose.ui.draw.clip
11-
import androidx.compose.ui.unit.dp
6+
import com.slapps.cupertino.CupertinoDropdownMenu
7+
import com.slapps.cupertino.CupertinoMenuScope
128
import com.slapps.cupertino.ExperimentalCupertinoApi
13-
import com.slapps.cupertino.LocalContentColor
14-
import com.slapps.cupertino.ProvideTextStyle
15-
import com.slapps.cupertino.theme.CupertinoTheme
16-
import dev.dimension.flare.ui.theme.PlatformTheme
9+
import com.slapps.cupertino.MenuAction
1710

18-
internal actual typealias PlatformDropdownMenuScope = ColumnScope
11+
// internal actual typealias PlatformDropdownMenuScope = ColumnScope
1912

20-
// internal actual interface PlatformDropdownMenuScope
13+
internal actual interface PlatformDropdownMenuScope
2114

22-
// private data class PlatformDropdownMenuScopeImpl(
23-
// val delegate: CupertinoMenuScope
24-
// ) : PlatformDropdownMenuScope
15+
private data class PlatformDropdownMenuScopeImpl(
16+
val delegate: CupertinoMenuScope,
17+
) : PlatformDropdownMenuScope
2518

2619
@OptIn(ExperimentalCupertinoApi::class)
2720
@Composable
@@ -112,15 +105,15 @@ internal actual fun PlatformDropdownMenu(
112105
// }
113106
// },
114107
// )
115-
// CupertinoDropdownMenu(
116-
// expanded = expanded,
117-
// onDismissRequest = onDismissRequest,
118-
// modifier = modifier,
119-
// content = {
120-
// val scope = remember(this) { PlatformDropdownMenuScopeImpl(this) }
121-
// content.invoke(scope)
122-
// }
123-
// )
108+
CupertinoDropdownMenu(
109+
expanded = expanded,
110+
onDismissRequest = onDismissRequest,
111+
modifier = modifier,
112+
content = {
113+
val scope = remember(this) { PlatformDropdownMenuScopeImpl(this) }
114+
content.invoke(scope)
115+
},
116+
)
124117
}
125118

126119
@Composable
@@ -131,40 +124,40 @@ internal actual fun PlatformDropdownMenuScope.PlatformDropdownMenuItem(
131124
leadingIcon: @Composable (() -> Unit)?,
132125
trailingIcon: @Composable (() -> Unit)?,
133126
) {
134-
ProvideTextStyle(
135-
CupertinoTheme.typography.body,
136-
) {
137-
CompositionLocalProvider(
138-
LocalContentColor provides CupertinoTheme.colorScheme.label,
139-
) {
140-
PlatformListItem(
141-
modifier =
142-
modifier
143-
.clip(shape = PlatformTheme.shapes.listCardItemShape)
144-
.background(
145-
CupertinoTheme.colorScheme.tertiarySystemBackground,
146-
).padding(vertical = 8.dp)
147-
.clickable {
148-
onClick.invoke()
149-
},
150-
leadingContent = {
151-
leadingIcon?.invoke()
152-
},
153-
headlineContent = {
154-
text()
155-
},
156-
trailingContent = {
157-
trailingIcon?.invoke()
158-
},
159-
)
160-
}
161-
}
162-
// (this as PlatformDropdownMenuScopeImpl).delegate.MenuAction(
163-
// modifier = modifier,
164-
// title = text,
165-
// onClick = onClick,
166-
// icon = {
167-
// leadingIcon?.invoke()
168-
// },
169-
// )
127+
// ProvideTextStyle(
128+
// CupertinoTheme.typography.body,
129+
// ) {
130+
// CompositionLocalProvider(
131+
// LocalContentColor provides CupertinoTheme.colorScheme.label,
132+
// ) {
133+
// PlatformListItem(
134+
// modifier =
135+
// modifier
136+
// .clip(shape = PlatformTheme.shapes.listCardItemShape)
137+
// .background(
138+
// CupertinoTheme.colorScheme.tertiarySystemBackground,
139+
// ).padding(vertical = 8.dp)
140+
// .clickable {
141+
// onClick.invoke()
142+
// },
143+
// leadingContent = {
144+
// leadingIcon?.invoke()
145+
// },
146+
// headlineContent = {
147+
// text()
148+
// },
149+
// trailingContent = {
150+
// trailingIcon?.invoke()
151+
// },
152+
// )
153+
// }
154+
// }
155+
(this as PlatformDropdownMenuScopeImpl).delegate.MenuAction(
156+
modifier = modifier,
157+
title = text,
158+
onClick = onClick,
159+
icon = {
160+
leadingIcon?.invoke()
161+
},
162+
)
170163
}

0 commit comments

Comments
 (0)