Changes based on UX update

mullvad · Feb 28, 2024 · 870c213 · 870c213
1 parent 9a1a35b
commit 870c213
Show file tree

Hide file tree

Showing 21 changed files with 477 additions and 269 deletions.
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,57 +1,40 @@
 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
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-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
 
 @Preview
 @Composable
-fun PreviewDropdownMenuCell() {
+fun PreviewThreeDotCell() {
     AppTheme {
-        DropdownMenuCell(
-            text = "Dropdown Menu",
-            contextMenuItems = {
-                DropdownMenuItem({ Text("Item1") }, {})
-                DropdownMenuItem({ Text("Item1") }, {})
-                DropdownMenuItem({ Text("Item1") }, {})
-            }
+        ThreeDotCell(
+            text = "Three dots",
         )
     }
 }
 
 @Composable
-fun DropdownMenuCell(
+fun ThreeDotCell(
     text: String,
-    contextMenuItems: @Composable (onClose: () -> Unit) -> Unit,
     modifier: Modifier = Modifier,
+    onClickDots: () -> Unit = {},
     textStyle: TextStyle = MaterialTheme.typography.titleMedium,
     textColor: Color = MaterialTheme.colorScheme.onPrimary,
-    background: Color = MaterialTheme.colorScheme.primary,
-    dropdownBackground: Color = MaterialTheme.colorScheme.background,
-    dropdownBorderColor: Color = MaterialTheme.colorScheme.primary
+    background: Color = MaterialTheme.colorScheme.primary
 ) {
-    var showMenu by remember { mutableStateOf(false) }
     BaseCell(
         headlineContent = {
             BaseCellTitle(
@@ -64,46 +47,15 @@ fun DropdownMenuCell(
         modifier = modifier,
         background = background,
         bodyView = {
-            IconButton(onClick = { showMenu = true }) {
+            IconButton(onClick = onClickDots) {
                 Icon(
                     painter = painterResource(id = R.drawable.icon_more_vert),
-                    contentDescription = null
+                    contentDescription = null,
+                    tint = textColor
                 )
-                if (showMenu) {
-                    DropdownMenu(
-                        expanded = true,
-                        onDismissRequest = { showMenu = false },
-                        modifier =
-                            Modifier.background(dropdownBackground)
-                                .border(
-                                    width = Dimens.dropdownMenuBorder,
-                                    color = dropdownBorderColor,
-                                    MaterialTheme.shapes.extraSmall
-                                )
-                                .crop(vertical = Dimens.dropdownMenuVerticalPadding)
-                    ) {
-                        contextMenuItems { showMenu = false }
-                    }
-                }
             }
         },
         isRowEnabled = false,
         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/IconCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/IconCell.kt
@@ -0,0 +1,52 @@
+package net.mullvad.mullvadvpn.compose.cell
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
+
+@Preview
+@Composable
+fun PreviewIconCell() {
+    AppTheme { IconCell(iconId = R.drawable.icon_add, title = "Add") }
+}
+
+@Composable
+fun IconCell(
+    iconId: Int,
+    contentDescription: String? = null,
+    title: String,
+    titleStyle: TextStyle = MaterialTheme.typography.labelLarge,
+    titleColor: Color = MaterialTheme.colorScheme.onPrimary,
+    onClick: () -> Unit = {},
+    background: Color = MaterialTheme.colorScheme.primary,
+    enabled: Boolean = true,
+) {
+    BaseCell(
+        headlineContent = {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Icon(
+                    painter = painterResource(id = iconId),
+                    contentDescription = contentDescription,
+                    tint = titleColor
+                )
+                Spacer(modifier = Modifier.width(Dimens.mediumPadding))
+                BaseCellTitle(title = title, style = titleStyle, color = titleColor)
+            }
+        },
+        onCellClicked = onClick,
+        background = background,
+        isRowEnabled = enabled
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationsEmptyText.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationsEmptyText.kt
@@ -15,10 +15,11 @@ import androidx.core.text.HtmlCompat
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.relaylist.MIN_SEARCH_LENGTH
 
 @Composable
 fun LocationsEmptyText(searchTerm: String) {
-    if (searchTerm.isNotEmpty()) {
+    if (searchTerm.length >= MIN_SEARCH_LENGTH) {
         val firstRow =
             HtmlCompat.fromHtml(
                     textResource(

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
@@ -12,6 +12,7 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.FabPosition
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -121,6 +122,8 @@ fun ScaffoldWithMediumTopBar(
     lazyListState: LazyListState = rememberLazyListState(),
     scrollbarColor: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
     snackbarHostState: SnackbarHostState = remember { SnackbarHostState() },
+    floatingActionButton: @Composable () -> Unit = {},
+    floatingActionButtonPosition: FabPosition = FabPosition.End,
     content: @Composable (modifier: Modifier, lazyListState: LazyListState) -> Unit
 ) {
 
@@ -138,6 +141,8 @@ fun ScaffoldWithMediumTopBar(
                 scrollBehavior = scrollBehavior
             )
         },
+        floatingActionButton = floatingActionButton,
+        floatingActionButtonPosition = floatingActionButtonPosition,
         snackbarHost = {
             SnackbarHost(
                 snackbarHostState,

diff --git a/...c/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeleteCustomListConfirmationDialog.kt b/...c/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeleteCustomListConfirmationDialog.kt
@@ -7,6 +7,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
@@ -17,7 +18,6 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.core.text.HtmlCompat
 import com.ramcosta.composedestinations.annotation.Destination
-import com.ramcosta.composedestinations.result.EmptyResultBackNavigator
 import com.ramcosta.composedestinations.result.ResultBackNavigator
 import com.ramcosta.composedestinations.spec.DestinationStyle
 import net.mullvad.mullvadvpn.R
@@ -27,18 +27,47 @@ import net.mullvad.mullvadvpn.compose.component.textResource
 import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.viewmodel.DeleteCustomListConfirmationSideEffect
+import net.mullvad.mullvadvpn.viewmodel.DeleteCustomListConfirmationViewModel
+import org.koin.androidx.compose.koinViewModel
+import org.koin.core.parameter.parametersOf
 
 @Preview
 @Composable
 private fun PreviewRemoveDeviceConfirmationDialog() {
-    AppTheme { DeleteCustomListConfirmationDialog(EmptyResultBackNavigator(), "My Custom List") }
+    AppTheme { DeleteCustomListConfirmationDialog("My Custom List") }
 }
 
+@Composable
 @Destination(style = DestinationStyle.Dialog::class)
+fun DeleteCustomList(navigator: ResultBackNavigator<Boolean>, id: String, name: String) {
+    val viewModel: DeleteCustomListConfirmationViewModel =
+        koinViewModel(parameters = { parametersOf(id) })
+
+    LaunchedEffect(Unit) {
+        viewModel.uiSideEffect.collect {
+            when (it) {
+                is DeleteCustomListConfirmationSideEffect.CloseDialog ->
+                    navigator.navigateBack(result = true)
+            }
+        }
+    }
+
+    DeleteCustomListConfirmationDialog(
+        name = name,
+        onDelete = viewModel::deleteCustomList,
+        onBack = { navigator.navigateBack(result = false) }
+    )
+}
+
 @Composable
-fun DeleteCustomListConfirmationDialog(navigator: ResultBackNavigator<Boolean>, name: String) {
+fun DeleteCustomListConfirmationDialog(
+    name: String,
+    onDelete: () -> Unit = {},
+    onBack: () -> Unit = {}
+) {
     AlertDialog(
-        onDismissRequest = navigator::navigateBack,
+        onDismissRequest = onBack,
         icon = {
             Icon(
                 modifier = Modifier.fillMaxWidth().height(Dimens.dialogIconHeight),
@@ -64,15 +93,12 @@ fun DeleteCustomListConfirmationDialog(navigator: ResultBackNavigator<Boolean>,
         dismissButton = {
             PrimaryButton(
                 modifier = Modifier.focusRequester(FocusRequester()),
-                onClick = { navigator.navigateBack(result = false) },
+                onClick = onBack,
                 text = stringResource(id = R.string.cancel)
             )
         },
         confirmButton = {
-            NegativeButton(
-                onClick = { navigator.navigateBack(result = true) },
-                text = stringResource(id = R.string.delete_list)
-            )
+            NegativeButton(onClick = onDelete, text = stringResource(id = R.string.delete_list))
         },
         containerColor = MaterialTheme.colorScheme.background
     )

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/LazyListExtensions.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/extensions/LazyListExtensions.kt
@@ -2,8 +2,10 @@ package net.mullvad.mullvadvpn.compose.extensions
 
 import androidx.compose.foundation.lazy.LazyItemScope
 import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.Divider
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.runtime.Composable
 
 inline fun LazyListScope.itemWithDivider(
@@ -26,3 +28,14 @@ inline fun <T> LazyListScope.itemsIndexedWithDivider(
         itemContent(index, item)
         Divider()
     }
+
+inline fun <T> LazyListScope.itemsWithDivider(
+    items: List<T>,
+    noinline key: ((item: T) -> Any)? = null,
+    noinline contentType: (item: T) -> Any? = { null },
+    crossinline itemContent: @Composable LazyItemScope.(item: T) -> Unit
+) =
+    items(items = items, key = key, contentType = contentType) { item ->
+        itemContent(item)
+        HorizontalDivider()
+    }
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
@@ -49,7 +49,7 @@ import org.koin.core.parameter.parametersOf
 
 @Composable
 @Preview
-fun PreviewCustomListsScreen() {
+fun PreviewCustomListLocationScreen() {
     AppTheme { CustomListLocationsScreen(uiState = CustomListLocationsUiState.Content.Data()) }
 }