feat: dualtinted application card

This commit is contained in:
Ushie 2022-11-14 16:01:27 +03:00
parent 6cb69b42cd
commit 98300cfb57
No known key found for this signature in database
GPG Key ID: 0EF73F1CA38B2D5F
2 changed files with 87 additions and 1 deletions

View File

@ -2,6 +2,7 @@ package app.revanced.manager.ui.component
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ExpandMore
@ -10,6 +11,7 @@ import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
@ -94,4 +96,87 @@ fun ApplicationItem(
}
}
}
}
@Composable
fun ApplicationItemDualTint(
appName: String,
appIcon: @Composable () -> Unit,
releaseAgo: String,
expandedContent: @Composable () -> Unit,
) {
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 = Color(0xFF1E2630)
)
) {
Column(
modifier = Modifier
.fillMaxWidth()
) {
Column(
Modifier.padding(horizontal = 14.dp, vertical = 2.dp)
) {
Row(
modifier = Modifier.fillMaxSize(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
Row(
modifier = Modifier
.height(68.dp)
.weight(1f),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
appIcon()
Column(modifier = Modifier.padding(start = 8.dp)) {
Text(
text = appName,
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
Text(
text = releaseAgo,
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
}
Row(verticalAlignment = Alignment.CenterVertically) {
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
.fillMaxSize()
.background(color = Color(0xFF11161C))
.padding(14.dp, 10.dp),
) {
expandedContent()
}
}
}
}
}

View File

@ -16,6 +16,7 @@ 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.ApplicationItemDualTint
import app.revanced.manager.ui.component.HeadlineWithCard
import app.revanced.manager.ui.viewmodel.DashboardViewModel
import org.koin.androidx.compose.getViewModel
@ -98,7 +99,7 @@ fun DashboardScreen(viewModel: DashboardViewModel = getViewModel()) {
""".trimIndent()
)
}
ApplicationItem(
ApplicationItemDualTint(
appName = "Flutter Manager",
releaseAgo = "9d ago",
appIcon = { AppIcon(drawable = LocalContext.current.packageManager.getApplicationIcon("app.revanced.manager.flutter"), contentDescription = null, size = 38) }