Skip to content

Commit b905d3c

Browse files
UmerCodezUmerCodez
committed
feat(ui): enhance SensorItem
1 parent f357ed7 commit b905d3c

1 file changed

Lines changed: 106 additions & 45 deletions

File tree

  • ui/src/main/java/com/github/umercodez/sensorspot/ui/screens/sensors/components

‎ui/src/main/java/com/github/umercodez/sensorspot/ui/screens/sensors/components/SensorItem.kt‎

Lines changed: 106 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,23 @@
1919
package com.github.umercodez.sensorspot.ui.screens.sensors.components
2020

2121
import androidx.compose.animation.AnimatedVisibility
22+
import androidx.compose.animation.expandVertically
23+
import androidx.compose.animation.fadeIn
24+
import androidx.compose.animation.fadeOut
25+
import androidx.compose.animation.shrinkVertically
2226
import androidx.compose.foundation.background
2327
import androidx.compose.foundation.clickable
28+
import androidx.compose.foundation.layout.Arrangement
2429
import androidx.compose.foundation.layout.Column
30+
import androidx.compose.foundation.layout.Row
2531
import androidx.compose.foundation.layout.fillMaxWidth
2632
import androidx.compose.foundation.layout.padding
2733
import androidx.compose.foundation.shape.RoundedCornerShape
2834
import androidx.compose.foundation.text.BasicText
2935
import androidx.compose.foundation.text.TextAutoSize
36+
import androidx.compose.material3.Card
37+
import androidx.compose.material3.CardDefaults
38+
import androidx.compose.material3.HorizontalDivider
3039
import androidx.compose.material3.ListItem
3140
import androidx.compose.material3.ListItemDefaults
3241
import androidx.compose.material3.MaterialTheme
@@ -41,6 +50,10 @@ import androidx.compose.runtime.setValue
4150
import androidx.compose.ui.Alignment
4251
import androidx.compose.ui.Modifier
4352
import androidx.compose.ui.draw.clip
53+
import androidx.compose.ui.graphics.Color
54+
import androidx.compose.ui.graphics.ColorProducer
55+
import androidx.compose.ui.text.font.FontWeight
56+
import androidx.compose.ui.text.style.TextAlign
4457
import androidx.compose.ui.text.style.TextOverflow
4558
import androidx.compose.ui.tooling.preview.Preview
4659
import androidx.compose.ui.unit.dp
@@ -59,64 +72,112 @@ fun SensorItem(
5972
onCheckedChange: (Boolean) -> Unit
6073
) {
6174
var showDetails by remember { mutableStateOf(false) }
62-
Column(
75+
76+
Card(
6377
modifier = modifier
6478
.fillMaxWidth()
65-
.padding(5.dp)
66-
.clip(RoundedCornerShape(16.dp))
67-
.clickable { showDetails = !showDetails }
79+
.padding(horizontal = 10.dp, vertical = 5.dp),
80+
shape = RoundedCornerShape(16.dp),
81+
elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
82+
colors = CardDefaults.cardColors(
83+
containerColor = MaterialTheme.colorScheme.surfaceContainer
84+
)
6885
) {
69-
ListItem(
70-
headlineContent = { Text(text = sensor.name) },
71-
supportingContent = {
72-
val subText = if (dedicatedTopics) {
73-
"topic = ${mqttTopic}/${ if (sensor.stringType.contains(".")) sensor.stringType.split('.').last() else sensor.stringType}"
74-
} else {
75-
"type = ${sensor.stringType}"
76-
}
77-
BasicText(
78-
text = subText,
79-
style = MaterialTheme.typography.bodyLarge.copy(color = MaterialTheme.colorScheme.onSurface),
80-
overflow = TextOverflow.Ellipsis,
81-
maxLines = 1,
82-
autoSize = TextAutoSize.StepBased(
83-
minFontSize = 8.sp,
84-
maxFontSize = 12.sp,
86+
Column(
87+
modifier = Modifier
88+
.fillMaxWidth()
89+
.clickable { showDetails = !showDetails }
90+
) {
91+
ListItem(
92+
headlineContent = {
93+
Text(
94+
text = sensor.name,
95+
style = MaterialTheme.typography.titleMedium,
96+
fontWeight = FontWeight.SemiBold
8597
)
98+
},
99+
supportingContent = {
100+
val subText = if (dedicatedTopics) {
101+
"topic = ${mqttTopic}/${if (sensor.stringType.contains(".")) sensor.stringType.split('.').last() else sensor.stringType}"
102+
} else {
103+
"type = ${sensor.stringType}"
104+
}
105+
BasicText(
106+
text = subText,
107+
style = MaterialTheme.typography.bodyLarge,
108+
overflow = TextOverflow.Ellipsis,
109+
maxLines = 1,
110+
autoSize = TextAutoSize.StepBased(
111+
minFontSize = 8.sp,
112+
maxFontSize = 12.sp,
113+
)
114+
)
115+
},
116+
trailingContent = {
117+
Switch(
118+
checked = checked,
119+
onCheckedChange = onCheckedChange
120+
)
121+
},
122+
colors = ListItemDefaults.colors(
123+
containerColor = Color.Transparent
86124
)
87-
},
88-
trailingContent = {
89-
Switch(
90-
checked = checked,
91-
onCheckedChange = onCheckedChange
92-
)
93-
},
94-
colors = ListItemDefaults.colors(
95-
containerColor = MaterialTheme.colorScheme.surfaceContainer
96125
)
97-
)
98-
AnimatedVisibility(showDetails) {
99-
Column(
100-
modifier = Modifier
101-
.background(MaterialTheme.colorScheme.surfaceContainer)
102-
.fillMaxWidth()
103-
.padding(10.dp),
104-
horizontalAlignment = Alignment.Start
126+
127+
AnimatedVisibility(
128+
visible = showDetails,
129+
enter = expandVertically() + fadeIn(),
130+
exit = shrinkVertically() + fadeOut()
105131
) {
106-
Text("maxRange = ${sensor.maximumRange}")
107-
Text("minDelay = ${sensor.minDelay}")
108-
Text("maxDelay = ${sensor.maxDelay}")
109-
Text("reportingMode = ${sensor.reportingModeString}")
110-
Text("wakeUpSensor = ${sensor.isWakeUpSensor}")
111-
Text("power = ${sensor.power}")
112-
Text("resolution = ${sensor.resolution}")
113-
Text("vendor = ${sensor.vendor}")
132+
Column(
133+
modifier = Modifier
134+
.fillMaxWidth()
135+
.background(MaterialTheme.colorScheme.surfaceContainerHighest)
136+
.padding(16.dp),
137+
verticalArrangement = Arrangement.spacedBy(8.dp)
138+
) {
139+
HorizontalDivider(
140+
modifier = Modifier.padding(bottom = 8.dp),
141+
color = MaterialTheme.colorScheme.outlineVariant
142+
)
114143

144+
SensorDetailRow(label = "Max Range", value = "${sensor.maximumRange}")
145+
SensorDetailRow(label = "Min Delay", value = "${sensor.minDelay}")
146+
SensorDetailRow(label = "Max Delay", value = "${sensor.maxDelay}")
147+
SensorDetailRow(label = "Reporting Mode", value = sensor.reportingModeString)
148+
SensorDetailRow(label = "Wake-Up Sensor", value = "${sensor.isWakeUpSensor}")
149+
SensorDetailRow(label = "Power", value = "${sensor.power}")
150+
SensorDetailRow(label = "Resolution", value = "${sensor.resolution}")
151+
SensorDetailRow(label = "Vendor", value = sensor.vendor)
152+
}
115153
}
116154
}
117155
}
118156
}
119157

158+
@Composable
159+
private fun SensorDetailRow(label: String, value: String) {
160+
Row(
161+
modifier = Modifier.fillMaxWidth(),
162+
horizontalArrangement = Arrangement.SpaceBetween,
163+
verticalAlignment = Alignment.CenterVertically
164+
) {
165+
Text(
166+
text = label,
167+
style = MaterialTheme.typography.bodyMedium,
168+
color = MaterialTheme.colorScheme.onSurfaceVariant,
169+
fontWeight = FontWeight.Medium
170+
)
171+
Text(
172+
text = value,
173+
style = MaterialTheme.typography.bodyMedium,
174+
color = MaterialTheme.colorScheme.onSurface,
175+
textAlign = TextAlign.End,
176+
modifier = Modifier.weight(1f, fill = false)
177+
)
178+
}
179+
}
180+
120181
@Preview
121182
@Composable
122183
private fun SensorItemPreview() {

0 commit comments

Comments
 (0)