From 0ae9da385e244ea1e1c0a20e030b2ddc10806a86 Mon Sep 17 00:00:00 2001 From: Percy Wegmann Date: Tue, 9 Apr 2024 08:45:51 -0500 Subject: [PATCH] android/ui: move bug report helper text to its own list item Updates tailscale/corp#19045 Signed-off-by: Percy Wegmann --- .../ipn/ui/util/ClipboardValueView.kt | 19 ++++++++++--------- .../java/com/tailscale/ipn/ui/util/Lists.kt | 19 +++++++++++++++++++ .../tailscale/ipn/ui/view/BugReportView.kt | 8 ++++---- .../com/tailscale/ipn/ui/view/SettingsView.kt | 18 ++---------------- .../ipn/ui/viewModel/BugReportViewModel.kt | 4 +++- 5 files changed, 38 insertions(+), 30 deletions(-) diff --git a/android/src/main/java/com/tailscale/ipn/ui/util/ClipboardValueView.kt b/android/src/main/java/com/tailscale/ipn/ui/util/ClipboardValueView.kt index 98e2ab3..6dae8f7 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/util/ClipboardValueView.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/util/ClipboardValueView.kt @@ -27,16 +27,17 @@ fun ClipboardValueView(value: String, title: String? = null, subtitle: String? = ListItem( colors = MaterialTheme.colorScheme.titledListItem, modifier = Modifier.clickable { localClipboardManager.setText(AnnotatedString(value)) }, - overlineContent = { title?.let { Text(it, style = MaterialTheme.typography.titleMedium) } }, + overlineContent = title?.let { { Text(it, style = MaterialTheme.typography.titleMedium) } }, headlineContent = { Text(text = value, style = MaterialTheme.typography.bodyMedium) }, - supportingContent = { - subtitle?.let { subtitle -> - Text( - subtitle, - modifier = Modifier.padding(top = 8.dp), - style = MaterialTheme.typography.bodyMedium) - } - }, + supportingContent = + subtitle?.let { + { + Text( + it, + modifier = Modifier.padding(top = 8.dp), + style = MaterialTheme.typography.bodyMedium) + } + }, trailingContent = { Icon( painterResource(R.drawable.clipboard), diff --git a/android/src/main/java/com/tailscale/ipn/ui/util/Lists.kt b/android/src/main/java/com/tailscale/ipn/ui/util/Lists.kt index 647e6fe..9bf6594 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/util/Lists.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/util/Lists.kt @@ -10,12 +10,15 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyItemScope import androidx.compose.foundation.lazy.LazyListScope +import androidx.compose.foundation.text.ClickableText import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.ListItem import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.text.AnnotatedString import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.Dp @@ -52,8 +55,24 @@ object Lists { fontWeight = fontWeight) } } + + @Composable + fun InfoItem(text: CharSequence, onClick: (() -> Unit)? = null) { + val style = + MaterialTheme.typography.bodyMedium.copy(color = MaterialTheme.colorScheme.onSurfaceVariant) + ListItem( + headlineContent = { + Box(modifier = Modifier.padding(vertical = 4.dp)) { + onClick?.let { + ClickableText(text = text as AnnotatedString, style = style, onClick = { onClick() }) + } ?: run { Text(text as String, style = style) } + } + }) + } } +/** Similar to items() but includes a horizontal divider between items. */ + /** Similar to items() but includes a horizontal divider between items. */ inline fun LazyListScope.itemsWithDividers( items: List, diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/BugReportView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/BugReportView.kt index 3ea4c4c..5ec5b4b 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/view/BugReportView.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/view/BugReportView.kt @@ -28,6 +28,7 @@ import com.tailscale.ipn.R import com.tailscale.ipn.ui.Links import com.tailscale.ipn.ui.theme.link import com.tailscale.ipn.ui.util.ClipboardValueView +import com.tailscale.ipn.ui.util.Lists import com.tailscale.ipn.ui.viewModel.BugReportViewModel @Composable @@ -46,10 +47,9 @@ fun BugReportView(backToSettings: BackNavigation, model: BugReportViewModel = vi onClick = { handler.openUri(Links.SUPPORT_URL) }) }) - ClipboardValueView( - bugReportID, - title = stringResource(R.string.bug_report_id), - subtitle = stringResource(id = R.string.bug_report_id_desc)) + ClipboardValueView(bugReportID, title = stringResource(R.string.bug_report_id)) + + Lists.InfoItem(stringResource(id = R.string.bug_report_id_desc)) } } } diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/SettingsView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/SettingsView.kt index 7bde4c1..7bd0374 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/view/SettingsView.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/view/SettingsView.kt @@ -4,11 +4,9 @@ package com.tailscale.ipn.ui.view import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.foundation.rememberScrollState -import androidx.compose.foundation.text.ClickableText import androidx.compose.foundation.verticalScroll import androidx.compose.material3.ListItem import androidx.compose.material3.MaterialTheme @@ -24,7 +22,6 @@ import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.text.style.TextDecoration import androidx.compose.ui.text.withStyle -import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel import com.tailscale.ipn.BuildConfig import com.tailscale.ipn.R @@ -165,9 +162,7 @@ object Setting { @Composable fun AdminTextView(onNavigateToAdminConsole: () -> Unit) { val adminStr = buildAnnotatedString { - withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.onSurfaceVariant)) { - append(stringResource(id = R.string.settings_admin_prefix)) - } + append(stringResource(id = R.string.settings_admin_prefix)) pushStringAnnotation(tag = "link", annotation = Links.ADMIN_URL) withStyle( @@ -177,16 +172,7 @@ fun AdminTextView(onNavigateToAdminConsole: () -> Unit) { textDecoration = TextDecoration.Underline)) { append(stringResource(id = R.string.settings_admin_link)) } - pop() } - ListItem( - headlineContent = { - Box(modifier = Modifier.padding(vertical = 4.dp)) { - ClickableText( - text = adminStr, - style = MaterialTheme.typography.bodyMedium, - onClick = { onNavigateToAdminConsole() }) - } - }) + Lists.InfoItem(adminStr, onClick = onNavigateToAdminConsole) } diff --git a/android/src/main/java/com/tailscale/ipn/ui/viewModel/BugReportViewModel.kt b/android/src/main/java/com/tailscale/ipn/ui/viewModel/BugReportViewModel.kt index 3037a8e..65a1f0a 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/viewModel/BugReportViewModel.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/viewModel/BugReportViewModel.kt @@ -15,7 +15,9 @@ class BugReportViewModel : ViewModel() { init { Client(viewModelScope).bugReportId { result -> - result.onSuccess { bugReportID.set(it) }.onFailure { bugReportID.set("(Error fetching ID)") } + result + .onSuccess { bugReportID.set(it.trim()) } + .onFailure { bugReportID.set("(Error fetching ID)") } } } }