AdaptiveSheet: Wrap inside Dialog (#9279)

Because of Compose issue, the style of the sheet surface is adjusted as
a workaround

Ref https://issuetracker.google.com/issues/246909281
This commit is contained in:
Ivan Iskandar 2023-03-30 09:34:32 +07:00 committed by GitHub
parent be8e2f119f
commit 6f1099b710
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 42 deletions

View File

@ -14,6 +14,8 @@ import androidx.compose.foundation.layout.only
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import cafe.adriel.voyager.core.lifecycle.DisposableEffectIgnoringConfiguration import cafe.adriel.voyager.core.lifecycle.DisposableEffectIgnoringConfiguration
import cafe.adriel.voyager.core.screen.Screen import cafe.adriel.voyager.core.screen.Screen
import cafe.adriel.voyager.navigator.Navigator import cafe.adriel.voyager.navigator.Navigator
@ -78,6 +80,12 @@ fun AdaptiveSheet(
content: @Composable (PaddingValues) -> Unit, content: @Composable (PaddingValues) -> Unit,
) { ) {
val isTabletUi = isTabletUi() val isTabletUi = isTabletUi()
Dialog(
onDismissRequest = onDismissRequest,
properties = DialogProperties(
usePlatformDefaultWidth = false,
),
) {
AdaptiveSheetImpl( AdaptiveSheetImpl(
isTabletUi = isTabletUi, isTabletUi = isTabletUi,
tonalElevation = tonalElevation, tonalElevation = tonalElevation,
@ -92,3 +100,4 @@ fun AdaptiveSheet(
content(contentPadding) content(contentPadding)
} }
} }
}

View File

@ -245,7 +245,7 @@ object LibraryTab : Tab {
} }
LaunchedEffect(state.selectionMode, state.dialog) { LaunchedEffect(state.selectionMode, state.dialog) {
HomeScreen.showBottomNav(!state.selectionMode && state.dialog !is LibraryScreenModel.Dialog.SettingsSheet) HomeScreen.showBottomNav(!state.selectionMode)
} }
LaunchedEffect(state.isLoading) { LaunchedEffect(state.isLoading) {

View File

@ -3,15 +3,12 @@ package tachiyomi.presentation.core.components
import androidx.activity.compose.BackHandler import androidx.activity.compose.BackHandler
import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.only import androidx.compose.foundation.layout.only
@ -21,7 +18,6 @@ import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.shape.ZeroCornerSize
import androidx.compose.material.SwipeableState import androidx.compose.material.SwipeableState
import androidx.compose.material.rememberSwipeableState import androidx.compose.material.rememberSwipeableState
import androidx.compose.material.swipeable import androidx.compose.material.swipeable
@ -46,18 +42,14 @@ import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.Velocity import androidx.compose.ui.unit.Velocity
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.collectLatest import kotlinx.coroutines.flow.collectLatest
import kotlinx.coroutines.flow.drop import kotlinx.coroutines.flow.drop
import kotlinx.coroutines.flow.filter import kotlinx.coroutines.flow.filter
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
import kotlin.math.roundToInt import kotlin.math.roundToInt
import kotlin.time.Duration.Companion.milliseconds
private const val SheetAnimationDuration = 500 private const val SheetAnimationDuration = 350
private val SheetAnimationSpec = tween<Float>(durationMillis = SheetAnimationDuration) private val SheetAnimationSpec = tween<Float>(durationMillis = SheetAnimationDuration)
private const val ScrimAnimationDuration = 350
private val ScrimAnimationSpec = tween<Float>(durationMillis = ScrimAnimationDuration)
@Composable @Composable
fun AdaptiveSheet( fun AdaptiveSheet(
@ -72,12 +64,11 @@ fun AdaptiveSheet(
var targetAlpha by remember { mutableStateOf(0f) } var targetAlpha by remember { mutableStateOf(0f) }
val alpha by animateFloatAsState( val alpha by animateFloatAsState(
targetValue = targetAlpha, targetValue = targetAlpha,
animationSpec = ScrimAnimationSpec, animationSpec = SheetAnimationSpec,
) )
val internalOnDismissRequest: () -> Unit = { val internalOnDismissRequest: () -> Unit = {
scope.launch { scope.launch {
targetAlpha = 0f targetAlpha = 0f
delay(ScrimAnimationSpec.durationMillis.milliseconds)
onDismissRequest() onDismissRequest()
} }
} }
@ -93,11 +84,6 @@ fun AdaptiveSheet(
.alpha(alpha), .alpha(alpha),
contentAlignment = Alignment.Center, contentAlignment = Alignment.Center,
) { ) {
Box(
modifier = Modifier
.matchParentSize()
.background(MaterialTheme.colorScheme.scrim.copy(alpha = 0.32f)),
)
Surface( Surface(
modifier = Modifier modifier = Modifier
.requiredWidthIn(max = 460.dp) .requiredWidthIn(max = 460.dp)
@ -138,16 +124,6 @@ fun AdaptiveSheet(
) { ) {
val fullHeight = constraints.maxHeight.toFloat() val fullHeight = constraints.maxHeight.toFloat()
val anchors = mapOf(0f to 0, fullHeight to 1) val anchors = mapOf(0f to 0, fullHeight to 1)
val scrimAlpha by animateFloatAsState(
targetValue = if (swipeState.targetValue == 1) 0f else 1f,
animationSpec = ScrimAnimationSpec,
)
Box(
modifier = Modifier
.matchParentSize()
.alpha(scrimAlpha)
.background(MaterialTheme.colorScheme.scrim.copy(alpha = 0.32f)),
)
Surface( Surface(
modifier = Modifier modifier = Modifier
.widthIn(max = 460.dp) .widthIn(max = 460.dp)
@ -180,12 +156,8 @@ fun AdaptiveSheet(
.windowInsetsPadding( .windowInsetsPadding(
WindowInsets.systemBars WindowInsets.systemBars
.only(WindowInsetsSides.Top + WindowInsetsSides.Horizontal), .only(WindowInsetsSides.Top + WindowInsetsSides.Horizontal),
)
.consumeWindowInsets(
WindowInsets.systemBars
.only(WindowInsetsSides.Top + WindowInsetsSides.Horizontal),
), ),
shape = MaterialTheme.shapes.extraLarge.copy(bottomStart = ZeroCornerSize, bottomEnd = ZeroCornerSize), shape = MaterialTheme.shapes.extraLarge,
tonalElevation = tonalElevation, tonalElevation = tonalElevation,
content = { content = {
BackHandler(enabled = swipeState.targetValue == 0, onBack = internalOnDismissRequest) BackHandler(enabled = swipeState.targetValue == 0, onBack = internalOnDismissRequest)
@ -199,7 +171,6 @@ fun AdaptiveSheet(
.drop(1) .drop(1)
.filter { it == 1 } .filter { it == 1 }
.collectLatest { .collectLatest {
delay(ScrimAnimationSpec.durationMillis.milliseconds)
onDismissRequest() onDismissRequest()
} }
} }