From 7ccc9b160a9d7401ff60816f36b41d78ff929069 Mon Sep 17 00:00:00 2001 From: WhiteScent Date: Wed, 31 Jul 2024 13:23:17 +0800 Subject: [PATCH] fix: incorrect inner padding values of home screen --- .../whitescent/mastify/screen/home/Home.kt | 15 +- .../mastify/ui/component/AppScaffold.kt | 1 + .../mastify/ui/component/BottomBar.kt | 134 +++++++++--------- .../ui/component/status/StatusSnackbar.kt | 6 +- .../whitescent/mastify/utils/AppState.kt | 4 + 5 files changed, 79 insertions(+), 81 deletions(-) diff --git a/app/src/main/java/com/github/whitescent/mastify/screen/home/Home.kt b/app/src/main/java/com/github/whitescent/mastify/screen/home/Home.kt index 2de7da78..31936e19 100644 --- a/app/src/main/java/com/github/whitescent/mastify/screen/home/Home.kt +++ b/app/src/main/java/com/github/whitescent/mastify/screen/home/Home.kt @@ -19,6 +19,7 @@ package com.github.whitescent.mastify.screen.home import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.Crossfade +import androidx.compose.animation.animateContentSize import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.slideInVertically @@ -28,12 +29,9 @@ import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.navigationBars import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.statusBarsPadding @@ -64,7 +62,6 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.shadow import androidx.compose.ui.graphics.Color -import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.pluralStringResource import androidx.compose.ui.res.stringResource @@ -121,7 +118,6 @@ fun Home( ) { val data by viewModel.homeCombinedFlow.collectAsStateWithLifecycle() val uiState = viewModel.uiState - val density = LocalDensity.current var refreshing by remember { mutableStateOf(false) } @@ -145,7 +141,7 @@ fun Home( .fillMaxSize() .background(AppTheme.colors.background) .statusBarsPadding() - .padding(bottom = WindowInsets.navigationBars.getBottom(density).dp) + .padding(bottom = appState.appPaddingValues.calculateBottomPadding()) .pullRefresh(pullRefreshState) .semantics { testTagsAsResourceId = true @@ -193,8 +189,7 @@ fun Home( .drawVerticalScrollbar(lazyState) .semantics { testTag = "home timeline" - }, - contentPadding = PaddingValues(bottom = WindowInsets.navigationBars.getBottom(density).dp) + } ) { itemsIndexed( items = timeline, @@ -255,12 +250,12 @@ fun Home( viewModel.dismissButton() } } - Column(Modifier.align(Alignment.BottomEnd)) { + Column(Modifier.align(Alignment.BottomEnd).animateContentSize()) { Image( painter = painterResource(id = R.drawable.edit), contentDescription = null, modifier = Modifier - .padding(24.dp) + .padding(16.dp) .align(Alignment.End) .shadow(6.dp, CircleShape) .background(AppTheme.colors.primaryGradient, CircleShape) diff --git a/app/src/main/java/com/github/whitescent/mastify/ui/component/AppScaffold.kt b/app/src/main/java/com/github/whitescent/mastify/ui/component/AppScaffold.kt index fbd98336..c098645d 100644 --- a/app/src/main/java/com/github/whitescent/mastify/ui/component/AppScaffold.kt +++ b/app/src/main/java/com/github/whitescent/mastify/ui/component/AppScaffold.kt @@ -160,6 +160,7 @@ fun AppScaffold( containerColor = Color.Black, modifier = Modifier.fillMaxSize() ) { + appState.appPaddingValues = it DestinationsNavHost( engine = engine, navController = navController, diff --git a/app/src/main/java/com/github/whitescent/mastify/ui/component/BottomBar.kt b/app/src/main/java/com/github/whitescent/mastify/ui/component/BottomBar.kt index 6880e826..0aa563bd 100644 --- a/app/src/main/java/com/github/whitescent/mastify/ui/component/BottomBar.kt +++ b/app/src/main/java/com/github/whitescent/mastify/ui/component/BottomBar.kt @@ -37,7 +37,6 @@ import androidx.compose.foundation.layout.sizeIn import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.BadgedBox import androidx.compose.material3.Icon -import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -64,82 +63,79 @@ fun BottomBar( destination: Destination, scrollToTop: () -> Unit, modifier: Modifier = Modifier, +) = Box( + modifier = Modifier.fillMaxWidth() + .shadow(24.dp, RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)) + .clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)) + .background(AppTheme.colors.bottomBarBackground) ) { - Surface( - modifier = modifier - .fillMaxWidth() - .shadow(24.dp, RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)), - shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), - color = AppTheme.colors.bottomBarBackground, - ) { - CenterRow(Modifier.navigationBarsPadding()) { - BottomBarItem.entries.forEachIndexed { _, screen -> - val selected = destination.route == screen.direction.route - BottomBarIcon( - icon = { - AnimatedContent( - targetState = selected, - transitionSpec = { - ContentTransform( - targetContentEnter = scaleIn( - animationSpec = tween( - durationMillis = 340, - easing = overshootEasing() - ), + CenterRow(Modifier.navigationBarsPadding()) { + BottomBarItem.entries.forEachIndexed { _, screen -> + val selected = destination.route == screen.direction.route + BottomBarIcon( + icon = { + AnimatedContent( + targetState = selected, + transitionSpec = { + ContentTransform( + targetContentEnter = scaleIn( + animationSpec = tween( + durationMillis = 340, + easing = overshootEasing() ), - initialContentExit = fadeOut(tween(277)), - ).using(SizeTransform(clip = false)) - }, - ) { isSelected -> - Icon( - painter = painterResource(screen.icon), - contentDescription = null, - modifier = modifier - .size(24.dp) - .let { - if (!isSelected) it.alpha(0.2f) else it - }, - tint = AppTheme.colors.primaryContent + ), + initialContentExit = fadeOut(tween(277)), + ).using(SizeTransform(clip = false)) + }, + ) { isSelected -> + Icon( + painter = painterResource(screen.icon), + contentDescription = null, + modifier = modifier + .size(24.dp) + .let { + if (!isSelected) it.alpha(0.2f) else it + }, + tint = AppTheme.colors.primaryContent + ) + } + }, + unreadBubble = { + if (appState.unreadNotifications > 0 && screen == BottomBarItem.Notification) { + Box( + modifier = Modifier + .padding(4.dp) + .sizeIn(20.dp, 20.dp, maxHeight = 20.dp) + .clip(SmoothCornerShape(6.dp)) + .background(AppTheme.colors.primaryGradient, SmoothCornerShape(5.dp)), + contentAlignment = Alignment.Center + ) { + Text( + text = appState.unreadNotifications.toString(), + color = Color.White, + fontSize = 12.sp, + modifier = Modifier.padding(horizontal = 4.dp) ) } - }, - unreadBubble = { - if (appState.unreadNotifications > 0 && screen == BottomBarItem.Notification) { - Box( - modifier = Modifier - .padding(4.dp) - .sizeIn(20.dp, 20.dp, maxHeight = 20.dp) - .clip(SmoothCornerShape(6.dp)) - .background(AppTheme.colors.primaryGradient, SmoothCornerShape(5.dp)), - contentAlignment = Alignment.Center - ) { - Text( - text = appState.unreadNotifications.toString(), - color = Color.White, - fontSize = 12.sp, - modifier = Modifier.padding(horizontal = 4.dp) - ) - } - } - }, - modifier = Modifier - .clickableWithoutIndication { - when (selected) { - true -> scrollToTop() - false -> { - navigator.navigate(screen.direction) { - popUpTo(destination) { - saveState = true - inclusive = true - } - restoreState = true + } + }, + modifier = Modifier + .clickableWithoutIndication { + when (selected) { + true -> scrollToTop() + false -> { + navigator.navigate(screen.direction) { + popUpTo(destination) { + saveState = true + inclusive = true } + restoreState = true } } } - .padding(24.dp), - ) - } + } + .padding(24.dp), + ) } } } diff --git a/app/src/main/java/com/github/whitescent/mastify/ui/component/status/StatusSnackbar.kt b/app/src/main/java/com/github/whitescent/mastify/ui/component/status/StatusSnackbar.kt index d1207f1e..4cd602d3 100644 --- a/app/src/main/java/com/github/whitescent/mastify/ui/component/status/StatusSnackbar.kt +++ b/app/src/main/java/com/github/whitescent/mastify/ui/component/status/StatusSnackbar.kt @@ -42,6 +42,7 @@ import androidx.compose.ui.unit.sp import com.github.whitescent.R import com.github.whitescent.mastify.ui.component.CenterRow import com.github.whitescent.mastify.ui.component.WidthSpacer +import com.github.whitescent.mastify.utils.thenIf import kotlinx.coroutines.delay @Composable @@ -60,7 +61,8 @@ fun StatusSnackBar( sizeTransform = null ) }, - modifier = modifier.fillMaxWidth() + modifier = Modifier.fillMaxWidth() + .thenIf(data != null) { modifier } ) { it?.let { type -> Surface( @@ -73,7 +75,7 @@ fun StatusSnackBar( }, contentColor = Color.White, shadowElevation = 4.dp, - modifier = modifier.fillMaxWidth() + modifier = Modifier.fillMaxWidth() ) { CenterRow(Modifier.padding(horizontal = 22.dp, vertical = 16.dp)) { Icon( diff --git a/app/src/main/java/com/github/whitescent/mastify/utils/AppState.kt b/app/src/main/java/com/github/whitescent/mastify/utils/AppState.kt index 7d2fe841..6076b745 100644 --- a/app/src/main/java/com/github/whitescent/mastify/utils/AppState.kt +++ b/app/src/main/java/com/github/whitescent/mastify/utils/AppState.kt @@ -17,6 +17,7 @@ package com.github.whitescent.mastify.utils +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.runtime.Composable import androidx.compose.runtime.Stable import androidx.compose.runtime.getValue @@ -25,6 +26,7 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.saveable.mapSaver import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue +import androidx.compose.ui.unit.dp import kotlinx.coroutines.flow.MutableSharedFlow import kotlinx.coroutines.flow.asSharedFlow @@ -38,6 +40,8 @@ class AppState( var hideBottomBar by mutableStateOf(false) + var appPaddingValues by mutableStateOf(PaddingValues(0.dp)) + var unreadNotifications by mutableIntStateOf(unread) suspend fun scrollToTop() { scrollToTopChannel.emit(Unit) }