275 lines
13 KiB
Kotlin
275 lines
13 KiB
Kotlin
package su.reya.coop.screens
|
|
|
|
import android.net.Uri
|
|
import androidx.activity.compose.rememberLauncherForActivityResult
|
|
import androidx.activity.result.contract.ActivityResultContracts
|
|
import androidx.compose.foundation.clickable
|
|
import androidx.compose.foundation.layout.Arrangement
|
|
import androidx.compose.foundation.layout.Box
|
|
import androidx.compose.foundation.layout.Column
|
|
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.imePadding
|
|
import androidx.compose.foundation.layout.padding
|
|
import androidx.compose.foundation.layout.size
|
|
import androidx.compose.foundation.rememberScrollState
|
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
import androidx.compose.foundation.text.BasicTextField
|
|
import androidx.compose.foundation.text.KeyboardActions
|
|
import androidx.compose.foundation.text.KeyboardOptions
|
|
import androidx.compose.foundation.verticalScroll
|
|
import androidx.compose.material3.Button
|
|
import androidx.compose.material3.ButtonDefaults
|
|
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
|
|
import androidx.compose.material3.Icon
|
|
import androidx.compose.material3.IconButton
|
|
import androidx.compose.material3.LoadingIndicator
|
|
import androidx.compose.material3.MaterialShapes
|
|
import androidx.compose.material3.MaterialTheme
|
|
import androidx.compose.material3.Scaffold
|
|
import androidx.compose.material3.SnackbarHost
|
|
import androidx.compose.material3.Surface
|
|
import androidx.compose.material3.Text
|
|
import androidx.compose.material3.TopAppBar
|
|
import androidx.compose.material3.TopAppBarDefaults
|
|
import androidx.compose.material3.toShape
|
|
import androidx.compose.runtime.Composable
|
|
import androidx.compose.runtime.getValue
|
|
import androidx.compose.runtime.mutableStateOf
|
|
import androidx.compose.runtime.remember
|
|
import androidx.compose.runtime.setValue
|
|
import androidx.compose.ui.Alignment
|
|
import androidx.compose.ui.Modifier
|
|
import androidx.compose.ui.draw.clip
|
|
import androidx.compose.ui.graphics.SolidColor
|
|
import androidx.compose.ui.layout.ContentScale
|
|
import androidx.compose.ui.platform.LocalFocusManager
|
|
import androidx.compose.ui.text.font.FontWeight
|
|
import androidx.compose.ui.text.input.ImeAction
|
|
import androidx.compose.ui.unit.dp
|
|
import coil3.compose.AsyncImage
|
|
import coop.composeapp.generated.resources.Res
|
|
import coop.composeapp.generated.resources.ic_arrow_back
|
|
import coop.composeapp.generated.resources.ic_plus
|
|
import org.jetbrains.compose.resources.painterResource
|
|
import su.reya.coop.LocalSnackbarHostState
|
|
|
|
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
|
|
@Composable
|
|
fun NewIdentityScreen(
|
|
isLoading: Boolean,
|
|
onBack: () -> Unit,
|
|
onSave: (name: String, bio: String?, picture: Uri?) -> Unit
|
|
) {
|
|
val snackbarHostState = LocalSnackbarHostState.current
|
|
val focusManager = LocalFocusManager.current
|
|
|
|
var name by remember { mutableStateOf("") }
|
|
var bio by remember { mutableStateOf("") }
|
|
var picture by remember { mutableStateOf<Uri?>(null) }
|
|
|
|
val launcher = rememberLauncherForActivityResult(
|
|
contract = ActivityResultContracts.GetContent()
|
|
) { uri: Uri? ->
|
|
picture = uri
|
|
}
|
|
|
|
Scaffold(
|
|
containerColor = MaterialTheme.colorScheme.surfaceContainer,
|
|
snackbarHost = { SnackbarHost(snackbarHostState) },
|
|
topBar = {
|
|
TopAppBar(
|
|
title = {
|
|
Text(
|
|
text = "Create a new identity",
|
|
style = MaterialTheme.typography.titleMediumEmphasized
|
|
)
|
|
},
|
|
navigationIcon = {
|
|
IconButton(onClick = onBack) {
|
|
Icon(
|
|
painter = painterResource(Res.drawable.ic_arrow_back),
|
|
contentDescription = "Back"
|
|
)
|
|
}
|
|
},
|
|
colors = TopAppBarDefaults.topAppBarColors(
|
|
containerColor = MaterialTheme.colorScheme.surfaceContainer,
|
|
)
|
|
)
|
|
},
|
|
content = { innerPadding ->
|
|
Column(
|
|
modifier = Modifier
|
|
.fillMaxSize()
|
|
.padding(top = innerPadding.calculateTopPadding())
|
|
.imePadding(),
|
|
) {
|
|
Box(
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.weight(1f),
|
|
contentAlignment = Alignment.Center
|
|
) {
|
|
Box(
|
|
modifier = Modifier
|
|
.size(120.dp)
|
|
.clip(MaterialShapes.Pentagon.toShape())
|
|
.clickable { launcher.launch("image/*") },
|
|
contentAlignment = Alignment.Center
|
|
) {
|
|
if (picture != null) {
|
|
AsyncImage(
|
|
model = picture,
|
|
contentDescription = "Profile picture",
|
|
modifier = Modifier.fillMaxSize(),
|
|
contentScale = ContentScale.Crop
|
|
)
|
|
} else {
|
|
Surface(
|
|
color = MaterialTheme.colorScheme.surfaceVariant,
|
|
modifier = Modifier.fillMaxSize()
|
|
|
|
) {
|
|
Box(contentAlignment = Alignment.Center) {
|
|
Icon(
|
|
painter = painterResource(Res.drawable.ic_plus),
|
|
contentDescription = "Pick avatar",
|
|
modifier = Modifier.size(48.dp),
|
|
tint = MaterialTheme.colorScheme.onSurfaceVariant
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
Surface(
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.weight(1f, fill = true),
|
|
color = MaterialTheme.colorScheme.surface,
|
|
shape = RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp),
|
|
) {
|
|
Column(
|
|
modifier = Modifier
|
|
.fillMaxSize()
|
|
.padding(24.dp)
|
|
) {
|
|
Column(
|
|
modifier = Modifier
|
|
.weight(1f)
|
|
.verticalScroll(rememberScrollState()),
|
|
verticalArrangement = Arrangement.spacedBy(16.dp)
|
|
) {
|
|
Text(
|
|
text = "What others should call you?",
|
|
style = MaterialTheme.typography.titleLargeEmphasized.copy(
|
|
fontWeight = FontWeight.SemiBold,
|
|
),
|
|
)
|
|
BasicTextField(
|
|
value = name,
|
|
onValueChange = { name = it },
|
|
modifier = Modifier.fillMaxWidth(),
|
|
singleLine = true,
|
|
keyboardOptions = KeyboardOptions(
|
|
imeAction = ImeAction.Done,
|
|
),
|
|
keyboardActions = KeyboardActions(
|
|
onDone = {
|
|
focusManager.clearFocus()
|
|
}
|
|
),
|
|
textStyle = MaterialTheme.typography.headlineLargeEmphasized.copy(
|
|
color = MaterialTheme.colorScheme.primaryFixed,
|
|
fontWeight = FontWeight.SemiBold,
|
|
),
|
|
cursorBrush = SolidColor(MaterialTheme.colorScheme.secondary),
|
|
decorationBox = { innerTextField ->
|
|
Box(contentAlignment = Alignment.CenterStart) {
|
|
if (name.isEmpty()) {
|
|
Text(
|
|
"Alice",
|
|
style = MaterialTheme.typography.headlineLargeEmphasized.copy(
|
|
fontWeight = FontWeight.SemiBold,
|
|
),
|
|
color = MaterialTheme.colorScheme.onSurfaceVariant.copy(
|
|
alpha = 0.5f
|
|
)
|
|
)
|
|
}
|
|
innerTextField()
|
|
}
|
|
}
|
|
)
|
|
Spacer(modifier = Modifier.size(8.dp))
|
|
Text(
|
|
text = "Your bio (optional)",
|
|
style = MaterialTheme.typography.titleLargeEmphasized.copy(
|
|
fontWeight = FontWeight.SemiBold,
|
|
),
|
|
)
|
|
BasicTextField(
|
|
value = bio,
|
|
onValueChange = { bio = it },
|
|
modifier = Modifier.fillMaxWidth(),
|
|
maxLines = 3,
|
|
keyboardOptions = KeyboardOptions(
|
|
imeAction = ImeAction.Done,
|
|
),
|
|
keyboardActions = KeyboardActions(
|
|
onDone = {
|
|
focusManager.clearFocus()
|
|
}
|
|
),
|
|
textStyle = MaterialTheme.typography.bodyLarge.copy(
|
|
color = MaterialTheme.colorScheme.primaryFixed,
|
|
fontWeight = FontWeight.SemiBold,
|
|
),
|
|
cursorBrush = SolidColor(MaterialTheme.colorScheme.secondary),
|
|
decorationBox = { innerTextField ->
|
|
Box(contentAlignment = Alignment.CenterStart) {
|
|
if (bio.isEmpty()) {
|
|
Text(
|
|
"I love cat",
|
|
style = MaterialTheme.typography.headlineLargeEmphasized.copy(
|
|
fontWeight = FontWeight.SemiBold,
|
|
),
|
|
color = MaterialTheme.colorScheme.onSurfaceVariant.copy(
|
|
alpha = 0.5f
|
|
)
|
|
)
|
|
}
|
|
innerTextField()
|
|
}
|
|
}
|
|
)
|
|
}
|
|
Spacer(modifier = Modifier.size(16.dp))
|
|
Button(
|
|
onClick = {
|
|
onSave(name, bio, picture)
|
|
},
|
|
modifier = Modifier
|
|
.fillMaxWidth()
|
|
.height(ButtonDefaults.MediumContainerHeight),
|
|
enabled = name.isNotBlank() && !isLoading,
|
|
) {
|
|
if (isLoading) {
|
|
LoadingIndicator()
|
|
} else {
|
|
Text(
|
|
text = "Continue",
|
|
style = MaterialTheme.typography.titleMediumEmphasized,
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|