Further improvements

mullvad · Feb 26, 2024 · 36aa2ba · 36aa2ba
1 parent 7933327
commit 36aa2ba
Show file tree

Hide file tree

Showing 13 changed files with 160 additions and 67 deletions.
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CheckboxCell.kt
@@ -33,7 +33,7 @@ internal fun CheckboxCell(
     checked: Boolean,
     onCheckedChange: (Boolean) -> Unit,
     background: Color = MaterialTheme.colorScheme.secondaryContainer,
-    startPadding: Dp = Dimens.cellStartPadding,
+    startPadding: Dp = Dimens.mediumPadding,
     endPadding: Dp = Dimens.cellEndPadding,
     minHeight: Dp = Dimens.cellHeight
 ) {

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DropdownMenuCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/DropdownMenuCell.kt
@@ -1,6 +1,7 @@
 package net.mullvad.mullvadvpn.compose.cell
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
@@ -14,9 +15,12 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.layout
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
@@ -44,7 +48,8 @@ fun DropdownMenuCell(
     textStyle: TextStyle = MaterialTheme.typography.titleMedium,
     textColor: Color = MaterialTheme.colorScheme.onPrimary,
     background: Color = MaterialTheme.colorScheme.primary,
-    dropdownBackground: Color = MaterialTheme.colorScheme.background
+    dropdownBackground: Color = MaterialTheme.colorScheme.background,
+    dropdownBorderColor: Color = MaterialTheme.colorScheme.primary
 ) {
     var showMenu by remember { mutableStateOf(false) }
     BaseCell(
@@ -68,7 +73,14 @@ fun DropdownMenuCell(
                     DropdownMenu(
                         expanded = true,
                         onDismissRequest = { showMenu = false },
-                        modifier = Modifier.background(dropdownBackground)
+                        modifier =
+                            Modifier.background(dropdownBackground)
+                                .border(
+                                    width = Dimens.dropdownMenuBorder,
+                                    color = dropdownBorderColor,
+                                    MaterialTheme.shapes.extraSmall
+                                )
+                                .crop(vertical = Dimens.dropdownMenuVerticalPadding)
                     ) {
                         contextMenuItems { showMenu = false }
                     }
@@ -79,3 +91,19 @@ fun DropdownMenuCell(
         endPadding = Dimens.smallPadding
     )
 }
+
+fun Modifier.crop(
+    horizontal: Dp = 0.dp,
+    vertical: Dp = 0.dp,
+): Modifier =
+    this.layout { measurable, constraints ->
+        val placeable = measurable.measure(constraints)
+        fun Dp.toPxInt(): Int = this.toPx().toInt()
+
+        layout(
+            placeable.width - (horizontal * 2).toPxInt(),
+            placeable.height - (vertical * 2).toPxInt()
+        ) {
+            placeable.placeRelative(-horizontal.toPx().toInt(), -vertical.toPx().toInt())
+        }
+    }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
@@ -256,6 +256,7 @@ fun NormalRelayLocationCell(
     modifier: Modifier = Modifier,
     activeColor: Color = MaterialTheme.colorScheme.selected,
     inactiveColor: Color = MaterialTheme.colorScheme.error,
+    disabledColor: Color = MaterialTheme.colorScheme.onSecondary,
     selectedItem: RelayItem? = null,
     onSelectRelay: (item: RelayItem) -> Unit = {}
 ) {
@@ -271,6 +272,8 @@ fun NormalRelayLocationCell(
                             color =
                                 when {
                                     selected -> Color.Transparent
+                                    relayItem is RelayItem.CustomList && !relayItem.hasChildren ->
+                                        disabledColor
                                     relayItem.active -> activeColor
                                     else -> inactiveColor
                                 },

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/MullvadCheckbox.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/MullvadCheckbox.kt
@@ -1,34 +1,21 @@
 package net.mullvad.mullvadvpn.compose.component
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Checkbox
 import androidx.compose.material3.CheckboxDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.lib.theme.color.selected
 
 @Composable
 fun MullvadCheckbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
-    Box(
-        modifier =
-            Modifier.size(Dimens.checkBoxSize).background(Color.White, MaterialTheme.shapes.small)
-    ) {
-        Checkbox(
-            modifier = Modifier.fillMaxSize(),
-            checked = checked,
-            onCheckedChange = onCheckedChange,
-            colors =
-                CheckboxDefaults.colors(
-                    checkedColor = Color.Transparent,
-                    uncheckedColor = Color.Transparent,
-                    checkmarkColor = MaterialTheme.colorScheme.selected
-                ),
-        )
-    }
+    Checkbox(
+        checked = checked,
+        onCheckedChange = onCheckedChange,
+        colors =
+            CheckboxDefaults.colors(
+                checkedColor = MaterialTheme.colorScheme.onPrimary,
+                uncheckedColor = MaterialTheme.colorScheme.onPrimary,
+                checkmarkColor = MaterialTheme.colorScheme.selected
+            )
+    )
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CreateCustomListDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CreateCustomListDialog.kt
@@ -9,6 +9,11 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
@@ -70,7 +75,10 @@ fun CreateCustomListDialog(
     onInputChanged: () -> Unit = {},
     onDismiss: () -> Unit = {}
 ) {
+    val focusRequester = remember { FocusRequester() }
+    val keyboardController = LocalSoftwareKeyboardController.current
     val name = remember { mutableStateOf("") }
+
     AlertDialog(
         title = {
             Text(
@@ -108,9 +116,17 @@ fun CreateCustomListDialog(
                                 style = MaterialTheme.typography.bodySmall
                             )
                         }
-                    }
+                    },
+                    modifier =
+                        Modifier.focusRequester(focusRequester).onFocusChanged { focusState ->
+                            if (focusState.hasFocus) {
+                                keyboardController?.show()
+                            }
+                        }
                 )
             }
+
+            LaunchedEffect(Unit) { focusRequester.requestFocus() }
         },
         containerColor = MaterialTheme.colorScheme.background,
         titleContentColor = MaterialTheme.colorScheme.onBackground,

diff --git a/...c/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeleteCustomListConfirmationDialog.kt b/...c/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeleteCustomListConfirmationDialog.kt
@@ -62,18 +62,18 @@ fun DeleteCustomListConfirmationDialog(navigator: ResultBackNavigator<Boolean>,
             )
         },
         dismissButton = {
-            NegativeButton(
-                onClick = { navigator.navigateBack(result = true) },
-                text = stringResource(id = R.string.delete_list)
-            )
-        },
-        confirmButton = {
             PrimaryButton(
                 modifier = Modifier.focusRequester(FocusRequester()),
                 onClick = { navigator.navigateBack(result = false) },
                 text = stringResource(id = R.string.cancel)
             )
         },
+        confirmButton = {
+            NegativeButton(
+                onClick = { navigator.navigateBack(result = true) },
+                text = stringResource(id = R.string.delete_list)
+            )
+        },
         containerColor = MaterialTheme.colorScheme.background
     )
 }
diff --git a/...oid/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/EditCustomListNameDialog.kt b/...oid/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/EditCustomListNameDialog.kt
@@ -9,6 +9,11 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
@@ -65,11 +70,13 @@ fun EditCustomListNameDialog(
     onInputChanged: () -> Unit = {},
     onDismiss: () -> Unit = {}
 ) {
+    val focusRequester = remember { FocusRequester() }
+    val keyboardController = LocalSoftwareKeyboardController.current
     val input = remember { mutableStateOf(name) }
     AlertDialog(
         title = {
             Text(
-                text = stringResource(id = R.string.create_new_list),
+                text = stringResource(id = R.string.update_list_name),
             )
         },
         text = {
@@ -80,7 +87,11 @@ fun EditCustomListNameDialog(
                         input.value = it
                         onInputChanged()
                     },
-                    onSubmit = updateName,
+                    onSubmit = {
+                        if (it.isNotEmpty()) {
+                            updateName(it)
+                        }
+                    },
                     keyboardType = KeyboardType.Text,
                     placeholderText = "",
                     isValidValue = input.value.isNotBlank(),
@@ -103,9 +114,17 @@ fun EditCustomListNameDialog(
                                 style = MaterialTheme.typography.bodySmall
                             )
                         }
-                    }
+                    },
+                    modifier =
+                        Modifier.focusRequester(focusRequester).onFocusChanged { focusState ->
+                            if (focusState.hasFocus) {
+                                keyboardController?.show()
+                            }
+                        }
                 )
             }
+
+            LaunchedEffect(Unit) { focusRequester.requestFocus() }
         },
         containerColor = MaterialTheme.colorScheme.background,
         titleContentColor = MaterialTheme.colorScheme.onBackground,

diff --git a/...id/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListLocationsScreen.kt b/...id/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/CustomListLocationsScreen.kt
@@ -2,9 +2,11 @@ package net.mullvad.mullvadvpn.compose.screen
 
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
@@ -35,6 +37,7 @@ import net.mullvad.mullvadvpn.compose.component.MullvadCircularProgressIndicator
 import net.mullvad.mullvadvpn.compose.constant.CommonContentKey
 import net.mullvad.mullvadvpn.compose.constant.ContentType
 import net.mullvad.mullvadvpn.compose.state.CustomListLocationsUiState
+import net.mullvad.mullvadvpn.compose.textfield.SearchTextField
 import net.mullvad.mullvadvpn.compose.transitions.SlideInFromRightTransition
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
@@ -69,6 +72,7 @@ fun CustomListLocations(navigator: DestinationsNavigator, customListKey: String,
     val state by customListsViewModel.uiState.collectAsState()
     CustomListLocationsScreen(
         uiState = state,
+        onSearchTermInput = customListsViewModel::onSearchTermInput,
         onSaveClick = customListsViewModel::save,
         onRelaySelectionClick = customListsViewModel::onRelaySelectionClick,
         onBackClick = navigator::navigateUp
@@ -78,6 +82,7 @@ fun CustomListLocations(navigator: DestinationsNavigator, customListKey: String,
 @Composable
 fun CustomListLocationsScreen(
     uiState: CustomListLocationsUiState,
+    onSearchTermInput: (String) -> Unit = {},
     onSaveClick: () -> Unit = {},
     onRelaySelectionClick: (RelayItem, selected: Boolean) -> Unit = { _, _ -> },
     onBackClick: () -> Unit = {}
@@ -89,12 +94,19 @@ fun CustomListLocationsScreen(
         topBar = {
             CustomListLocationsTopBar(
                 uiState = uiState,
+                onSearchTermInput = onSearchTermInput,
                 onBackClick = onBackClick,
                 onSaveClick = onSaveClick
             )
         },
         content = { contentPadding ->
-            LazyColumn(modifier = Modifier.padding(contentPadding).fillMaxSize()) {
+            LazyColumn(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier =
+                    Modifier.padding(contentPadding)
+                        .padding(top = Dimens.verticalSpace)
+                        .fillMaxSize()
+            ) {
                 when (uiState) {
                     is CustomListLocationsUiState.Loading -> {
                         loading()
@@ -114,40 +126,49 @@ fun CustomListLocationsScreen(
 @Composable
 private fun CustomListLocationsTopBar(
     uiState: CustomListLocationsUiState,
+    onSearchTermInput: (String) -> Unit,
     onBackClick: () -> Unit,
     onSaveClick: () -> Unit
 ) {
-    Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
-        IconButton(onClick = onBackClick) {
-            Icon(
-                painter = painterResource(id = R.drawable.icon_back),
-                contentDescription = null,
-                tint = Color.Unspecified,
-            )
-        }
-        Text(
-            text =
-                stringResource(
-                    if (uiState.newList) {
-                        R.string.add_locations
-                    } else {
-                        R.string.edit_locations
-                    }
-                ),
-            modifier = Modifier.weight(1f).padding(end = Dimens.titleIconSize),
-            textAlign = TextAlign.Start,
-            style = MaterialTheme.typography.titleLarge,
-            color = MaterialTheme.colorScheme.onPrimary
-        )
-        IconButton(onClick = {}) {
-            Icon(
-                painter = painterResource(id = R.drawable.icons_search),
-                contentDescription = null,
-                tint = Color.Unspecified,
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
+            IconButton(onClick = onBackClick) {
+                Icon(
+                    painter = painterResource(id = R.drawable.icon_back),
+                    contentDescription = null,
+                    tint = Color.Unspecified,
+                )
+            }
+            Text(
+                text =
+                    stringResource(
+                        if (uiState.newList) {
+                            R.string.add_locations
+                        } else {
+                            R.string.edit_locations
+                        }
+                    ),
+                modifier = Modifier.weight(1f).padding(end = Dimens.titleIconSize),
+                textAlign = TextAlign.Start,
+                style = MaterialTheme.typography.titleLarge,
+                color = MaterialTheme.colorScheme.onPrimary
             )
+            TextButton(onClick = onSaveClick) {
+                Text(
+                    text = stringResource(R.string.save),
+                    color = MaterialTheme.colorScheme.onPrimary
+                )
+            }
         }
-        TextButton(onClick = onSaveClick) {
-            Text(text = stringResource(R.string.save), color = MaterialTheme.colorScheme.onPrimary)
+        SearchTextField(
+            modifier =
+                Modifier.fillMaxWidth()
+                    .height(Dimens.searchFieldHeight)
+                    .padding(horizontal = Dimens.searchFieldHorizontalPadding),
+            backgroundColor = MaterialTheme.colorScheme.tertiaryContainer,
+            textColor = MaterialTheme.colorScheme.onTertiaryContainer,
+        ) { searchString ->
+            onSearchTermInput.invoke(searchString)
         }
     }
 }