From 24ed79da1d0b7fd47806577a65a65db83a20857a Mon Sep 17 00:00:00 2001 From: Percy Wegmann Date: Fri, 29 Mar 2024 13:08:16 -0500 Subject: [PATCH] WIP Signed-off-by: Percy Wegmann --- .../java/com/tailscale/ipn/ui/theme/Theme.kt | 8 ++-- .../java/com/tailscale/ipn/ui/view/Avatar.kt | 10 ++--- .../com/tailscale/ipn/ui/view/MainView.kt | 45 ++++++++++++------- .../com/tailscale/ipn/ui/view/SharedViews.kt | 8 ++-- 4 files changed, 42 insertions(+), 29 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 e35c8ec..22d4d41 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 @@ -46,8 +46,10 @@ private val LightColors = lightColorScheme( primary = Color(0xFF4B70CC), // blue-500 onPrimary = Color(0xFFFFFFFF), // white - primaryContainer = Color(0xFFF0F5FF), // blue-0 - onPrimaryContainer = Color(0xFF3E5DB3), // blue-600 + // primaryContainer = Color(0xFFF0F5FF), // blue-0 + primaryContainer = Color(0xFF6D94EC), // blue-400 + // onPrimaryContainer = Color(0xFF3E5DB3), // blue-600 + onPrimaryContainer = Color(0xFFFFFFFF), // white, error = Color(0xFFB22C30), // red-500 onError = Color(0xFFFFFFFF), // white errorContainer = Color(0xFFFEF6F3), // red-0 @@ -150,7 +152,7 @@ val ColorScheme.primaryListItem: ListItemColors containerColor = MaterialTheme.colorScheme.primary, headlineColor = MaterialTheme.colorScheme.onPrimary, leadingIconColor = MaterialTheme.colorScheme.onPrimary, - overlineColor = MaterialTheme.colorScheme.onPrimary, + overlineColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.7f), supportingTextColor = MaterialTheme.colorScheme.onPrimary, trailingIconColor = MaterialTheme.colorScheme.onPrimary, disabledHeadlineColor = default.disabledHeadlineColor, diff --git a/android/src/main/java/com/tailscale/ipn/ui/view/Avatar.kt b/android/src/main/java/com/tailscale/ipn/ui/view/Avatar.kt index aa11924..d299180 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/view/Avatar.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/view/Avatar.kt @@ -3,6 +3,7 @@ package com.tailscale.ipn.ui.view +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.CircleShape @@ -20,12 +21,11 @@ import com.tailscale.ipn.ui.model.IpnLocal @OptIn(ExperimentalCoilApi::class) @Composable -fun Avatar(profile: IpnLocal.LoginProfile?, size: Int = 50) { +fun Avatar(profile: IpnLocal.LoginProfile?, size: Int = 50, action: (() -> Unit)? = null) { Box(contentAlignment = Alignment.Center, modifier = Modifier.size(size.dp).clip(CircleShape)) { - Icon( - imageVector = Icons.Default.Person, - contentDescription = null, - modifier = Modifier.size((size * .8f).dp)) + var modifier = Modifier.size((size * .8f).dp) + action?.let { modifier = modifier.clickable { action() } } + Icon(imageVector = Icons.Default.Person, contentDescription = null, modifier = modifier) profile?.UserProfile?.ProfilePicURL?.let { url -> AsyncImage(model = url, modifier = Modifier.size((size * 1.2f).dp), contentDescription = null) 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 bf3f41e..b7a78e6 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 @@ -47,6 +47,7 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import androidx.lifecycle.viewmodel.compose.viewModel import com.google.accompanist.permissions.ExperimentalPermissionsApi import com.google.accompanist.permissions.isGranted @@ -100,26 +101,32 @@ fun MainView(navigation: MainViewNavigation, viewModel: MainViewModel = viewMode }, headlineContent = { if (username.isNotEmpty()) { - Text(text = username, style = MaterialTheme.typography.titleMedium) + Text( + text = username, + style = MaterialTheme.typography.titleMedium.copy(lineHeight = 20.sp)) } }, supportingContent = { if (username.isNotEmpty()) { - Text(text = stateStr, style = MaterialTheme.typography.bodyMedium) + Text( + text = stateStr, + style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp)) } else { - Text(text = stateStr, style = MaterialTheme.typography.bodyMedium) + Text( + text = stateStr, + style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp)) } }, trailingContent = { - Box( - modifier = - Modifier.weight(1f).clickable { navigation.onNavigateToSettings() }, - contentAlignment = Alignment.CenterEnd) { - when (user.value) { - null -> SettingsButton(user.value) { navigation.onNavigateToSettings() } - else -> Avatar(profile = user.value, size = 36) - } - } + Box(modifier = Modifier.weight(1f), contentAlignment = Alignment.CenterEnd) { + when (user.value) { + null -> SettingsButton(user.value) { navigation.onNavigateToSettings() } + else -> + Avatar(profile = user.value, size = 36) { + navigation.onNavigateToSettings() + } + } + } }) when (state.value) { @@ -169,7 +176,7 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) { overlineContent = { Text( stringResource(R.string.exit_node), - style = MaterialTheme.typography.bodyMedium, + style = MaterialTheme.typography.bodySmall, ) }, headlineContent = { @@ -179,12 +186,15 @@ fun ExitNodeStatus(navAction: () -> Unit, viewModel: MainViewModel) { location?.let { "${it.CountryCode?.flag()} ${it.Country} - ${it.City}" } ?: name ?: stringResource(id = R.string.none), - style = MaterialTheme.typography.titleMedium, + style = MaterialTheme.typography.bodyMedium, maxLines = 1, overflow = TextOverflow.Ellipsis) Icon( - Icons.Outlined.ArrowDropDown, - null, + imageVector = Icons.Outlined.ArrowDropDown, + contentDescription = null, + tint = + if (active) MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.7f) + else MaterialTheme.colorScheme.onSurfaceVariant, ) } }, @@ -336,7 +346,8 @@ fun PeerList( Row(verticalAlignment = Alignment.CenterVertically) { Box( modifier = - Modifier.size(10.dp) + Modifier.padding(top = 2.dp) + .size(10.dp) .background( color = peer.connectedColor(netmap.value), shape = RoundedCornerShape(percent = 50))) {} 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 7d2553d..21685bf 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.Box import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.material.icons.Icons @@ -41,10 +42,9 @@ fun Header(@StringRes title: Int = 0, titleText: String? = null, onBack: (() -> @Composable fun BackArrow(action: () -> Unit) { - Icon( - Icons.AutoMirrored.Filled.ArrowBack, - null, - modifier = Modifier.clickable { action() }.padding(start = 15.dp, end = 20.dp)) + Box(modifier = Modifier.padding(start = 15.dp, end = 20.dp)) { + Icon(Icons.AutoMirrored.Filled.ArrowBack, null, modifier = Modifier.clickable { action() }) + } } @Composable