Consume navigation bar insets before applying imePadding (#647)

Author: AdamGrzybkowski

gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/abouteditor/AboutEditor.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.rememberScrollState
@@ -43,7 +44,6 @@ import com.gravatar.quickeditor.ui.components.CtaSection
 import com.gravatar.quickeditor.ui.components.QEButton
 import com.gravatar.quickeditor.ui.editor.AboutInputField
 import com.gravatar.quickeditor.ui.editor.bottomsheet.DEFAULT_PAGE_HEIGHT
-import com.gravatar.quickeditor.ui.editor.bottomsheet.positionAwareImePadding
 import com.gravatar.quickeditor.ui.extensions.QESnackbarHost
 import com.gravatar.quickeditor.ui.extensions.SnackbarType
 import com.gravatar.quickeditor.ui.extensions.showQESnackbar
@@ -117,6 +117,7 @@ internal fun AboutEditor(
     Surface {
         Box(
             modifier = Modifier
+                .imePadding()
                 .wrapContentSize(),
         ) {
             AboutEditor(
@@ -149,7 +150,6 @@ internal fun AboutEditor(uiState: AboutEditorUiState, onEvent: (AboutEditorEvent
     Surface {
         Column(
             modifier = Modifier
-                .positionAwareImePadding()
                 .padding(bottom = 24.dp)
                 .then(if (uiState.compactWindow) Modifier.verticalScroll(rememberScrollState()) else Modifier),
         ) {

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

@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
@@ -52,7 +53,6 @@ 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.editor.bottomsheet.positionAwareImePadding
 import com.gravatar.quickeditor.ui.extensions.QESnackbarHost
 import com.gravatar.quickeditor.ui.extensions.SnackbarType
 import com.gravatar.quickeditor.ui.extensions.showQESnackbar
@@ -130,6 +130,7 @@ internal fun AltTextPage(
                 Box(
                     modifier = modifier
                         .padding(16.dp)
+                        .imePadding()
                         .wrapContentSize(),
                 ) {
                     state.let { altTextState ->
@@ -160,7 +161,6 @@ internal fun AltTextPage(
     Surface(modifier = modifier.fillMaxWidth()) {
         Box(
             modifier = Modifier
-                .positionAwareImePadding()
                 .verticalScroll(rememberScrollState())
                 .animateContentSize()
                 .border(

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

@@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
@@ -28,21 +27,15 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.onFocusChanged
-import androidx.compose.ui.layout.findRootCoordinates
-import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.layout.positionInWindow
 import androidx.compose.ui.platform.LocalConfiguration
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import androidx.core.view.WindowInsetsControllerCompat
 import androidx.window.core.layout.WindowHeightSizeClass
@@ -57,7 +50,6 @@ import com.composables.core.SheetDetent.Companion.Hidden
 import com.composables.core.rememberModalBottomSheetState
 import com.composeunstyled.LocalModalWindow
 import com.gravatar.quickeditor.QuickEditorContainer
-import com.gravatar.quickeditor.ui.avatarpicker.pxToDp
 import com.gravatar.quickeditor.ui.components.QEDragHandle
 import com.gravatar.quickeditor.ui.editor.AuthenticationMethod
 import com.gravatar.quickeditor.ui.editor.AvatarPickerContentLayout
@@ -301,17 +293,17 @@ private fun GravatarModalBottomSheet(
                                 },
                             ),
                     ) {
+                        val paddingValues = WindowInsets.navigationBars
+                            .only(WindowInsetsSides.Vertical)
+                            .asPaddingValues()
                         Sheet(
                             modifier = Modifier
                                 .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
                                 .background(MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp))
                                 .widthIn(max = 640.dp)
                                 .fillMaxWidth()
-                                .padding(
-                                    WindowInsets.navigationBars
-                                        .only(WindowInsetsSides.Vertical)
-                                        .asPaddingValues(),
-                                ),
+                                .padding(paddingValues)
+                                .consumeWindowInsets(paddingValues),
                         ) {
                             val window = LocalModalWindow.current
                             val isDarkTheme = isSystemInDarkTheme()
@@ -402,23 +394,6 @@ private fun QuickEditorScopeOption.initialDetent(windowHeightSizeClass: WindowHe
     }
 }
 
-/**
- * The default .imePadding adds a lot of extra padding to the bottom of the screen
- * This is a workaround, see https://stackoverflow.com/questions/76014880/enormous-ime-padding-in-jetpack-compose
- */
-internal fun Modifier.positionAwareImePadding(): Modifier = composed {
-    var consumePadding by remember { mutableIntStateOf(0) }
-
-    this
-        .onGloballyPositioned { coordinates ->
-            val root = coordinates.findRootCoordinates()
-            val bottom = coordinates.positionInWindow().y + coordinates.size.height
-            consumePadding = (root.size.height - bottom).toInt().coerceAtLeast(0)
-        }
-        .consumeWindowInsets(PaddingValues(bottom = consumePadding.pxToDp(LocalContext.current)))
-        .imePadding()
-}
-
 internal data class ModalDetents(
     val initialDetent: SheetDetent,
     val detents: List<SheetDetent>,