Improve segmented button

mullvad · Oct 25, 2024 · 5c8f420 · 5c8f420
1 parent 180acb6
commit 5c8f420
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 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
@@ -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/...pp/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SearchLocationScreen.kt b/...pp/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/...pp/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/location/SelectLocationScreen.kt b/...pp/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,
         )
     }
 }