Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix window insets to avoid overlapping display cutouts and system bars #1006

Merged
merged 7 commits into from
Sep 11, 2024
Merged

Fix window insets to avoid overlapping display cutouts and system bars #1006

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dc5bc4a
Fix window insets to avoid overlapping display cutouts and system bars
norihirosunada Sep 7, 2024
36af51b
Fix content padding of event map and sponsors screen
norihirosunada Sep 8, 2024
52a3bde
Merge branch 'refs/heads/main' into fix/landscape_3_button_navigation…
norihirosunada Sep 10, 2024
173aaea
Refactor AppBars window insets default value
norihirosunada Sep 10, 2024
f393440
Merge branch 'main' into fix/landscape_3_button_navigation_screen_pad…
takahirom Sep 10, 2024
d9f22c4
./gradlew detekt --auto-correct
norihirosunada Sep 10, 2024
173350b
Merge branch 'refs/heads/main' into fix/landscape_3_button_navigation…
norihirosunada Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 1 addition & 16 deletions app-android/src/main/java/io/github/droidkaigi/confsched/KaigiApp.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -100,7 +93,6 @@ fun KaigiApp(
fontFamily: FontFamily?,
modifier: Modifier = Modifier,
) {
val layoutDirection = LocalLayoutDirection.current
KaigiTheme(
colorContrast = colorContrast(),
fontFamily = fontFamily,
Expand All @@ -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(),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

)
}
}
Expand Down
14 changes: 13 additions & 1 deletion ...n/kotlin/io/github/droidkaigi/confsched/droidkaigiui/component/AnimatedMediumTopAppBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
),
Expand Down Expand Up @@ -108,3 +113,10 @@ fun AnimatedMediumTopAppBar(
scrollBehavior = scrollBehavior,
)
}

object AnimatedMediumTopAppBarDefaults {
@Composable
fun windowInsets() = WindowInsets.displayCutout.union(WindowInsets.systemBars).only(
WindowInsetsSides.Horizontal + WindowInsetsSides.Top,
)
}
14 changes: 13 additions & 1 deletion ...ain/kotlin/io/github/droidkaigi/confsched/droidkaigiui/component/AnimatedTextTopAppBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
),
Expand Down Expand Up @@ -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,
)
}
15 changes: 14 additions & 1 deletion ...s/src/commonMain/kotlin/io/github/droidkaigi/confsched/contributors/ContributorsScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -102,6 +109,7 @@ fun ContributorsScreen(
isTopAppBarHidden: Boolean,
modifier: Modifier = Modifier,
) {
val layoutDirection = LocalLayoutDirection.current
val scrollBehavior =
if (!isTopAppBarHidden) {
TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Expand All @@ -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())
Expand Down
8 changes: 7 additions & 1 deletion .../eventmap/src/commonMain/kotlin/io/github/droidkaigi/confsched/eventmap/EventMapScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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())
Expand Down
37 changes: 34 additions & 3 deletions feature/main/src/commonMain/kotlin/io/github/droidkaigi/confsched/main/MainScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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

Expand All @@ -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) {
Expand All @@ -236,7 +251,9 @@ fun MainScreen(
onTabSelected(mainNestedNavController, it)
},
currentTab = currentTab,
modifier = Modifier.padding(scaffoldPadding.value),
modifier = Modifier.padding(
top = scaffoldPadding.value.calculateTopPadding(),
),
)
}

Expand All @@ -253,6 +270,8 @@ fun MainScreen(
)
}
},
contentWindowInsets = WindowInsets.displayCutout
.union(WindowInsets.systemBars),
) { padding ->
scaffoldPadding.value = padding
val hazeStyle =
Expand All @@ -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),
),
)
}
}
}
Expand Down
15 changes: 14 additions & 1 deletion ...re/sessions/src/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/SearchScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -136,6 +143,7 @@ fun SearchScreen(
onBackClick: () -> Unit,
modifier: Modifier = Modifier,
) {
val layoutDirection = LocalLayoutDirection.current
Scaffold(
topBar = {
SearchTextFieldAppBar(
Expand All @@ -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(
Expand Down
Loading
Loading