Atte149/book-story
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🚀 Change corners for HelpItem

Browse source 
* Changed corners for HelpItem, now rounded corners are only for top and bottom item
This commit is contained in:
Acclorite 2024-10-12 14:40:42 +03:00
parent 272d44d70d
commit d000c252a0
2 changed files with 44 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/src/main/java/ua/acclorite/book_story/presentation/screens/help/HelpScreen.kt
View file

@ -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
)
}

49
app/src/main/java/ua/acclorite/book_story/presentation/screens/help/components/HelpItem.kt
View file

@ -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(