From a9983c9301e714cc0224135052313359f4834e6a Mon Sep 17 00:00:00 2001 From: rhunk <101876869+rhunk@users.noreply.github.com> Date: Sat, 7 Sep 2024 11:23:34 +0200 Subject: [PATCH] fix(app/ui): cards padding & styles --- .../ui/manager/pages/home/HomeRootSection.kt | 24 ++++++----- .../manager/pages/social/SocialRootSection.kt | 27 ++++++------ .../ui/manager/pages/theming/ThemeCatalog.kt | 43 +++++++++++-------- .../ui/manager/pages/theming/ThemingRoot.kt | 19 ++++---- 4 files changed, 60 insertions(+), 53 deletions(-) diff --git a/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/home/HomeRootSection.kt b/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/home/HomeRootSection.kt index b0b31dfc5..6189af5a5 100644 --- a/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/home/HomeRootSection.kt +++ b/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/home/HomeRootSection.kt @@ -5,6 +5,7 @@ import android.net.Uri import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.ClickableText import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons @@ -16,6 +17,7 @@ import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.vectorResource @@ -35,7 +37,6 @@ import kotlinx.coroutines.launch import me.rhunk.snapenhance.R import me.rhunk.snapenhance.action.EnumQuickActions import me.rhunk.snapenhance.common.BuildConfig -import me.rhunk.snapenhance.common.Constants import me.rhunk.snapenhance.common.action.EnumAction import me.rhunk.snapenhance.common.ui.rememberAsyncMutableState import me.rhunk.snapenhance.common.ui.rememberAsyncMutableStateList @@ -75,7 +76,7 @@ class HomeRootSection : Routes.Route() { ) { OutlinedCard( modifier = Modifier - .padding(all = cardMargin) + .padding(start = cardMargin, end = cardMargin) .fillMaxWidth(), colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.surfaceVariant, @@ -85,7 +86,7 @@ class HomeRootSection : Routes.Route() { Column( modifier = Modifier .fillMaxWidth() - .padding(all = 15.dp) + .padding(all = 10.dp) ) { content() } @@ -117,6 +118,7 @@ class HomeRootSection : Routes.Route() { tint = MaterialTheme.colorScheme.onSurfaceVariant, modifier = Modifier .size(size) + .clip(RoundedCornerShape(50)) .then(modifier) .clickable { openExternalLink(link) } ) @@ -174,9 +176,11 @@ class HomeRootSection : Routes.Route() { Row( horizontalArrangement = Arrangement.spacedBy( 15.dp, Alignment.CenterHorizontally - ), modifier = Modifier + ), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier .fillMaxWidth() - .padding(all = 10.dp) + .padding(all = 5.dp) ) { ExternalLinkIcon( imageVector = ImageVector.vectorResource(id = R.drawable.ic_codeberg), @@ -194,10 +198,10 @@ class HomeRootSection : Routes.Route() { ) ExternalLinkIcon( - size = 38.dp, - modifier = Modifier.offset(x = (-3).dp, y = (-3).dp), + modifier = Modifier.offset(x = (-3).dp), + size = 40.dp, 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( modifier = Modifier .fillMaxWidth() - .padding(start = 20.dp, end = 10.dp, top = 20.dp), + .padding(start = 20.dp, end = 10.dp, top = 5.dp), verticalAlignment = Alignment.CenterVertically ) { Text( @@ -380,8 +384,8 @@ class HomeRootSection : Routes.Route() { modifier = Modifier .height(tileHeight) .weight(1f) - .clickable { action(routes) } .padding(all = 6.dp), + onClick = { action(routes) } ) { Column( modifier = Modifier diff --git a/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/social/SocialRootSection.kt b/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/social/SocialRootSection.kt index 589e9c53b..c74694103 100644 --- a/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/social/SocialRootSection.kt +++ b/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/social/SocialRootSection.kt @@ -51,10 +51,9 @@ class SocialRootSection : Routes.Route() { LazyColumn( modifier = Modifier - .padding(2.dp) - .fillMaxWidth() - .fillMaxHeight(), - contentPadding = PaddingValues(bottom = 110.dp), + .fillMaxSize(), + contentPadding = PaddingValues(top = 10.dp, bottom = 110.dp, start = 8.dp, end = 8.dp), + verticalArrangement = Arrangement.spacedBy(8.dp) ) { //check if scope list is empty val listSize = when (scope) { @@ -80,15 +79,14 @@ class SocialRootSection : Routes.Route() { ElevatedCard( modifier = Modifier - .padding(10.dp) .fillMaxWidth() - .height(80.dp) - .clickable { - routes.manageScope.navigate { - put("id", id) - put("scope", scope.key) - } - }, + .height(70.dp), + onClick = { + routes.manageScope.navigate { + put("id", id) + put("scope", scope.key) + } + } ) { Row( modifier = Modifier @@ -101,7 +99,7 @@ class SocialRootSection : Routes.Route() { val group = groupList[index] Column( modifier = Modifier - .padding(7.dp) + .padding(start = 7.dp) .fillMaxWidth() .weight(1f) ) { @@ -127,9 +125,10 @@ class SocialRootSection : Routes.Route() { BitmojiSelfie.BitmojiSelfieType.THREE_D ) ) + Column( modifier = Modifier - .padding(7.dp) + .padding(start = 7.dp) .fillMaxWidth() .weight(1f) ) { diff --git a/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/theming/ThemeCatalog.kt b/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/theming/ThemeCatalog.kt index 98f817dbd..3d711bc98 100644 --- a/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/theming/ThemeCatalog.kt +++ b/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/theming/ThemeCatalog.kt @@ -12,6 +12,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.font.FontWeight 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.unit.dp import androidx.compose.ui.unit.sp @@ -38,7 +39,7 @@ fun ThemeCatalog(root: ThemingRoot) { val context = remember { root.context } val coroutineScope = rememberCoroutineScope { Dispatchers.IO } - fun fetchRepoIndexes(): Map? { + fun fetchRepoIndexes(): Map { val indexes = mutableMapOf() context.database.getRepositories().forEach { rootUri -> @@ -91,7 +92,7 @@ fun ThemeCatalog(root: ThemingRoot) { isRefreshing = true coroutineScope { launch(Dispatchers.IO) { - fetchRepoIndexes()?.let { + fetchRepoIndexes().let { context.log.verbose("Fetched ${it.size} theme indexes") it.forEach { (t, u) -> context.log.verbose("Fetched theme index from $t with ${u.themes.size} themes") @@ -146,7 +147,8 @@ fun ThemeCatalog(root: ThemingRoot) { modifier = Modifier .fillMaxSize() .pullRefresh(pullRefreshState), - contentPadding = PaddingValues(8.dp) + contentPadding = PaddingValues(8.dp), + verticalArrangement = Arrangement.spacedBy(8.dp), ) { item { if (remoteThemes.isEmpty()) { @@ -192,32 +194,32 @@ fun ThemeCatalog(root: ThemingRoot) { Icon(Icons.Default.Palette, contentDescription = null, modifier = Modifier.padding(16.dp)) Column( modifier = Modifier.weight(1f), - verticalArrangement = Arrangement.Center ) { - Row( - horizontalArrangement = Arrangement.spacedBy(4.dp), - verticalAlignment = Alignment.Bottom - ) { + Text( + text = themeManifest.name, + maxLines = 1, + fontSize = 16.sp, + lineHeight = 10.sp, + overflow = TextOverflow.Ellipsis, + fontWeight = FontWeight.Bold, + ) + themeManifest.author?.let { Text( - text = themeManifest.name, + text = "by $it", maxLines = 1, - overflow = TextOverflow.Ellipsis, + fontSize = 10.sp, + lineHeight = 16.sp, + textDecoration = TextDecoration.Underline, + fontWeight = FontWeight.Light, + overflow = TextOverflow.Visible, ) - themeManifest.author?.let { - Text( - text = "by $it", - maxLines = 1, - fontSize = 10.sp, - fontWeight = FontWeight.Light, - overflow = TextOverflow.Ellipsis, - ) - } } themeManifest.description?.let { Text( text = it, fontSize = 12.sp, maxLines = 3, + lineHeight = 16.sp, overflow = TextOverflow.Ellipsis, ) } @@ -261,6 +263,9 @@ fun ThemeCatalog(root: ThemingRoot) { } } } + item { + Spacer(modifier = Modifier.height(80.dp)) + } } PullRefreshIndicator( diff --git a/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/theming/ThemingRoot.kt b/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/theming/ThemingRoot.kt index 04d693ee6..1a22bebd1 100644 --- a/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/theming/ThemingRoot.kt +++ b/app/src/main/kotlin/me/rhunk/snapenhance/ui/manager/pages/theming/ThemingRoot.kt @@ -304,9 +304,9 @@ class ThemingRoot: Routes.Route() { LazyColumn( modifier = Modifier - .fillMaxSize() - .padding(2.dp), - verticalArrangement = Arrangement.spacedBy(5.dp) + .fillMaxSize(), + contentPadding = PaddingValues(8.dp), + verticalArrangement = Arrangement.spacedBy(8.dp) ) { item { if (themes.isEmpty()) { @@ -326,13 +326,12 @@ class ThemingRoot: Routes.Route() { ElevatedCard( modifier = Modifier - .fillMaxWidth() - .clickable { - routes.editTheme.navigate { - this["theme_id"] = theme.id.toString() - } + .fillMaxWidth(), + onClick = { + routes.editTheme.navigate { + this["theme_id"] = theme.id.toString() } - .padding(8.dp) + } ) { Row( modifier = Modifier @@ -408,7 +407,7 @@ class ThemingRoot: Routes.Route() { } } item { - Spacer(modifier = Modifier.height(100.dp)) + Spacer(modifier = Modifier.height(200.dp)) } } }