From c3f49a24519744e71d9a62c0a12774a10c6828fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jorge=20Mart=C3=ADn?= Date: Wed, 30 Aug 2023 09:33:53 +0200 Subject: [PATCH] Split link text into a `ListSupportingText` component. This also requires some internal changes to `ListSupportingText`, `ClickableLinkText` and `TimelineTextView` to match the behaviour and design. --- .../preferences/AnalyticsPreferencesView.kt | 65 ++++++++----------- .../components/event/TimelineItemTextView.kt | 53 ++++++++------- .../components/ClickableLinkText.kt | 4 +- .../theme/components/ListSection.kt | 17 +++-- 4 files changed, 69 insertions(+), 70 deletions(-) diff --git a/features/analytics/api/src/main/kotlin/io/element/android/features/analytics/api/preferences/AnalyticsPreferencesView.kt b/features/analytics/api/src/main/kotlin/io/element/android/features/analytics/api/preferences/AnalyticsPreferencesView.kt index 9920b8a0b0..2b70798cbd 100644 --- a/features/analytics/api/src/main/kotlin/io/element/android/features/analytics/api/preferences/AnalyticsPreferencesView.kt +++ b/features/analytics/api/src/main/kotlin/io/element/android/features/analytics/api/preferences/AnalyticsPreferencesView.kt @@ -16,26 +16,23 @@ package io.element.android.features.analytics.api.preferences -import androidx.compose.foundation.text.ClickableText -import androidx.compose.material3.MaterialTheme +import androidx.compose.foundation.layout.Column import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter import io.element.android.features.analytics.api.AnalyticsOptInEvents +import io.element.android.libraries.designsystem.components.LINK_TAG import io.element.android.libraries.designsystem.components.list.ListItemContent import io.element.android.libraries.designsystem.preview.ElementPreviewDark import io.element.android.libraries.designsystem.preview.ElementPreviewLight import io.element.android.libraries.designsystem.text.buildAnnotatedStringWithStyledPart import io.element.android.libraries.designsystem.theme.components.ListItem +import io.element.android.libraries.designsystem.theme.components.ListSupportingText import io.element.android.libraries.designsystem.theme.components.Text -import io.element.android.libraries.theme.ElementTheme import io.element.android.libraries.ui.strings.CommonStrings -private const val LINK_TAG = "link" - @Composable fun AnalyticsPreferencesView( state: AnalyticsPreferencesState, @@ -46,43 +43,37 @@ fun AnalyticsPreferencesView( state.eventSink(AnalyticsOptInEvents.EnableAnalytics(isEnabled = isEnabled)) } - val firstPart = stringResource(id = CommonStrings.screen_analytics_settings_help_us_improve, state.applicationName) - val secondPart = buildAnnotatedStringWithStyledPart( + val linkText = buildAnnotatedStringWithStyledPart( CommonStrings.screen_analytics_settings_read_terms, CommonStrings.screen_analytics_settings_read_terms_content_link, tagAndLink = LINK_TAG to state.policyUrl, ) - val subtitle = buildAnnotatedString { - append(firstPart) - append("\n\n") - append(secondPart) + val supportingText = stringResource( + id = CommonStrings.screen_analytics_settings_help_us_improve, + state.applicationName + ) + + Column(modifier) { + + ListItem( + headlineContent = { + Text(stringResource(id = CommonStrings.screen_analytics_settings_share_data)) + }, + supportingContent = { + Text(supportingText) + }, + leadingContent = null, + trailingContent = ListItemContent.Switch( + checked = state.isEnabled, + ), + onClick = { + onEnabledChanged(!state.isEnabled) + } + ) + + ListSupportingText(annotatedString = linkText) } - ListItem( - headlineContent = { - Text(stringResource(id = CommonStrings.screen_analytics_settings_share_data)) - }, - supportingContent = { - ClickableText( - text = subtitle, - onClick = { - subtitle - .getStringAnnotations(LINK_TAG, it, it) - .firstOrNull() - ?.let { stringAnnotation -> - onOpenAnalyticsPolicy(stringAnnotation.item) - } - }, - style = ElementTheme.typography.fontBodyMdRegular - .copy( - color = MaterialTheme.colorScheme.secondary, - ), - ) - }, - leadingContent = null, - trailingContent = ListItemContent.Switch(checked = state.isEnabled, onChange = ::onEnabledChanged), - modifier = modifier, - ) } @Preview diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt index 7b04d60ade..c6b0218bba 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt +++ b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemTextView.kt @@ -21,7 +21,9 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height +import androidx.compose.material3.LocalContentColor import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview @@ -35,6 +37,7 @@ import io.element.android.libraries.designsystem.components.ClickableLinkText import io.element.android.libraries.designsystem.preview.ElementPreviewDark import io.element.android.libraries.designsystem.preview.ElementPreviewLight import io.element.android.libraries.designsystem.text.toAnnotatedString +import io.element.android.libraries.theme.ElementTheme @Composable fun TimelineItemTextView( @@ -45,31 +48,33 @@ fun TimelineItemTextView( onTextClicked: () -> Unit = {}, onTextLongClicked: () -> Unit = {}, ) { - val htmlDocument = content.htmlDocument - if (htmlDocument != null) { - // For now we ignore the extra padding for html content, so add some spacing - // below the content (as previous behavior) - Column(modifier = modifier) { - HtmlDocument( - document = htmlDocument, - modifier = Modifier, - onTextClicked = onTextClicked, - onTextLongClicked = onTextLongClicked, - interactionSource = interactionSource - ) - Spacer(Modifier.height(16.dp)) - } - } else { - Box(modifier) { - val textWithPadding = remember(content.body) { - content.body + extraPadding.getStr(16.sp).toAnnotatedString() + CompositionLocalProvider(LocalContentColor provides ElementTheme.colors.textPrimary) { + val htmlDocument = content.htmlDocument + if (htmlDocument != null) { + // For now we ignore the extra padding for html content, so add some spacing + // below the content (as previous behavior) + Column(modifier = modifier) { + HtmlDocument( + document = htmlDocument, + modifier = Modifier, + onTextClicked = onTextClicked, + onTextLongClicked = onTextLongClicked, + interactionSource = interactionSource + ) + Spacer(Modifier.height(16.dp)) + } + } else { + Box(modifier) { + val textWithPadding = remember(content.body) { + content.body + extraPadding.getStr(16.sp).toAnnotatedString() + } + ClickableLinkText( + text = textWithPadding, + onClick = onTextClicked, + onLongClick = onTextLongClicked, + interactionSource = interactionSource + ) } - ClickableLinkText( - text = textWithPadding, - onClick = onTextClicked, - onLongClick = onTextLongClicked, - interactionSource = interactionSource - ) } } } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt index 39838a218a..7240ae4693 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ClickableLinkText.kt @@ -24,7 +24,6 @@ import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.PressInteraction import androidx.compose.foundation.text.InlineTextContent import androidx.compose.material3.LocalTextStyle -import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember @@ -79,7 +78,7 @@ fun ClickableLinkText( @Composable fun ClickableLinkText( annotatedString: AnnotatedString, - interactionSource: MutableInteractionSource, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, modifier: Modifier = Modifier, linkify: Boolean = true, linkAnnotationTag: String = LINK_TAG, @@ -136,7 +135,6 @@ fun ClickableLinkText( layoutResult.value = it }, inlineContent = inlineContent, - color = MaterialTheme.colorScheme.primary, ) } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSection.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSection.kt index ff58f1e2e0..cab1d493fc 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSection.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSection.kt @@ -22,7 +22,6 @@ import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Share import androidx.compose.material.icons.outlined.Share import androidx.compose.material3.LocalContentColor import androidx.compose.material3.LocalTextStyle @@ -30,9 +29,11 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Modifier import androidx.compose.ui.text.AnnotatedString +import androidx.compose.ui.text.ExperimentalTextApi import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import io.element.android.libraries.designsystem.components.ClickableLinkText import io.element.android.libraries.designsystem.components.list.ListItemContent import io.element.android.libraries.designsystem.preview.ElementThemedPreview import io.element.android.libraries.designsystem.preview.PreviewGroup @@ -103,17 +104,21 @@ fun ListSupportingText( * @param modifier The modifier to be applied to the text. * @param contentPadding The padding to apply to the text. Default is [ListSupportingTextDefaults.Padding.Default]. */ +@OptIn(ExperimentalTextApi::class) @Composable fun ListSupportingText( annotatedString: AnnotatedString, modifier: Modifier = Modifier, contentPadding: ListSupportingTextDefaults.Padding = ListSupportingTextDefaults.Padding.Default, ) { - Text( - text = annotatedString, - modifier = modifier.padding(contentPadding.paddingValues()), - style = ElementTheme.typography.fontBodySmRegular, - color = ElementTheme.colors.textSecondary, + val style = ElementTheme.typography.fontBodySmRegular + .copy(color = ElementTheme.colors.textSecondary) + val paddedModifier = modifier.padding(contentPadding.paddingValues()) + ClickableLinkText( + annotatedString = annotatedString, + modifier = paddedModifier, + style = style, + linkify = false, ) }