From 1fa4923270dce26e5d3062f15c32fc3f76a68616 Mon Sep 17 00:00:00 2001 From: Percy Wegmann Date: Fri, 29 Mar 2024 11:20:02 -0500 Subject: [PATCH] Exit node picker styling --- .../java/com/tailscale/ipn/ui/theme/Theme.kt | 32 ++++++++++++++++++- .../com/tailscale/ipn/ui/view/MainView.kt | 19 ++++++++--- 2 files changed, 45 insertions(+), 6 deletions(-) diff --git a/android/src/main/java/com/tailscale/ipn/ui/theme/Theme.kt b/android/src/main/java/com/tailscale/ipn/ui/theme/Theme.kt index 1a5949f..3a0406e 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/theme/Theme.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/theme/Theme.kt @@ -4,6 +4,8 @@ package com.tailscale.ipn.ui.theme import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.material3.ButtonColors +import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.ColorScheme import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ListItemColors @@ -124,7 +126,7 @@ val ColorScheme.listItem: ListItemColors } /** Color scheme for list items that should be styled as a surface container. */ -val ColorScheme.containerListItem: ListItemColors +val ColorScheme.surfaceContainerListItem: ListItemColors @Composable get() { val default = ListItemDefaults.colors() @@ -140,6 +142,23 @@ val ColorScheme.containerListItem: ListItemColors disabledTrailingIconColor = default.disabledTrailingIconColor) } +/** Color scheme for list items that should be styled as a primary item. */ +val ColorScheme.primaryListItem: ListItemColors + @Composable + get() { + val default = ListItemDefaults.colors() + return ListItemColors( + containerColor = MaterialTheme.colorScheme.primary, + headlineColor = MaterialTheme.colorScheme.onPrimary, + leadingIconColor = MaterialTheme.colorScheme.onPrimary, + overlineColor = MaterialTheme.colorScheme.onPrimary, + supportingTextColor = MaterialTheme.colorScheme.onPrimary, + trailingIconColor = MaterialTheme.colorScheme.onPrimary, + disabledHeadlineColor = default.disabledHeadlineColor, + disabledLeadingIconColor = default.disabledLeadingIconColor, + disabledTrailingIconColor = default.disabledTrailingIconColor) + } + /** Main color scheme for top app bar, styles it as a surface container. */ @OptIn(ExperimentalMaterial3Api::class) val ColorScheme.topAppBar: TopAppBarColors @@ -151,3 +170,14 @@ val ColorScheme.topAppBar: TopAppBarColors navigationIconContentColor = MaterialTheme.colorScheme.onSurface, titleContentColor = MaterialTheme.colorScheme.onSurface, ) + +val ColorScheme.secondaryButton: ButtonColors + @Composable + get() { + val defaults = ButtonDefaults.buttonColors() + return ButtonColors( + containerColor = MaterialTheme.colorScheme.primaryContainer, + contentColor = MaterialTheme.colorScheme.onPrimaryContainer, + disabledContainerColor = defaults.disabledContainerColor, + disabledContentColor = defaults.disabledContentColor) + } diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/MainView.kt b/android/src/main/java/com/tailscale/ipn/ui/view/MainView.kt index 0eb7e9e..9a7ca64 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/view/MainView.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/view/MainView.kt @@ -28,6 +28,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.ListItem +import androidx.compose.material3.ListItemDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.SearchBar @@ -57,8 +58,10 @@ import com.tailscale.ipn.ui.model.IpnLocal import com.tailscale.ipn.ui.model.Permission import com.tailscale.ipn.ui.model.Permissions import com.tailscale.ipn.ui.model.Tailcfg -import com.tailscale.ipn.ui.theme.containerListItem import com.tailscale.ipn.ui.theme.listItem +import com.tailscale.ipn.ui.theme.primaryListItem +import com.tailscale.ipn.ui.theme.secondaryButton +import com.tailscale.ipn.ui.theme.surfaceContainerListItem import com.tailscale.ipn.ui.util.Lists import com.tailscale.ipn.ui.util.LoadingIndicator import com.tailscale.ipn.ui.util.PeerSet @@ -88,7 +91,7 @@ fun MainView(navigation: MainViewNavigation, viewModel: MainViewModel = viewMode val username = viewModel.userName ListItem( - colors = MaterialTheme.colorScheme.containerListItem, + colors = MaterialTheme.colorScheme.surfaceContainerListItem, leadingContent = { val isOn = viewModel.vpnToggleState.collectAsState(initial = false) TintedSwitch( @@ -151,6 +154,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) { val peer = exitNodeId?.let { id -> netmap.value?.Peers?.find { it.StableID == id } } val location = peer?.Hostinfo?.Location val name = peer?.ComputedName + val active = peer != null Box(modifier = Modifier.background(color = MaterialTheme.colorScheme.surfaceContainer)) { Box( @@ -160,6 +164,9 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) { .fillMaxWidth()) { ListItem( modifier = Modifier.clickable { navAction() }, + colors = + if (active) MaterialTheme.colorScheme.primaryListItem + else ListItemDefaults.colors(), overlineContent = { Text( stringResource(R.string.exit_node), @@ -184,9 +191,11 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) { }, trailingContent = { if (peer != null) { - Button(onClick = { viewModel.disableExitNode() }) { - Text(stringResource(R.string.disable)) - } + Button( + colors = MaterialTheme.colorScheme.secondaryButton, + onClick = { viewModel.disableExitNode() }) { + Text(stringResource(R.string.disable)) + } } }) }