diff --git a/android/Omnivore/app/build.gradle b/android/Omnivore/app/build.gradle index 185ef7e89..c86595512 100644 --- a/android/Omnivore/app/build.gradle +++ b/android/Omnivore/app/build.gradle @@ -156,6 +156,8 @@ dependencies { implementation 'com.google.android.gms:play-services-auth:20.2.0' implementation "com.google.accompanist:accompanist-systemuicontroller:0.25.1" + + implementation("io.coil-kt:coil-compose:2.2.0") } apollo { diff --git a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/HomeView.kt b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/HomeView.kt index ed67e8dbf..99769a54a 100644 --- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/HomeView.kt +++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/HomeView.kt @@ -6,6 +6,7 @@ import android.net.Uri import android.util.Log import android.view.ViewGroup import android.webkit.* +import android.widget.Space import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* @@ -50,19 +51,21 @@ fun HomeView(loginViewModel: LoginViewModel, homeViewModel: HomeViewModel) { .fillMaxSize() .padding(horizontal = 6.dp) ) { - item { - Text("You have a valid auth token. Nice. Go save something in Chrome!") - } item { - LogoutButton { loginViewModel.logout() } + Row( + horizontalArrangement = Arrangement.End + ) { + Spacer(modifier = Modifier.weight(1.0F)) + LogoutButton { loginViewModel.logout() } + } } items(linkedItems) { item -> - Text(item.title, modifier = Modifier.clickable { - selectedItemSlug.value = item.slug - }) - Spacer(modifier = Modifier.height(16.dp)) + LinkedItemCard( + item = item, + onClickHandler = { selectedItemSlug.value = item.slug } + ) } } @@ -134,8 +137,8 @@ fun ArticleWebView(slug: String) { CookieManager.getInstance().setAcceptThirdPartyCookies(this, true) CookieManager.getInstance().setAcceptCookie(true) CookieManager.getInstance().setCookie("https://api-demo.omnivore.app", authCookieString) { + loadUrl(url) } - loadUrl(url) } }, update = { it.loadUrl(url) diff --git a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/LinkedItemCard.kt b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/LinkedItemCard.kt new file mode 100644 index 000000000..c4ab6d4ed --- /dev/null +++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/LinkedItemCard.kt @@ -0,0 +1,53 @@ +package app.omnivore.omnivore.ui.home + +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.Image +import androidx.compose.material3.Card +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.dp +import coil.compose.rememberAsyncImagePainter + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun LinkedItemCard( + item: LinkedItem, + onClickHandler: () -> Unit, + modifier: Modifier = Modifier +) { + Card( + onClick = { onClickHandler() }, + shape = MaterialTheme.shapes.medium, + modifier = modifier + .fillMaxWidth() + .padding(15.dp) + ) { + Row { + Image( + painter = rememberAsyncImagePainter(item.imageURLString), + contentDescription = "Image associated with linked item", + modifier = Modifier.size(100.dp) + ) + + Column(modifier = Modifier.padding(8.dp)) { + Text( + text = item.title, + style = MaterialTheme.typography.titleMedium, + maxLines = 2, + overflow = TextOverflow.Ellipsis + ) + + Text( + text = item.descriptionText ?: "", + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = MaterialTheme.typography.bodyMedium + ) + } + } + } +}