feat: Enhance ChatsListScreen with animated title and search field transitions
This commit is contained in:
@@ -567,16 +567,74 @@ fun ChatsListScreen(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
title = {
|
title = {
|
||||||
// Search field or Stories / Title area
|
Box(modifier = Modifier.fillMaxWidth()) {
|
||||||
AnimatedContent(
|
// Title - Triple click to open dev console
|
||||||
targetState = isSearchExpanded,
|
AnimatedVisibility(
|
||||||
transitionSpec = {
|
visible = !isSearchExpanded,
|
||||||
fadeIn(tween(200)) togetherWith fadeOut(tween(200))
|
enter = fadeIn(tween(300)) + slideInHorizontally(
|
||||||
},
|
initialOffsetX = { -it / 3 },
|
||||||
label = "searchAnimation"
|
animationSpec = tween(300, easing = FastOutSlowInEasing)
|
||||||
) { expanded ->
|
),
|
||||||
if (expanded) {
|
exit = fadeOut(tween(200)) + slideOutHorizontally(
|
||||||
// Search TextField
|
targetOffsetX = { -it / 3 },
|
||||||
|
animationSpec = tween(200)
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
Column(
|
||||||
|
modifier = Modifier.clickable {
|
||||||
|
val currentTime = System.currentTimeMillis()
|
||||||
|
if (currentTime - lastClickTime < 500) {
|
||||||
|
titleClickCount++
|
||||||
|
if (titleClickCount >= 3) {
|
||||||
|
showDevConsole = true
|
||||||
|
titleClickCount = 0
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
titleClickCount = 1
|
||||||
|
}
|
||||||
|
lastClickTime = currentTime
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
Text(
|
||||||
|
"Rosetta",
|
||||||
|
fontWeight = FontWeight.Bold,
|
||||||
|
fontSize = 20.sp,
|
||||||
|
color = textColor
|
||||||
|
)
|
||||||
|
if (protocolState != ProtocolState.AUTHENTICATED) {
|
||||||
|
Text(
|
||||||
|
text = when (protocolState) {
|
||||||
|
ProtocolState.DISCONNECTED -> "Connecting..."
|
||||||
|
ProtocolState.CONNECTING -> "Connecting..."
|
||||||
|
ProtocolState.CONNECTED -> "Authenticating..."
|
||||||
|
ProtocolState.HANDSHAKING -> "Authenticating..."
|
||||||
|
ProtocolState.AUTHENTICATED -> ""
|
||||||
|
},
|
||||||
|
fontSize = 12.sp,
|
||||||
|
color = secondaryTextColor
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search TextField with beautiful animation
|
||||||
|
AnimatedVisibility(
|
||||||
|
visible = isSearchExpanded,
|
||||||
|
enter = fadeIn(tween(300)) + slideInHorizontally(
|
||||||
|
initialOffsetX = { it },
|
||||||
|
animationSpec = tween(300, easing = FastOutSlowInEasing)
|
||||||
|
) + expandHorizontally(
|
||||||
|
expandFrom = Alignment.End,
|
||||||
|
animationSpec = tween(300, easing = FastOutSlowInEasing)
|
||||||
|
),
|
||||||
|
exit = fadeOut(tween(200)) + slideOutHorizontally(
|
||||||
|
targetOffsetX = { it },
|
||||||
|
animationSpec = tween(200)
|
||||||
|
) + shrinkHorizontally(
|
||||||
|
shrinkTowards = Alignment.End,
|
||||||
|
animationSpec = tween(200)
|
||||||
|
)
|
||||||
|
) {
|
||||||
Row(
|
Row(
|
||||||
verticalAlignment = Alignment.CenterVertically,
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
modifier = Modifier.fillMaxWidth()
|
modifier = Modifier.fillMaxWidth()
|
||||||
@@ -598,7 +656,7 @@ fun ChatsListScreen(
|
|||||||
onValueChange = { searchQuery = it },
|
onValueChange = { searchQuery = it },
|
||||||
placeholder = {
|
placeholder = {
|
||||||
Text(
|
Text(
|
||||||
"Search...",
|
"Search chats...",
|
||||||
color = secondaryTextColor
|
color = secondaryTextColor
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
@@ -607,7 +665,7 @@ fun ChatsListScreen(
|
|||||||
unfocusedContainerColor = Color.Transparent,
|
unfocusedContainerColor = Color.Transparent,
|
||||||
focusedTextColor = textColor,
|
focusedTextColor = textColor,
|
||||||
unfocusedTextColor = textColor,
|
unfocusedTextColor = textColor,
|
||||||
cursorColor = textColor,
|
cursorColor = PrimaryBlue,
|
||||||
focusedIndicatorColor = Color.Transparent,
|
focusedIndicatorColor = Color.Transparent,
|
||||||
unfocusedIndicatorColor = Color.Transparent
|
unfocusedIndicatorColor = Color.Transparent
|
||||||
),
|
),
|
||||||
@@ -615,65 +673,6 @@ fun ChatsListScreen(
|
|||||||
modifier = Modifier.weight(1f)
|
modifier = Modifier.weight(1f)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
// Triple click to open dev console
|
|
||||||
Row(
|
|
||||||
verticalAlignment = Alignment.CenterVertically,
|
|
||||||
modifier = Modifier.clickable {
|
|
||||||
val currentTime = System.currentTimeMillis()
|
|
||||||
if (currentTime - lastClickTime < 500) {
|
|
||||||
titleClickCount++
|
|
||||||
if (titleClickCount >= 3) {
|
|
||||||
showDevConsole = true
|
|
||||||
titleClickCount = 0
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
titleClickCount = 1
|
|
||||||
}
|
|
||||||
lastClickTime = currentTime
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
// User avatar
|
|
||||||
val avatarColors = getAvatarColor(accountName, isDarkTheme)
|
|
||||||
Box(
|
|
||||||
modifier = Modifier
|
|
||||||
.size(36.dp)
|
|
||||||
.clip(CircleShape)
|
|
||||||
.background(avatarColors.backgroundColor),
|
|
||||||
contentAlignment = Alignment.Center
|
|
||||||
) {
|
|
||||||
Text(
|
|
||||||
text = getAvatarText(accountPublicKey),
|
|
||||||
fontSize = 14.sp,
|
|
||||||
fontWeight = FontWeight.Bold,
|
|
||||||
color = avatarColors.textColor
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
Spacer(modifier = Modifier.width(12.dp))
|
|
||||||
|
|
||||||
// Title with connection status
|
|
||||||
Column {
|
|
||||||
Text(
|
|
||||||
"Rosetta",
|
|
||||||
fontWeight = FontWeight.Bold,
|
|
||||||
fontSize = 20.sp
|
|
||||||
)
|
|
||||||
if (protocolState != ProtocolState.AUTHENTICATED) {
|
|
||||||
Text(
|
|
||||||
text = when (protocolState) {
|
|
||||||
ProtocolState.DISCONNECTED -> "Connecting..."
|
|
||||||
ProtocolState.CONNECTING -> "Connecting..."
|
|
||||||
ProtocolState.CONNECTED -> "Authenticating..."
|
|
||||||
ProtocolState.HANDSHAKING -> "Authenticating..."
|
|
||||||
ProtocolState.AUTHENTICATED -> ""
|
|
||||||
},
|
|
||||||
fontSize = 12.sp,
|
|
||||||
color = secondaryTextColor
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user