Skip to content

Commit fa8fcc3

Browse files
fetiufetiu
committed
feat: add setting screen elements [#28]
1 parent eeb5682 commit fa8fcc3

File tree

1 file changed

+129
-86
lines changed

1 file changed

+129
-86
lines changed

‎presenter/src/main/java/com/foke/together/presenter/screen/SettingScreen.kt‎

Lines changed: 129 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
package com.foke.together.presenter.screen
22

33
import androidx.compose.foundation.BorderStroke
4+
import androidx.compose.foundation.layout.Column
45
import androidx.compose.foundation.layout.Row
6+
import androidx.compose.foundation.layout.Spacer
57
import androidx.compose.foundation.layout.fillMaxSize
6-
import androidx.compose.foundation.layout.offset
8+
import androidx.compose.foundation.layout.height
9+
import androidx.compose.foundation.layout.padding
710
import androidx.compose.foundation.layout.size
11+
import androidx.compose.foundation.layout.width
812
import androidx.compose.foundation.shape.RoundedCornerShape
913
import androidx.compose.material.icons.Icons
1014
import androidx.compose.material.icons.automirrored.filled.ArrowBack
@@ -13,10 +17,10 @@ import androidx.compose.runtime.*
1317
import androidx.compose.material3.MaterialTheme
1418
import androidx.compose.material3.Text
1519
import androidx.compose.runtime.Composable
20+
import androidx.compose.ui.Alignment
1621
import androidx.compose.ui.Modifier
1722
import androidx.compose.ui.tooling.preview.Preview
1823
import androidx.compose.ui.unit.dp
19-
import androidx.compose.ui.zIndex
2024
import androidx.constraintlayout.compose.ConstraintLayout
2125
import androidx.constraintlayout.compose.Dimension
2226
import com.foke.together.presenter.theme.FourCutTogetherTheme
@@ -41,7 +45,7 @@ fun SettingScreen(
4145
ConstraintLayout(
4246
modifier = Modifier.fillMaxSize()
4347
) {
44-
val (backKey, selectCamera, IPAdrress, IPButton) = createRefs()
48+
val (backKey, content) = createRefs()
4549

4650
val topGuideLine = createGuidelineFromTop(0.1f)
4751
val bottomGuideLine = createGuidelineFromBottom(0.1f)
@@ -51,10 +55,8 @@ fun SettingScreen(
5155
IconButton(
5256
onClick = { popBackStack() },
5357
modifier = Modifier.constrainAs(backKey) {
54-
top.linkTo(parent.top)
55-
start.linkTo(parent.start)
56-
end.linkTo(selectCamera.start)
57-
bottom.linkTo(selectCamera.top)
58+
top.linkTo(topGuideLine)
59+
start.linkTo(startGuideLine)
5860
height = Dimension.wrapContent
5961
width = Dimension.wrapContent
6062
},
@@ -66,93 +68,134 @@ fun SettingScreen(
6668
tint = MaterialTheme.colorScheme.primary
6769
)
6870
}
69-
70-
Row(
71-
modifier = Modifier.constrainAs(selectCamera){
71+
Column(
72+
modifier = Modifier.constrainAs(content) {
7273
top.linkTo(backKey.bottom)
73-
start.linkTo(parent.start)
74-
end.linkTo(parent.end)
75-
bottom.linkTo(backKey.bottom)
76-
width = Dimension.wrapContent
77-
height = Dimension.wrapContent
74+
start.linkTo(startGuideLine)
75+
end.linkTo(endGuideLine)
7876
}
77+
.padding(16.dp),
78+
horizontalAlignment = Alignment.CenterHorizontally
7979
) {
80-
val cornerRadius = 16.dp
81-
cameraTypeList.forEachIndexed { index, item ->
82-
OutlinedButton(
83-
onClick = {
84-
viewModel.setCameraSourceType(index)
85-
},
86-
modifier = when (index) {
87-
0 ->
88-
Modifier
89-
.offset(0.dp, 0.dp)
90-
.zIndex(1f)
91-
else ->
92-
Modifier
93-
.offset((-1 * index).dp, 0.dp)
94-
.zIndex(0f)
95-
},
96-
shape = when (index) {
97-
0 -> RoundedCornerShape(
98-
topStart = cornerRadius,
99-
topEnd = 0.dp,
100-
bottomStart = cornerRadius,
101-
bottomEnd = 0.dp
102-
)
103-
cameraTypeList.size - 1 -> RoundedCornerShape(
104-
topStart = 0.dp,
105-
topEnd = cornerRadius,
106-
bottomStart = 0.dp,
107-
bottomEnd = cornerRadius
108-
)
109-
else -> RoundedCornerShape(
110-
topStart = 0.dp,
111-
topEnd = 0.dp,
112-
bottomStart = 0.dp,
113-
bottomEnd = 0.dp
114-
)
115-
},
116-
border = BorderStroke(
117-
1.dp, if (cameraSelectedIndex == index) {
118-
MaterialTheme.colorScheme.primary
119-
} else {
120-
MaterialTheme.colorScheme.secondary
80+
// Camera Source Selection
81+
Row(
82+
modifier = Modifier.width(300.dp) // Make the row full width
83+
) {
84+
val cornerRadius = 16.dp
85+
cameraTypeList.forEachIndexed { index, item ->
86+
OutlinedButton(
87+
onClick = {
88+
viewModel.setCameraSourceType(index)
89+
},
90+
modifier = Modifier.weight(1f),
91+
shape = when (index) {
92+
0 -> RoundedCornerShape(
93+
topStart = cornerRadius,
94+
topEnd = 0.dp,
95+
bottomStart = cornerRadius,
96+
bottomEnd = 0.dp
97+
)
98+
99+
cameraTypeList.size - 1 -> RoundedCornerShape(
100+
topStart = 0.dp,
101+
topEnd = cornerRadius,
102+
bottomStart = 0.dp,
103+
bottomEnd = cornerRadius
104+
)
105+
106+
else -> RoundedCornerShape(0.dp)
107+
},
108+
border = BorderStroke(
109+
1.dp, if (cameraSelectedIndex == index) {
110+
MaterialTheme.colorScheme.primary
111+
} else {
112+
MaterialTheme.colorScheme.secondary
113+
}
114+
),
115+
colors = if (cameraSelectedIndex == index) { // selected
116+
ButtonDefaults.outlinedButtonColors(
117+
containerColor = MaterialTheme.colorScheme.primaryContainer,
118+
contentColor = MaterialTheme.colorScheme.primary
119+
)
120+
} else { // not selected
121+
ButtonDefaults.outlinedButtonColors(
122+
containerColor = MaterialTheme.colorScheme.onPrimary,
123+
contentColor = MaterialTheme.colorScheme.primary
124+
)
121125
}
122-
),
123-
colors = if (cameraSelectedIndex == index) { // selected
124-
ButtonDefaults.outlinedButtonColors(
125-
containerColor = MaterialTheme.colorScheme.primaryContainer,
126-
contentColor = MaterialTheme.colorScheme.primary
127-
)
128-
} else { // not selected
129-
ButtonDefaults.outlinedButtonColors(
130-
containerColor = MaterialTheme.colorScheme.onPrimary,
131-
contentColor = MaterialTheme.colorScheme.primary
132-
)
126+
) {
127+
Text(item)
133128
}
134-
) {
135-
Text(item)
136129
}
137130
}
138-
}
139131

140-
TextField(
141-
modifier = Modifier.constrainAs(IPAdrress){
142-
top.linkTo(selectCamera.bottom)
143-
start.linkTo(parent.start)
144-
end.linkTo(IPButton.start)
145-
bottom.linkTo(bottomGuideLine)
146-
width = Dimension.wrapContent
147-
height = Dimension.wrapContent
148-
},
149-
value = viewModel.cameraIPAddressState,
150-
onValueChange = {
151-
viewModel.cameraIPAddressState = it
152-
viewModel.setCameraIPAddress(it)
153-
},
154-
label = { Text(text = "IP Address") },
155-
)
132+
Spacer(modifier = Modifier.height(16.dp))
133+
134+
TextField(
135+
modifier = Modifier.width(300.dp), // Make the TextField full width
136+
value = viewModel.cameraIPAddressState,
137+
onValueChange = {
138+
viewModel.cameraIPAddressState = it
139+
viewModel.setCameraIPAddress(it)
140+
},
141+
label = { Text(text = "Camera Server URL") },
142+
)
143+
144+
HorizontalDivider(
145+
modifier = Modifier.padding(vertical = 16.dp).width(300.dp),
146+
color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f),
147+
thickness = 1.dp
148+
)
149+
150+
Column(modifier = Modifier.width(300.dp)) {
151+
Text(text = "Account Info", style = MaterialTheme.typography.bodySmall)
152+
Text(text = "user", style = MaterialTheme.typography.bodyLarge)
153+
}
154+
155+
Spacer(modifier = Modifier.height(16.dp))
156+
157+
Column(modifier = Modifier.width(300.dp)) {
158+
Text(text = "Bearer Token", style = MaterialTheme.typography.bodySmall)
159+
Text(text = "YourBearerTokenValueHere", style = MaterialTheme.typography.bodyLarge)
160+
}
161+
162+
HorizontalDivider(
163+
modifier = Modifier.padding(vertical = 16.dp).width(300.dp),
164+
color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f),
165+
thickness = 1.dp
166+
)
167+
168+
TextField(
169+
modifier = Modifier.width(300.dp),
170+
value = "",
171+
onValueChange = { },
172+
label = { Text(text = "Email") }
173+
)
174+
175+
Spacer(modifier = Modifier.height(16.dp))
176+
177+
TextField(
178+
modifier = Modifier.width(300.dp),
179+
value = "",
180+
onValueChange = { },
181+
label = { Text(text = "Password") }
182+
)
183+
184+
TextButton(
185+
onClick = { /* Handle login action */ },
186+
modifier = Modifier
187+
.padding(vertical = 16.dp) // Add some padding
188+
.width(300.dp)
189+
.height(48.dp), // Optional: Set a fixed height for the button
190+
shape = RoundedCornerShape(16.dp), // Slightly rounded corners
191+
colors = ButtonDefaults.textButtonColors(
192+
containerColor = MaterialTheme.colorScheme.primary, // Button background color
193+
contentColor = MaterialTheme.colorScheme.onPrimary // Text color
194+
)
195+
) {
196+
Text(text = "Log In")
197+
}
198+
}
156199
}
157200
}
158201
}

0 commit comments

Comments
 (0)