[fenix] closes https://github.com/mozilla-mobile/fenix/issues/23220: show snackbar on wallpaper selection

app/src/main/java/org/mozilla/fenix/settings/wallpaper/WallpaperSettings.kt

@@ -12,45 +12,124 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.GridCells
 import androidx.compose.foundation.lazy.LazyVerticalGrid
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Snackbar
+import androidx.compose.material.SnackbarDuration
+import androidx.compose.material.SnackbarHost
 import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.TextButton
+import androidx.compose.material.rememberScaffoldState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+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 androidx.compose.ui.unit.sp
+import kotlinx.coroutines.launch
 import org.mozilla.fenix.R
 import org.mozilla.fenix.theme.FirefoxTheme
 import org.mozilla.fenix.wallpapers.Wallpaper
+import java.util.Locale
 
 /**
- * The screen for controlling settings around Wallpapers.
+ * The screen for controlling settings around Wallpapers. When a new wallpaper is selected,
+ * a snackbar will be displayed.
  *
  * @param wallpapers Wallpapers to add to grid.
  * @param selectedWallpaper The currently selected wallpaper.
- * @param onSelectWallpaper Action to take when a new wallpaper is selected.
+ * @param onSelectWallpaper Callback for when a new wallpaper is selected.
+ * @param onViewWallpaper Callback for when the view action is clicked from snackbar.
  */
 @Composable
 fun WallpaperSettings(
     wallpapers: List<Wallpaper>,
     selectedWallpaper: Wallpaper,
     onSelectWallpaper: (Wallpaper) -> Unit,
+    onViewWallpaper: () -> Unit,
 ) {
-    Surface(color = FirefoxTheme.colors.layer2) {
+    val coroutineScope = rememberCoroutineScope()
-        WallpaperThumbnails(
+    val scaffoldState = rememberScaffoldState()
-            wallpapers = wallpapers,
+
-            selectedWallpaper = selectedWallpaper,
+    Scaffold(
-            onSelectWallpaper = onSelectWallpaper
+        backgroundColor = FirefoxTheme.colors.layer1,
-        )
+        scaffoldState = scaffoldState,
+        snackbarHost = { hostState ->
+            SnackbarHost(hostState = hostState) {
+                WallpaperSnackbar(onViewWallpaper)
+            }
+        }
+    ) {
+        Surface(color = FirefoxTheme.colors.layer2) {
+            WallpaperThumbnails(
+                wallpapers = wallpapers,
+                selectedWallpaper = selectedWallpaper,
+                onSelectWallpaper = { updatedWallpaper ->
+                    coroutineScope.launch {
+                        scaffoldState.snackbarHostState.showSnackbar(
+                            message = "", // overwritten by WallpaperSnackbar
+                            duration = SnackbarDuration.Short
+                        )
+                    }
+                    onSelectWallpaper(updatedWallpaper)
+                },
+            )
+        }
     }
 }
 
+@Composable
+private fun WallpaperSnackbar(
+    onViewWallpaper: () -> Unit,
+) {
+    Snackbar(
+        modifier = Modifier
+            .padding(8.dp)
+            .heightIn(min = 48.dp),
+        backgroundColor = FirefoxTheme.colors.actionPrimary,
+        content = {
+            Text(
+                modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 8.dp),
+                text = stringResource(R.string.wallpaper_updated_snackbar_message),
+                textAlign = TextAlign.Start,
+                color = FirefoxTheme.colors.textInverted,
+                fontFamily = FontFamily(Font(R.font.metropolis_semibold)),
+                fontSize = 18.sp,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 2
+            )
+        },
+        action = {
+            TextButton(
+                modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 8.dp),
+                onClick = onViewWallpaper,
+            ) {
+                Text(
+                    text = stringResource(R.string.wallpaper_updated_snackbar_action).uppercase(
+                        Locale.getDefault()
+                    ),
+                    color = FirefoxTheme.colors.textInverted,
+                    fontFamily = FontFamily(Font(R.font.metropolis_medium)),
+                    fontSize = 14.sp,
+                )
+            }
+        },
+    )
+}
+
 /**
  * A grid of selectable wallpaper thumbnails.
  *
@@ -134,9 +213,20 @@ private fun WallpaperThumbnailItem(
 @Preview
 @Composable
 private fun WallpaperThumbnailsPreview() {
-    WallpaperSettings(
+    FirefoxTheme {
-        wallpapers = Wallpaper.values().toList(),
+        WallpaperSettings(
-        onSelectWallpaper = {},
+            wallpapers = Wallpaper.values().toList(),
-        selectedWallpaper = Wallpaper.NONE
+            selectedWallpaper = Wallpaper.NONE,
-    )
+            onSelectWallpaper = {},
+            onViewWallpaper = {},
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun WallpaperSnackbarPreview() {
+    FirefoxTheme {
+        WallpaperSnackbar(onViewWallpaper = {})
+    }
 }

app/src/main/java/org/mozilla/fenix/settings/wallpaper/WallpaperSettingsFragment.kt

@@ -15,6 +15,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.fragment.app.Fragment
+import androidx.navigation.fragment.findNavController
+import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.requireComponents
 import org.mozilla.fenix.theme.FirefoxTheme
 import org.mozilla.fenix.wallpapers.Wallpaper
@@ -40,7 +42,8 @@ class WallpaperSettingsFragment : Fragment() {
                         onSelectWallpaper = { selectedWallpaper: Wallpaper ->
                             currentWallpaper = selectedWallpaper
                             wallpaperManager.currentWallpaper = selectedWallpaper
-                        }
+                        },
+                        onViewWallpaper = { findNavController().navigate(R.id.homeFragment) },
                     )
                 }
             }

app/src/main/res/values/strings.xml

@@ -458,6 +458,10 @@
     <!-- Wallpapers -->
     <!-- Content description for various wallpapers. The first parameter is the name of the wallpaper -->
     <string name="wallpapers_item_name_content_description">Wallpaper Item: %1$s</string>
+    <!-- Snackbar message for when wallpaper is selected -->
+    <string name="wallpaper_updated_snackbar_message">Wallpaper updated!</string>
+    <!-- Snackbar label for action to view selected wallpaper -->
+    <string name="wallpaper_updated_snackbar_action">View</string>
 
     <!-- Add-on Installation from AMO-->
     <!-- Error displayed when user attempts to install an add-on from AMO (addons.mozilla.org) that is not supported -->