Skip to content

Commit

Permalink
Fix the padding issue on iOS
Browse files Browse the repository at this point in the history
  • Loading branch information
@jarvislin
jarvislin committed Jun 27, 2024
1 parent 2cffac4 commit c8319ae
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 19 deletions.
2 changes: 1 addition & 1 deletion composeApp/build.gradle.kts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ android {
applicationId = "com.jarvislin.hackernews"
minSdk = libs.versions.android.minSdk.get().toInt()
targetSdk = libs.versions.android.targetSdk.get().toInt()
versionCode = 3
versionCode = 4
versionName = "1.0.0"
}

Expand Down
24 changes: 16 additions & 8 deletions composeApp/src/commonMain/kotlin/presentation/screens/DetailsScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ import kotlinx.serialization.json.Json
import org.jetbrains.compose.resources.painterResource
import org.koin.compose.koinInject
import presentation.viewmodels.DetailsViewModel
import ui.trimmedTextStyle

class DetailsScreen(private val itemJson: String) : Screen {
@Composable
Expand Down Expand Up @@ -172,23 +173,27 @@ class DetailsScreen(private val itemJson: String) : Screen {
Text(
text = "${item.getPoint()} points",
fontSize = MaterialTheme.typography.bodySmall.fontSize,
modifier = Modifier.padding(horizontal = 8.dp),
modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
style = trimmedTextStyle
)
}
Card(
modifier = Modifier.padding(start = 8.dp),
) {
Row {
Row(
modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically
) {
Icon(
painter = painterResource(Res.drawable.message),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.padding(start = 8.dp).align(Alignment.CenterVertically)
)
Text(
text = "${item.getCommentCount()}",
fontSize = MaterialTheme.typography.bodySmall.fontSize,
modifier = Modifier.padding(start = 4.dp, end = 8.dp),
modifier = Modifier.padding(start = 4.dp),
style = trimmedTextStyle
)
}
}
Expand All @@ -203,7 +208,8 @@ class DetailsScreen(private val itemJson: String) : Screen {
Text(
modifier = Modifier.padding(start = 4.dp),
text = item.getUserName(),
fontSize = MaterialTheme.typography.bodyMedium.fontSize
fontSize = MaterialTheme.typography.bodyMedium.fontSize,
style = trimmedTextStyle
)
}
if (item is Poll) {
Expand Down Expand Up @@ -269,19 +275,20 @@ class DetailsScreen(private val itemJson: String) : Screen {
modifier = Modifier.height(40.dp),
shape = RoundedCornerShape(20.dp),
onClick = { navigator.push(WebScreen(item.toJson(json))) }) {
Row(modifier = Modifier.fillMaxHeight()) {
Row(modifier = Modifier.fillMaxHeight(), verticalAlignment = Alignment.CenterVertically) {
Spacer(modifier = Modifier.size(16.dp))
Icon(
painter = painterResource(Res.drawable.link),
contentDescription = "Link",
modifier = Modifier.size(18.dp).align(Alignment.CenterVertically),
modifier = Modifier.size(18.dp),
tint = MaterialTheme.colorScheme.onSecondaryContainer
)
Text(
modifier = Modifier.padding(start = 8.dp, end = 24.dp).align(Alignment.CenterVertically),
modifier = Modifier.padding(start = 8.dp, end = 24.dp),
fontSize = MaterialTheme.typography.labelLarge.fontSize,
fontFamily = MaterialTheme.typography.labelLarge.fontFamily,
fontWeight = MaterialTheme.typography.labelLarge.fontWeight,
style = trimmedTextStyle,
text = Url(item.getUrl()!!).host,
)
}
Expand Down Expand Up @@ -320,6 +327,7 @@ class DetailsScreen(private val itemJson: String) : Screen {
text = comment.getUserName(),
modifier = Modifier.padding(start = 4.dp),
fontSize = MaterialTheme.typography.bodyMedium.fontSize,
style = trimmedTextStyle
)
}
CompositionLocalProvider(LocalUriHandler provides uriHandler) {
Expand Down
36 changes: 26 additions & 10 deletions composeApp/src/commonMain/kotlin/presentation/screens/MainScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
Expand Down Expand Up @@ -69,6 +71,7 @@ import kotlinx.serialization.json.Json
import org.jetbrains.compose.resources.painterResource
import org.koin.compose.koinInject
import presentation.viewmodels.MainViewModel
import ui.trimmedTextStyle

class MainScreen : Screen {
@Composable
Expand Down Expand Up @@ -219,44 +222,54 @@ fun ItemRowWidget(item: Item) {
)
}
) {
Spacer(Modifier.size(12.dp))
Spacer(Modifier.height(12.dp))
Text(
item.getTitle(),
Modifier.padding(horizontal = 16.dp),
fontSize = MaterialTheme.typography.bodyLarge.fontSize,
fontFamily = MaterialTheme.typography.headlineSmall.fontFamily
)
Row(modifier = Modifier.padding(horizontal = 16.dp)) {
Spacer(Modifier.height(8.dp))
Row(
modifier = Modifier.padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically
) {
item.getUrl()?.let { url ->
Icon(
painter = painterResource(Res.drawable.link),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.align(Alignment.CenterVertically)
)
Text(
Url(url).host,
Modifier.padding(horizontal = 4.dp),
fontSize = MaterialTheme.typography.bodySmall.fontSize,
style = trimmedTextStyle
)
}
Icon(
painter = painterResource(Res.drawable.clock),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.padding(start = if (item.getUrl() == null) 0.dp else 8.dp).align(Alignment.CenterVertically)
modifier = Modifier.padding(start = if (item.getUrl() == null) 0.dp else 8.dp)
)
Text(
item.getFormatedDiffTime(), fontSize = MaterialTheme.typography.bodySmall.fontSize,
modifier = Modifier.padding(start = 4.dp)
modifier = Modifier.padding(start = 4.dp),
style = trimmedTextStyle
)
}
Row(modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)) {
Spacer(Modifier.height(8.dp))
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
) {
Card {
Text(
text = "${item.getPoint()} points",
fontSize = MaterialTheme.typography.bodySmall.fontSize,
modifier = Modifier.padding(horizontal = 8.dp),
modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
style = trimmedTextStyle
)
}
item.getCommentCount()?.let {
Expand All @@ -265,17 +278,20 @@ fun ItemRowWidget(item: Item) {
modifier = Modifier.padding(start = 8.dp),
onClick = { navigator.push(DetailsScreen(item.toJson(json))) }
) {
Row {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
) {
Icon(
painter = painterResource(Res.drawable.message),
contentDescription = null,
tint = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.padding(start = 8.dp).align(Alignment.CenterVertically)
)
Text(
text = "${item.getCommentCount()}",
fontSize = MaterialTheme.typography.bodySmall.fontSize,
modifier = Modifier.padding(start = 4.dp, end = 8.dp),
modifier = Modifier.padding(start = 4.dp),
style = trimmedTextStyle
)
}
}
Expand Down
11 changes: 11 additions & 0 deletions composeApp/src/commonMain/kotlin/ui/Type.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ package ui

import androidx.compose.material3.Typography
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.style.LineHeightStyle
import hackernewskmp.composeapp.generated.resources.Res
import hackernewskmp.composeapp.generated.resources.bitter_regular
import org.jetbrains.compose.resources.Font
Expand All @@ -16,6 +18,15 @@ fun displayFontFamily() = FontFamily(
// Default Material 3 typography values
val baseline = Typography()

// Fix for line height issue on iOS
// See: https://github.com/jarvislin/HackerNews-KMP/issues/15
val trimmedTextStyle = TextStyle(
lineHeightStyle = LineHeightStyle(
alignment = LineHeightStyle.Alignment.Proportional,
trim = LineHeightStyle.Trim.Both
)
)

@Composable
fun appTypography() = Typography(
displayLarge = baseline.displayLarge.copy(fontFamily = displayFontFamily()),
Expand Down

0 comments on commit c8319ae

Please sign in to comment.