From e569468fa68eef3384df24e60cdec5eb5b54715c Mon Sep 17 00:00:00 2001 From: Diego Beraldin Date: Sun, 15 Oct 2023 19:51:36 +0200 Subject: [PATCH] enhancement: improved community and user header --- .../commonui/components/CommunityHeader.kt | 110 +++++++++--------- .../core/commonui/components/UserHeader.kt | 8 +- 2 files changed, 59 insertions(+), 59 deletions(-) diff --git a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/CommunityHeader.kt b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/CommunityHeader.kt index b5a1242d4..bb84b1183 100644 --- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/CommunityHeader.kt +++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/CommunityHeader.kt @@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.aspectRatio -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -39,21 +38,22 @@ import com.github.diegoberaldin.raccoonforlemmy.domain.lemmy.data.CommunityModel @Composable fun CommunityHeader( community: CommunityModel, + modifier: Modifier = Modifier, autoLoadImages: Boolean = true, options: List = emptyList(), onOptionSelected: ((Int) -> Unit)? = null, onOpenImage: ((String) -> Unit)? = null, ) { Box( - modifier = Modifier.fillMaxWidth().aspectRatio(4.5f).padding(Spacing.xs), + modifier = modifier.fillMaxWidth().padding(Spacing.s), ) { // banner val banner = community.banner.orEmpty() if (banner.isNotEmpty() && autoLoadImages) { CustomImage( - modifier = Modifier.fillMaxSize(), + modifier = Modifier.fillMaxWidth().aspectRatio(4.5f), url = banner, - contentScale = ContentScale.FillBounds, + contentScale = ContentScale.FillWidth, contentDescription = null, ) } @@ -99,60 +99,60 @@ fun CommunityHeader( } } } - } - Row( - modifier = Modifier.fillMaxSize(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(Spacing.m) - ) { - // avatar - val communityIcon = community.icon.orEmpty() - val avatarSize = 60.dp - if (communityIcon.isNotEmpty() && autoLoadImages) { - CustomImage( - modifier = Modifier - .padding(Spacing.xxxs) - .size(avatarSize) - .clip(RoundedCornerShape(avatarSize / 2)) - .onClick { - onOpenImage?.invoke(communityIcon) - }, - url = communityIcon, - quality = FilterQuality.Low, - contentDescription = null, - contentScale = ContentScale.FillBounds, - ) - } else { - PlaceholderImage( - size = avatarSize, - title = community.name, - ) - } - - // textual data - Column( - verticalArrangement = Arrangement.spacedBy(Spacing.s), + Row( + modifier = Modifier.fillMaxWidth().align(Alignment.Center), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(Spacing.m) ) { - Text( - text = community.name, - style = MaterialTheme.typography.titleLarge, - color = MaterialTheme.colorScheme.onBackground, - ) + // avatar + val communityIcon = community.icon.orEmpty() + val avatarSize = 60.dp + if (communityIcon.isNotEmpty() && autoLoadImages) { + CustomImage( + modifier = Modifier + .padding(Spacing.xxxs) + .size(avatarSize) + .clip(RoundedCornerShape(avatarSize / 2)) + .onClick { + onOpenImage?.invoke(communityIcon) + }, + url = communityIcon, + quality = FilterQuality.Low, + contentDescription = null, + contentScale = ContentScale.FillBounds, + ) + } else { + PlaceholderImage( + size = avatarSize, + title = community.name, + ) + } - Text( - modifier = Modifier.padding(horizontal = Spacing.s), - text = buildString { - append(community.name) - if (community.host.isNotEmpty()) { - append("@${community.host}") - } - }, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - style = MaterialTheme.typography.titleSmall, - color = MaterialTheme.colorScheme.onBackground, - ) + // textual data + Column( + verticalArrangement = Arrangement.spacedBy(Spacing.s), + ) { + Text( + text = community.name, + style = MaterialTheme.typography.titleLarge, + color = MaterialTheme.colorScheme.onBackground, + ) + + Text( + modifier = Modifier.padding(horizontal = Spacing.s), + text = buildString { + append(community.name) + if (community.host.isNotEmpty()) { + append("@${community.host}") + } + }, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = MaterialTheme.typography.titleSmall, + color = MaterialTheme.colorScheme.onBackground, + ) + } } } } diff --git a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/UserHeader.kt b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/UserHeader.kt index 833250505..8b9e3d80a 100644 --- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/UserHeader.kt +++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/UserHeader.kt @@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.aspectRatio -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -47,13 +46,14 @@ import dev.icerock.moko.resources.compose.stringResource @Composable fun UserHeader( user: UserModel, + modifier: Modifier = Modifier, autoLoadImages: Boolean = true, options: List = emptyList(), onOptionSelected: ((Int) -> Unit)? = null, onOpenImage: ((String) -> Unit)? = null, ) { Box( - modifier = Modifier.padding(Spacing.xs), + modifier = modifier.fillMaxWidth().padding(Spacing.s), ) { // banner val banner = user.banner.orEmpty() @@ -62,7 +62,7 @@ fun UserHeader( modifier = Modifier.fillMaxWidth().aspectRatio(4.5f), url = banner, quality = FilterQuality.Low, - contentScale = ContentScale.FillBounds, + contentScale = ContentScale.FillWidth, contentDescription = null, ) } @@ -110,7 +110,7 @@ fun UserHeader( } Row( - modifier = Modifier.fillMaxSize(), + modifier = Modifier.fillMaxWidth().align(Alignment.Center), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(Spacing.m) ) {