From 6c692ac4c897e2833eb1ba9f69449f3bba889fd3 Mon Sep 17 00:00:00 2001 From: Andrea Gottardo Date: Wed, 20 Mar 2024 16:56:56 -0700 Subject: [PATCH] More little UI tweaks in SettingsView, add underline to links in BugReportView --- .../com/tailscale/ipn/ui/view/BugReportView.kt | 15 +++++++++------ .../com/tailscale/ipn/ui/view/PeerDetails.kt | 17 +++++++++-------- .../com/tailscale/ipn/ui/view/SettingsView.kt | 2 +- .../com/tailscale/ipn/ui/view/SharedViews.kt | 3 ++- android/src/main/res/values/strings.xml | 6 +++--- 5 files changed, 24 insertions(+), 19 deletions(-) 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 478d2738ea..c944413991 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 @@ -24,20 +24,22 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalClipboardManager import androidx.compose.ui.platform.LocalUriHandler import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.AnnotatedString import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.buildAnnotatedString +import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.text.style.TextDecoration import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.withStyle import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel import com.tailscale.ipn.R import com.tailscale.ipn.ui.Links +import com.tailscale.ipn.ui.theme.ts_color_light_blue import com.tailscale.ipn.ui.util.defaultPaddingModifier import com.tailscale.ipn.ui.util.settingsRowModifier import com.tailscale.ipn.ui.viewModel.BugReportViewModel @@ -48,18 +50,18 @@ fun BugReportView(nav: BackNavigation, model: BugReportViewModel = viewModel()) val handler = LocalUriHandler.current Scaffold(topBar = { Header(R.string.bug_report_title, onBack = nav.onBack) }) { innerPadding -> - Column(modifier = Modifier.padding(innerPadding).padding(8.dp).fillMaxWidth().fillMaxHeight()) { + Column(modifier = Modifier.padding(innerPadding).padding(24.dp).fillMaxWidth().fillMaxHeight()) { ClickableText( text = contactText(), modifier = Modifier.fillMaxWidth(), style = MaterialTheme.typography.bodyMedium, onClick = { handler.openUri(Links.SUPPORT_URL) }) - Spacer(modifier = Modifier.height(8.dp)) + Spacer(modifier = Modifier.height(16.dp)) ReportIdRow(bugReportIdFlow = model.bugReportID) - Spacer(modifier = Modifier.height(8.dp)) + Spacer(modifier = Modifier.height(16.dp)) Text( text = stringResource(id = R.string.bug_report_id_desc), @@ -87,7 +89,8 @@ fun ReportIdRow(bugReportIdFlow: StateFlow) { Text( text = bugReportId.value, style = MaterialTheme.typography.titleMedium, - maxLines = 1, + fontFamily = FontFamily.Monospace, + maxLines = 2, overflow = TextOverflow.Ellipsis, modifier = defaultPaddingModifier()) } @@ -105,7 +108,7 @@ fun contactText(): AnnotatedString { } pushStringAnnotation(tag = "reportLink", annotation = Links.SUPPORT_URL) - withStyle(style = SpanStyle(color = Color.Blue)) { + withStyle(style = SpanStyle(color = ts_color_light_blue, textDecoration = TextDecoration.Underline)) { append(stringResource(id = R.string.bug_report_instructions_linktext)) } pop() diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/PeerDetails.kt b/android/src/main/java/com/tailscale/ipn/ui/view/PeerDetails.kt index 4074ad5c59..8e21494a3f 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/view/PeerDetails.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/view/PeerDetails.kt @@ -42,7 +42,7 @@ fun PeerDetails( Scaffold(topBar = { Header(title = R.string.peer_details, onBack = nav.onBack) }) { innerPadding -> Column( - modifier = Modifier.fillMaxWidth().padding(innerPadding).padding(horizontal = 8.dp), + modifier = Modifier.fillMaxWidth().padding(innerPadding).padding(horizontal = 16.dp).padding(top = 22.dp), ) { Text( text = model.nodeName, @@ -87,25 +87,26 @@ fun AddressRow(address: String, type: String) { val localClipboardManager = LocalClipboardManager.current Row( + verticalAlignment = Alignment.CenterVertically, modifier = - Modifier.padding(horizontal = 8.dp, vertical = 4.dp) + Modifier.padding(horizontal = 8.dp, vertical = 8.dp) .clickable(onClick = { localClipboardManager.setText(AnnotatedString(address)) })) { Column { - Text(text = address, style = MaterialTheme.typography.titleMedium) - Text(text = type, style = MaterialTheme.typography.bodyMedium) + Text(text = address) + Text(text = type, fontSize = MaterialTheme.typography.labelLarge.fontSize, color = MaterialTheme.colorScheme.secondary) } Box(modifier = Modifier.weight(1f), contentAlignment = Alignment.CenterEnd) { - Icon(Icons.Outlined.Share, null) + Icon(Icons.Outlined.Share, null, tint = MaterialTheme.colorScheme.secondary) } } } @Composable fun ValueRow(title: String, value: String) { - Row(modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp).fillMaxWidth()) { - Text(text = title, style = MaterialTheme.typography.titleMedium) + Row(modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp).fillMaxWidth()) { + Text(text = title) Box(modifier = Modifier.weight(1f), contentAlignment = Alignment.CenterEnd) { - Text(text = value, style = MaterialTheme.typography.bodyMedium) + Text(text = value, color = MaterialTheme.colorScheme.secondary) } } } 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 1b786dbc55..b104572cfc 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 @@ -51,7 +51,7 @@ fun Settings( val isAdmin = viewModel.isAdmin.collectAsState().value Scaffold(topBar = { Header(title = R.string.settings_title, onBack = settingsNav.onBackPressed) }) { innerPadding -> - Column(modifier = Modifier.padding(innerPadding).fillMaxHeight()) { + Column(modifier = Modifier.padding(innerPadding).fillMaxHeight().padding(16.dp)) { UserView( profile = user, actionState = UserActionState.NAV, diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/SharedViews.kt b/android/src/main/java/com/tailscale/ipn/ui/view/SharedViews.kt index a522996cd4..2706b4232b 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/view/SharedViews.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/view/SharedViews.kt @@ -5,6 +5,7 @@ package com.tailscale.ipn.ui.view import androidx.annotation.StringRes import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack @@ -42,7 +43,7 @@ fun Header(@StringRes title: Int, onBack: (() -> Unit)? = null) { @Composable fun BackArrow(action: () -> Unit) { - Icon(Icons.AutoMirrored.Filled.ArrowBack, null, modifier = Modifier.clickable { action() }) + Icon(Icons.AutoMirrored.Filled.ArrowBack, null, modifier = Modifier.clickable { action() }.padding(start = 15.dp, end = 20.dp)) } @Composable diff --git a/android/src/main/res/values/strings.xml b/android/src/main/res/values/strings.xml index 70cebdf6f8..ad5d193c5a 100644 --- a/android/src/main/res/values/strings.xml +++ b/android/src/main/res/values/strings.xml @@ -29,9 +29,9 @@ Report a Bug To report a bug,  - contact our support team  - and include the ID below. - This ID helps us find the event ino our diagnostic logs. This process does not share any of your personally-identifiable information. + contact our support team  + and include the ID below. + This ID helps us find the event in our diagnostic logs. This process does not share any of your personally-identifiable information. Settings