external/revanced-manager
1
0
Fork 0
mirror of https://github.com/ReVanced/revanced-manager.git synced 2024-09-20 04:53:46 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(Contributors Screen): implement design from Figma (#1465)

Browse source 
Co-authored-by: Robert <72943079+CnC-Robert@users.noreply.github.com>
Co-authored-by: Ax333l <main@axelen.xyz>
This commit is contained in:
Ushie 2023-11-19 23:27:13 +03:00 committed by GitHub
parent 2bd84636d6
commit 62a5fce66c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 143 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/src/main/java/app/revanced/manager/ui/screen/settings/AboutSettingsScreen.kt
View file

@ -84,7 +84,7 @@ fun AboutSettingsScreen(
stringResource(R.string.contributors), stringResource(R.string.contributors),
stringResource(R.string.contributors_description), stringResource(R.string.contributors_description),
third = onContributorsClick third = onContributorsClick
).takeIf { context.isDebuggable }, ),
Triple(stringResource(R.string.developer_options), Triple(stringResource(R.string.developer_options),
stringResource(R.string.developer_options_description), stringResource(R.string.developer_options_description),
third = { /*TODO*/ }).takeIf { context.isDebuggable }, third = { /*TODO*/ }).takeIf { context.isDebuggable },

204
app/src/main/java/app/revanced/manager/ui/screen/settings/ContributorScreen.kt
View file

@ -1,35 +1,39 @@
package app.revanced.manager.ui.screen.settings package app.revanced.manager.ui.screen.settings
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.border import androidx.compose.foundation.border
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Card
import androidx.compose.foundation.verticalScroll import androidx.compose.material3.CardDefaults
import androidx.compose.material.icons.Icons import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material.icons.outlined.ArrowDropDown import androidx.compose.material3.MaterialTheme
import androidx.compose.material.icons.outlined.ArrowDropUp import androidx.compose.material3.Scaffold
import androidx.compose.material3.* import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.coerceAtMost
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.times
import app.revanced.manager.R import app.revanced.manager.R
import app.revanced.manager.network.dto.ReVancedContributor import app.revanced.manager.network.dto.ReVancedContributor
import app.revanced.manager.ui.component.AppTopBar import app.revanced.manager.ui.component.AppTopBar
import app.revanced.manager.ui.component.ArrowButton
import app.revanced.manager.ui.component.LoadingIndicator import app.revanced.manager.ui.component.LoadingIndicator
import app.revanced.manager.ui.viewmodel.ContributorViewModel import app.revanced.manager.ui.viewmodel.ContributorViewModel
import coil.compose.AsyncImage import coil.compose.AsyncImage
import org.koin.androidx.compose.getViewModel import org.koin.androidx.compose.getViewModel
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
fun ContributorScreen( fun ContributorScreen(
@ -45,92 +49,148 @@ fun ContributorScreen(
) )
}, },
) { paddingValues -> ) { paddingValues ->
Column( LazyColumn(
modifier = Modifier modifier = Modifier
.fillMaxHeight() .fillMaxHeight()
.padding(paddingValues) .padding(paddingValues)
.fillMaxWidth() .fillMaxWidth(),
.verticalScroll(rememberScrollState()) contentPadding = PaddingValues(16.dp),
verticalArrangement = if (repositories.isNullOrEmpty()) Arrangement.Center else Arrangement.spacedBy(
24.dp
)
) { ) {
if(repositories.isEmpty()) { repositories?.let { repositories ->
LoadingIndicator() if (repositories.isEmpty()) {
} item {
repositories.forEach { Text(
ExpandableListCard( text = stringResource(id = R.string.no_contributors_found),
title = it.name, style = MaterialTheme.typography.titleLarge
contributors = it.contributors )
) }
} } else {
items(
items = repositories,
key = { it.name }
) {
ContributorsCard(
title = it.name,
contributors = it.contributors
)
}
}
} ?: item { LoadingIndicator() }
} }
} }
} }
@OptIn(ExperimentalLayoutApi::class)
@OptIn(ExperimentalLayoutApi::class, ExperimentalFoundationApi::class)
@Composable @Composable
fun ExpandableListCard( fun ContributorsCard(
title: String, title: String,
contributors: List<ReVancedContributor> contributors: List<ReVancedContributor>,
itemsPerPage: Int = 12,
numberOfRows: Int = 2
) { ) {
var expanded by remember { mutableStateOf(false) } val itemsPerRow = (itemsPerPage / numberOfRows)
// Create a list of contributors grouped by itemsPerPage
val contributorsByPage = remember(itemsPerPage, contributors) {
contributors.chunked(itemsPerPage)
}
val pagerState = rememberPagerState { contributorsByPage.size }
Card( Card(
shape = RoundedCornerShape(30.dp),
elevation = CardDefaults.outlinedCardElevation(),
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(16.dp)
.border( .border(
width = 2.dp, width = 1.dp,
color = MaterialTheme.colorScheme.outline, color = MaterialTheme.colorScheme.surfaceContainerHigh,
shape = MaterialTheme.shapes.medium shape = MaterialTheme.shapes.medium
), ),
colors = CardDefaults.outlinedCardColors(), colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
) { ) {
Column() { Column(
Row() { modifier = Modifier.padding(16.dp),
ListItem( verticalArrangement = Arrangement.spacedBy(16.dp)
headlineContent = { ) {
Text( Row(
text = processHeadlineText(title), horizontalArrangement = Arrangement.spacedBy(8.dp),
style = MaterialTheme.typography.titleMedium verticalAlignment = Alignment.CenterVertically
) ) {
}, Text(
trailingContent = { text = processHeadlineText(title),
if (contributors.isNotEmpty()) { style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.Medium)
ArrowButton( )
expanded = expanded, Text(
onClick = { expanded = !expanded } text = "(${(pagerState.currentPage + 1)}/${pagerState.pageCount})",
) color = MaterialTheme.colorScheme.onSurfaceVariant,
} style = MaterialTheme.typography.labelMedium.copy(fontWeight = FontWeight.SemiBold)
},
) )
} }
if (expanded) { HorizontalPager(
FlowRow( state = pagerState,
modifier = Modifier userScrollEnabled = true,
.fillMaxWidth() modifier = Modifier.fillMaxSize(),
.wrapContentHeight() ) { page ->
.padding(8.dp), BoxWithConstraints {
) { val spaceBetween = 16.dp
contributors.forEach { val maxWidth = this.maxWidth
AsyncImage( val itemSize = (maxWidth - (itemsPerRow - 1) * spaceBetween) / itemsPerRow
model = it.avatarUrl, val itemSpacing = (maxWidth - itemSize * 6) / (itemsPerRow - 1)
contentDescription = it.avatarUrl, FlowRow(
contentScale = ContentScale.Crop, maxItemsInEachRow = itemsPerRow,
modifier = Modifier horizontalArrangement = Arrangement.spacedBy(itemSpacing),
.padding(16.dp) verticalArrangement = Arrangement.spacedBy(16.dp),
.size(45.dp) modifier = Modifier.fillMaxWidth()
.clip(CircleShape) ) {
) contributorsByPage[page].forEach {
if (itemSize > 100.dp) {
Row(
modifier = Modifier.width(itemSize - 1.dp), // we delete 1.dp to account for not-so divisible numbers
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(12.dp)
) {
AsyncImage(
model = it.avatarUrl,
contentDescription = it.avatarUrl,
contentScale = ContentScale.Crop,
modifier = Modifier
.size((itemSize / 3).coerceAtMost(40.dp))
.clip(CircleShape)
)
Text(
text = it.username,
style = MaterialTheme.typography.bodyLarge,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
} else {
Box(
modifier = Modifier.width(itemSize - 1.dp),
contentAlignment = Alignment.Center
) {
AsyncImage(
model = it.avatarUrl,
contentDescription = it.avatarUrl,
contentScale = ContentScale.Crop,
modifier = Modifier
.size(size = (itemSize - 1.dp).coerceAtMost(50.dp)) // we delete 1.dp to account for not-so divisible numbers
.clip(CircleShape)
)
}
}
}
} }
} }
} }
} }
} }
} }
fun processHeadlineText(repositoryName: String): String { fun processHeadlineText(repositoryName: String): String {
return "Revanced " + repositoryName.replace("revanced/revanced-", "") return "ReVanced " + repositoryName.replace("revanced/revanced-", "")
.replace("-", " ") .replace("-", " ")
.split(" ") .split(" ").joinToString(" ") { if (it.length > 3) it else it.uppercase() }
.map { if (it.length > 3) it else it.uppercase() }
.joinToString(" ")
.replaceFirstChar { it.uppercase() } .replaceFirstChar { it.uppercase() }
} }

12
app/src/main/java/app/revanced/manager/ui/viewmodel/ContributorViewModel.kt
View file

@ -1,6 +1,9 @@
package app.revanced.manager.ui.viewmodel package app.revanced.manager.ui.viewmodel
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope import androidx.lifecycle.viewModelScope
import app.revanced.manager.network.api.ReVancedAPI import app.revanced.manager.network.api.ReVancedAPI
@ -11,13 +14,14 @@ import kotlinx.coroutines.launch
import kotlinx.coroutines.withContext import kotlinx.coroutines.withContext
class ContributorViewModel(private val reVancedAPI: ReVancedAPI) : ViewModel() { class ContributorViewModel(private val reVancedAPI: ReVancedAPI) : ViewModel() {
val repositories = mutableStateListOf<ReVancedGitRepository>() var repositories: List<ReVancedGitRepository>? by mutableStateOf(null)
private set
init { init {
viewModelScope.launch { viewModelScope.launch {
withContext(Dispatchers.IO) { reVancedAPI.getContributors().getOrNull() }?.let( repositories = withContext(Dispatchers.IO) {
repositories::addAll reVancedAPI.getContributors().getOrNull()
) }
} }
} }
} }

1
app/src/main/res/values/strings.xml
View file

@ -302,4 +302,5 @@
<string name="dismiss_temporary">Not now</string> <string name="dismiss_temporary">Not now</string>
<string name="update_available">New update available</string> <string name="update_available">New update available</string>
<string name="update_available_description">A new version (%s) is available for download.</string> <string name="update_available_description">A new version (%s) is available for download.</string>
<string name="no_contributors_found">No contributors found</string>
</resources> </resources>

2
gradle/libs.versions.toml
View file

@ -43,7 +43,7 @@ compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref =
compose-ui = { group = "androidx.compose.ui", name = "ui" } compose-ui = { group = "androidx.compose.ui", name = "ui" }
compose-ui-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" } compose-ui-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
compose-livedata = { group = "androidx.compose.runtime", name = "runtime-livedata" } compose-livedata = { group = "androidx.compose.runtime", name = "runtime-livedata" }
compose-material3 = { group = "androidx.compose.material3", name = "material3" } compose-material3 = { group = "androidx.compose.material3", name = "material3", version = "1.2.0-alpha10"}
compose-material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" } compose-material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" }
# Coil # Coil