Merge pull request #537 from Automattic/hamorillo/496-alttext-cancel-…

…button

Quick Editor: AltText - Cancel button in TopBar

gravatar-quickeditor/api/gravatar-quickeditor.api

@@ -218,12 +218,12 @@ public final class com/gravatar/quickeditor/ui/components/ComposableSingletons$Q
 	public static final field INSTANCE Lcom/gravatar/quickeditor/ui/components/ComposableSingletons$QETopBarKt;
 	public static field lambda-1 Lkotlin/jvm/functions/Function2;
 	public static field lambda-2 Lkotlin/jvm/functions/Function3;
-	public static field lambda-3 Lkotlin/jvm/functions/Function3;
+	public static field lambda-3 Lkotlin/jvm/functions/Function2;
 	public static field lambda-4 Lkotlin/jvm/functions/Function2;
 	public fun <init> ()V
 	public final fun getLambda-1$gravatar_quickeditor_release ()Lkotlin/jvm/functions/Function2;
 	public final fun getLambda-2$gravatar_quickeditor_release ()Lkotlin/jvm/functions/Function3;
-	public final fun getLambda-3$gravatar_quickeditor_release ()Lkotlin/jvm/functions/Function3;
+	public final fun getLambda-3$gravatar_quickeditor_release ()Lkotlin/jvm/functions/Function2;
 	public final fun getLambda-4$gravatar_quickeditor_release ()Lkotlin/jvm/functions/Function2;
 }
 

gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/alttext/AltTextPage.kt

@@ -48,7 +48,10 @@ import androidx.lifecycle.viewmodel.compose.viewModel
 import coil.compose.AsyncImage
 import com.gravatar.quickeditor.R
 import com.gravatar.quickeditor.ui.components.QEButton
+import com.gravatar.quickeditor.ui.components.QEPage
 import com.gravatar.quickeditor.ui.components.QESectionTitle
+import com.gravatar.quickeditor.ui.components.QETopBar
+import com.gravatar.quickeditor.ui.components.QETopBarTextButton
 import com.gravatar.quickeditor.ui.extensions.QESnackbarHost
 import com.gravatar.quickeditor.ui.extensions.SnackbarType
 import com.gravatar.quickeditor.ui.extensions.showQESnackbar
@@ -111,23 +114,37 @@ internal fun AltTextPage(
     }
 
     GravatarTheme {
-        Box(
-            modifier = modifier
-                .padding(16.dp)
-                .wrapContentSize(),
-        ) {
-            state.let { altTextState ->
-                AltTextPage(
-                    altTextState = altTextState,
-                    onEvent = viewModel::onEvent,
+        QEPage(
+            topBar = {
+                QETopBar(
+                    leftButton = {
+                        QETopBarTextButton(
+                            onClick = onBackPressed,
+                            label = stringResource(R.string.gravatar_qe_avatar_alt_text_cancel_button),
+                        )
+                    },
                 )
-                QESnackbarHost(
-                    modifier = Modifier
-                        .align(Alignment.BottomStart),
-                    hostState = snackState,
-                )
-            }
-        }
+            },
+            content = {
+                Box(
+                    modifier = modifier
+                        .padding(16.dp)
+                        .wrapContentSize(),
+                ) {
+                    state.let { altTextState ->
+                        AltTextPage(
+                            altTextState = altTextState,
+                            onEvent = viewModel::onEvent,
+                        )
+                        QESnackbarHost(
+                            modifier = Modifier
+                                .align(Alignment.BottomStart),
+                            hostState = snackState,
+                        )
+                    }
+                }
+            },
+        )
     }
 }
 

gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/avatarpicker/AvatarPicker.kt

@@ -61,6 +61,7 @@ import com.gravatar.quickeditor.ui.components.EmailLabel
 import com.gravatar.quickeditor.ui.components.FailedAvatarUploadAlertDialog
 import com.gravatar.quickeditor.ui.components.PermissionRationaleDialog
 import com.gravatar.quickeditor.ui.components.ProfileCard
+import com.gravatar.quickeditor.ui.components.QEPageDefault
 import com.gravatar.quickeditor.ui.cropperlauncher.CropperLauncher
 import com.gravatar.quickeditor.ui.cropperlauncher.UCropCropperLauncher
 import com.gravatar.quickeditor.ui.editor.AvatarPickerContentLayout
@@ -89,6 +90,7 @@ internal fun AvatarPicker(
     handleExpiredSession: Boolean,
     onAvatarSelected: () -> Unit,
     onSessionExpired: () -> Unit,
+    onDoneClicked: () -> Unit,
     onAltTextTapped: (email: String, avatarId: String) -> Unit,
     viewModel: AvatarPickerViewModel = viewModel(
         factory = AvatarPickerViewModelFactory(gravatarQuickEditorParams, handleExpiredSession),
@@ -130,17 +132,22 @@ internal fun AvatarPicker(
     }
 
     GravatarTheme {
-        Box(modifier = Modifier.wrapContentSize()) {
-            AvatarPicker(
-                uiState = uiState,
-                onEvent = viewModel::onEvent,
-            )
-            QESnackbarHost(
-                modifier = Modifier
-                    .align(Alignment.BottomStart),
-                hostState = snackState,
-            )
-        }
+        QEPageDefault(
+            onDoneClicked = onDoneClicked,
+            content = {
+                Box(modifier = Modifier.wrapContentSize()) {
+                    AvatarPicker(
+                        uiState = uiState,
+                        onEvent = viewModel::onEvent,
+                    )
+                    QESnackbarHost(
+                        modifier = Modifier
+                            .align(Alignment.BottomStart),
+                        hostState = snackState,
+                    )
+                }
+            },
+        )
     }
 }
 

gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/QEPage.kt

@@ -0,0 +1,28 @@
+package com.gravatar.quickeditor.ui.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+internal fun QEPageDefault(onDoneClicked: () -> Unit, content: @Composable () -> Unit, modifier: Modifier = Modifier) {
+    QEPage(
+        topBar = {
+            QETopBar({
+                QETopBarTextButton(
+                    onClick = onDoneClicked,
+                )
+            })
+        },
+        content = content,
+        modifier = modifier,
+    )
+}
+
+@Composable
+internal fun QEPage(topBar: @Composable () -> Unit, content: @Composable () -> Unit, modifier: Modifier = Modifier) {
+    Column(modifier) {
+        topBar()
+        content()
+    }
+}

gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/QETopBar.kt

@@ -16,16 +16,20 @@ import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.gravatar.GravatarConstants
 import com.gravatar.quickeditor.R
 import com.gravatar.ui.GravatarTheme
 
 @Composable
-internal fun QETopBar(onDoneClick: () -> Unit, modifier: Modifier = Modifier, onGravatarIconClick: () -> Unit = {}) {
+internal fun QETopBar(leftButton: @Composable () -> Unit, modifier: Modifier = Modifier) {
+    val uriHandler = LocalUriHandler.current
+
     GravatarCenterAlignedTopAppBar(
         modifier = modifier,
         title = {
@@ -34,30 +38,38 @@ internal fun QETopBar(onDoneClick: () -> Unit, modifier: Modifier = Modifier, on
                 text = stringResource(id = R.string.gravatar_qe_gravatar),
             )
         },
-        navigationIcon = {
-            TextButton(
-                onClick = onDoneClick,
-            ) {
-                Text(
-                    style = MaterialTheme.typography.labelLarge,
-                    text = stringResource(R.string.gravatar_qe_bottom_sheet_done),
-                )
-            }
-        },
+        navigationIcon = leftButton,
         actions = {
             Icon(
                 painter = painterResource(id = com.gravatar.ui.R.drawable.gravatar_gravatar_icon),
                 tint = MaterialTheme.colorScheme.primary,
                 contentDescription = stringResource(id = R.string.gravatar_qe_gravatar),
                 modifier = Modifier
-                    .clickable(onClick = onGravatarIconClick)
+                    .clickable(onClick = {
+                        uriHandler.openUri(GravatarConstants.GRAVATAR_SIGN_IN_URL)
+                    })
                     .size(34.dp)
                     .padding(end = 8.dp),
             )
         },
     )
 }
 
+@Composable
+internal fun QETopBarTextButton(
+    onClick: () -> Unit,
+    label: String = stringResource(R.string.gravatar_qe_bottom_sheet_done),
+) {
+    TextButton(
+        onClick = onClick,
+    ) {
+        Text(
+            style = MaterialTheme.typography.labelLarge,
+            text = label,
+        )
+    }
+}
+
 private val AppBarHeight = 64.dp
 
 /*
@@ -109,6 +121,6 @@ private fun GravatarCenterAlignedTopAppBar(
 @Composable
 private fun QETopBarPreview() {
     GravatarTheme {
-        QETopBar(onDoneClick = {}, onGravatarIconClick = {})
+        QETopBar(leftButton = { QETopBarTextButton({}) })
     }
 }

gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/editor/GravatarQuickEditorPage.kt

@@ -33,6 +33,7 @@ import com.gravatar.quickeditor.ui.splash.SplashPage
  * @param oAuthParams The OAuth parameters.
  * @param onAvatarSelected The callback for the avatar update.
  *                       Can be invoked multiple times while the Quick Editor is open
+ * @param onDoneClicked The callback for the done action.
  * @param onDismiss The callback for the dismiss action.
  *                  [GravatarQuickEditorError] will be non-null if the dismiss was caused by an error.
  */
@@ -41,6 +42,7 @@ internal fun GravatarQuickEditorPage(
     gravatarQuickEditorParams: GravatarQuickEditorParams,
     oAuthParams: OAuthParams,
     onAvatarSelected: () -> Unit,
+    onDoneClicked: () -> Unit,
     onDismiss: (dismissReason: GravatarQuickEditorDismissReason) -> Unit = {},
 ) {
     val navController = rememberNavController()
@@ -52,7 +54,10 @@ internal fun GravatarQuickEditorPage(
         exitTransition = { ExitTransition.None },
     ) {
         composable(route = QuickEditorPage.SPLASH.name) {
-            SplashPage(email = gravatarQuickEditorParams.email) { isAuthorized ->
+            SplashPage(
+                email = gravatarQuickEditorParams.email,
+                onDoneClicked = onDoneClicked,
+            ) { isAuthorized ->
                 if (isAuthorized) {
                     navController.navigateAndPopupTo(QuickEditorPage.EDITOR.name, QuickEditorPage.SPLASH.name)
                 } else {
@@ -68,6 +73,7 @@ internal fun GravatarQuickEditorPage(
                 onAuthSuccess = {
                     navController.navigateAndPopupTo(QuickEditorPage.EDITOR.name, QuickEditorPage.OAUTH.name)
                 },
+                onDoneClicked = onDoneClicked,
             )
         }
         addAvatarPickerGraph(
@@ -78,6 +84,7 @@ internal fun GravatarQuickEditorPage(
             onSessionExpired = {
                 navController.navigateAndPopupTo(QuickEditorPage.OAUTH.name, QuickEditorPage.EDITOR.name)
             },
+            onDoneClicked = onDoneClicked,
         )
     }
 }
@@ -90,6 +97,7 @@ internal fun GravatarQuickEditorPage(
  * @param authToken The authentication token.
  * @param onAvatarSelected The callback for the avatar update.
  *                       Can be invoked multiple times while the Quick Editor is open
+ * @param onDoneClicked The callback for the done action.
  * @param onDismiss The callback for the dismiss action.
  *                  [GravatarQuickEditorError] will be non-null if the dismiss was caused by an error.
  */
@@ -98,6 +106,7 @@ internal fun GravatarQuickEditorPage(
     gravatarQuickEditorParams: GravatarQuickEditorParams,
     authToken: String,
     onAvatarSelected: () -> Unit,
+    onDoneClicked: () -> Unit,
     onDismiss: (dismissReason: GravatarQuickEditorDismissReason) -> Unit = {},
 ) {
     val navController = rememberNavController()
@@ -120,6 +129,7 @@ internal fun GravatarQuickEditorPage(
             SplashPage(
                 email = gravatarQuickEditorParams.email,
                 token = authToken,
+                onDoneClicked = onDoneClicked,
             ) {
                 navController.navigateAndPopupTo(QuickEditorPage.EDITOR.name, QuickEditorPage.SPLASH.name)
             }
@@ -130,16 +140,19 @@ internal fun GravatarQuickEditorPage(
             navController = navController,
             onAvatarSelected = onAvatarSelected,
             onSessionExpired = { onDismiss(GravatarQuickEditorDismissReason.InvalidToken) },
+            onDoneClicked = onDoneClicked,
         )
     }
 }
 
+@Suppress("LongParameterList")
 private fun NavGraphBuilder.addAvatarPickerGraph(
     navController: NavHostController,
     gravatarQuickEditorParams: GravatarQuickEditorParams,
     handleExpiredSession: Boolean,
     onAvatarSelected: () -> Unit,
     onSessionExpired: () -> Unit,
+    onDoneClicked: () -> Unit,
 ) {
     navigation(
         route = QuickEditorPage.EDITOR.name,
@@ -163,6 +176,7 @@ private fun NavGraphBuilder.addAvatarPickerGraph(
                         route = "${EditorNavDestinations.ALT_TEXT.name}/$email/$avatarId",
                     )
                 },
+                onDoneClicked = onDoneClicked,
             )
         }
         composable(