More exit node tweaks

Signed-off-by: Percy Wegmann <percy@tailscale.com>
ox/styling_bak
Percy Wegmann 2 years ago
parent 45fbd08ee3
commit 6ad6e5fb61
No known key found for this signature in database
GPG Key ID: 29D8CDEB4C13D48B

@ -55,10 +55,10 @@ private val LightColors =
lightColorScheme( lightColorScheme(
primary = Color(0xFF4B70CC), // blue-500 primary = Color(0xFF4B70CC), // blue-500
onPrimary = Color(0xFFFFFFFF), // white onPrimary = Color(0xFFFFFFFF), // white
// primaryContainer = Color(0xFFF0F5FF), // blue-0 primaryContainer = Color(0xFFF0F5FF), // blue-0
primaryContainer = Color(0xFF6D94EC), // blue-400 // primaryContainer = Color(0xFF6D94EC), // blue-400
// onPrimaryContainer = Color(0xFF3E5DB3), // blue-600 onPrimaryContainer = Color(0xFF3E5DB3), // blue-600
onPrimaryContainer = Color(0xFFFFFFFF), // white, // onPrimaryContainer = Color(0xFFFFFFFF), // white,
error = Color(0xFFB22C30), // red-500 error = Color(0xFFB22C30), // red-500
onError = Color(0xFFFFFFFF), // white onError = Color(0xFFFFFFFF), // white
errorContainer = Color(0xFFFEF6F3), // red-0 errorContainer = Color(0xFFFEF6F3), // red-0
@ -209,8 +209,8 @@ val ColorScheme.secondaryButton: ButtonColors
get() { get() {
val defaults = ButtonDefaults.buttonColors() val defaults = ButtonDefaults.buttonColors()
return ButtonColors( return ButtonColors(
containerColor = MaterialTheme.colorScheme.primaryContainer, containerColor = Color(0xFF6D94EC), // blue-400
contentColor = MaterialTheme.colorScheme.onPrimaryContainer, contentColor = Color(0xFFFFFFFF), // white
disabledContainerColor = defaults.disabledContainerColor, disabledContainerColor = defaults.disabledContainerColor,
disabledContentColor = defaults.disabledContentColor) disabledContentColor = defaults.disabledContentColor)
} }

@ -26,7 +26,7 @@ object Lists {
@Composable @Composable
fun ItemDivider() { fun ItemDivider() {
HorizontalDivider(color = MaterialTheme.colorScheme.surfaceContainer) HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant)
} }
} }

@ -3,7 +3,6 @@
package com.tailscale.ipn.ui.view package com.tailscale.ipn.ui.view
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
@ -11,7 +10,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Check import androidx.compose.material.icons.outlined.Check
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem import androidx.compose.material3.ListItem
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
@ -33,24 +31,21 @@ import com.tailscale.ipn.ui.viewModel.ExitNodePickerViewModel
import com.tailscale.ipn.ui.viewModel.ExitNodePickerViewModelFactory import com.tailscale.ipn.ui.viewModel.ExitNodePickerViewModelFactory
import com.tailscale.ipn.ui.viewModel.selected import com.tailscale.ipn.ui.viewModel.selected
@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable @Composable
fun ExitNodePicker( fun ExitNodePicker(
nav: ExitNodePickerNav, nav: ExitNodePickerNav,
model: ExitNodePickerViewModel = viewModel(factory = ExitNodePickerViewModelFactory(nav)) model: ExitNodePickerViewModel = viewModel(factory = ExitNodePickerViewModelFactory(nav))
) { ) {
LoadingIndicator.Wrap { LoadingIndicator.Wrap {
Scaffold( Scaffold(topBar = { Header(R.string.choose_exit_node, onBack = nav.onNavigateBack) }) {
topBar = { Header(R.string.choose_exit_node, onBack = nav.onNavigateBack) }, innerPadding ->
bottomBar = { SettingRow(model.allowLANAccessSetting) }) { innerPadding ->
val tailnetExitNodes = model.tailnetExitNodes.collectAsState().value val tailnetExitNodes = model.tailnetExitNodes.collectAsState().value
val mullvadExitNodesByCountryCode = val mullvadExitNodesByCountryCode = model.mullvadExitNodesByCountryCode.collectAsState().value
model.mullvadExitNodesByCountryCode.collectAsState().value
val mullvadExitNodeCount = model.mullvadExitNodeCount.collectAsState().value val mullvadExitNodeCount = model.mullvadExitNodeCount.collectAsState().value
val anyActive = model.anyActive.collectAsState() val anyActive = model.anyActive.collectAsState()
LazyColumn(modifier = Modifier.padding(innerPadding)) { LazyColumn(modifier = Modifier.padding(innerPadding)) {
stickyHeader { item(key = "header") {
ExitNodeItem( ExitNodeItem(
model, model,
ExitNodePickerViewModel.ExitNode( ExitNodePickerViewModel.ExitNode(
@ -64,9 +59,7 @@ fun ExitNodePicker(
item(key = "divider1") { Lists.SectionDivider() } item(key = "divider1") { Lists.SectionDivider() }
itemsWithDividers(tailnetExitNodes, key = { it.id!! }) { node -> itemsWithDividers(tailnetExitNodes, key = { it.id!! }) { node -> ExitNodeItem(model, node) }
ExitNodeItem(model, node)
}
if (mullvadExitNodeCount > 0) { if (mullvadExitNodeCount > 0) {
item(key = "mullvad") { item(key = "mullvad") {
@ -74,6 +67,12 @@ fun ExitNodePicker(
MullvadItem(nav, mullvadExitNodeCount, mullvadExitNodesByCountryCode.selected) MullvadItem(nav, mullvadExitNodeCount, mullvadExitNodesByCountryCode.selected)
} }
} }
// TODO: make sure this actually works, and if not, leave it out for now
item(key = "allowLANAccess") {
Lists.SectionDivider()
SettingRow(model.allowLANAccessSetting)
}
} }
} }
} }
@ -146,7 +145,7 @@ fun RunAsExitNodeItem(nav: ExitNodePickerNav, viewModel: ExitNodePickerViewModel
stringResource(id = R.string.run_as_exit_node), stringResource(id = R.string.run_as_exit_node),
style = MaterialTheme.typography.bodyMedium) style = MaterialTheme.typography.bodyMedium)
}, },
trailingContent = { supportingContent = {
if (isRunningExitNode) { if (isRunningExitNode) {
Text(stringResource(R.string.enabled)) Text(stringResource(R.string.enabled))
} else { } else {

@ -51,7 +51,7 @@ fun MullvadExitNodePicker(
online = bestAvailableNode.online, online = bestAvailableNode.online,
selected = false, selected = false,
)) ))
Lists.ItemDivider() Lists.SectionDivider()
} }
} }

@ -42,7 +42,7 @@ fun Header(@StringRes title: Int = 0, titleText: String? = null, onBack: (() ->
@Composable @Composable
fun BackArrow(action: () -> Unit) { fun BackArrow(action: () -> Unit) {
Box(modifier = Modifier.padding(start = 15.dp, end = 20.dp)) { Box(modifier = Modifier.padding(start = 8.dp, end = 8.dp)) {
Icon(Icons.AutoMirrored.Filled.ArrowBack, null, modifier = Modifier.clickable { action() }) Icon(Icons.AutoMirrored.Filled.ArrowBack, null, modifier = Modifier.clickable { action() })
} }
} }

@ -91,19 +91,19 @@
<string name="add_profile_failed">Unable to add a new profile. Please try again.</string> <string name="add_profile_failed">Unable to add a new profile. Please try again.</string>
<!-- Strings for ExitNode picker --> <!-- Strings for ExitNode picker -->
<string name="choose_exit_node">Choose Exit Node</string> <string name="choose_exit_node">Choose exit node</string>
<string name="choose_mullvad_exit_node">Mullvad Exit Nodes</string> <string name="choose_mullvad_exit_node">Mullvad exit nodes</string>
<string name="tailnet_exit_nodes">Tailnet Exit Nodes</string> <string name="tailnet_exit_nodes">Tailnet exit nodes</string>
<string name="mullvad_exit_nodes">Mullvad VPN</string> <string name="mullvad_exit_nodes">Mullvad VPN</string>
<string name="best_available">Best Available</string> <string name="best_available">Best available</string>
<string name="run_as_exit_node">Run as Exit Node</string> <string name="run_as_exit_node">Run as exit node</string>
<string name="run_this_device_as_an_exit_node">Run this device as an exit node?</string> <string name="run_this_device_as_an_exit_node">Run this device as an exit node?</string>
<string name="run_exit_node_explainer">Other devices in your tailnet will be able to route their Internet traffic through this Android device. Make sure to approve this exit node in the admin console in order for other devices to see it.</string> <string name="run_exit_node_explainer">Other devices in your tailnet will be able to route their internet traffic through this Android device. Make sure to approve this exit node in the admin console in order for other devices to see it.</string>
<string name="run_exit_node_caution">Caution: Running an exit node will severely impact battery life. On a metered data plan, significant cellular data charges may also apply. Always disable this feature when no longer needed.</string> <string name="run_exit_node_caution">Caution: Running an exit node will severely impact battery life. On a metered data plan, significant cellular data charges may also apply. Always disable this feature when no longer needed.</string>
<string name="stop_running_as_exit_node">Stop Running as Exit Node</string> <string name="stop_running_as_exit_node">Stop running as exit node</string>
<string name="start_running_as_exit_node">Start Running as Exit Node</string> <string name="start_running_as_exit_node">Start running as exit node</string>
<string name="running_as_exit_node">Now Running as Exit Node</string> <string name="running_as_exit_node">Now running as exit node</string>
<string name="run_exit_node_explainer_running">Other devices in your tailnet can now route their Internet traffic through this Android device. Make sure to approve this exit node in the admin console in order for other devices to see it.</string> <string name="run_exit_node_explainer_running">Other devices in your tailnet can now route their internet traffic through this Android device. Make sure to approve this exit node in the admin console in order for other devices to see it.</string>
<string name="enabled">Enabled</string> <string name="enabled">Enabled</string>
<string name="disabled">Disabled</string> <string name="disabled">Disabled</string>
<string name="disable">Disable</string> <string name="disable">Disable</string>

Loading…
Cancel
Save