Pin unlock : fix some ui

This commit is contained in:
ganfra 2023-10-20 16:35:54 +02:00
parent 55a272d8b7
commit a6060ab4ab
2 changed files with 31 additions and 17 deletions

View file

@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
@ -65,12 +66,15 @@ fun PinUnlockView(
modifier = Modifier
.padding(top = 40.dp)
.fillMaxWidth(),
contentAlignment = Alignment.Center,
) {
PinKeypad(
onClick = {
state.eventSink(PinUnlockEvents.OnPinKeypadPressed(it))
}
},
horizontalArrangement = spacedBy(24.dp, Alignment.CenterHorizontally),
verticalArrangement = spacedBy(16.dp, Alignment.CenterVertically),
horizontalAlignment = Alignment.CenterHorizontally,
verticalAlignment = Alignment.CenterVertically,
)
}
}

View file

@ -17,18 +17,21 @@
package io.element.android.features.lockscreen.impl.unlock.numpad
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
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
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.Backspace
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -96,7 +99,7 @@ private fun PinKeypadRow(
Row(
horizontalArrangement = horizontalArrangement,
verticalAlignment = verticalAlignment,
modifier = modifier,
modifier = modifier.fillMaxWidth(),
) {
val commonModifier = Modifier.size(80.dp)
for (model in models) {
@ -123,6 +126,22 @@ private fun PinKeypadRow(
}
}
@Composable
private fun PinKeypadButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
content: @Composable BoxScope.() -> Unit,
) {
Box(
contentAlignment = Alignment.Center,
modifier = modifier
.clip(CircleShape)
.background(color = ElementTheme.colors.bgSubtlePrimary)
.clickable(onClick = onClick),
content = content
)
}
@Composable
private fun PinKeyBadDigitButton(
digit: String,
@ -130,15 +149,8 @@ private fun PinKeyBadDigitButton(
onClick: (String) -> Unit,
modifier: Modifier = Modifier,
) {
Button(
colors = ButtonDefaults.buttonColors(
containerColor = ElementTheme.colors.bgSubtlePrimary,
contentColor = Color.Transparent,
),
shape = CircleShape,
contentPadding = PaddingValues(0.dp),
modifier = modifier
.clip(CircleShape),
PinKeypadButton(
modifier = modifier,
onClick = { onClick(digit) }
) {
val fontSize = 80.dp.toSp() / 2
@ -158,10 +170,8 @@ private fun PinKeypadBackButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
) {
IconButton(
modifier = modifier
.clip(CircleShape)
.background(color = Color.Transparent, shape = CircleShape),
PinKeypadButton(
modifier = modifier,
onClick = onClick,
) {
Icon(