From f3249089afde3a7051a7e996ef3fed42ffd29a1f Mon Sep 17 00:00:00 2001 From: akesi seli Date: Fri, 29 Nov 2024 07:28:25 +0100 Subject: [PATCH] fix: image height in post cards (#128) * add compact mode for community and creator info * add compact mode for post placeholders * allow to pass min and max height for post images * update post card and uploaded media card --- .../lemmyui/CommunityAndCreatorInfo.kt | 33 +++++++++++++++--- .../core/commonui/lemmyui/PostCard.kt | 34 +++++++------------ .../core/commonui/lemmyui/PostCardImage.kt | 5 +-- .../commonui/lemmyui/PostCardPlaceholder.kt | 13 +++---- .../unit/medialist/components/MediaItem.kt | 13 ++++--- 5 files changed, 54 insertions(+), 44 deletions(-) diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/CommunityAndCreatorInfo.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/CommunityAndCreatorInfo.kt index 695d22a2e..20eee9545 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/CommunityAndCreatorInfo.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/CommunityAndCreatorInfo.kt @@ -25,6 +25,9 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.FilterQuality import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.text.LinkAnnotation +import androidx.compose.ui.text.SpanStyle +import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.livefast.eattrash.raccoonforlemmy.core.appearance.repository.ContentFontClass @@ -64,6 +67,7 @@ fun CommunityAndCreatorInfo( isMod: Boolean = false, isAdmin: Boolean = false, markRead: Boolean = false, + compact: Boolean = false, onOpenCommunity: ((CommunityModel) -> Unit)? = null, onOpenCreator: ((UserModel) -> Unit)? = null, onToggleExpanded: (() -> Unit)? = null, @@ -158,18 +162,36 @@ fun CommunityAndCreatorInfo( Modifier .onClick( indication = null, - onClick = { - onOpenCommunity?.invoke(community) - }, onDoubleClick = onDoubleClick ?: {}, onLongClick = onLongClick ?: {}, ), - text = communityName, + text = buildAnnotatedString { + pushLink( + LinkAnnotation.Clickable("click-community") { + onOpenCommunity?.invoke(community) + }, + ) + append(communityName) + pop() + if (compact && creator != null) { + append(" • ") + pushLink( + LinkAnnotation.Clickable("click-user") { + onOpenCreator?.invoke(creator) + }, + ) + pushStyle(SpanStyle(color = ancillaryColor)) + append(creatorName) + pop() + pop() + } + }, style = MaterialTheme.typography.bodySmall, color = if (creator == null) ancillaryColor else fullColor, + maxLines = 1, ) } - if (creator != null) { + if (creator != null && !compact) { Text( modifier = Modifier @@ -184,6 +206,7 @@ fun CommunityAndCreatorInfo( text = creatorName, style = MaterialTheme.typography.bodySmall, color = ancillaryColor, + maxLines = 1, ) } } diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCard.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCard.kt index 465765f62..6fe6a3fb4 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCard.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCard.kt @@ -6,8 +6,8 @@ import androidx.compose.foundation.layout.Arrangement 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.fillMaxWidth -import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons @@ -161,7 +161,6 @@ fun PostCard( highlightText = highlightText, voteFormat = voteFormat, autoLoadImages = autoLoadImages, - fullHeightImage = fullHeightImage, preferNicknames = preferNicknames, showScores = showScores, actionButtonsActive = actionButtonsActive, @@ -190,7 +189,6 @@ private fun CompactPost( post: PostModel, isFromModerator: Boolean, autoLoadImages: Boolean, - fullHeightImage: Boolean, preferNicknames: Boolean, showScores: Boolean, hideAuthor: Boolean, @@ -271,6 +269,7 @@ private fun CompactPost( featuredLocal = post.featuredLocal, locked = post.locked, markRead = markRead, + compact = true, isFromModerator = isFromModerator, onOpenCommunity = { community -> onOpenCommunity?.invoke(community, "") @@ -296,9 +295,8 @@ private fun CompactPost( color = MaterialTheme.colorScheme.onBackground.copy(alpha = ancillaryTextAlpha), ) } else { - val titleWeight = 0.6f Box( - modifier = Modifier.weight(titleWeight), + modifier = Modifier.weight(COMPACT_POST_TITLE_WEIGHT), ) { CustomizedContent(ContentFontClass.Title) { PostCardTitle( @@ -328,8 +326,9 @@ private fun CompactPost( PostCardVideo( modifier = Modifier - .weight(1 - titleWeight) - .padding(vertical = Spacing.xxs), + .weight(1 - COMPACT_POST_TITLE_WEIGHT) + .padding(vertical = Spacing.xxs) + .aspectRatio(1f), url = post.videoUrl, blurred = blurNsfw && post.nsfw, autoLoadImages = autoLoadImages, @@ -348,16 +347,10 @@ private fun CompactPost( PostCardImage( modifier = Modifier - .weight(1 - titleWeight) + .weight(1 - COMPACT_POST_TITLE_WEIGHT) .padding(vertical = Spacing.xs) .clip(RoundedCornerShape(CornerSize.l)) - .then( - if (fullHeightImage) { - Modifier - } else { - Modifier.heightIn(max = 200.dp) - }, - ), + .aspectRatio(1f), imageUrl = post.imageUrl, contentScale = ContentScale.Crop, autoLoadImages = autoLoadImages, @@ -600,16 +593,12 @@ private fun ExtendedPost( } else { Modifier }, - ).then( - if (fullHeightImage) { - Modifier - } else { - Modifier.heightIn(max = 200.dp) - }, ), imageUrl = post.imageUrl, autoLoadImages = autoLoadImages, blurred = blurNsfw && post.nsfw, + contentScale = if (fullHeightImage) ContentScale.FillWidth else ContentScale.Crop, + maxHeight = if (fullHeightImage) Dp.Unspecified else EXTENDED_POST_MAX_HEIGHT, onImageClick = { url -> if (postLinkUrl.isNotEmpty() && settings.openPostWebPageOnImageClick) { uriHandler.openUri(postLinkUrl) @@ -716,3 +705,6 @@ private fun ExtendedPost( } } } + +private const val COMPACT_POST_TITLE_WEIGHT = 0.85f +private val EXTENDED_POST_MAX_HEIGHT = 200.dp diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardImage.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardImage.kt index 5fca8a24b..cdd2a415f 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardImage.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardImage.kt @@ -46,7 +46,8 @@ fun PostCardImage( autoLoadImages: Boolean = true, contentScale: ContentScale = ContentScale.FillWidth, loadButtonContent: @Composable (() -> Unit)? = null, - minHeight: Dp = 200.dp, + maxHeight: Dp = Dp.Unspecified, + minHeight: Dp = Dp.Unspecified, blurred: Boolean = false, onImageClick: ((String) -> Unit)? = null, onDoubleClick: (() -> Unit)? = null, @@ -60,7 +61,7 @@ fun PostCardImage( modifier = modifier .fillMaxWidth() - .heightIn(min = minHeight) + .heightIn(min = minHeight, max = maxHeight) .onClick( onDoubleClick = onDoubleClick ?: {}, ), diff --git a/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardPlaceholder.kt b/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardPlaceholder.kt index a8b97aece..27060c2f3 100644 --- a/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardPlaceholder.kt +++ b/core/commonui/lemmyui/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/lemmyui/PostCardPlaceholder.kt @@ -58,13 +58,6 @@ fun PostCardPlaceholder( .clip(RoundedCornerShape(CornerSize.m)) .shimmerEffect(), ) - Box( - modifier = - Modifier.height(IconSize.s) - .fillMaxWidth(0.5f) - .clip(RoundedCornerShape(CornerSize.m)) - .shimmerEffect(), - ) } } Row( @@ -152,7 +145,7 @@ fun PostCardPlaceholder( Box( modifier = Modifier - .height(200.dp) + .height(EXTENDED_POST_MAX_HEIGHT) .fillMaxWidth() .clip(RoundedCornerShape(CornerSize.s)) .shimmerEffect(), @@ -215,7 +208,7 @@ fun PostCardPlaceholder( Box( modifier = Modifier - .height(200.dp) + .height(EXTENDED_POST_MAX_HEIGHT) .fillMaxWidth() .clip(RoundedCornerShape(CornerSize.s)) .shimmerEffect(), @@ -234,3 +227,5 @@ fun PostCardPlaceholder( else -> Unit } } + +private val EXTENDED_POST_MAX_HEIGHT = 200.dp diff --git a/unit/medialist/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/unit/medialist/components/MediaItem.kt b/unit/medialist/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/unit/medialist/components/MediaItem.kt index 2d6250916..b3ba306a1 100644 --- a/unit/medialist/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/unit/medialist/components/MediaItem.kt +++ b/unit/medialist/src/commonMain/kotlin/com/livefast/eattrash/raccoonforlemmy/unit/medialist/components/MediaItem.kt @@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape @@ -31,8 +30,10 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.shadow import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.layout.positionInParent +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp import com.livefast.eattrash.raccoonforlemmy.core.appearance.data.PostLayout @@ -121,15 +122,11 @@ internal fun MediaItem( } else { Modifier }, - ).then( - if (fullHeightImage) { - Modifier - } else { - Modifier.heightIn(max = 200.dp) - }, ), imageUrl = url, autoLoadImages = autoloadImages, + contentScale = if (fullHeightImage) ContentScale.FillWidth else ContentScale.Crop, + maxHeight = if (fullHeightImage) Dp.Unspecified else EXTENDED_POST_MAX_HEIGHT, loadButtonContent = @Composable { Icon(imageVector = Icons.Default.Download, contentDescription = null) }, @@ -245,3 +242,5 @@ private fun MediaFooter( } } } + +private val EXTENDED_POST_MAX_HEIGHT = 200.dp