[568eb59] android/ui: address preliminary design feedback

Updates tailscale/corp#18202 Adds back navigation to all of the headers. Corrects all padding and some colours Adds separators to the device list Adds the Compat theme so we don't have the black top and bottom bars. Removes all of the chevrons. Other minor tweaks Signed-off-by: Jonathan Nobels <[email protected]>
tailscale · Mar 22, 2024 · e0d2b76 · e0d2b76
1 parent 7b7f725
commit e0d2b76
Show file tree

Hide file tree

Showing 16 changed files with 275 additions and 202 deletions.
diff --git a/android/src/main/AndroidManifest.xml b/android/src/main/AndroidManifest.xml
@@ -29,6 +29,7 @@
         android:allowBackup="false"
         android:banner="@drawable/tv_banner"
         android:icon="@mipmap/ic_launcher"
+        android:theme="@style/Theme.AppCompat"
         android:label="Tailscale"
         android:roundIcon="@mipmap/ic_launcher_round">
         <activity

diff --git a/android/src/main/java/com/tailscale/ipn/MainActivity.kt b/android/src/main/java/com/tailscale/ipn/MainActivity.kt
@@ -27,6 +27,7 @@ import com.tailscale.ipn.ui.notifier.Notifier
 import com.tailscale.ipn.ui.theme.AppTheme
 import com.tailscale.ipn.ui.util.set
 import com.tailscale.ipn.ui.view.AboutView
+import com.tailscale.ipn.ui.view.BackNavigation
 import com.tailscale.ipn.ui.view.BugReportView
 import com.tailscale.ipn.ui.view.ExitNodePicker
 import com.tailscale.ipn.ui.view.MDMSettingsDebugView
@@ -72,8 +73,11 @@ class MainActivity : ComponentActivity() {
                   onNavigateToMDMSettings = { navController.navigate("mdmSettings") },
                   onNavigateToManagedBy = { navController.navigate("managedBy") },
                   onNavigateToUserSwitcher = { navController.navigate("userSwitcher") },
+                  onBackPressed = { navController.popBackStack() },
               )
 
+          val backNav = BackNavigation(onBack = { navController.popBackStack() })
+
           val exitNodePickerNav =
               ExitNodePickerNav(
                   onNavigateHome = {
@@ -95,13 +99,13 @@ class MainActivity : ComponentActivity() {
           composable(
               "peerDetails/{nodeId}",
               arguments = listOf(navArgument("nodeId") { type = NavType.StringType })) {
-                PeerDetails(it.arguments?.getString("nodeId") ?: "")
+                PeerDetails(nav = backNav, it.arguments?.getString("nodeId") ?: "")
               }
-          composable("bugReport") { BugReportView() }
-          composable("about") { AboutView() }
-          composable("mdmSettings") { MDMSettingsDebugView() }
-          composable("managedBy") { ManagedByView() }
-          composable("userSwitcher") { UserSwitcherView() }
+          composable("bugReport") { BugReportView(nav = backNav) }
+          composable("about") { AboutView(nav = backNav) }
+          composable("mdmSettings") { MDMSettingsDebugView(nav = backNav) }
+          composable("managedBy") { ManagedByView(nav = backNav) }
+          composable("userSwitcher") { UserSwitcherView(nav = backNav) }
         }
       }
     }

diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/AboutView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/AboutView.kt
@@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeContentPadding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
@@ -32,13 +31,13 @@ import com.tailscale.ipn.R
 import com.tailscale.ipn.ui.Links
 
 @Composable
-fun AboutView() {
-  Scaffold { _ ->
+fun AboutView(nav: BackNavigation) {
+  Scaffold(topBar = { Header(R.string.about_view_title, onBack = nav.onBack) }) { innerPadding ->
     Column(
         verticalArrangement =
             Arrangement.spacedBy(space = 20.dp, alignment = Alignment.CenterVertically),
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = Modifier.fillMaxWidth().fillMaxHeight().safeContentPadding()) {
+        modifier = Modifier.fillMaxWidth().fillMaxHeight().padding(innerPadding)) {
           Image(
               modifier =
                   Modifier.width(100.dp)

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
@@ -24,42 +24,44 @@ 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
 import kotlinx.coroutines.flow.StateFlow
 
 @Composable
-fun BugReportView(model: BugReportViewModel = viewModel()) {
+fun BugReportView(nav: BackNavigation, model: BugReportViewModel = viewModel()) {
   val handler = LocalUriHandler.current
 
-  Scaffold(topBar = { Header(R.string.bug_report_title) }) { innerPadding ->
-    Column(modifier = Modifier.padding(innerPadding).padding(8.dp).fillMaxWidth().fillMaxHeight()) {
+  Scaffold(topBar = { Header(R.string.bug_report_title, onBack = nav.onBack) }) { innerPadding ->
+    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<String>) {
           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/ExitNodePicker.kt b/android/src/main/java/com/tailscale/ipn/ui/view/ExitNodePicker.kt
@@ -43,7 +43,7 @@ fun ExitNodePicker(
     model: ExitNodePickerViewModel = viewModel(factory = ExitNodePickerViewModelFactory(nav))
 ) {
   LoadingIndicator.Wrap {
-    Scaffold(topBar = { Header(R.string.choose_exit_node) }) { innerPadding ->
+    Scaffold(topBar = { Header(R.string.choose_exit_node, onBack = nav.onNavigateHome) }) { innerPadding ->
       val tailnetExitNodes = model.tailnetExitNodes.collectAsState()
       val mullvadExitNodes = model.mullvadExitNodesByCountryCode.collectAsState()
       val anyActive = model.anyActive.collectAsState()

diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/MDMSettingsDebugView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/MDMSettingsDebugView.kt
@@ -31,8 +31,9 @@ import com.tailscale.ipn.ui.viewModel.IpnViewModel
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun MDMSettingsDebugView(model: IpnViewModel = viewModel()) {
-  Scaffold(topBar = { Header(R.string.current_mdm_settings) }) { innerPadding ->
+fun MDMSettingsDebugView(nav: BackNavigation, model: IpnViewModel = viewModel()) {
+  Scaffold(topBar = { Header(R.string.current_mdm_settings, onBack = nav.onBack) }) { innerPadding
+    ->
     val mdmSettings = IpnViewModel.mdmSettings.collectAsState().value
     LazyColumn(modifier = Modifier.padding(innerPadding)) {
       items(enumValues<BooleanSetting>()) { booleanSetting ->