diff --git a/build.gradle.kts b/build.gradle.kts index 1e0d3039..4b702457 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -189,6 +189,7 @@ dependencies { // Markdown implementation("org.jetbrains:markdown:0.3.1") + implementation("de.charlex.compose:html-text:1.1.0") // Coroutines / Lifecycle implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.5.0-rc01") diff --git a/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/Description.kt b/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/TextBlock.kt similarity index 57% rename from src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/Description.kt rename to src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/TextBlock.kt index f680492b..1ba48c8f 100644 --- a/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/Description.kt +++ b/src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/TextBlock.kt @@ -4,52 +4,63 @@ import androidx.compose.animation.animateContentSize import androidx.compose.animation.core.animateIntAsState import androidx.compose.animation.core.tween import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.material.MaterialTheme import androidx.compose.material3.FilledTonalButton +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text -import androidx.compose.runtime.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.compositeOver -import androidx.compose.ui.text.AnnotatedString +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp +import com.looker.droidify.R +import de.charlex.compose.HtmlText /* * Annotate String in this way https://stackoverflow.com/questions/65567412/jetpack-compose-text-hyperlink-some-section-of-the-text/69549929#69549929 +* TODO REMOVE usage of HtmlText * */ @Composable -fun Description( +fun HtmlTextBlock( modifier: Modifier = Modifier, - description: AnnotatedString + description: String ) { Column( - horizontalAlignment = Alignment.CenterHorizontally + modifier = modifier.fillMaxWidth(), + horizontalAlignment = Alignment.Start ) { var isExpanded by remember { mutableStateOf(false) } Surface( modifier = modifier.animateContentSize(), shape = MaterialTheme.shapes.large, - color = MaterialTheme.colors.primary.copy(0.3f) - .compositeOver(MaterialTheme.colors.background) + color = Color.Transparent ) { val maxLines by animateIntAsState( targetValue = if (isExpanded) Int.MAX_VALUE else 12, - animationSpec = tween(durationMillis = 1000) + animationSpec = tween(durationMillis = 200) ) - Text( + HtmlText( modifier = Modifier .padding(16.dp) .animateContentSize(), text = description, + color = MaterialTheme.colorScheme.onBackground, maxLines = maxLines, overflow = TextOverflow.Ellipsis ) } - FilledTonalButton(onClick = { isExpanded = !isExpanded }) { - Text(text = "Show More") + if (description.length >= 500) { + FilledTonalButton(onClick = { isExpanded = !isExpanded }) { + Text(text = stringResource(id = if (isExpanded) R.string.show_less else R.string.show_more)) + } } } } \ No newline at end of file