fix(app/ui): cards padding & styles

This commit is contained in:
rhunk 2024-09-07 11:23:34 +02:00
parent 8bdc1f6d6a
commit a9983c9301
4 changed files with 60 additions and 53 deletions

View File

@ -5,6 +5,7 @@ import android.net.Uri
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.* import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.ClickableText import androidx.compose.foundation.text.ClickableText
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
@ -16,6 +17,7 @@ import androidx.compose.material3.*
import androidx.compose.runtime.* import androidx.compose.runtime.*
import androidx.compose.ui.Alignment 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.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.vectorResource import androidx.compose.ui.res.vectorResource
@ -35,7 +37,6 @@ import kotlinx.coroutines.launch
import me.rhunk.snapenhance.R import me.rhunk.snapenhance.R
import me.rhunk.snapenhance.action.EnumQuickActions import me.rhunk.snapenhance.action.EnumQuickActions
import me.rhunk.snapenhance.common.BuildConfig import me.rhunk.snapenhance.common.BuildConfig
import me.rhunk.snapenhance.common.Constants
import me.rhunk.snapenhance.common.action.EnumAction import me.rhunk.snapenhance.common.action.EnumAction
import me.rhunk.snapenhance.common.ui.rememberAsyncMutableState import me.rhunk.snapenhance.common.ui.rememberAsyncMutableState
import me.rhunk.snapenhance.common.ui.rememberAsyncMutableStateList import me.rhunk.snapenhance.common.ui.rememberAsyncMutableStateList
@ -75,7 +76,7 @@ class HomeRootSection : Routes.Route() {
) { ) {
OutlinedCard( OutlinedCard(
modifier = Modifier modifier = Modifier
.padding(all = cardMargin) .padding(start = cardMargin, end = cardMargin)
.fillMaxWidth(), .fillMaxWidth(),
colors = CardDefaults.cardColors( colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surfaceVariant, containerColor = MaterialTheme.colorScheme.surfaceVariant,
@ -85,7 +86,7 @@ class HomeRootSection : Routes.Route() {
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(all = 15.dp) .padding(all = 10.dp)
) { ) {
content() content()
} }
@ -117,6 +118,7 @@ class HomeRootSection : Routes.Route() {
tint = MaterialTheme.colorScheme.onSurfaceVariant, tint = MaterialTheme.colorScheme.onSurfaceVariant,
modifier = Modifier modifier = Modifier
.size(size) .size(size)
.clip(RoundedCornerShape(50))
.then(modifier) .then(modifier)
.clickable { openExternalLink(link) } .clickable { openExternalLink(link) }
) )
@ -174,9 +176,11 @@ class HomeRootSection : Routes.Route() {
Row( Row(
horizontalArrangement = Arrangement.spacedBy( horizontalArrangement = Arrangement.spacedBy(
15.dp, Alignment.CenterHorizontally 15.dp, Alignment.CenterHorizontally
), modifier = Modifier ),
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(all = 10.dp) .padding(all = 5.dp)
) { ) {
ExternalLinkIcon( ExternalLinkIcon(
imageVector = ImageVector.vectorResource(id = R.drawable.ic_codeberg), imageVector = ImageVector.vectorResource(id = R.drawable.ic_codeberg),
@ -194,10 +198,10 @@ class HomeRootSection : Routes.Route() {
) )
ExternalLinkIcon( ExternalLinkIcon(
size = 38.dp, modifier = Modifier.offset(x = (-3).dp),
modifier = Modifier.offset(x = (-3).dp, y = (-3).dp), size = 40.dp,
imageVector = Icons.AutoMirrored.Default.Help, imageVector = Icons.AutoMirrored.Default.Help,
link = "https://github.com/rhunk/SnapEnhance/wiki" link = "https://github.com/rhunk/SnapEnhance/wiki",
) )
} }
@ -312,7 +316,7 @@ class HomeRootSection : Routes.Route() {
Row( Row(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(start = 20.dp, end = 10.dp, top = 20.dp), .padding(start = 20.dp, end = 10.dp, top = 5.dp),
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
Text( Text(
@ -380,8 +384,8 @@ class HomeRootSection : Routes.Route() {
modifier = Modifier modifier = Modifier
.height(tileHeight) .height(tileHeight)
.weight(1f) .weight(1f)
.clickable { action(routes) }
.padding(all = 6.dp), .padding(all = 6.dp),
onClick = { action(routes) }
) { ) {
Column( Column(
modifier = Modifier modifier = Modifier

View File

@ -51,10 +51,9 @@ class SocialRootSection : Routes.Route() {
LazyColumn( LazyColumn(
modifier = Modifier modifier = Modifier
.padding(2.dp) .fillMaxSize(),
.fillMaxWidth() contentPadding = PaddingValues(top = 10.dp, bottom = 110.dp, start = 8.dp, end = 8.dp),
.fillMaxHeight(), verticalArrangement = Arrangement.spacedBy(8.dp)
contentPadding = PaddingValues(bottom = 110.dp),
) { ) {
//check if scope list is empty //check if scope list is empty
val listSize = when (scope) { val listSize = when (scope) {
@ -80,15 +79,14 @@ class SocialRootSection : Routes.Route() {
ElevatedCard( ElevatedCard(
modifier = Modifier modifier = Modifier
.padding(10.dp)
.fillMaxWidth() .fillMaxWidth()
.height(80.dp) .height(70.dp),
.clickable { onClick = {
routes.manageScope.navigate { routes.manageScope.navigate {
put("id", id) put("id", id)
put("scope", scope.key) put("scope", scope.key)
} }
}, }
) { ) {
Row( Row(
modifier = Modifier modifier = Modifier
@ -101,7 +99,7 @@ class SocialRootSection : Routes.Route() {
val group = groupList[index] val group = groupList[index]
Column( Column(
modifier = Modifier modifier = Modifier
.padding(7.dp) .padding(start = 7.dp)
.fillMaxWidth() .fillMaxWidth()
.weight(1f) .weight(1f)
) { ) {
@ -127,9 +125,10 @@ class SocialRootSection : Routes.Route() {
BitmojiSelfie.BitmojiSelfieType.THREE_D BitmojiSelfie.BitmojiSelfieType.THREE_D
) )
) )
Column( Column(
modifier = Modifier modifier = Modifier
.padding(7.dp) .padding(start = 7.dp)
.fillMaxWidth() .fillMaxWidth()
.weight(1f) .weight(1f)
) { ) {

View File

@ -12,6 +12,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
@ -38,7 +39,7 @@ fun ThemeCatalog(root: ThemingRoot) {
val context = remember { root.context } val context = remember { root.context }
val coroutineScope = rememberCoroutineScope { Dispatchers.IO } val coroutineScope = rememberCoroutineScope { Dispatchers.IO }
fun fetchRepoIndexes(): Map<String, RepositoryIndex>? { fun fetchRepoIndexes(): Map<String, RepositoryIndex> {
val indexes = mutableMapOf<String, RepositoryIndex>() val indexes = mutableMapOf<String, RepositoryIndex>()
context.database.getRepositories().forEach { rootUri -> context.database.getRepositories().forEach { rootUri ->
@ -91,7 +92,7 @@ fun ThemeCatalog(root: ThemingRoot) {
isRefreshing = true isRefreshing = true
coroutineScope { coroutineScope {
launch(Dispatchers.IO) { launch(Dispatchers.IO) {
fetchRepoIndexes()?.let { fetchRepoIndexes().let {
context.log.verbose("Fetched ${it.size} theme indexes") context.log.verbose("Fetched ${it.size} theme indexes")
it.forEach { (t, u) -> it.forEach { (t, u) ->
context.log.verbose("Fetched theme index from $t with ${u.themes.size} themes") context.log.verbose("Fetched theme index from $t with ${u.themes.size} themes")
@ -146,7 +147,8 @@ fun ThemeCatalog(root: ThemingRoot) {
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
.pullRefresh(pullRefreshState), .pullRefresh(pullRefreshState),
contentPadding = PaddingValues(8.dp) contentPadding = PaddingValues(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
) { ) {
item { item {
if (remoteThemes.isEmpty()) { if (remoteThemes.isEmpty()) {
@ -192,32 +194,32 @@ fun ThemeCatalog(root: ThemingRoot) {
Icon(Icons.Default.Palette, contentDescription = null, modifier = Modifier.padding(16.dp)) Icon(Icons.Default.Palette, contentDescription = null, modifier = Modifier.padding(16.dp))
Column( Column(
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
verticalArrangement = Arrangement.Center
) {
Row(
horizontalArrangement = Arrangement.spacedBy(4.dp),
verticalAlignment = Alignment.Bottom
) { ) {
Text( Text(
text = themeManifest.name, text = themeManifest.name,
maxLines = 1, maxLines = 1,
fontSize = 16.sp,
lineHeight = 10.sp,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
fontWeight = FontWeight.Bold,
) )
themeManifest.author?.let { themeManifest.author?.let {
Text( Text(
text = "by $it", text = "by $it",
maxLines = 1, maxLines = 1,
fontSize = 10.sp, fontSize = 10.sp,
lineHeight = 16.sp,
textDecoration = TextDecoration.Underline,
fontWeight = FontWeight.Light, fontWeight = FontWeight.Light,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Visible,
) )
} }
}
themeManifest.description?.let { themeManifest.description?.let {
Text( Text(
text = it, text = it,
fontSize = 12.sp, fontSize = 12.sp,
maxLines = 3, maxLines = 3,
lineHeight = 16.sp,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
) )
} }
@ -261,6 +263,9 @@ fun ThemeCatalog(root: ThemingRoot) {
} }
} }
} }
item {
Spacer(modifier = Modifier.height(80.dp))
}
} }
PullRefreshIndicator( PullRefreshIndicator(

View File

@ -304,9 +304,9 @@ class ThemingRoot: Routes.Route() {
LazyColumn( LazyColumn(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize(),
.padding(2.dp), contentPadding = PaddingValues(8.dp),
verticalArrangement = Arrangement.spacedBy(5.dp) verticalArrangement = Arrangement.spacedBy(8.dp)
) { ) {
item { item {
if (themes.isEmpty()) { if (themes.isEmpty()) {
@ -326,13 +326,12 @@ class ThemingRoot: Routes.Route() {
ElevatedCard( ElevatedCard(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth(),
.clickable { onClick = {
routes.editTheme.navigate { routes.editTheme.navigate {
this["theme_id"] = theme.id.toString() this["theme_id"] = theme.id.toString()
} }
} }
.padding(8.dp)
) { ) {
Row( Row(
modifier = Modifier modifier = Modifier
@ -408,7 +407,7 @@ class ThemingRoot: Routes.Route() {
} }
} }
item { item {
Spacer(modifier = Modifier.height(100.dp)) Spacer(modifier = Modifier.height(200.dp))
} }
} }
} }