QuickEditor: Modify the way PickerPopup calculates its position (#484)

* Modify the PickerPopup to calculate it's position without passing the params * Update Popup to the new PickerPopup * Remove passing unnecessary view bounds to the Popups * Fix UploadImageGridButtonTest * Generate quickeditor.api file * Add display padding when calculating Popup position * Expose displayPadding as a param
Automattic · Dec 11, 2024 · 8897ab4 · 8897ab4
1 parent b8591ad
commit 8897ab4
Show file tree

Hide file tree

Showing 11 changed files with 244 additions and 251 deletions.
diff --git a/gravatar-quickeditor/api/gravatar-quickeditor.api b/gravatar-quickeditor/api/gravatar-quickeditor.api
@@ -219,6 +219,13 @@ public final class com/gravatar/quickeditor/ui/components/ComposableSingletons$S
 	public final fun getLambda-2$gravatar_quickeditor_release ()Lkotlin/jvm/functions/Function3;
 }
 
+public final class com/gravatar/quickeditor/ui/components/ComposableSingletons$UploadImageButtonKt {
+	public static final field INSTANCE Lcom/gravatar/quickeditor/ui/components/ComposableSingletons$UploadImageButtonKt;
+	public static field lambda-1 Lkotlin/jvm/functions/Function2;
+	public fun <init> ()V
+	public final fun getLambda-1$gravatar_quickeditor_release ()Lkotlin/jvm/functions/Function2;
+}
+
 public final class com/gravatar/quickeditor/ui/components/ComposableSingletons$UploadImageGridButtonKt {
 	public static final field INSTANCE Lcom/gravatar/quickeditor/ui/components/ComposableSingletons$UploadImageGridButtonKt;
 	public static field lambda-1 Lkotlin/jvm/functions/Function2;

diff --git a/...itor/src/main/java/com/gravatar/quickeditor/ui/components/AvatarMoreOptionsPickerPopup.kt b/...itor/src/main/java/com/gravatar/quickeditor/ui/components/AvatarMoreOptionsPickerPopup.kt
@@ -7,26 +7,22 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Rect
-import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import com.gravatar.quickeditor.R
 import com.gravatar.ui.GravatarTheme
 
 @Composable
 internal fun AvatarMoreOptionsPickerPopup(
     anchorAlignment: Alignment.Horizontal,
-    anchorBounds: Rect,
-    popupDrawArea: Rect? = null,
+    offset: DpOffset,
     onDismissRequest: () -> Unit,
     onAvatarOptionClicked: (AvatarOption) -> Unit,
 ) {
     PickerPopup(
         anchorAlignment = anchorAlignment,
-        anchorBounds = anchorBounds,
-        popupDrawArea = popupDrawArea,
+        offset = offset,
         onDismissRequest = onDismissRequest,
         popupItems = listOf(
             PickerPopupItem(
@@ -75,8 +71,8 @@ private fun AvatarMoreOptionsPickerPopupPreview() {
         ) {
             AvatarMoreOptionsPickerPopup(
                 anchorAlignment = Alignment.Start,
+                offset = DpOffset.Zero,
                 onDismissRequest = {},
-                anchorBounds = Rect(Offset(0f, 300f), Size(1f, 1f)),
                 onAvatarOptionClicked = {},
             )
         }

diff --git a/...ckeditor/src/main/java/com/gravatar/quickeditor/ui/components/HorizontalAvatarsSection.kt b/...ckeditor/src/main/java/com/gravatar/quickeditor/ui/components/HorizontalAvatarsSection.kt
@@ -12,17 +12,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-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
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Rect
-import androidx.compose.ui.geometry.Size
-import androidx.compose.ui.layout.boundsInRoot
-import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -43,8 +33,6 @@ internal fun HorizontalAvatarsSection(
     onTakePhotoClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    var popupVisible by remember { mutableStateOf(false) }
-    var popupAnchorBounds: Rect by remember { mutableStateOf(Rect(Offset.Zero, Size.Zero)) }
     val listState = rememberLazyListState()
 
     LaunchedEffect(state.scrollToIndex) {
@@ -90,32 +78,12 @@ internal fun HorizontalAvatarsSection(
                         contentPadding = PaddingValues(horizontal = sectionPadding),
                     )
                 }
-                QEButton(
-                    buttonText = stringResource(id = R.string.gravatar_qe_avatar_picker_upload_image),
-                    onClick = { popupVisible = true },
+                UploadImageButton(
+                    onTakePhotoClick = onTakePhotoClick,
+                    onChoosePhotoClick = onChoosePhotoClick,
                     enabled = state.uploadButtonEnabled,
                     modifier = Modifier
-                        .padding(horizontal = sectionPadding)
-                        .onGloballyPositioned { layoutCoordinates ->
-                            popupAnchorBounds = layoutCoordinates.boundsInRoot()
-                        },
-                )
-            }
-            if (popupVisible) {
-                MediaPickerPopup(
-                    anchorAlignment = Alignment.CenterHorizontally,
-                    onDismissRequest = {
-                        popupVisible = false
-                    },
-                    anchorBounds = popupAnchorBounds,
-                    onChoosePhotoClick = {
-                        popupVisible = false
-                        onChoosePhotoClick()
-                    },
-                    onTakePhotoClick = {
-                        popupVisible = false
-                        onTakePhotoClick()
-                    },
+                        .padding(horizontal = sectionPadding),
                 )
             }
         }

diff --git a/gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/LazyAvatarList.kt b/gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/LazyAvatarList.kt
@@ -7,16 +7,7 @@ import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 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.Modifier
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Rect
-import androidx.compose.ui.geometry.Size
-import androidx.compose.ui.layout.boundsInRoot
-import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -34,20 +25,15 @@ internal fun LazyAvatarRow(
     contentPadding: PaddingValues,
     modifier: Modifier = Modifier,
 ) {
-    var parentBounds by remember { mutableStateOf(Rect(Offset.Zero, Size.Zero)) }
-
     LazyRow(
         horizontalArrangement = horizontalArrangement,
-        modifier = modifier.onGloballyPositioned { coordinates ->
-            parentBounds = coordinates.boundsInRoot()
-        },
+        modifier = modifier,
         state = state,
         contentPadding = contentPadding,
     ) {
         items(items = avatars, key = { it.avatarId }) { avatarModel ->
             Avatar(
                 avatar = avatarModel,
-                parentBounds = parentBounds,
                 onAvatarSelected = { onAvatarSelected(avatarModel) },
                 onAvatarOptionClicked = { avatar, option -> onAvatarOptionClicked(avatar, option) },
                 size = avatarSize,
@@ -65,7 +51,6 @@ internal val avatarSize = 96.dp
 internal fun Avatar(
     avatar: AvatarUi,
     size: Dp,
-    parentBounds: Rect? = null,
     onAvatarSelected: () -> Unit,
     onAvatarOptionClicked: (Avatar, AvatarOption) -> Unit,
     modifier: Modifier,
@@ -77,7 +62,6 @@ internal fun Avatar(
                 imageUrl = avatar.imageUrlWithSize(sizePx),
                 isSelected = avatar.isSelected,
                 loadingState = avatar.loadingState,
-                parentBounds = parentBounds,
                 onAvatarClicked = { onAvatarSelected() },
                 onAvatarOptionClicked = { onAvatarOptionClicked(avatar.avatar, it) },
                 modifier = modifier,
@@ -88,7 +72,6 @@ internal fun Avatar(
             imageUrl = avatar.uri.toString(),
             isSelected = false,
             loadingState = avatar.loadingState,
-            parentBounds = parentBounds,
             onAvatarClicked = { onAvatarSelected() },
             modifier = modifier,
         )

diff --git a/...atar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/MediaPickerPopup.kt b/...atar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/MediaPickerPopup.kt
@@ -7,26 +7,24 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Rect
-import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import com.gravatar.quickeditor.R
 import com.gravatar.ui.GravatarTheme
 
 @Composable
 internal fun MediaPickerPopup(
     anchorAlignment: Alignment.Horizontal,
-    anchorBounds: Rect,
+    offset: DpOffset,
     onDismissRequest: () -> Unit,
     onChoosePhotoClick: () -> Unit,
     onTakePhotoClick: () -> Unit,
 ) {
     PickerPopup(
         anchorAlignment = anchorAlignment,
-        anchorBounds = anchorBounds,
         onDismissRequest = onDismissRequest,
+        offset = offset,
         popupItems = listOf(
             PickerPopupItem(
                 text = R.string.gravatar_qe_avatar_picker_choose_a_photo,
@@ -55,8 +53,8 @@ private fun MediaPickerPopupPreview() {
         ) {
             MediaPickerPopup(
                 anchorAlignment = Alignment.Start,
+                offset = DpOffset.Zero,
                 onDismissRequest = {},
-                anchorBounds = Rect(Offset(0f, 300f), Size(1f, 1f)),
                 onChoosePhotoClick = {},
                 onTakePhotoClick = {},
             )