Home buttons design update for small screens

This commit is contained in:
Milan Cerovsky 2025-04-29 11:34:02 +02:00
parent 000697ba63
commit c134bc986f
2 changed files with 24 additions and 7 deletions

View File

@ -27,6 +27,7 @@ import androidx.compose.ui.input.pointer.changedToUp
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import co.electriccoin.zcash.ui.design.R
import co.electriccoin.zcash.ui.design.newcomponent.PreviewScreens
@ -91,21 +92,24 @@ fun ZashiBigIconButton(
shadowElevation = shadowElevation
) {
Column(
modifier = backgroundModifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Image(
modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp),
painter = painterResource(state.icon),
contentDescription = state.text.getValue(),
colorFilter = ColorFilter.tint(ZashiColors.Text.textPrimary)
)
Spacer(Modifier.height(4.dp))
Text(
modifier = Modifier.padding(bottom = 16.dp),
text = state.text.getValue(),
style = ZashiTypography.textXs,
fontWeight = FontWeight.Medium,
color = ZashiColors.Text.textPrimary
color = ZashiColors.Text.textPrimary,
maxLines = 1,
overflow = TextOverflow.Clip
)
}
}

View File

@ -6,7 +6,6 @@ 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.aspectRatio
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
@ -15,6 +14,7 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.layout
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
@ -128,7 +128,7 @@ private fun NavButtons(
modifier =
Modifier
.weight(1f)
.aspectRatio(1.06f)
.minHeight106Percent()
.testTag(HomeTags.RECEIVE),
state = state.firstButton,
)
@ -136,27 +136,40 @@ private fun NavButtons(
modifier =
Modifier
.weight(1f)
.aspectRatio(1.06f)
.minHeight106Percent()
.testTag(HomeTags.SEND),
state = state.secondButton,
)
ZashiBigIconButton(
modifier =
Modifier
.aspectRatio(1.06f)
.minHeight106Percent()
.weight(1f),
state = state.thirdButton,
)
ZashiBigIconButton(
modifier =
Modifier
.aspectRatio(1.06f)
.minHeight106Percent()
.weight(1f),
state = state.fourthButton,
)
}
}
fun Modifier.minHeight106Percent(): Modifier =
layout { measurable, constraints ->
val placeable = measurable.measure(constraints)
val minHeight = (placeable.width.toFloat() / (106f / 100f)).toInt()
val newConstraints = constraints.copy(minHeight = minHeight)
val newPlaceable = measurable.measure(newConstraints)
layout(newPlaceable.width, newPlaceable.height) {
newPlaceable.place(0, 0)
}
}
@PreviewScreens
@Composable
private fun Preview() {