Centralize commonly reused label/icon pair component

MateriiApps · Sep 17, 2024 · a986177 · a986177
1 parent d4fd6ce
commit a986177
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 153 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@
 bin/
 gen/
 out/
+.kotlin/
 #  Uncomment the following line in case you need and you don't have the release build type files in your app
 # release/
 

diff --git a/ui/src/commonMain/kotlin/com/materiiapps/gloom/ui/component/Avatar.kt b/ui/src/commonMain/kotlin/com/materiiapps/gloom/ui/component/Avatar.kt
@@ -21,7 +21,7 @@ import org.koin.compose.koinInject
 @Composable
 fun Avatar(
     url: String?,
-    contentDescription: String?,
+    contentDescription: String? = null,
     type: User.Type = User.Type.USER,
     modifier: Modifier = Modifier
 ) {

diff --git a/ui/src/commonMain/kotlin/com/materiiapps/gloom/ui/component/LabeledIcon.kt b/ui/src/commonMain/kotlin/com/materiiapps/gloom/ui/component/LabeledIcon.kt
@@ -0,0 +1,80 @@
+package com.materiiapps.gloom.ui.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.unit.dp
+
+/**
+ * Simple icon and label pair
+ *
+ * @param icon The icon to show with the label
+ * @param label Label to display
+ * @param modifier The [Modifier] for this [LabeledIcon]
+ * @param iconTint The color to use for the [icon]
+ * @param labelColor The color to use for the [label] text
+ */
+@Composable
+fun LabeledIcon(
+    icon: Painter,
+    label: String,
+    modifier: Modifier = Modifier,
+    iconTint: Color = LocalContentColor.current,
+    labelColor: Color = LocalContentColor.current.copy(alpha = 0.6f)
+) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier
+    ) {
+        Icon(
+            painter = icon,
+            contentDescription = null,
+            modifier = Modifier.size(18.dp),
+            tint = iconTint
+        )
+
+        Text(
+            text = label,
+            style = MaterialTheme.typography.labelLarge,
+            color = labelColor
+        )
+    }
+}
+
+/**
+ * Simple icon and label pair
+ *
+ * @param icon The icon to show with the label
+ * @param label Label to display
+ * @param modifier The [Modifier] for this [LabeledIcon]
+ * @param iconTint The color to use for the [icon]
+ * @param labelColor The color to use for the [label] text
+ */
+@Composable
+fun LabeledIcon(
+    icon: ImageVector,
+    label: String,
+    modifier: Modifier = Modifier,
+    iconTint: Color = LocalContentColor.current,
+    labelColor: Color = LocalContentColor.current.copy(alpha = 0.6f)
+) {
+    LabeledIcon(
+        icon = rememberVectorPainter(icon),
+        label = label,
+        modifier = modifier,
+        iconTint = iconTint,
+        labelColor = labelColor
+    )
+}
diff --git a/...c/commonMain/kotlin/com/materiiapps/gloom/ui/screen/explore/component/TrendingRepoItem.kt b/...c/commonMain/kotlin/com/materiiapps/gloom/ui/screen/explore/component/TrendingRepoItem.kt
@@ -26,14 +26,14 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import com.materiiapps.gloom.Res
 import com.materiiapps.gloom.api.dto.user.User
 import com.materiiapps.gloom.domain.manager.TrendingPeriodPreference
 import com.materiiapps.gloom.gql.fragment.TrendingRepository
 import com.materiiapps.gloom.ui.component.Avatar
+import com.materiiapps.gloom.ui.component.LabeledIcon
 import com.materiiapps.gloom.ui.theme.gloomColorScheme
 import com.materiiapps.gloom.ui.util.NumberFormatter
 import com.materiiapps.gloom.ui.util.parsedColor
@@ -163,30 +163,4 @@ fun TrendingRepoItem(
             }
         }
     }
-}
-
-// TODO: Use everywhere
-@Composable
-private fun LabeledIcon(
-    icon: ImageVector,
-    iconTint: Color = LocalContentColor.current,
-    label: String
-) {
-    Row(
-        horizontalArrangement = Arrangement.spacedBy(6.dp),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Icon(
-            imageVector = icon,
-            contentDescription = null,
-            modifier = Modifier.size(18.dp),
-            tint = iconTint
-        )
-
-        Text(
-            text = label,
-            style = MaterialTheme.typography.labelLarge,
-            color = LocalContentColor.current.copy(alpha = 0.6f)
-        )
-    }
 }
diff --git a/ui/src/commonMain/kotlin/com/materiiapps/gloom/ui/screen/home/component/FeedRepoCard.kt b/ui/src/commonMain/kotlin/com/materiiapps/gloom/ui/screen/home/component/FeedRepoCard.kt
@@ -17,18 +17,15 @@ import androidx.compose.material.icons.outlined.Person
 import androidx.compose.material.icons.outlined.StarBorder
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ElevatedCard
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FilledTonalButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.FilterQuality
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
@@ -40,6 +37,7 @@ import com.materiiapps.gloom.Res
 import com.materiiapps.gloom.api.dto.user.User
 import com.materiiapps.gloom.gql.fragment.FeedRepository
 import com.materiiapps.gloom.ui.component.Avatar
+import com.materiiapps.gloom.ui.component.LabeledIcon
 import com.materiiapps.gloom.ui.screen.repo.RepoScreen
 import com.materiiapps.gloom.ui.theme.gloomColorScheme
 import com.materiiapps.gloom.ui.util.NumberFormatter
@@ -50,7 +48,6 @@ import com.seiko.imageloader.rememberImagePainter
 import dev.icerock.moko.resources.compose.stringResource
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun FeedRepoCard(
     repo: FeedRepository,
     starData: Pair<Boolean, Int>? = null,
@@ -71,7 +68,7 @@ fun FeedRepoCard(
         modifier = Modifier
             .fillMaxWidth()
     ) {
-        if (repo.openGraphImageUrl.startsWith("https://repository-images.githubusercontent.com"))
+        if (repo.openGraphImageUrl.startsWith("https://repository-images.githubusercontent.com")) {
             Image(
                 painter = rememberImagePainter(repo.openGraphImageUrl),
                 null,
@@ -80,6 +77,7 @@ fun FeedRepoCard(
                     .aspectRatio(2f)
                     .fillMaxWidth()
             )
+        }
 
         Column(
             verticalArrangement = Arrangement.spacedBy(12.dp),
@@ -94,13 +92,10 @@ fun FeedRepoCard(
             ) {
                 Avatar(
                     url = repo.owner.avatarUrl,
-                    contentDescription = stringResource(
-                        Res.strings.noun_users_avatar,
-                        repo.owner.login
-                    ),
                     type = User.Type.fromTypeName(repo.owner.__typename),
                     modifier = Modifier.size(20.dp)
                 )
+
                 Text(
                     buildAnnotatedString {
                         append(repo.owner.login)
@@ -124,56 +119,29 @@ fun FeedRepoCard(
             Row(
                 horizontalArrangement = Arrangement.spacedBy(10.dp)
             ) {
-                ProvideTextStyle(value = MaterialTheme.typography.labelLarge) {
-                    Row(
-                        horizontalArrangement = Arrangement.spacedBy(6.dp),
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        Icon(
-                            starIcon,
-                            contentDescription = null,
-                            modifier = Modifier.size(18.dp),
-                            tint = starColor
-                        )
-                        Text(text = NumberFormatter.compact(starCount))
-                    }
+                LabeledIcon(
+                    icon = starIcon,
+                    label = NumberFormatter.compact(starCount),
+                    iconTint = starColor
+                )
 
-                    if (repo.primaryLanguage != null) {
-                        Row(
-                            horizontalArrangement = Arrangement.spacedBy(6.dp),
-                            verticalAlignment = Alignment.CenterVertically
-                        ) {
-                            Icon(
-                                Icons.Filled.Circle,
-                                contentDescription = repo.primaryLanguage!!.name,
-                                modifier = Modifier.size(15.dp),
-                                tint = repo.primaryLanguage!!.color?.parsedColor
-                                    ?: MaterialTheme.colorScheme.surfaceVariant
-                            )
-                            Text(text = repo.primaryLanguage!!.name)
-                        }
-                    }
+                repo.primaryLanguage?.let { (color, name) ->
+                    LabeledIcon(
+                        icon = Icons.Filled.Circle,
+                        label = name,
+                        iconTint = color?.parsedColor ?: Color.Black
+                    )
                 }
             }
 
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(6.dp),
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                Icon(
-                    Icons.Outlined.Person,
-                    contentDescription = null,
-                    modifier = Modifier.size(18.dp)
-                )
-                Text(
-                    text = pluralStringResource(
-                        res = Res.plurals.noun_contributors,
-                        count = repo.contributorsCount,
-                        NumberFormatter.compact(repo.contributorsCount)
-                    ),
-                    style = MaterialTheme.typography.labelLarge
+            LabeledIcon(
+                icon = Icons.Outlined.Person,
+                label = pluralStringResource(
+                    res = Res.plurals.noun_contributors,
+                    count = repo.contributorsCount,
+                    NumberFormatter.compact(repo.contributorsCount)
                 )
-            }
+            )
 
             FilledTonalButton(
                 onClick = {