Skip to content

Commit

Permalink
feat: add setting screen elements [#28]
Browse files Browse the repository at this point in the history
  • Loading branch information
@fetiu
fetiu committed Oct 11, 2024
1 parent eeb5682 commit fa8fcc3
Showing 1 changed file with 129 additions and 86 deletions.
215 changes: 129 additions & 86 deletions presenter/src/main/java/com/foke/together/presenter/screen/SettingScreen.kt
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand All @@ -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)
Expand All @@ -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
},
Expand All @@ -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")
}
}
}
}
}
Expand Down

0 comments on commit fa8fcc3

Please sign in to comment.