IntroPage: correctly consume insets; Assistant: KDoc/example

bitfireAT · Nov 11, 2024 · f28edc9 · f28edc9
1 parent 0e9d154
commit f28edc9
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 53 deletions.
diff --git a/app/src/main/kotlin/at/bitfire/davdroid/ui/composable/Assistant.kt b/app/src/main/kotlin/at/bitfire/davdroid/ui/composable/Assistant.kt
@@ -4,6 +4,7 @@
 
 package at.bitfire.davdroid.ui.composable
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
@@ -16,13 +17,18 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.BottomAppBar
 import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import at.bitfire.davdroid.ui.AppTheme
 
+/**
+ * Simple assistant. Should be embedded as content in a [Scaffold].
+ */
 @Composable
 fun Assistant(
     nextLabel: String? = null,
@@ -62,16 +68,22 @@ fun Assistant(
                         Text(nextLabel)
                     }
             },
-            windowInsets = WindowInsets(0)      // insets already provided by parent (Scaffold)
+            windowInsets = WindowInsets(0)      // don't care about insets, they're already handled by the parent Scaffold
         )
     }
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 @Preview(showSystemUi = true)
-fun Assistant_Preview() {
-    Assistant(nextLabel = "Next") {
-        Text("Some Content")
+fun Assistant_Preview_InScaffold() {
+    AppTheme {
+        Scaffold { paddingValues ->
+            Box(Modifier.padding(paddingValues)) {
+                Assistant(nextLabel = "Next") {
+                    Text("Some Content")
+                }
+            }
+        }
     }
 }
diff --git a/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/BatteryOptimizationsPageContent.kt b/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/BatteryOptimizationsPageContent.kt
@@ -6,10 +6,8 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -203,11 +201,8 @@ fun BatteryOptimizationsPageContent(
                 stringResource(R.string.app_settings_reset_hints)
             ),
             style = MaterialTheme.typography.bodyMedium,
-            modifier = Modifier
-                .padding(top = 8.dp)
-                .padding(horizontal = 16.dp)
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
         )
-        Spacer(modifier = Modifier.height(90.dp))
     }
 }
 

diff --git a/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/IntroPage.kt b/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/IntroPage.kt
@@ -17,10 +17,10 @@ abstract class IntroPage {
     /**
      * Whether insets are handled by [ComposePage].
      *
-     * If `true`, [ComposePage] must add insets for edge-to-edge layout itself.
-     * If `false`, [IntroScreen] will apply insets give [ComposePage] a safe content area.
+     * If `true`, [ComposePage] must add top/side insets for edge-to-edge layout itself. Bottom insets are handled by the bottom bar.
+     * If `false`, [IntroScreen] will apply all insets to give [ComposePage] a safe content area.
      */
-    open val customInsets: Boolean = false
+    open val customTopInsets: Boolean = false
 
     /**
      * Used to determine whether an intro page of this type (for instance,

diff --git a/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/IntroScreen.kt b/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/IntroScreen.kt
@@ -8,17 +8,18 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawingPadding
+import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
@@ -30,6 +31,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -61,36 +63,15 @@ fun IntroScreen(
     val scope = rememberCoroutineScope()
 
     Scaffold(
-        contentWindowInsets = WindowInsets(0)
-    ) { paddingValues ->
-        Column(modifier = Modifier
-            .fillMaxSize()
-            .padding(paddingValues)
-        ) {
-            HorizontalPager(
-                state = pagerState,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .weight(1f)
-            ) {
-                val page = pages[it]
-                Box(
-                    modifier =
-                        if (page.customInsets)
-                            Modifier    // ComposePage() handles insets itself
-                        else
-                            Modifier.safeDrawingPadding()
-                ) {
-                    page.ComposePage()
-                }
-            }
-
+        contentWindowInsets = WindowInsets(0),
+        bottomBar = {
             Box(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .navigationBarsPadding()
-                    .height(90.dp)
                     .background(M3ColorScheme.primaryLight)
+                    // consume bottom and side insets of safe drawing area, like BottomAppBar
+                    .windowInsetsPadding(WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom))
+                    .height(90.dp)
             ) {
                 PositionIndicator(
                     index = pagerState.currentPage,
@@ -125,6 +106,25 @@ fun IntroScreen(
                 }
             }
         }
+    ) { paddingValues ->
+        Column(modifier = Modifier
+            .fillMaxSize()
+            .padding(paddingValues)
+        ) {
+            HorizontalPager(state = pagerState) { idxPage ->
+                val page = pages[idxPage]
+                Box(
+                    modifier = if (page.customTopInsets)
+                        Modifier    // ComposePage() handles insets itself
+                    else
+                        // consume top and horizontal sides of safe drawing padding (like TopAppBar)
+                        // bottom is handled by the bottom bar
+                        Modifier.windowInsetsPadding(WindowInsets.safeDrawing.only(WindowInsetsSides.Top + WindowInsetsSides.Horizontal))
+                ) {
+                    page.ComposePage()
+                }
+            }
+        }
     }
 }
 
@@ -138,9 +138,6 @@ fun IntroScreen_Preview() {
         IntroScreen(
             listOf(
                 object : IntroPage() {
-                    override val customInsets: Boolean
-                        get() = true
-
                     override fun getShowPolicy(): ShowPolicy = ShowPolicy.SHOW_ALWAYS
 
                     @Composable
@@ -149,8 +146,9 @@ fun IntroScreen_Preview() {
                             modifier = Modifier
                                 .fillMaxSize()
                                 .background(MaterialTheme.colorScheme.surface)
-                                .statusBarsPadding()
-                        )
+                        ) {
+                            Text("Some Text")
+                        }
                     }
                 },
                 object : IntroPage() {
@@ -162,8 +160,9 @@ fun IntroScreen_Preview() {
                             modifier = Modifier
                                 .fillMaxSize()
                                 .background(MaterialTheme.colorScheme.primary)
-                                .statusBarsPadding()
-                        )
+                        ) {
+                            Text("Some Text")
+                        }
                     }
                 }
             ),

diff --git a/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/OpenSourcePage.kt b/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/OpenSourcePage.kt
@@ -7,10 +7,8 @@ package at.bitfire.davdroid.ui.intro
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -142,6 +140,5 @@ fun OpenSourcePage(
                 )
             }
         }
-        Spacer(Modifier.height(90.dp))
     }
 }
diff --git a/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/WelcomePage.kt b/app/src/main/kotlin/at/bitfire/davdroid/ui/intro/WelcomePage.kt
@@ -35,7 +35,7 @@ import at.bitfire.davdroid.ui.M3ColorScheme
 
 class WelcomePage: IntroPage() {
 
-    override val customInsets: Boolean = true
+    override val customTopInsets: Boolean = true
 
     override fun getShowPolicy() = ShowPolicy.SHOW_ONLY_WITH_OTHERS