From d000c252a06a06de1bbae0dc12081e29a8c4f66d Mon Sep 17 00:00:00 2001 From: Acclorite <140836141+Acclorite@users.noreply.github.com> Date: Sat, 12 Oct 2024 14:40:42 +0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Change=20corners=20for=20HelpIte?= =?UTF-8?q?m?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Changed corners for HelpItem, now rounded corners are only for top and bottom item --- .../presentation/screens/help/HelpScreen.kt | 5 ++ .../screens/help/components/HelpItem.kt | 49 +++++++++++++++---- 2 files changed, 44 insertions(+), 10 deletions(-) diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/HelpScreen.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/HelpScreen.kt index 87235c82..ae1e768e 100644 --- a/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/HelpScreen.kt +++ b/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/HelpScreen.kt @@ -158,6 +158,11 @@ private fun HelpScreen() { ) { index, helpTip -> HelpItem( helpTip = helpTip, + position = when (index) { + 0 -> Position.TOP + Constants.HELP_TIPS.lastIndex -> Position.BOTTOM + else -> Position.CENTER + }, fromStart = state.value.fromStart ) } diff --git a/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/components/HelpItem.kt b/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/components/HelpItem.kt index 9fc058aa..5be844d3 100644 --- a/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/components/HelpItem.kt +++ b/app/src/main/java/ua/acclorite/book_story/presentation/screens/help/components/HelpItem.kt @@ -5,6 +5,7 @@ import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.tween import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth @@ -12,6 +13,8 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CornerSize +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.ArrowDropUp import androidx.compose.material3.HorizontalDivider @@ -20,6 +23,7 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -30,6 +34,7 @@ import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.unit.dp import ua.acclorite.book_story.R import ua.acclorite.book_story.domain.model.HelpTip +import ua.acclorite.book_story.domain.util.Position import ua.acclorite.book_story.presentation.core.navigation.LocalNavigator import ua.acclorite.book_story.presentation.core.util.noRippleClickable import ua.acclorite.book_story.presentation.ui.ExpandingTransition @@ -39,18 +44,17 @@ import ua.acclorite.book_story.presentation.ui.ExpandingTransition * Can be Expanded or Collapsed. * * @param helpTip [HelpTip] to be shown. + * @param position Position of the [helpTip](top/center/bottom). * @param fromStart Whether user came from Start screen. */ @Composable fun HelpItem( helpTip: HelpTip, + position: Position, fromStart: Boolean ) { val onNavigate = LocalNavigator.current - - val showDescription = rememberSaveable { - mutableStateOf(false) - } + val showDescription = rememberSaveable { mutableStateOf(false) } val animatedArrowRotation = animateFloatAsState( targetValue = if (showDescription.value) 0f else -180f, @@ -69,15 +73,40 @@ fun HelpItem( animationSpec = tween(400) ) + val extraLargeShape = MaterialTheme.shapes.extraLarge + val shape = remember(position) { + when (position) { + Position.TOP -> extraLargeShape.copy( + bottomStart = CornerSize(3.dp), + bottomEnd = CornerSize(3.dp) + ) + + Position.CENTER -> RoundedCornerShape(3.dp) + + Position.SOLO -> extraLargeShape + + Position.BOTTOM -> extraLargeShape.copy( + topStart = CornerSize(3.dp), + topEnd = CornerSize(3.dp) + ) + } + } + val paddingValues = remember(position) { + when (position) { + Position.TOP -> PaddingValues(top = 4.dp, bottom = 1.dp) + Position.CENTER -> PaddingValues(vertical = 1.dp) + Position.SOLO -> PaddingValues(0.dp) + Position.BOTTOM -> PaddingValues(bottom = 4.dp, top = 1.dp) + } + } + Column( Modifier .fillMaxWidth() - .clip(MaterialTheme.shapes.extraLarge) - .padding(horizontal = 8.dp, vertical = 4.dp) - .background( - animatedBackgroundColor.value, - MaterialTheme.shapes.extraLarge - ) + .padding(horizontal = 16.dp) + .padding(paddingValues) + .clip(shape) + .background(animatedBackgroundColor.value) .padding(vertical = 18.dp, horizontal = 18.dp) ) { Row(