Added images to contributor screen (gdg-berlin-android#332)

sielukm · Jul 5, 2024 · 1f65cda · 1f65cda
2 parents 17770a3 + f17d9a6
commit 1f65cda
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zeabout/ZeAboutScreen.kt b/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zeabout/ZeAboutScreen.kt
@@ -10,8 +10,10 @@ import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -20,10 +22,13 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
+import coil.compose.AsyncImage
 import de.berlindroid.zekompanion.getPlatform
 
 @OptIn(ExperimentalFoundationApi::class)
@@ -54,7 +59,7 @@ fun ZeAbout(
                         .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.9f)),
                 ) {
                     Text(
-                        text = "${contributors.count()} contributors",
+                        text = "Top ${contributors.count()} contributors",
                         modifier = Modifier.padding(8.dp),
                         style = MaterialTheme.typography.bodyMedium,
                         fontSize = 24.sp,
@@ -69,8 +74,13 @@ fun ZeAbout(
                 Row(
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
+                    AsyncImage(
+                        model = contributor.imageUrl,
+                        contentDescription = "avatar",
+                        modifier = Modifier.padding(8.dp).size(50.dp).clip(CircleShape),
+                        )
                     Text(
-                        text = contributor.name,
+                        text = "${contributor.name}: ${contributor.contributions}",
                         color = MaterialTheme.colorScheme.onSurface,
                         modifier = Modifier.padding(8.dp),
                         style = MaterialTheme.typography.bodyMedium,

diff --git a/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zeabout/ZeAboutViewModel.kt b/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zeabout/ZeAboutViewModel.kt
@@ -6,6 +6,7 @@ import dagger.hilt.android.lifecycle.HiltViewModel
 import de.berlindroid.zeapp.zeservices.ZeContributorsService
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.stateIn
 import javax.inject.Inject
 
@@ -15,5 +16,6 @@ class ZeAboutViewModel @Inject constructor(
 ) : ViewModel() {
 
     val lines: StateFlow<List<Contributor>> = contributorsService.contributors()
+        .map { contributors -> contributors.sortedBy { - it.contributions } }
         .stateIn(viewModelScope, SharingStarted.Lazily, initialValue = emptyList())
 }