Add copy icon to WelcomeScreen

mullvad · Sep 11, 2023 · d7041c1 · d7041c1
1 parent d5c67e4
commit d7041c1
Show file tree

Hide file tree

Showing 4 changed files with 236 additions and 137 deletions.
diff --git a/...d/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt b/...d/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CopyableObfuscationView.kt
@@ -4,8 +4,10 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 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.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
@@ -27,42 +29,50 @@ private fun PreviewCopyableObfuscationView() {
 
 @Composable
 fun CopyableObfuscationView(content: String) {
-    val context = LocalContext.current
-    val shouldObfuscated = remember { mutableStateOf(true) }
+    var shouldObfuscated by remember { mutableStateOf(true) }
 
     Row(
         verticalAlignment = CenterVertically,
         modifier = Modifier.padding(end = Dimens.sideMargin)
     ) {
         AccountNumberView(
             accountNumber = content,
-            doObfuscateWithPasswordDots = shouldObfuscated.value,
+            doObfuscateWithPasswordDots = shouldObfuscated,
             modifier = Modifier.weight(1f)
         )
         AnimatedIconButton(
             defaultIcon = painterResource(id = R.drawable.icon_hide),
             secondaryIcon = painterResource(id = R.drawable.icon_show),
             isToggleButton = true,
             contentDescription = stringResource(id = R.string.hide_account_number),
-            onClick = { shouldObfuscated.value = shouldObfuscated.value.not() }
-        )
-        AnimatedIconButton(
-            defaultIcon = painterResource(id = R.drawable.icon_copy),
-            secondaryIcon = painterResource(id = R.drawable.icon_tick),
-            secondaryIconColorFilter =
-                ColorFilter.tint(color = MaterialTheme.colorScheme.inversePrimary),
-            isToggleButton = false,
-            contentDescription = stringResource(id = R.string.copy_account_number),
-            onClick = {
-                context.copyToClipboard(
-                    content = content,
-                    clipboardLabel = context.getString(R.string.mullvad_account_number)
-                )
-                SdkUtils.showCopyToastIfNeeded(
-                    context,
-                    context.getString(R.string.copied_mullvad_account_number)
-                )
-            }
+            onClick = { shouldObfuscated = !shouldObfuscated }
         )
+
+        val context = LocalContext.current
+        val copy = {
+            context.copyToClipboard(
+                content = content,
+                clipboardLabel = context.getString(R.string.mullvad_account_number)
+            )
+            SdkUtils.showCopyToastIfNeeded(
+                context,
+                context.getString(R.string.copied_mullvad_account_number)
+            )
+        }
+
+        CopyAnimatedIconButton(onClick = copy)
     }
 }
+
+@Composable
+fun CopyAnimatedIconButton(onClick: () -> Unit) {
+    AnimatedIconButton(
+        defaultIcon = painterResource(id = R.drawable.icon_copy),
+        secondaryIcon = painterResource(id = R.drawable.icon_tick),
+        secondaryIconColorFilter =
+            ColorFilter.tint(color = MaterialTheme.colorScheme.inversePrimary),
+        isToggleButton = false,
+        contentDescription = stringResource(id = R.string.copy_account_number),
+        onClick = onClick
+    )
+}
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
@@ -5,6 +5,10 @@ import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Snackbar
+import androidx.compose.material3.SnackbarData
+import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -34,6 +38,7 @@ fun ScaffoldWithTopBar(
     onSettingsClicked: (() -> Unit)?,
     onAccountClicked: (() -> Unit)?,
     isIconAndLogoVisible: Boolean = true,
+    snackbarHostState: SnackbarHostState = remember { SnackbarHostState() },
     content: @Composable (PaddingValues) -> Unit,
 ) {
     val systemUiController = rememberSystemUiController()
@@ -52,10 +57,21 @@ fun ScaffoldWithTopBar(
                 isIconAndLogoVisible = isIconAndLogoVisible
             )
         },
+        snackbarHost = {
+            SnackbarHost(
+                snackbarHostState,
+                snackbar = { snackbarData -> MullvadSnackbar(snackbarData = snackbarData) }
+            )
+        },
         content = content
     )
 }
 
+@Composable
+fun MullvadSnackbar(snackbarData: SnackbarData) {
+    Snackbar(snackbarData = snackbarData, contentColor = MaterialTheme.colorScheme.secondary)
+}
+
 @Composable
 @OptIn(ExperimentalToolbarApi::class)
 fun CollapsableAwareToolbarScaffold(