mirror of
https://github.com/pawelorzech/Swoosh.git
synced 2026-03-31 20:15:41 +00:00
feat: add counter, buttons, hashtag, and preview animations in composer
This commit is contained in:
Paweł Orzech
parent
4a7005ce1e
commit
15c678556e
1 changed files with 98 additions and 59 deletions
|
|
@ -4,6 +4,8 @@ import android.net.Uri
|
|||
import androidx.activity.compose.rememberLauncherForActivityResult
|
||||
import androidx.activity.result.contract.ActivityResultContracts
|
||||
import androidx.compose.animation.*
|
||||
import androidx.compose.animation.Crossfade
|
||||
import androidx.compose.animation.animateColorAsState
|
||||
import androidx.compose.animation.core.*
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.*
|
||||
|
|
@ -40,6 +42,7 @@ import com.swoosh.microblog.data.HashtagParser
|
|||
import com.swoosh.microblog.data.model.FeedPost
|
||||
import com.swoosh.microblog.data.model.PostStats
|
||||
import com.swoosh.microblog.ui.animation.SwooshMotion
|
||||
import kotlinx.coroutines.delay
|
||||
import com.swoosh.microblog.ui.components.PulsingPlaceholder
|
||||
import com.swoosh.microblog.ui.preview.HtmlPreviewWebView
|
||||
import java.time.LocalDateTime
|
||||
|
|
@ -168,7 +171,12 @@ fun ComposerScreen(
|
|||
}
|
||||
}
|
||||
|
||||
if (state.isPreviewMode) {
|
||||
Crossfade(
|
||||
targetState = state.isPreviewMode,
|
||||
animationSpec = SwooshMotion.quick(),
|
||||
label = "editPreviewCrossfade"
|
||||
) { isPreview ->
|
||||
if (isPreview) {
|
||||
// Preview mode: show rendered HTML
|
||||
if (state.text.isBlank() && state.imageUris.isEmpty() && state.linkPreview == null) {
|
||||
Box(
|
||||
|
|
@ -212,52 +220,63 @@ fun ComposerScreen(
|
|||
supportingText = {
|
||||
val charCount = state.text.length
|
||||
val statsText = PostStats.formatComposerStats(state.text)
|
||||
val color = when {
|
||||
val targetColor = when {
|
||||
charCount > 500 -> MaterialTheme.colorScheme.error
|
||||
charCount > 280 -> MaterialTheme.colorScheme.tertiary
|
||||
else -> MaterialTheme.colorScheme.onSurfaceVariant
|
||||
}
|
||||
val animatedColor by animateColorAsState(
|
||||
targetValue = targetColor,
|
||||
animationSpec = SwooshMotion.quick(),
|
||||
label = "counterColor"
|
||||
)
|
||||
Text(
|
||||
text = statsText,
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = color
|
||||
color = animatedColor
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
// Extracted tags preview chips
|
||||
if (state.extractedTags.isNotEmpty()) {
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.spacedBy(6.dp)
|
||||
) {
|
||||
Icon(
|
||||
Icons.Default.Tag,
|
||||
contentDescription = "Tags",
|
||||
modifier = Modifier.size(18.dp),
|
||||
tint = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
@OptIn(ExperimentalLayoutApi::class)
|
||||
FlowRow(
|
||||
horizontalArrangement = Arrangement.spacedBy(6.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(4.dp)
|
||||
AnimatedVisibility(
|
||||
visible = state.extractedTags.isNotEmpty(),
|
||||
enter = fadeIn(SwooshMotion.quick()) + expandVertically(animationSpec = SwooshMotion.snappy()),
|
||||
exit = fadeOut(SwooshMotion.quick()) + shrinkVertically(animationSpec = SwooshMotion.snappy())
|
||||
) {
|
||||
Column {
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.spacedBy(6.dp)
|
||||
) {
|
||||
state.extractedTags.forEach { tag ->
|
||||
SuggestionChip(
|
||||
onClick = {},
|
||||
label = {
|
||||
Text(
|
||||
"#$tag",
|
||||
style = MaterialTheme.typography.labelSmall
|
||||
)
|
||||
},
|
||||
colors = SuggestionChipDefaults.suggestionChipColors(
|
||||
containerColor = MaterialTheme.colorScheme.primaryContainer,
|
||||
labelColor = MaterialTheme.colorScheme.onPrimaryContainer
|
||||
),
|
||||
border = null
|
||||
)
|
||||
Icon(
|
||||
Icons.Default.Tag,
|
||||
contentDescription = "Tags",
|
||||
modifier = Modifier.size(18.dp),
|
||||
tint = MaterialTheme.colorScheme.onSurfaceVariant
|
||||
)
|
||||
@OptIn(ExperimentalLayoutApi::class)
|
||||
FlowRow(
|
||||
horizontalArrangement = Arrangement.spacedBy(6.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(4.dp)
|
||||
) {
|
||||
state.extractedTags.forEach { tag ->
|
||||
SuggestionChip(
|
||||
onClick = {},
|
||||
label = {
|
||||
Text(
|
||||
"#$tag",
|
||||
style = MaterialTheme.typography.labelSmall
|
||||
)
|
||||
},
|
||||
colors = SuggestionChipDefaults.suggestionChipColors(
|
||||
containerColor = MaterialTheme.colorScheme.primaryContainer,
|
||||
labelColor = MaterialTheme.colorScheme.onPrimaryContainer
|
||||
),
|
||||
border = null
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -452,43 +471,63 @@ fun ComposerScreen(
|
|||
|
||||
// Action buttons
|
||||
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
Button(
|
||||
onClick = viewModel::publish,
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
enabled = !state.isSubmitting && (state.text.isNotBlank() || state.imageUris.isNotEmpty())
|
||||
// Publish button (step 1)
|
||||
var publishVisible by remember { mutableStateOf(false) }
|
||||
LaunchedEffect(Unit) { publishVisible = true }
|
||||
AnimatedVisibility(
|
||||
visible = publishVisible,
|
||||
enter = scaleIn(animationSpec = SwooshMotion.gentle()) + fadeIn(SwooshMotion.quick())
|
||||
) {
|
||||
if (state.isSubmitting) {
|
||||
CircularProgressIndicator(Modifier.size(20.dp), strokeWidth = 2.dp)
|
||||
Spacer(Modifier.width(8.dp))
|
||||
Button(
|
||||
onClick = viewModel::publish,
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
enabled = !state.isSubmitting && (state.text.isNotBlank() || state.imageUris.isNotEmpty())
|
||||
) {
|
||||
if (state.isSubmitting) {
|
||||
CircularProgressIndicator(Modifier.size(20.dp), strokeWidth = 2.dp)
|
||||
Spacer(Modifier.width(8.dp))
|
||||
}
|
||||
Text(if (state.isEditing) "Update & Publish" else "Publish now")
|
||||
}
|
||||
Text(if (state.isEditing) "Update & Publish" else "Publish now")
|
||||
}
|
||||
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp)
|
||||
// Draft + Schedule row (step 2)
|
||||
var rowVisible by remember { mutableStateOf(false) }
|
||||
LaunchedEffect(Unit) {
|
||||
delay(SwooshMotion.StaggerDelayMs)
|
||||
rowVisible = true
|
||||
}
|
||||
AnimatedVisibility(
|
||||
visible = rowVisible,
|
||||
enter = scaleIn(animationSpec = SwooshMotion.gentle()) + fadeIn(SwooshMotion.quick())
|
||||
) {
|
||||
OutlinedButton(
|
||||
onClick = viewModel::saveDraft,
|
||||
modifier = Modifier.weight(1f),
|
||||
enabled = !state.isSubmitting
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp)
|
||||
) {
|
||||
Text("Save draft")
|
||||
}
|
||||
OutlinedButton(
|
||||
onClick = viewModel::saveDraft,
|
||||
modifier = Modifier.weight(1f),
|
||||
enabled = !state.isSubmitting
|
||||
) {
|
||||
Text("Save draft")
|
||||
}
|
||||
|
||||
OutlinedButton(
|
||||
onClick = { showDatePicker = true },
|
||||
modifier = Modifier.weight(1f),
|
||||
enabled = !state.isSubmitting
|
||||
) {
|
||||
Icon(Icons.Default.Schedule, null, Modifier.size(18.dp))
|
||||
Spacer(Modifier.width(4.dp))
|
||||
Text("Schedule")
|
||||
OutlinedButton(
|
||||
onClick = { showDatePicker = true },
|
||||
modifier = Modifier.weight(1f),
|
||||
enabled = !state.isSubmitting
|
||||
) {
|
||||
Icon(Icons.Default.Schedule, null, Modifier.size(18.dp))
|
||||
Spacer(Modifier.width(4.dp))
|
||||
Text("Schedule")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} // end Crossfade
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue