diff --git a/presenter/src/main/java/com/foke/together/presenter/screen/SettingScreen.kt b/presenter/src/main/java/com/foke/together/presenter/screen/SettingScreen.kt index 9e50e9a..9292997 100644 --- a/presenter/src/main/java/com/foke/together/presenter/screen/SettingScreen.kt +++ b/presenter/src/main/java/com/foke/together/presenter/screen/SettingScreen.kt @@ -1,10 +1,14 @@ package com.foke.together.presenter.screen import androidx.compose.foundation.BorderStroke +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.offset +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.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack @@ -13,10 +17,10 @@ import androidx.compose.runtime.* import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import androidx.compose.ui.zIndex import androidx.constraintlayout.compose.ConstraintLayout import androidx.constraintlayout.compose.Dimension import com.foke.together.presenter.theme.FourCutTogetherTheme @@ -41,7 +45,7 @@ fun SettingScreen( ConstraintLayout( modifier = Modifier.fillMaxSize() ) { - val (backKey, selectCamera, IPAdrress, IPButton) = createRefs() + val (backKey, content) = createRefs() val topGuideLine = createGuidelineFromTop(0.1f) val bottomGuideLine = createGuidelineFromBottom(0.1f) @@ -51,10 +55,8 @@ fun SettingScreen( IconButton( onClick = { popBackStack() }, modifier = Modifier.constrainAs(backKey) { - top.linkTo(parent.top) - start.linkTo(parent.start) - end.linkTo(selectCamera.start) - bottom.linkTo(selectCamera.top) + top.linkTo(topGuideLine) + start.linkTo(startGuideLine) height = Dimension.wrapContent width = Dimension.wrapContent }, @@ -66,93 +68,134 @@ fun SettingScreen( tint = MaterialTheme.colorScheme.primary ) } - - Row( - modifier = Modifier.constrainAs(selectCamera){ + Column( + modifier = Modifier.constrainAs(content) { top.linkTo(backKey.bottom) - start.linkTo(parent.start) - end.linkTo(parent.end) - bottom.linkTo(backKey.bottom) - width = Dimension.wrapContent - height = Dimension.wrapContent + start.linkTo(startGuideLine) + end.linkTo(endGuideLine) } + .padding(16.dp), + horizontalAlignment = Alignment.CenterHorizontally ) { - val cornerRadius = 16.dp - cameraTypeList.forEachIndexed { index, item -> - OutlinedButton( - onClick = { - viewModel.setCameraSourceType(index) - }, - modifier = when (index) { - 0 -> - Modifier - .offset(0.dp, 0.dp) - .zIndex(1f) - else -> - Modifier - .offset((-1 * index).dp, 0.dp) - .zIndex(0f) - }, - shape = when (index) { - 0 -> RoundedCornerShape( - topStart = cornerRadius, - topEnd = 0.dp, - bottomStart = cornerRadius, - bottomEnd = 0.dp - ) - cameraTypeList.size - 1 -> RoundedCornerShape( - topStart = 0.dp, - topEnd = cornerRadius, - bottomStart = 0.dp, - bottomEnd = cornerRadius - ) - else -> RoundedCornerShape( - topStart = 0.dp, - topEnd = 0.dp, - bottomStart = 0.dp, - bottomEnd = 0.dp - ) - }, - border = BorderStroke( - 1.dp, if (cameraSelectedIndex == index) { - MaterialTheme.colorScheme.primary - } else { - MaterialTheme.colorScheme.secondary + // Camera Source Selection + Row( + modifier = Modifier.width(300.dp) // Make the row full width + ) { + val cornerRadius = 16.dp + cameraTypeList.forEachIndexed { index, item -> + OutlinedButton( + onClick = { + viewModel.setCameraSourceType(index) + }, + modifier = Modifier.weight(1f), + shape = when (index) { + 0 -> RoundedCornerShape( + topStart = cornerRadius, + topEnd = 0.dp, + bottomStart = cornerRadius, + bottomEnd = 0.dp + ) + + cameraTypeList.size - 1 -> RoundedCornerShape( + topStart = 0.dp, + topEnd = cornerRadius, + bottomStart = 0.dp, + bottomEnd = cornerRadius + ) + + else -> RoundedCornerShape(0.dp) + }, + border = BorderStroke( + 1.dp, if (cameraSelectedIndex == index) { + MaterialTheme.colorScheme.primary + } else { + MaterialTheme.colorScheme.secondary + } + ), + colors = if (cameraSelectedIndex == index) { // selected + ButtonDefaults.outlinedButtonColors( + containerColor = MaterialTheme.colorScheme.primaryContainer, + contentColor = MaterialTheme.colorScheme.primary + ) + } else { // not selected + ButtonDefaults.outlinedButtonColors( + containerColor = MaterialTheme.colorScheme.onPrimary, + contentColor = MaterialTheme.colorScheme.primary + ) } - ), - colors = if (cameraSelectedIndex == index) { // selected - ButtonDefaults.outlinedButtonColors( - containerColor = MaterialTheme.colorScheme.primaryContainer, - contentColor = MaterialTheme.colorScheme.primary - ) - } else { // not selected - ButtonDefaults.outlinedButtonColors( - containerColor = MaterialTheme.colorScheme.onPrimary, - contentColor = MaterialTheme.colorScheme.primary - ) + ) { + Text(item) } - ) { - Text(item) } } - } - TextField( - modifier = Modifier.constrainAs(IPAdrress){ - top.linkTo(selectCamera.bottom) - start.linkTo(parent.start) - end.linkTo(IPButton.start) - bottom.linkTo(bottomGuideLine) - width = Dimension.wrapContent - height = Dimension.wrapContent - }, - value = viewModel.cameraIPAddressState, - onValueChange = { - viewModel.cameraIPAddressState = it - viewModel.setCameraIPAddress(it) - }, - label = { Text(text = "IP Address") }, - ) + Spacer(modifier = Modifier.height(16.dp)) + + TextField( + modifier = Modifier.width(300.dp), // Make the TextField full width + value = viewModel.cameraIPAddressState, + onValueChange = { + viewModel.cameraIPAddressState = it + viewModel.setCameraIPAddress(it) + }, + label = { Text(text = "Camera Server URL") }, + ) + + HorizontalDivider( + modifier = Modifier.padding(vertical = 16.dp).width(300.dp), + color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f), + thickness = 1.dp + ) + + Column(modifier = Modifier.width(300.dp)) { + Text(text = "Account Info", style = MaterialTheme.typography.bodySmall) + Text(text = "user", style = MaterialTheme.typography.bodyLarge) + } + + Spacer(modifier = Modifier.height(16.dp)) + + Column(modifier = Modifier.width(300.dp)) { + Text(text = "Bearer Token", style = MaterialTheme.typography.bodySmall) + Text(text = "YourBearerTokenValueHere", style = MaterialTheme.typography.bodyLarge) + } + + HorizontalDivider( + modifier = Modifier.padding(vertical = 16.dp).width(300.dp), + color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f), + thickness = 1.dp + ) + + TextField( + modifier = Modifier.width(300.dp), + value = "", + onValueChange = { }, + label = { Text(text = "Email") } + ) + + Spacer(modifier = Modifier.height(16.dp)) + + TextField( + modifier = Modifier.width(300.dp), + value = "", + onValueChange = { }, + label = { Text(text = "Password") } + ) + + TextButton( + onClick = { /* Handle login action */ }, + modifier = Modifier + .padding(vertical = 16.dp) // Add some padding + .width(300.dp) + .height(48.dp), // Optional: Set a fixed height for the button + shape = RoundedCornerShape(16.dp), // Slightly rounded corners + colors = ButtonDefaults.textButtonColors( + containerColor = MaterialTheme.colorScheme.primary, // Button background color + contentColor = MaterialTheme.colorScheme.onPrimary // Text color + ) + ) { + Text(text = "Log In") + } + } } } }