From 5c8f4202713c8bee7e35a5bbeba76b6ec93c5011 Mon Sep 17 00:00:00 2001 From: Jonatan Rhodin Date: Fri, 25 Oct 2024 12:54:58 +0200 Subject: [PATCH] Improve segmented button --- .../compose/button/MullvadSegmentedButton.kt | 70 +++++++++++++++---- .../screen/location/SearchLocationScreen.kt | 5 +- .../screen/location/SelectLocationScreen.kt | 10 ++- 3 files changed, 62 insertions(+), 23 deletions(-) diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadSegmentedButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadSegmentedButton.kt index 4311ab0ec35b..f67e7228af43 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadSegmentedButton.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/MullvadSegmentedButton.kt @@ -5,22 +5,38 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.material3.SegmentedButton import androidx.compose.material3.SegmentedButtonDefaults +import androidx.compose.material3.SingleChoiceSegmentedButtonRow import androidx.compose.material3.SingleChoiceSegmentedButtonRowScope import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Shape import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import net.mullvad.mullvadvpn.lib.theme.AppTheme import net.mullvad.mullvadvpn.lib.theme.color.onSelected import net.mullvad.mullvadvpn.lib.theme.color.selected +@Preview @Composable -fun SingleChoiceSegmentedButtonRowScope.MullvadSegmentedButton( +private fun PreviewMullvadSegmentedButton() { + AppTheme { + SingleChoiceSegmentedButtonRow { + MullvadSegmentedStartButton(selected = true, text = "Start", onClick = {}) + MullvadSegmentedMiddleButton(selected = false, text = "Middle", onClick = {}) + MullvadSegmentedEndButton(selected = false, text = "End", onClick = {}) + } + } +} + +@Composable +private fun SingleChoiceSegmentedButtonRowScope.MullvadSegmentedButton( selected: Boolean, text: String, onClick: () -> Unit, - position: SegmentedButtonPosition, + shape: Shape, ) { SegmentedButton( onClick = onClick, @@ -44,20 +60,48 @@ fun SingleChoiceSegmentedButtonRowScope.MullvadSegmentedButton( ) }, icon = {}, - shape = - when (position) { - SegmentedButtonPosition.First -> - RoundedCornerShape(topStart = 8.dp, bottomStart = 8.dp) - SegmentedButtonPosition.Last -> RoundedCornerShape(topEnd = 8.dp, bottomEnd = 8.dp) - SegmentedButtonPosition.Middle -> RoundedCornerShape(0.dp) // Square - }, + shape = shape, ) } -sealed interface SegmentedButtonPosition { - data object First : SegmentedButtonPosition +@Composable +fun SingleChoiceSegmentedButtonRowScope.MullvadSegmentedStartButton( + selected: Boolean, + text: String, + onClick: () -> Unit, +) { + MullvadSegmentedButton( + selected = selected, + text = text, + onClick = onClick, + shape = RoundedCornerShape(topStart = 8.dp, bottomStart = 8.dp), + ) +} - data object Middle : SegmentedButtonPosition +@Composable +fun SingleChoiceSegmentedButtonRowScope.MullvadSegmentedMiddleButton( + selected: Boolean, + text: String, + onClick: () -> Unit, +) { + MullvadSegmentedButton( + selected = selected, + text = text, + onClick = onClick, + shape = RoundedCornerShape(0.dp), // Square + ) +} - data object Last : SegmentedButtonPosition +@Composable +fun SingleChoiceSegmentedButtonRowScope.MullvadSegmentedEndButton( + selected: Boolean, + text: String, + onClick: () -> Unit, +) { + MullvadSegmentedButton( + selected = selected, + text = text, + onClick = onClick, + shape = RoundedCornerShape(topEnd = 8.dp, bottomEnd = 8.dp), + ) } diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SearchLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SearchLocationScreen.kt index 22b7b61fac0c..556ecb3f018e 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SearchLocationScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SearchLocationScreen.kt @@ -371,10 +371,7 @@ private fun LazyListScope.filterRow( ) { if (filters.isNotEmpty()) { item { - Title( - text = stringResource(R.string.filters), - onBackgroundColor = onBackgroundColor, - ) + Title(text = stringResource(R.string.filters), onBackgroundColor = onBackgroundColor) } item { FilterRow( diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SelectLocationScreen.kt index 6d060933f6ed..97df71110e97 100644 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SelectLocationScreen.kt +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SelectLocationScreen.kt @@ -49,8 +49,8 @@ import com.ramcosta.composedestinations.result.ResultRecipient import com.ramcosta.composedestinations.result.onResult import kotlinx.coroutines.launch import net.mullvad.mullvadvpn.R -import net.mullvad.mullvadvpn.compose.button.MullvadSegmentedButton -import net.mullvad.mullvadvpn.compose.button.SegmentedButtonPosition +import net.mullvad.mullvadvpn.compose.button.MullvadSegmentedEndButton +import net.mullvad.mullvadvpn.compose.button.MullvadSegmentedStartButton import net.mullvad.mullvadvpn.compose.cell.FilterRow import net.mullvad.mullvadvpn.compose.communication.CustomListActionResultData import net.mullvad.mullvadvpn.compose.component.ScaffoldWithSmallTopBar @@ -296,17 +296,15 @@ private fun MultihopBar( modifier = Modifier.fillMaxWidth().padding(start = Dimens.sideMargin, end = Dimens.sideMargin) ) { - MullvadSegmentedButton( + MullvadSegmentedStartButton( selected = relayListSelection == RelayListSelection.Entry, onClick = { onSelectRelayList(RelayListSelection.Entry) }, text = stringResource(id = R.string.entry), - position = SegmentedButtonPosition.First, ) - MullvadSegmentedButton( + MullvadSegmentedEndButton( selected = relayListSelection == RelayListSelection.Exit, onClick = { onSelectRelayList(RelayListSelection.Exit) }, text = stringResource(id = R.string.exit), - position = SegmentedButtonPosition.Last, ) } }