Merge pull request #383 from Automattic/hamorillo/379-remove-center-a…

…ligned-top-bar Implement a custom version of CenterAlignedTopBar
Automattic · Oct 11, 2024 · 9b0793f · 9b0793f
2 parents 4a22229 + 407de17
commit 9b0793f
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 8 deletions.
diff --git a/gravatar-quickeditor/api/gravatar-quickeditor.api b/gravatar-quickeditor/api/gravatar-quickeditor.api
@@ -120,12 +120,14 @@ public final class com/gravatar/quickeditor/ui/components/ComposableSingletons$Q
 	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-4 Lkotlin/jvm/functions/Function2;
+	public static field lambda-4 Lkotlin/jvm/functions/Function3;
+	public static field lambda-5 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-4$gravatar_quickeditor_release ()Lkotlin/jvm/functions/Function2;
+	public final fun getLambda-4$gravatar_quickeditor_release ()Lkotlin/jvm/functions/Function3;
+	public final fun getLambda-5$gravatar_quickeditor_release ()Lkotlin/jvm/functions/Function2;
 }
 
 public final class com/gravatar/quickeditor/ui/components/ComposableSingletons$SelectableAvatarKt {

diff --git a/.../roborazzi/com.gravatar.quickeditor.ui.components.QETopBarTest.qrTopBarDark.png b/.../roborazzi/com.gravatar.quickeditor.ui.components.QETopBarTest.qrTopBarDark.png
diff --git a/...roborazzi/com.gravatar.quickeditor.ui.components.QETopBarTest.qrTopBarLight.png b/...roborazzi/com.gravatar.quickeditor.ui.components.QETopBarTest.qrTopBarLight.png
diff --git a/gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/QETopBar.kt b/gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/QETopBar.kt
@@ -1,15 +1,19 @@
 package com.gravatar.quickeditor.ui.components
 
-import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.material3.CenterAlignedTopAppBar
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -19,12 +23,10 @@ import androidx.compose.ui.unit.dp
 import com.gravatar.quickeditor.R
 import com.gravatar.ui.GravatarTheme
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun QETopBar(onDoneClick: () -> Unit, modifier: Modifier = Modifier) {
-    CenterAlignedTopAppBar(
+    GravatarCenterAlignedTopAppBar(
         modifier = modifier,
-        windowInsets = WindowInsets(0, 0, 0, 0),
         title = {
             Text(
                 style = MaterialTheme.typography.titleLarge.copy(fontWeight = FontWeight.Bold),
@@ -54,6 +56,53 @@ internal fun QETopBar(onDoneClick: () -> Unit, modifier: Modifier = Modifier) {
     )
 }
 
+private val AppBarHeight = 64.dp
+
+/*
+ *  We can replace this Composable with CenterAlignedTopAppBar from the Material3 library
+ *  when it removes the experimental annotation
+ */
+@Composable
+private fun GravatarCenterAlignedTopAppBar(
+    title: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+    navigationIcon: @Composable (() -> Unit)? = null,
+    actions: @Composable RowScope.() -> Unit = {},
+) {
+    Surface(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(AppBarHeight),
+    ) {
+        Box {
+            if (navigationIcon != null) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.CenterStart)
+                        .padding(start = 8.dp),
+                ) {
+                    navigationIcon()
+                }
+            }
+
+            Box(
+                modifier = Modifier
+                    .align(Alignment.Center),
+            ) {
+                title()
+            }
+
+            Row(
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .padding(end = 8.dp),
+            ) {
+                actions()
+            }
+        }
+    }
+}
+
 @Preview
 @Composable
 private fun QETopBarPreview() {