Skip to content

Commit a077fd7

Browse files
WavesonicsWavesonics
committed
New camera controls layout
1 parent 53e4df4 commit a077fd7

File tree

2 files changed

+90
-99
lines changed

2 files changed

+90
-99
lines changed

‎app/src/main/kotlin/com/darkrockstudios/app/securecamera/camera/CameraControls.kt‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -190,21 +190,26 @@ fun CameraControls(
190190
)
191191
}
192192

193-
TopCameraControlsBar(
194-
isFlashOn = isFlashOn,
195-
isFaceTrackingWorker = cameraController.faceTracking == true,
196-
isVisible = isTopControlsVisible && !isRecording,
197-
onFlashToggle = {
198-
isFlashOn = !isFlashOn
199-
},
200-
onFaceTrackingToggle = { enabled ->
201-
cameraController.setEnableFaceTracking(enabled)
202-
},
203-
onLensToggle = { cameraController.toggleLens() },
204-
onClose = { isTopControlsVisible = false },
205-
paddingValues = paddingValues,
206-
iconRotation = iconRotation,
207-
)
193+
Box(
194+
modifier = Modifier
195+
.align(Alignment.TopEnd)
196+
) {
197+
TopCameraControlsBar(
198+
isFlashOn = isFlashOn,
199+
isFaceTrackingWorker = cameraController.faceTracking == true,
200+
isVisible = isTopControlsVisible && !isRecording,
201+
onFlashToggle = {
202+
isFlashOn = !isFlashOn
203+
},
204+
onFaceTrackingToggle = { enabled ->
205+
cameraController.setEnableFaceTracking(enabled)
206+
},
207+
onLensToggle = { cameraController.toggleLens() },
208+
onClose = { isTopControlsVisible = false },
209+
paddingValues = paddingValues,
210+
iconRotation = iconRotation,
211+
)
212+
}
208213

209214
BottomCameraControls(
210215
modifier = Modifier

‎app/src/main/kotlin/com/darkrockstudios/app/securecamera/camera/TopCameraControlsBar.kt‎

Lines changed: 70 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
package com.darkrockstudios.app.securecamera.camera
22

3-
import androidx.annotation.StringRes
43
import androidx.compose.animation.*
54
import androidx.compose.animation.core.tween
6-
import androidx.compose.foundation.background
75
import androidx.compose.foundation.layout.*
8-
import androidx.compose.foundation.shape.CircleShape
96
import androidx.compose.foundation.shape.RoundedCornerShape
107
import androidx.compose.material.icons.Icons
118
import androidx.compose.material.icons.filled.Cameraswitch
@@ -49,78 +46,52 @@ fun TopCameraControlsBar(
4946
) {
5047
Surface(
5148
modifier = Modifier
52-
.fillMaxWidth()
5349
.padding(
54-
start = 16.dp,
5550
end = 16.dp,
5651
top = paddingValues?.calculateTopPadding()?.plus(16.dp) ?: 16.dp,
57-
bottom = 16.dp
5852
),
5953
color = Color.Black.copy(alpha = 0.6f),
6054
shape = RoundedCornerShape(16.dp)
6155
) {
6256
Column(
63-
modifier = Modifier
64-
.fillMaxWidth()
65-
.padding(16.dp),
57+
modifier = Modifier.padding(12.dp),
58+
horizontalAlignment = Alignment.CenterHorizontally,
59+
verticalArrangement = Arrangement.spacedBy(8.dp),
6660
) {
67-
Row(
68-
modifier = Modifier.fillMaxWidth(),
69-
horizontalArrangement = Arrangement.SpaceBetween,
70-
verticalAlignment = Alignment.CenterVertically
71-
) {
72-
FilledTonalButton(
73-
onClick = onLensToggle,
74-
modifier = Modifier
75-
.background(MaterialTheme.colorScheme.primary, CircleShape),
76-
colors = ButtonDefaults.filledTonalButtonColors(
77-
containerColor = MaterialTheme.colorScheme.primary
78-
)
79-
) {
80-
Icon(
81-
imageVector = Icons.Filled.Cameraswitch,
82-
contentDescription = stringResource(id = R.string.camera_toggle_content_description),
83-
tint = MaterialTheme.colorScheme.onPrimary,
84-
modifier = Modifier.rotate(iconRotation),
85-
)
86-
}
61+
CompactControlButton(
62+
onClick = onClose,
63+
icon = Icons.Filled.Close,
64+
contentDescription = stringResource(id = R.string.camera_close_controls_content_description),
65+
iconRotation = iconRotation,
66+
)
8767

88-
FilledTonalButton(
89-
onClick = onClose,
90-
modifier = Modifier
91-
.background(MaterialTheme.colorScheme.primary, CircleShape),
92-
colors = ButtonDefaults.filledTonalButtonColors(
93-
containerColor = MaterialTheme.colorScheme.primary
94-
)
95-
) {
96-
Icon(
97-
imageVector = Icons.Filled.Close,
98-
contentDescription = stringResource(id = R.string.camera_close_controls_content_description),
99-
tint = MaterialTheme.colorScheme.onPrimary,
100-
modifier = Modifier.rotate(iconRotation),
101-
)
102-
}
103-
}
68+
CompactControlButton(
69+
onClick = onLensToggle,
70+
icon = Icons.Filled.Cameraswitch,
71+
contentDescription = stringResource(id = R.string.camera_toggle_content_description),
72+
iconRotation = iconRotation,
73+
)
10474

105-
Spacer(Modifier.height(16.dp))
75+
HorizontalDivider(
76+
modifier = Modifier.width(40.dp),
77+
color = Color.White.copy(alpha = 0.3f),
78+
)
10679

107-
CameraControlSwitch(
108-
icon = if (isFlashOn) Flashlight else FlashlightOff,
109-
label = R.string.camera_flash_text,
80+
CompactToggleButton(
11081
checked = isFlashOn,
11182
onCheckedChange = onFlashToggle,
112-
testTage = "flash-switch",
83+
icon = if (isFlashOn) Flashlight else FlashlightOff,
84+
contentDescription = stringResource(id = R.string.camera_flash_text),
85+
testTag = "flash-switch",
11386
iconRotation = iconRotation,
11487
)
11588

116-
Spacer(Modifier.height(16.dp))
117-
118-
CameraControlSwitch(
119-
icon = if (isFaceTrackingWorker) FaceTrackingOn else FaceTrackingOff,
120-
label = R.string.camera_face_tracking,
89+
CompactToggleButton(
12190
checked = isFaceTrackingWorker,
12291
onCheckedChange = onFaceTrackingToggle,
123-
testTage = "face-switch",
92+
icon = if (isFaceTrackingWorker) FaceTrackingOn else FaceTrackingOff,
93+
contentDescription = stringResource(id = R.string.camera_face_tracking),
94+
testTag = "face-switch",
12495
iconRotation = iconRotation,
12596
)
12697
}
@@ -129,44 +100,59 @@ fun TopCameraControlsBar(
129100
}
130101

131102
@Composable
132-
private fun CameraControlSwitch(
103+
private fun CompactControlButton(
104+
onClick: () -> Unit,
133105
icon: ImageVector,
134-
@StringRes label: Int,
135-
checked: Boolean,
136-
testTage: String,
137-
onCheckedChange: (Boolean) -> Unit,
138-
iconRotation: Float = 0f,
106+
contentDescription: String,
107+
iconRotation: Float,
139108
) {
140-
Row(
141-
verticalAlignment = Alignment.CenterVertically,
142-
modifier = Modifier.padding(horizontal = 8.dp)
109+
FilledTonalButton(
110+
onClick = onClick,
111+
modifier = Modifier.size(48.dp),
112+
contentPadding = PaddingValues(0.dp),
113+
colors = ButtonDefaults.filledTonalButtonColors(
114+
containerColor = MaterialTheme.colorScheme.primary
115+
)
143116
) {
144117
Icon(
145118
imageVector = icon,
146-
contentDescription = null,
147-
tint = Color.White,
119+
contentDescription = contentDescription,
120+
tint = MaterialTheme.colorScheme.onPrimary,
148121
modifier = Modifier
149122
.size(24.dp)
150123
.rotate(iconRotation),
151124
)
152-
Spacer(modifier = Modifier.width(8.dp))
153-
154-
Switch(
155-
modifier = Modifier.testTag(testTage),
156-
checked = checked,
157-
onCheckedChange = onCheckedChange,
158-
colors = SwitchDefaults.colors(
159-
checkedThumbColor = MaterialTheme.colorScheme.primary,
160-
checkedTrackColor = MaterialTheme.colorScheme.primaryContainer
161-
)
162-
)
163-
164-
Spacer(modifier = Modifier.width(8.dp))
125+
}
126+
}
165127

166-
Text(
167-
text = stringResource(id = label),
168-
color = Color.White,
169-
style = MaterialTheme.typography.bodyMedium
128+
@Composable
129+
private fun CompactToggleButton(
130+
checked: Boolean,
131+
onCheckedChange: (Boolean) -> Unit,
132+
icon: ImageVector,
133+
contentDescription: String,
134+
testTag: String,
135+
iconRotation: Float,
136+
) {
137+
FilledIconToggleButton(
138+
checked = checked,
139+
onCheckedChange = onCheckedChange,
140+
modifier = Modifier
141+
.size(48.dp)
142+
.testTag(testTag),
143+
colors = IconButtonDefaults.filledIconToggleButtonColors(
144+
containerColor = Color.White.copy(alpha = 0.2f),
145+
contentColor = Color.White,
146+
checkedContainerColor = MaterialTheme.colorScheme.primaryContainer,
147+
checkedContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
148+
),
149+
) {
150+
Icon(
151+
imageVector = icon,
152+
contentDescription = contentDescription,
153+
modifier = Modifier
154+
.size(24.dp)
155+
.rotate(iconRotation),
170156
)
171157
}
172158
}

0 commit comments

Comments
 (0)