Merge pull request #1006 from norihirosunada/fix/landscape_3_button_n…

…avigation_screen_padding Fix window insets to avoid overlapping display cutouts and system bars
DroidKaigi · Sep 11, 2024 · c3466dc · c3466dc
2 parents 699b9d0 + 173350b
commit c3466dc
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 32 deletions.
diff --git a/app-android/src/main/java/io/github/droidkaigi/confsched/KaigiApp.kt b/app-android/src/main/java/io/github/droidkaigi/confsched/KaigiApp.kt
@@ -14,13 +14,7 @@ import androidx.browser.customtabs.CustomTabsIntent
 import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.animation.SharedTransitionLayout
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.calculateEndPadding
-import androidx.compose.foundation.layout.calculateStartPadding
-import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.windowsizeclass.WindowSizeClass
@@ -31,7 +25,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.text.font.FontFamily
 import androidx.core.content.getSystemService
 import androidx.core.net.toUri
@@ -100,7 +93,6 @@ fun KaigiApp(
     fontFamily: FontFamily?,
     modifier: Modifier = Modifier,
 ) {
-    val layoutDirection = LocalLayoutDirection.current
     KaigiTheme(
         colorContrast = colorContrast(),
         fontFamily = fontFamily,
@@ -112,14 +104,7 @@ fun KaigiApp(
             KaigiNavHost(
                 windowSize = windowSize,
                 displayFeatures = displayFeatures,
-                modifier = Modifier.padding(
-                    start = WindowInsets.displayCutout
-                        .asPaddingValues()
-                        .calculateStartPadding(layoutDirection),
-                    end = WindowInsets.displayCutout
-                        .asPaddingValues()
-                        .calculateEndPadding(layoutDirection),
-                ),
+                modifier = Modifier.fillMaxSize(),
             )
         }
     }

diff --git a/...n/kotlin/io/github/droidkaigi/confsched/droidkaigiui/component/AnimatedMediumTopAppBar.kt b/...n/kotlin/io/github/droidkaigi/confsched/droidkaigiui/component/AnimatedMediumTopAppBar.kt
@@ -5,8 +5,13 @@ import androidx.compose.animation.ExitTransition
 import androidx.compose.animation.fadeIn
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.union
 import androidx.compose.material.icons.Icons.AutoMirrored.Filled
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -38,7 +43,7 @@ fun AnimatedMediumTopAppBar(
     navIconContentDescription: String?,
     modifier: Modifier = Modifier,
     actions: @Composable RowScope.() -> Unit = {},
-    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
+    windowInsets: WindowInsets = AnimatedMediumTopAppBarDefaults.windowInsets(),
     colors: TopAppBarColors = TopAppBarDefaults.largeTopAppBarColors().copy(
         scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainer,
     ),
@@ -108,3 +113,10 @@ fun AnimatedMediumTopAppBar(
         scrollBehavior = scrollBehavior,
     )
 }
+
+object AnimatedMediumTopAppBarDefaults {
+    @Composable
+    fun windowInsets() = WindowInsets.displayCutout.union(WindowInsets.systemBars).only(
+        WindowInsetsSides.Horizontal + WindowInsetsSides.Top,
+    )
+}
diff --git a/...ain/kotlin/io/github/droidkaigi/confsched/droidkaigiui/component/AnimatedTextTopAppBar.kt b/...ain/kotlin/io/github/droidkaigi/confsched/droidkaigiui/component/AnimatedTextTopAppBar.kt
@@ -3,7 +3,12 @@ package io.github.droidkaigi.confsched.droidkaigiui.component
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.only
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.union
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.TopAppBar
@@ -25,7 +30,7 @@ fun AnimatedTextTopAppBar(
     modifier: Modifier = Modifier,
     navigationIcon: @Composable () -> Unit = {},
     actions: @Composable RowScope.() -> Unit = {},
-    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
+    windowInsets: WindowInsets = AnimatedTextTopAppBarDefaults.windowInsets(),
     colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors().copy(
         scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainer,
     ),
@@ -80,3 +85,10 @@ fun TopAppBarScrollBehavior.resetScroll() {
     this.state.heightOffset = 0f
     this.state.contentOffset = 0f
 }
+
+object AnimatedTextTopAppBarDefaults {
+    @Composable
+    fun windowInsets() = WindowInsets.displayCutout.union(WindowInsets.systemBars).only(
+        WindowInsetsSides.Horizontal + WindowInsetsSides.Top,
+    )
+}
diff --git a/...s/src/commonMain/kotlin/io/github/droidkaigi/confsched/contributors/ContributorsScreen.kt b/...s/src/commonMain/kotlin/io/github/droidkaigi/confsched/contributors/ContributorsScreen.kt
@@ -2,9 +2,15 @@ package io.github.droidkaigi.confsched.contributors
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
+import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.union
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.CircularProgressIndicator
@@ -18,6 +24,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavGraphBuilder
@@ -102,6 +109,7 @@ fun ContributorsScreen(
     isTopAppBarHidden: Boolean,
     modifier: Modifier = Modifier,
 ) {
+    val layoutDirection = LocalLayoutDirection.current
     val scrollBehavior =
         if (!isTopAppBarHidden) {
             TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
@@ -121,13 +129,18 @@ fun ContributorsScreen(
                 )
             }
         },
+        contentWindowInsets = WindowInsets.displayCutout.union(WindowInsets.systemBars),
     ) { padding ->
         when (uiState) {
             is Exists -> {
                 Contributors(
                     contributors = uiState.contributors,
                     onContributorsItemClick = onContributorsItemClick,
-                    contentPadding = PaddingValues(bottom = 40.dp + padding.calculateBottomPadding()),
+                    contentPadding = PaddingValues(
+                        start = padding.calculateStartPadding(layoutDirection),
+                        end = padding.calculateEndPadding(layoutDirection),
+                        bottom = 40.dp + padding.calculateBottomPadding(),
+                    ),
                     modifier = Modifier
                         .fillMaxSize()
                         .padding(top = padding.calculateTopPadding())

diff --git a/.../eventmap/src/commonMain/kotlin/io/github/droidkaigi/confsched/eventmap/EventMapScreen.kt b/.../eventmap/src/commonMain/kotlin/io/github/droidkaigi/confsched/eventmap/EventMapScreen.kt
@@ -4,6 +4,8 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -143,7 +145,11 @@ fun EventMapScreen(
         EventMap(
             uiState = uiState,
             onEventMapItemClick = onEventMapItemClick,
-            contentPadding = PaddingValues(bottom = padding.calculateBottomPadding()),
+            contentPadding = PaddingValues(
+                start = padding.calculateStartPadding(layoutDirection),
+                end = padding.calculateEndPadding(layoutDirection),
+                bottom = padding.calculateBottomPadding(),
+            ),
             modifier = Modifier
                 .fillMaxSize()
                 .padding(top = padding.calculateTopPadding())

diff --git a/feature/main/src/commonMain/kotlin/io/github/droidkaigi/confsched/main/MainScreen.kt b/feature/main/src/commonMain/kotlin/io/github/droidkaigi/confsched/main/MainScreen.kt
@@ -11,9 +11,16 @@ import androidx.compose.animation.fadeOut
 import androidx.compose.animation.scaleIn
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.union
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -28,6 +35,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
@@ -210,6 +218,8 @@ fun MainScreen(
     mainNestedNavGraph: NavGraphBuilder.(NavController, PaddingValues) -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val layoutDirection = LocalLayoutDirection.current
+
     val navBackStackEntryRoute =
         mainNestedNavController.currentBackStackEntryAsState().value?.destination?.route
 
@@ -226,7 +236,12 @@ fun MainScreen(
     val scaffoldPadding = remember { mutableStateOf(PaddingValues(0.dp)) }
 
     Row(
-        modifier = modifier.fillMaxSize(),
+        modifier = modifier.fillMaxSize()
+            .windowInsetsPadding(
+                WindowInsets.displayCutout
+                    .union(WindowInsets.systemBars)
+                    .only(WindowInsetsSides.Start),
+            ),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         AnimatedVisibility(visible = navigationType == NavigationRail) {
@@ -236,7 +251,9 @@ fun MainScreen(
                     onTabSelected(mainNestedNavController, it)
                 },
                 currentTab = currentTab,
-                modifier = Modifier.padding(scaffoldPadding.value),
+                modifier = Modifier.padding(
+                    top = scaffoldPadding.value.calculateTopPadding(),
+                ),
             )
         }
 
@@ -253,6 +270,8 @@ fun MainScreen(
                     )
                 }
             },
+            contentWindowInsets = WindowInsets.displayCutout
+                .union(WindowInsets.systemBars),
         ) { padding ->
             scaffoldPadding.value = padding
             val hazeStyle =
@@ -271,7 +290,19 @@ fun MainScreen(
                 enterTransition = { materialFadeThroughIn() },
                 exitTransition = { materialFadeThroughOut() },
             ) {
-                mainNestedNavGraph(mainNestedNavController, padding)
+                mainNestedNavGraph(
+                    mainNestedNavController,
+                    PaddingValues(
+                        top = padding.calculateTopPadding(),
+                        bottom = padding.calculateBottomPadding(),
+                        start = if (navigationType == NavigationRail) {
+                            0.dp
+                        } else {
+                            padding.calculateLeftPadding(layoutDirection)
+                        },
+                        end = padding.calculateRightPadding(layoutDirection),
+                    ),
+                )
             }
         }
     }

diff --git a/...re/sessions/src/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/SearchScreen.kt b/...re/sessions/src/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/SearchScreen.kt
@@ -3,9 +3,15 @@ package io.github.droidkaigi.confsched.sessions
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
+import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.union
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -14,6 +20,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
@@ -136,6 +143,7 @@ fun SearchScreen(
     onBackClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val layoutDirection = LocalLayoutDirection.current
     Scaffold(
         topBar = {
             SearchTextFieldAppBar(
@@ -147,9 +155,14 @@ fun SearchScreen(
         },
         modifier = modifier,
         containerColor = MaterialTheme.colorScheme.surface,
+        contentWindowInsets = WindowInsets.displayCutout.union(WindowInsets.systemBars),
     ) { innerPadding ->
         Column(
-            modifier = Modifier.padding(top = innerPadding.calculateTopPadding()),
+            modifier = Modifier.padding(
+                top = innerPadding.calculateTopPadding(),
+                start = innerPadding.calculateStartPadding(layoutDirection),
+                end = innerPadding.calculateEndPadding(layoutDirection),
+            ),
         ) {
             HorizontalDivider()
             SearchFilters(