Home buttons design update for small screens
This commit is contained in:
parent
000697ba63
commit
c134bc986f
|
@ -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
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in New Issue