From 922d95619c5246b6fbed19ac4942d40dfae173b3 Mon Sep 17 00:00:00 2001 From: Matt Tighe Date: Fri, 14 Jan 2022 15:03:25 -0800 Subject: [PATCH] [fenix] closes https://github.com/mozilla-mobile/fenix/issues/23220: show snackbar on wallpaper selection --- .../settings/wallpaper/WallpaperSettings.kt | 116 ++++++++++++++++-- .../wallpaper/WallpaperSettingsFragment.kt | 5 +- app/src/main/res/values/strings.xml | 4 + 3 files changed, 111 insertions(+), 14 deletions(-) diff --git a/app/src/main/java/org/mozilla/fenix/settings/wallpaper/WallpaperSettings.kt b/app/src/main/java/org/mozilla/fenix/settings/wallpaper/WallpaperSettings.kt index 2a353db562..45573fdb61 100644 --- a/app/src/main/java/org/mozilla/fenix/settings/wallpaper/WallpaperSettings.kt +++ b/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, selectedWallpaper: Wallpaper, onSelectWallpaper: (Wallpaper) -> Unit, + onViewWallpaper: () -> Unit, ) { - Surface(color = FirefoxTheme.colors.layer2) { - WallpaperThumbnails( - wallpapers = wallpapers, - selectedWallpaper = selectedWallpaper, - onSelectWallpaper = onSelectWallpaper - ) + val coroutineScope = rememberCoroutineScope() + val scaffoldState = rememberScaffoldState() + + Scaffold( + 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( - wallpapers = Wallpaper.values().toList(), - onSelectWallpaper = {}, - selectedWallpaper = Wallpaper.NONE - ) + FirefoxTheme { + WallpaperSettings( + wallpapers = Wallpaper.values().toList(), + selectedWallpaper = Wallpaper.NONE, + onSelectWallpaper = {}, + onViewWallpaper = {}, + ) + } +} + +@Preview +@Composable +private fun WallpaperSnackbarPreview() { + FirefoxTheme { + WallpaperSnackbar(onViewWallpaper = {}) + } } diff --git a/app/src/main/java/org/mozilla/fenix/settings/wallpaper/WallpaperSettingsFragment.kt b/app/src/main/java/org/mozilla/fenix/settings/wallpaper/WallpaperSettingsFragment.kt index 2613ade085..7641d87b2e 100644 --- a/app/src/main/java/org/mozilla/fenix/settings/wallpaper/WallpaperSettingsFragment.kt +++ b/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) }, ) } } diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 3027300869..33a543f373 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -458,6 +458,10 @@ Wallpaper Item: %1$s + + Wallpaper updated! + + View