redesign: modern indigo UI, new app icon, edge-to-edge theme
App icon: deep indigo-to-violet gradient background with white sync arrows; replaced flat #2196F3 with layered adaptive icon. Theme: disabled dynamic color; rich indigo/teal/amber Material3 palette; edge-to-edge with transparent status bar; tighter typography letterSpacing. HomeScreen: colored left accent bar per status; URL-decoded SAF paths; relative timestamps (Just now / N min ago / N hr ago); indigo status pills; FilledTonalButton empty state. PairDetailScreen: hero StatusBanner with large icon and relative time; InfoCard as bordered grid with icon backgrounds; colored dot event timeline; URL-decoded local path display. SettingsScreen: section headers with primary left bar; AccountCard with primaryContainer icon backgrounds; Security/About in bordered cards. Bump version to 1.0.13 (code 14). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,16 +3,24 @@ package com.syncflow.ui.pairdetail
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.*
|
||||
import androidx.compose.material.icons.outlined.Circle
|
||||
import androidx.compose.material3.*
|
||||
import androidx.compose.runtime.*
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.hilt.navigation.compose.hiltViewModel
|
||||
import com.syncflow.data.db.entities.SyncEventEntity
|
||||
import com.syncflow.data.db.entities.SyncPairEntity
|
||||
import com.syncflow.domain.model.SyncEventType
|
||||
import com.syncflow.domain.model.SyncStatus
|
||||
import java.time.Duration
|
||||
import java.time.Instant
|
||||
import java.time.ZoneId
|
||||
import java.time.format.DateTimeFormatter
|
||||
import java.time.format.FormatStyle
|
||||
@@ -36,7 +44,10 @@ fun PairDetailScreen(
|
||||
title = { Text("Delete sync pair?") },
|
||||
text = { Text("This removes the pair and all sync history. Files are NOT deleted.") },
|
||||
confirmButton = {
|
||||
TextButton(onClick = { vm.delete(); onBack() }, colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.error)) {
|
||||
TextButton(
|
||||
onClick = { vm.delete(); onBack() },
|
||||
colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colorScheme.error),
|
||||
) {
|
||||
Text("Delete")
|
||||
}
|
||||
},
|
||||
@@ -60,8 +71,12 @@ fun PairDetailScreen(
|
||||
LazyColumn(
|
||||
modifier = Modifier.padding(padding),
|
||||
contentPadding = PaddingValues(16.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp),
|
||||
) {
|
||||
item {
|
||||
pair?.let { p -> StatusBanner(p) }
|
||||
}
|
||||
|
||||
item {
|
||||
pair?.let { p ->
|
||||
InfoCard(p.localPath, p.remotePath, p.syncDirection.name, p.scheduleType.name)
|
||||
@@ -85,8 +100,22 @@ fun PairDetailScreen(
|
||||
}
|
||||
|
||||
item {
|
||||
Text("Activity", style = MaterialTheme.typography.titleSmall, color = MaterialTheme.colorScheme.primary)
|
||||
HorizontalDivider(modifier = Modifier.padding(vertical = 4.dp))
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier.padding(top = 4.dp),
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.width(3.dp)
|
||||
.height(16.dp)
|
||||
.clip(RoundedCornerShape(2.dp)),
|
||||
) {
|
||||
Surface(color = MaterialTheme.colorScheme.primary, modifier = Modifier.fillMaxSize()) {}
|
||||
}
|
||||
Spacer(Modifier.width(8.dp))
|
||||
Text("Activity", style = MaterialTheme.typography.titleSmall)
|
||||
}
|
||||
HorizontalDivider(modifier = Modifier.padding(top = 4.dp))
|
||||
}
|
||||
|
||||
if (events.isEmpty()) {
|
||||
@@ -105,24 +134,84 @@ fun PairDetailScreen(
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun InfoCard(localPath: String, remotePath: String, direction: String, schedule: String) {
|
||||
ElevatedCard(modifier = Modifier.fillMaxWidth()) {
|
||||
Column(modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(6.dp)) {
|
||||
InfoRow(Icons.Default.PhoneAndroid, "Local", localPath)
|
||||
InfoRow(Icons.Default.Cloud, "Remote", remotePath)
|
||||
InfoRow(Icons.Default.SwapHoriz, "Direction", direction)
|
||||
InfoRow(Icons.Default.Schedule, "Schedule", schedule)
|
||||
private fun StatusBanner(pair: SyncPairEntity) {
|
||||
val (icon, label, containerColor) = when (pair.lastSyncResult) {
|
||||
SyncStatus.SUCCESS -> Triple(Icons.Default.CheckCircle, "Synced", MaterialTheme.colorScheme.primaryContainer)
|
||||
SyncStatus.SYNCING -> Triple(Icons.Default.Sync, "Syncing…", MaterialTheme.colorScheme.secondaryContainer)
|
||||
SyncStatus.FAILED -> Triple(Icons.Default.Error, "Failed", MaterialTheme.colorScheme.errorContainer)
|
||||
SyncStatus.CONFLICT -> Triple(Icons.Default.Warning, "Conflict", MaterialTheme.colorScheme.tertiaryContainer)
|
||||
SyncStatus.PARTIAL -> Triple(Icons.Default.WarningAmber,"Partial", MaterialTheme.colorScheme.tertiaryContainer)
|
||||
SyncStatus.IDLE -> Triple(Icons.Outlined.Circle, "Idle", MaterialTheme.colorScheme.surfaceVariant)
|
||||
}
|
||||
Surface(
|
||||
color = containerColor,
|
||||
shape = RoundedCornerShape(16.dp),
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.padding(16.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Icon(icon, null, modifier = Modifier.size(40.dp))
|
||||
Spacer(Modifier.width(16.dp))
|
||||
Column {
|
||||
Text(label, style = MaterialTheme.typography.titleMedium)
|
||||
pair.lastSyncAt?.let {
|
||||
Text(it.toRelativeString(), style = MaterialTheme.typography.bodySmall)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun InfoRow(icon: androidx.compose.ui.graphics.vector.ImageVector, label: String, value: String) {
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Icon(icon, null, Modifier.size(16.dp), tint = MaterialTheme.colorScheme.primary)
|
||||
private fun InfoCard(localPath: String, remotePath: String, direction: String, schedule: String) {
|
||||
Card(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
shape = RoundedCornerShape(16.dp),
|
||||
border = androidx.compose.foundation.BorderStroke(1.dp, MaterialTheme.colorScheme.outline),
|
||||
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
|
||||
) {
|
||||
Column(modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
InfoRow(Icons.Default.PhoneAndroid, "Local", localPath.toDisplayPath())
|
||||
HorizontalDivider(color = MaterialTheme.colorScheme.outline.copy(alpha = 0.5f))
|
||||
InfoRow(Icons.Default.Cloud, "Remote", remotePath)
|
||||
HorizontalDivider(color = MaterialTheme.colorScheme.outline.copy(alpha = 0.5f))
|
||||
Row {
|
||||
InfoRow(Icons.Default.SwapHoriz, "Direction", direction, modifier = Modifier.weight(1f))
|
||||
InfoRow(Icons.Default.Schedule, "Schedule", schedule, modifier = Modifier.weight(1f))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun InfoRow(
|
||||
icon: androidx.compose.ui.graphics.vector.ImageVector,
|
||||
label: String,
|
||||
value: String,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
Row(verticalAlignment = Alignment.CenterVertically, modifier = modifier) {
|
||||
Surface(
|
||||
shape = RoundedCornerShape(8.dp),
|
||||
color = MaterialTheme.colorScheme.primaryContainer,
|
||||
modifier = Modifier.size(28.dp),
|
||||
) {
|
||||
Box(contentAlignment = Alignment.Center) {
|
||||
Icon(
|
||||
icon,
|
||||
null,
|
||||
Modifier.size(16.dp),
|
||||
tint = MaterialTheme.colorScheme.onPrimaryContainer,
|
||||
)
|
||||
}
|
||||
}
|
||||
Spacer(Modifier.width(8.dp))
|
||||
Text("$label: ", style = MaterialTheme.typography.labelMedium)
|
||||
Text(value, style = MaterialTheme.typography.bodySmall, modifier = Modifier.weight(1f))
|
||||
Column {
|
||||
Text(label, style = MaterialTheme.typography.labelSmall, color = MaterialTheme.colorScheme.onSurfaceVariant)
|
||||
Text(value, style = MaterialTheme.typography.bodySmall)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -130,38 +219,65 @@ private fun InfoRow(icon: androidx.compose.ui.graphics.vector.ImageVector, label
|
||||
private fun EventRow(event: SyncEventEntity) {
|
||||
val fmt = DateTimeFormatter.ofLocalizedTime(FormatStyle.SHORT)
|
||||
val zone = ZoneId.systemDefault()
|
||||
val (icon, tint) = eventIcon(event.eventType)
|
||||
val dotColor = eventColor(event.eventType)
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth().padding(vertical = 2.dp),
|
||||
modifier = Modifier.fillMaxWidth().padding(vertical = 4.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
) {
|
||||
Icon(icon, null, Modifier.size(16.dp), tint = tint)
|
||||
Spacer(Modifier.width(8.dp))
|
||||
// Colored dot indicator
|
||||
Surface(
|
||||
shape = RoundedCornerShape(50),
|
||||
color = dotColor,
|
||||
modifier = Modifier.size(8.dp),
|
||||
) {}
|
||||
Spacer(Modifier.width(10.dp))
|
||||
Column(modifier = Modifier.weight(1f)) {
|
||||
Text(event.filePath ?: event.message ?: event.eventType.name, style = MaterialTheme.typography.bodySmall)
|
||||
Text(
|
||||
event.filePath ?: event.message ?: event.eventType.name,
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
)
|
||||
event.message?.takeIf { event.filePath != null }?.let {
|
||||
Text(it, style = MaterialTheme.typography.labelSmall, color = MaterialTheme.colorScheme.onSurfaceVariant)
|
||||
Text(
|
||||
it,
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
)
|
||||
}
|
||||
}
|
||||
Text(fmt.format(event.timestamp.atZone(zone)), style = MaterialTheme.typography.labelSmall, color = MaterialTheme.colorScheme.onSurfaceVariant)
|
||||
Text(
|
||||
fmt.format(event.timestamp.atZone(zone)),
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun eventIcon(type: SyncEventType): Pair<androidx.compose.ui.graphics.vector.ImageVector, androidx.compose.ui.graphics.Color> {
|
||||
val green = MaterialTheme.colorScheme.primary
|
||||
val red = MaterialTheme.colorScheme.error
|
||||
val orange = MaterialTheme.colorScheme.tertiary
|
||||
val grey = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
return when (type) {
|
||||
SyncEventType.SYNC_STARTED -> Pair(Icons.Default.PlayArrow, green)
|
||||
SyncEventType.SYNC_COMPLETED -> Pair(Icons.Default.CheckCircle, green)
|
||||
SyncEventType.SYNC_FAILED -> Pair(Icons.Default.Error, red)
|
||||
SyncEventType.FILE_UPLOADED -> Pair(Icons.Default.Upload, green)
|
||||
SyncEventType.FILE_DOWNLOADED -> Pair(Icons.Default.Download, green)
|
||||
SyncEventType.FILE_DELETED -> Pair(Icons.Default.Delete, orange)
|
||||
SyncEventType.FILE_SKIPPED -> Pair(Icons.Default.SkipNext, grey)
|
||||
SyncEventType.CONFLICT_DETECTED -> Pair(Icons.Default.Warning, orange)
|
||||
SyncEventType.CONFLICT_RESOLVED -> Pair(Icons.Default.CheckCircle, green)
|
||||
private fun eventColor(type: SyncEventType): Color = when (type) {
|
||||
SyncEventType.SYNC_STARTED -> MaterialTheme.colorScheme.primary
|
||||
SyncEventType.SYNC_COMPLETED -> MaterialTheme.colorScheme.primary
|
||||
SyncEventType.SYNC_FAILED -> MaterialTheme.colorScheme.error
|
||||
SyncEventType.FILE_UPLOADED -> MaterialTheme.colorScheme.secondary
|
||||
SyncEventType.FILE_DOWNLOADED -> MaterialTheme.colorScheme.secondary
|
||||
SyncEventType.FILE_DELETED -> MaterialTheme.colorScheme.tertiary
|
||||
SyncEventType.FILE_SKIPPED -> MaterialTheme.colorScheme.onSurfaceVariant
|
||||
SyncEventType.CONFLICT_DETECTED -> MaterialTheme.colorScheme.tertiary
|
||||
SyncEventType.CONFLICT_RESOLVED -> MaterialTheme.colorScheme.primary
|
||||
}
|
||||
|
||||
private fun String.toDisplayPath(): String {
|
||||
val decoded = java.net.URLDecoder.decode(this, "UTF-8")
|
||||
return decoded.trimEnd('/').substringAfterLast('/').substringAfterLast(':').ifEmpty { decoded }
|
||||
}
|
||||
|
||||
private fun Instant.toRelativeString(): String {
|
||||
val diff = Duration.between(this, Instant.now()).abs()
|
||||
return when {
|
||||
diff.toMinutes() < 1 -> "Just now"
|
||||
diff.toMinutes() < 60 -> "${diff.toMinutes()} min ago"
|
||||
diff.toHours() < 24 -> "${diff.toHours()} hr ago"
|
||||
diff.toDays() == 1L -> "Yesterday"
|
||||
else -> DateTimeFormatter.ofLocalizedDate(FormatStyle.SHORT)
|
||||
.format(atZone(ZoneId.systemDefault()))
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user