feat: improve applicationitem drastically

* add animation to expand
* switch Arrow Icon to Expand Icon
* make sure Update button never gets squished
* use app icons for placeholder image
This commit is contained in:
Ushie 2022-11-14 15:59:30 +03:00
parent a171502475
commit b28d967aa7
No known key found for this signature in database
GPG Key ID: 0EF73F1CA38B2D5F
2 changed files with 76 additions and 31 deletions

View File

@ -1,52 +1,97 @@
package app.revanced.manager.ui.component
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ExpandMore
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import app.revanced.manager.R
@Composable
fun ApplicationItem(
name: String,
released: String, // TODO: temp
icon: @Composable () -> Unit,
expandedContent: @Composable () -> Unit
appName: String,
appIcon: @Composable () -> Unit,
releaseAgo: String,
expandedContent: @Composable () -> Unit,
) {
ExpandableCard(
content = { arrowButton ->
var expandedState by remember { mutableStateOf(false) }
val rotateState by animateFloatAsState(targetValue = if (expandedState) 180f else 0f)
Card(
modifier = Modifier
.fillMaxWidth()
.defaultMinSize(minHeight = 68.dp),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(
alpha = 0.5f
)
)
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 14.dp, vertical = 2.dp)
) {
Row(
modifier = Modifier.fillMaxSize(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
Row(
modifier = Modifier.height(68.dp),
modifier = Modifier
.height(68.dp)
.weight(1f),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
icon()
appIcon()
Column(modifier = Modifier.padding(start = 8.dp)) {
Text(name)
Text(
text = released,
text = appName,
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
Text(
text = releaseAgo,
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
}
Row(verticalAlignment = Alignment.CenterVertically) {
arrowButton()
IconButton(
modifier = Modifier.rotate(rotateState),
onClick = { expandedState = !expandedState },
) {
Icon(
imageVector = Icons.Default.ExpandMore,
contentDescription = stringResource(R.string.expand)
)
}
OutlinedButton(onClick = { /*TODO*/ }) {
Text(stringResource(R.string.update))
}
}
}
AnimatedVisibility(
visible = expandedState
) {
Box(
modifier = Modifier
.padding(bottom = 10.dp)
.fillMaxSize(),
) {
expandedContent()
}
}
},
expandedContent = {
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
) { expandedContent() }
}
)
}
}

View File

@ -5,9 +5,6 @@ import androidx.annotation.StringRes
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Build
import androidx.compose.material.icons.filled.Dashboard
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@ -17,6 +14,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import app.revanced.manager.R
import app.revanced.manager.ui.component.AppIcon
import app.revanced.manager.ui.component.ApplicationItem
import app.revanced.manager.ui.component.HeadlineWithCard
import app.revanced.manager.ui.viewmodel.DashboardViewModel
@ -88,9 +86,11 @@ fun DashboardScreen(viewModel: DashboardViewModel = getViewModel()) {
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
ApplicationItem(
name = "Youtube ReVanced",
released = "9d ago",
icon = { Icon(Icons.Default.Dashboard, "ReVanced") }
appName = "Compose Manager",
appIcon = {
AppIcon(drawable = LocalContext.current.packageManager.getApplicationIcon("app.revanced.manager.compose"), contentDescription = null, size = 38)
},
releaseAgo = "9d ago"
) {
ChangelogText(
"""
@ -99,13 +99,13 @@ fun DashboardScreen(viewModel: DashboardViewModel = getViewModel()) {
)
}
ApplicationItem(
name = "Reddit ReVanced",
released = "1 month ago",
icon = { Icon(Icons.Default.Build, "ReReddit") }
appName = "Flutter Manager",
releaseAgo = "9d ago",
appIcon = { AppIcon(drawable = LocalContext.current.packageManager.getApplicationIcon("app.revanced.manager.flutter"), contentDescription = null, size = 38) }
) {
ChangelogText(
"""
hi ushie
cossal will explode
""".trimIndent()
)
}