From 994639b67d5270c1eb9b7c9e595c83468cf414ba Mon Sep 17 00:00:00 2001 From: Percy Wegmann Date: Mon, 1 Apr 2024 07:49:56 -0500 Subject: [PATCH] More styling Signed-off-by: Percy Wegmann --- .../ipn/ui/view/MullvadExitNodePicker.kt | 5 +- .../com/tailscale/ipn/ui/view/PeerDetails.kt | 99 +++++++++---------- .../tailscale/ipn/ui/view/PermissionsView.kt | 3 +- .../com/tailscale/ipn/ui/view/SettingsView.kt | 5 +- .../com/tailscale/ipn/ui/view/SharedViews.kt | 14 ++- 5 files changed, 67 insertions(+), 59 deletions(-) diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/MullvadExitNodePicker.kt b/android/src/main/java/com/tailscale/ipn/ui/view/MullvadExitNodePicker.kt index a31063e..34e004f 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/view/MullvadExitNodePicker.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/view/MullvadExitNodePicker.kt @@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Scaffold +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.ui.Modifier @@ -37,7 +38,9 @@ fun MullvadExitNodePicker( LoadingIndicator.Wrap { Scaffold( topBar = { - Header(titleText = "${countryCode.flag()} ${any.country}", onBack = nav.onNavigateBack) + Header( + title = { Text("${countryCode.flag()} ${any.country}") }, + onBack = nav.onNavigateBack) }) { innerPadding -> LazyColumn(modifier = Modifier.padding(innerPadding)) { if (nodes.size > 1) { 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 4903890..fb61cde 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 @@ -6,6 +6,7 @@ package com.tailscale.ipn.ui.view import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth @@ -19,7 +20,6 @@ import androidx.compose.material3.ListItem import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text -import androidx.compose.material3.TopAppBar import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.ui.Alignment @@ -35,8 +35,6 @@ import androidx.compose.ui.unit.sp import androidx.lifecycle.viewmodel.compose.viewModel import com.tailscale.ipn.R import com.tailscale.ipn.ui.theme.listItem -import com.tailscale.ipn.ui.theme.surfaceContainerListItem -import com.tailscale.ipn.ui.theme.topAppBar import com.tailscale.ipn.ui.theme.ts_color_light_blue import com.tailscale.ipn.ui.util.Lists import com.tailscale.ipn.ui.util.itemsWithDividers @@ -55,64 +53,59 @@ fun PeerDetails( model.node.collectAsState().value?.let { node -> Scaffold( topBar = { - TopAppBar( + Header( title = { - ListItem( - colors = MaterialTheme.colorScheme.surfaceContainerListItem, - headlineContent = { - Text( - text = node.displayName, - style = MaterialTheme.typography.titleMedium.copy(lineHeight = 20.sp)) - }, - supportingContent = { - Row(verticalAlignment = Alignment.CenterVertically) { - Box( - modifier = - Modifier.size(8.dp) - .background( - color = node.connectedColor(netmap), - shape = RoundedCornerShape(percent = 50))) {} - Spacer(modifier = Modifier.size(8.dp)) - Text( - text = stringResource(id = node.connectedStrRes(netmap)), - style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp)) - } - }, - ) - }, - colors = MaterialTheme.colorScheme.topAppBar, - navigationIcon = { BackArrow(action = { nav.onBack() }) }, - ) - }) { innerPadding -> - LazyColumn( - modifier = Modifier.padding(innerPadding), - ) { - item(key = "tailscaleAddresses") { - Box( - modifier = - Modifier.fillMaxWidth() - .background( - color = MaterialTheme.colorScheme.surface, - shape = RectangleShape)) { + Column { + Text( + text = node.displayName, + style = MaterialTheme.typography.titleMedium.copy(lineHeight = 20.sp), + color = MaterialTheme.colorScheme.onSurface) + Row(verticalAlignment = Alignment.CenterVertically) { + Box( + modifier = + Modifier.size(8.dp) + .background( + color = node.connectedColor(netmap), + shape = RoundedCornerShape(percent = 50))) {} + Spacer(modifier = Modifier.size(8.dp)) Text( - modifier = Modifier.padding(start = 16.dp, top = 16.dp), - text = stringResource(R.string.tailscale_addresses), - style = MaterialTheme.typography.titleSmall, + text = stringResource(id = node.connectedStrRes(netmap)), + style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp), color = MaterialTheme.colorScheme.onSurfaceVariant) } - } + } + }, + onBack = { nav.onBack() }) + }, + ) { innerPadding -> + LazyColumn( + modifier = Modifier.padding(innerPadding), + ) { + item(key = "tailscaleAddresses") { + Box( + modifier = + Modifier.fillMaxWidth() + .background( + color = MaterialTheme.colorScheme.surface, shape = RectangleShape)) { + Text( + modifier = Modifier.padding(start = 16.dp, top = 16.dp), + text = stringResource(R.string.tailscale_addresses), + style = MaterialTheme.typography.titleSmall, + color = MaterialTheme.colorScheme.onSurfaceVariant) + } + } - itemsWithDividers(node.displayAddresses, key = { it.address }) { - AddressRow(address = it.address, type = it.typeString) - } + itemsWithDividers(node.displayAddresses, key = { it.address }) { + AddressRow(address = it.address, type = it.typeString) + } - item(key = "infoDivider") { Lists.SectionDivider() } + item(key = "infoDivider") { Lists.SectionDivider() } - itemsWithDividers(node.info, key = { "info_${it.titleRes}" }) { - ValueRow(title = stringResource(id = it.titleRes), value = it.value.getString()) - } - } + itemsWithDividers(node.info, key = { "info_${it.titleRes}" }) { + ValueRow(title = stringResource(id = it.titleRes), value = it.value.getString()) } + } + } } } } diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/PermissionsView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/PermissionsView.kt index a002741..21bd2e6 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/view/PermissionsView.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/view/PermissionsView.kt @@ -30,7 +30,8 @@ import com.tailscale.ipn.ui.util.itemsWithDividers @OptIn(ExperimentalPermissionsApi::class) @Composable fun PermissionsView(nav: BackNavigation, openApplicationSettings: () -> Unit) { - Scaffold(topBar = { Header(title = R.string.permissions, onBack = nav.onBack) }) { innerPadding -> + Scaffold(topBar = { Header(titleRes = R.string.permissions, onBack = nav.onBack) }) { innerPadding + -> val permissions = Permissions.all val permissionStates = rememberMultiplePermissionsState(permissions = permissions.map { it.name }) 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 09c7957..47760a2 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 @@ -45,8 +45,9 @@ fun SettingsView( val managedBy = viewModel.managedBy.collectAsState().value Scaffold( - topBar = { Header(title = R.string.settings_title, onBack = settingsNav.onBackPressed) }) { - innerPadding -> + topBar = { + Header(titleRes = R.string.settings_title, onBack = settingsNav.onBackPressed) + }) { innerPadding -> Column(modifier = Modifier.padding(innerPadding)) { UserView( profile = user, 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 bc64897..f9cab82 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 @@ -32,9 +32,19 @@ data class BackNavigation( // Header view for all secondary screens @OptIn(ExperimentalMaterial3Api::class) @Composable -fun Header(@StringRes title: Int = 0, titleText: String? = null, onBack: (() -> Unit)? = null) { +fun Header( + @StringRes titleRes: Int = 0, + title: (@Composable () -> Unit)? = null, + onBack: (() -> Unit)? = null +) { TopAppBar( - title = { Text(titleText ?: stringResource(title)) }, + title = { + title?.let { title() } + ?: Text( + stringResource(titleRes), + style = MaterialTheme.typography.titleLarge, + color = MaterialTheme.colorScheme.onSurface) + }, colors = MaterialTheme.colorScheme.topAppBar, navigationIcon = { onBack?.let { BackArrow(action = it) } }, )