Skip to content

Commit f8dd313

Browse files
VictorKabataVictorKabata
authored
Merge pull request #140 from VictorKabata/fix-theming
Set up adaptive UI
2 parents e2ea6a8 + 262edb9 commit f8dd313

File tree

34 files changed

+402
-413
lines changed

34 files changed

+402
-413
lines changed

‎composeApp/build.gradle.kts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,8 @@ kotlin {
7979
implementation(libs.bundles.kmpPalette)
8080

8181
implementation(libs.adaptive.core)
82+
83+
implementation(libs.sdpSsp)
8284
}
8385

8486
commonTest.dependencies {

‎composeApp/src/androidMain/kotlin/com/vickbt/composeApp/domain/utils/Constants.android.kt

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
package com.vickbt.composeApp.domain.utils
2+
3+
actual val sdpSspScalingRatio: Double
4+
get() = 300.0

‎composeApp/src/commonMain/kotlin/com/vickbt/composeApp/domain/utils/Constants.kt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@ object Constants {
2121

2222
internal const val DATASTORE_FILE_NAME = "notflix.preferences_pb"
2323
}
24+
25+
expect val sdpSspScalingRatio: Double

‎composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ExpandedText.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ fun ExpandableText(
6565
Box(modifier) {
6666
Text(
6767
text = cutText ?: text,
68-
maxLines = if (expanded) Int.MAX_VALUE else minimizedMaxLines,
68+
maxLines = if (expanded) minimizedMaxLines + 2 else minimizedMaxLines,
6969
overflow = TextOverflow.Ellipsis,
7070
onTextLayout = { textLayoutResultState.value = it },
7171
style = style,

‎composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/FilterHome.kt

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
1111
import androidx.compose.foundation.layout.padding
1212
import androidx.compose.foundation.layout.size
1313
import androidx.compose.foundation.shape.CircleShape
14-
import androidx.compose.foundation.shape.RoundedCornerShape
1514
import androidx.compose.material.icons.Icons
1615
import androidx.compose.material.icons.rounded.Close
1716
import androidx.compose.material.icons.rounded.KeyboardArrowDown
@@ -92,14 +91,14 @@ fun FilterHome(
9291
Text(
9392
modifier = Modifier.padding(vertical = 2.dp),
9493
text = stringResource(Res.string.tv_shows),
95-
style = MaterialTheme.typography.labelMedium,
94+
style = MaterialTheme.typography.labelSmall,
9695
maxLines = 1,
9796
overflow = TextOverflow.Ellipsis,
9897
color = MaterialTheme.colorScheme.onBackground,
9998
textAlign = TextAlign.Center
10099
)
101100
},
102-
shape = RoundedCornerShape(16.dp),
101+
shape = MaterialTheme.shapes.large,
103102
border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.onBackground)
104103
)
105104
}
@@ -114,14 +113,14 @@ fun FilterHome(
114113
Text(
115114
modifier = Modifier.padding(vertical = 2.dp),
116115
text = stringResource(Res.string.movies),
117-
style = MaterialTheme.typography.labelMedium,
116+
style = MaterialTheme.typography.labelSmall,
118117
maxLines = 1,
119118
overflow = TextOverflow.Ellipsis,
120119
color = MaterialTheme.colorScheme.onBackground,
121120
textAlign = TextAlign.Center
122121
)
123122
},
124-
shape = RoundedCornerShape(16.dp),
123+
shape = MaterialTheme.shapes.large,
125124
border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.onBackground)
126125
)
127126
}
@@ -132,14 +131,14 @@ fun FilterHome(
132131
Text(
133132
modifier = Modifier.padding(vertical = 2.dp),
134133
text = stringResource(Res.string.categories),
135-
style = MaterialTheme.typography.labelMedium,
134+
style = MaterialTheme.typography.labelSmall,
136135
maxLines = 1,
137136
overflow = TextOverflow.Ellipsis,
138137
color = MaterialTheme.colorScheme.onBackground,
139138
textAlign = TextAlign.Center
140139
)
141140
},
142-
shape = RoundedCornerShape(16.dp),
141+
shape = MaterialTheme.shapes.large,
143142
trailingIcon = {
144143
Icon(
145144
imageVector = Icons.Rounded.KeyboardArrowDown,

‎composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/ItemMovieCast.kt

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ package com.vickbt.composeApp.ui.components
33
import androidx.compose.foundation.layout.Arrangement
44
import androidx.compose.foundation.layout.Column
55
import androidx.compose.foundation.layout.size
6-
import androidx.compose.foundation.layout.width
6+
import androidx.compose.foundation.layout.widthIn
77
import androidx.compose.foundation.shape.CircleShape
88
import androidx.compose.material3.MaterialTheme
99
import androidx.compose.material3.Text
@@ -15,43 +15,40 @@ import androidx.compose.ui.layout.ContentScale
1515
import androidx.compose.ui.text.font.FontWeight
1616
import androidx.compose.ui.text.style.TextAlign
1717
import androidx.compose.ui.text.style.TextOverflow
18-
import androidx.compose.ui.unit.dp
19-
import androidx.compose.ui.unit.sp
2018
import coil3.compose.AsyncImage
2119
import com.vickbt.composeApp.domain.models.Actor
2220
import com.vickbt.composeApp.ui.theme.TextSecondary
2321
import com.vickbt.composeApp.utils.loadImage
22+
import network.chaintech.sdpcomposemultiplatform.sdp
2423

2524
@Composable
2625
fun ItemMovieCast(modifier: Modifier = Modifier, actor: Actor) {
2726
Column(
2827
modifier = modifier,
2928
horizontalAlignment = Alignment.CenterHorizontally,
30-
verticalArrangement = Arrangement.spacedBy(space = 1.dp)
29+
verticalArrangement = Arrangement.spacedBy(space = 1.sdp)
3130
) {
3231
AsyncImage(
33-
modifier = Modifier.size(80.dp).clip(CircleShape),
32+
modifier = Modifier.size(64.sdp).clip(CircleShape),
3433
model = actor.profilePath?.loadImage(),
3534
contentDescription = "Cast",
3635
contentScale = ContentScale.Crop,
3736
)
3837

3938
Text(
40-
modifier = Modifier.width(78.dp),
39+
modifier = Modifier.widthIn(max = 64.sdp),
4140
text = actor.name ?: "Unknown actor",
42-
style = MaterialTheme.typography.headlineSmall,
43-
fontSize = 14.sp,
41+
style = MaterialTheme.typography.labelSmall.copy(fontWeight = FontWeight.SemiBold),
4442
overflow = TextOverflow.Ellipsis,
4543
textAlign = TextAlign.Center,
4644
maxLines = 1,
4745
color = MaterialTheme.colorScheme.onBackground
4846
)
4947

5048
Text(
51-
modifier = Modifier.width(77.dp),
49+
modifier = Modifier.widthIn(max = 64.sdp),
5250
text = actor.character ?: "Unknown character",
53-
style = MaterialTheme.typography.labelMedium.copy(fontWeight = FontWeight.Medium),
54-
fontSize = 12.sp,
51+
style = MaterialTheme.typography.labelSmall,
5552
color = TextSecondary,
5653
overflow = TextOverflow.Ellipsis,
5754
textAlign = TextAlign.Center,

‎composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardDescription.kt

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import com.vickbt.shared.resources.see_more
3232
import io.ktor.http.Url
3333
import kotlinx.coroutines.Dispatchers
3434
import kotlinx.coroutines.IO
35+
import network.chaintech.sdpcomposemultiplatform.sdp
3536
import org.jetbrains.compose.resources.stringResource
3637

3738
@Composable
@@ -56,7 +57,10 @@ fun MovieCardDescription(
5657
}
5758
}
5859

59-
Card(modifier = modifier.clickable { onItemClick(movie) }) {
60+
Card(
61+
modifier = modifier.height(200.sdp).clickable { onItemClick(movie) },
62+
shape = MaterialTheme.shapes.extraSmall
63+
) {
6064
Box {
6165
//region Movie Cover Image
6266
AsyncImage(
@@ -74,7 +78,7 @@ fun MovieCardDescription(
7478
Box(
7579
modifier = Modifier
7680
.fillMaxWidth()
77-
.height(190.dp)
81+
.height(120.dp)
7882
.align(Alignment.BottomCenter)
7983
.background(
8084
Brush.verticalGradient(
@@ -87,26 +91,27 @@ fun MovieCardDescription(
8791
Column(
8892
modifier = Modifier
8993
.fillMaxWidth()
90-
.padding(horizontal = 8.dp)
94+
.padding(4.dp)
9195
.align(Alignment.BottomCenter)
9296
) {
9397
Text(
9498
modifier = Modifier,
9599
text = movie.title,
96100
fontSize = 24.sp,
97101
maxLines = 1,
98-
style = MaterialTheme.typography.headlineLarge,
102+
style = MaterialTheme.typography.titleLarge,
99103
overflow = TextOverflow.Ellipsis,
100104
textAlign = TextAlign.Start,
101105
color = dominantColorState.onColor,
102106
lineHeight = 30.sp
103107
)
104108

105109
ExpandableText(
106-
modifier = Modifier.padding(bottom = 4.dp),
110+
modifier = Modifier,
107111
text = movie.overview,
108112
overFlowText = overFlowText,
109-
minimizedMaxLines = maxLine
113+
minimizedMaxLines = maxLine,
114+
style = MaterialTheme.typography.bodySmall
110115
)
111116
}
112117
}

‎composeApp/src/commonMain/kotlin/com/vickbt/composeApp/ui/components/MovieCardLandscape.kt

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package com.vickbt.composeApp.ui.components
22

33
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.basicMarquee
45
import androidx.compose.foundation.clickable
56
import androidx.compose.foundation.layout.Arrangement
67
import androidx.compose.foundation.layout.Box
@@ -12,7 +13,6 @@ import androidx.compose.foundation.layout.height
1213
import androidx.compose.foundation.layout.padding
1314
import androidx.compose.foundation.layout.width
1415
import androidx.compose.foundation.layout.wrapContentHeight
15-
import androidx.compose.foundation.shape.RoundedCornerShape
1616
import androidx.compose.material3.Card
1717
import androidx.compose.material3.CardDefaults
1818
import androidx.compose.material3.HorizontalDivider
@@ -27,7 +27,6 @@ import androidx.compose.ui.graphics.Color
2727
import androidx.compose.ui.layout.ContentScale
2828
import androidx.compose.ui.text.style.TextAlign
2929
import androidx.compose.ui.text.style.TextOverflow
30-
import androidx.compose.ui.unit.dp
3130
import coil3.compose.AsyncImage
3231
import com.kmpalette.loader.NetworkLoader
3332
import com.kmpalette.loader.rememberNetworkLoader
@@ -44,11 +43,12 @@ import com.vickbt.shared.resources.unknown_movie
4443
import io.ktor.http.Url
4544
import kotlinx.coroutines.Dispatchers
4645
import kotlinx.coroutines.IO
46+
import network.chaintech.sdpcomposemultiplatform.sdp
4747
import org.jetbrains.compose.resources.stringResource
4848

4949
@Composable
5050
fun MovieCardLandscape(
51-
modifier: Modifier = Modifier,
51+
modifier: Modifier = Modifier.width(200.sdp).height(144.sdp),
5252
movieId: Int,
5353
backdropPath: String? = null,
5454
title: String? = null,
@@ -71,17 +71,18 @@ fun MovieCardLandscape(
7171
}
7272

7373
Card(
74-
modifier = modifier.clickable { onClickItem(movieId) },
75-
elevation = CardDefaults.cardElevation(8.dp),
76-
shape = RoundedCornerShape(4.dp)
74+
modifier = modifier.width(200.sdp).height(144.sdp).clickable { onClickItem(movieId) },
75+
elevation = CardDefaults.cardElevation(8.sdp),
76+
shape = MaterialTheme.shapes.extraSmall
7777
) {
78-
Box(modifier = modifier) {
78+
Box(modifier = Modifier.fillMaxSize()) {
79+
//region Movie Backdrop
7980
AsyncImage(
8081
modifier = Modifier
8182
.fillMaxSize()
8283
.align(Alignment.Center),
8384
model = backdropPath?.loadImage(),
84-
contentDescription = null,
85+
contentDescription = title,
8586
contentScale = ContentScale.Crop,
8687
alignment = Alignment.Center,
8788
)
@@ -91,7 +92,7 @@ fun MovieCardLandscape(
9192
Box(
9293
modifier = Modifier
9394
.fillMaxWidth()
94-
.height(100.dp)
95+
.height(80.sdp)
9596
.background(
9697
Brush.verticalGradient(
9798
listOf(
@@ -107,15 +108,15 @@ fun MovieCardLandscape(
107108
Column(
108109
modifier = Modifier
109110
.fillMaxWidth()
110-
.padding(8.dp)
111+
.padding(4.sdp)
111112
.align(Alignment.BottomCenter)
112113
) {
113114
//region Movie Title
114115
Text(
115-
modifier = Modifier,
116+
modifier = Modifier.basicMarquee(),
116117
text = title ?: stringResource(Res.string.unknown_movie),
117-
maxLines = 2,
118-
style = MaterialTheme.typography.headlineLarge,
118+
maxLines = 1,
119+
style = MaterialTheme.typography.titleMedium,
119120
overflow = TextOverflow.Ellipsis,
120121
textAlign = TextAlign.Start,
121122
color = dominantColorState.onColor
@@ -134,7 +135,7 @@ fun MovieCardLandscape(
134135
modifier = Modifier,
135136
value = voteAverage?.getRating()?.toFloat() ?: 0f,
136137
numOfStars = 5,
137-
size = 15.dp,
138+
size = 10.sdp,
138139
stepSize = StepSize.HALF,
139140
isIndicator = true,
140141
style = RatingBarStyle.Fill()
@@ -143,17 +144,17 @@ fun MovieCardLandscape(
143144
releaseDate?.let {
144145
HorizontalDivider(
145146
modifier = Modifier
146-
.padding(horizontal = 4.dp)
147-
.width(1.dp)
148-
.height(13.dp),
147+
.padding(horizontal = 4.sdp)
148+
.width(1.sdp)
149+
.height(13.sdp),
149150
color = dominantColorState.onColor
150151
)
151152

152153
Text(
153154
modifier = Modifier,
154155
text = releaseDate.getReleaseDate().capitalizeEachWord(),
155156
maxLines = 1,
156-
style = MaterialTheme.typography.bodyMedium,
157+
style = MaterialTheme.typography.bodySmall,
157158
overflow = TextOverflow.Ellipsis,
158159
textAlign = TextAlign.Start,
159160
color = dominantColorState.onColor

0 commit comments

Comments
 (0)