Merge pull request #1164 from omnivore-app/fix/android-bar-layout

System Bar Padding - Android
2022-09-05 11:27:50 +08:00
parent 7cba83d13e f1eedbf03d
commit e8db087be8
9 changed files with 141 additions and 65 deletions
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/MainActivity.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/MainActivity.kt
@ -5,6 +5,11 @@ import android.view.View
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.viewModels
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import app.omnivore.omnivore.ui.theme.OmnivoreTheme
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowCompat
@ -24,7 +29,13 @@ class MainActivity : ComponentActivity() {

    setContent {
      OmnivoreTheme {
-        RootView(loginViewModel, homeViewModel)
+        Box(
+          modifier = Modifier
+            .fillMaxSize()
+            .background(color = Color.Black)
+        ) {
+          RootView(loginViewModel, homeViewModel)
+        }
      }
    }

--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/auth/WelcomeScreen.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/auth/WelcomeScreen.kt
@ -50,7 +50,6 @@ fun WelcomeScreenContent(viewModel: LoginViewModel) {
    horizontalAlignment = Alignment.Start,
    modifier = Modifier
      .fillMaxSize()
-      .navigationBarsPadding()
      .padding(horizontal = 16.dp)
      .clickable { focusManager.clearFocus() }
  ) {
--- 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
@ -15,6 +15,7 @@ import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import app.omnivore.omnivore.Routes
@ -27,32 +28,32 @@ fun HomeView(
  homeViewModel: HomeViewModel,
  navController: NavHostController
 ) {
-  Scaffold(
-    topBar = {
-      TopAppBar(
-        title = { Text("Home") },
-        backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
-        actions = {
-          IconButton(onClick = { navController.navigate(Routes.Settings.route) }) {
-            Icon(
-              imageVector = Icons.Default.Menu,
-              contentDescription = null
-            )
+    Scaffold(
+      topBar = {
+        TopAppBar(
+          title = { Text("Home") },
+          backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
+          actions = {
+            IconButton(onClick = { navController.navigate(Routes.Settings.route) }) {
+              Icon(
+                imageVector = Icons.Default.Menu,
+                contentDescription = null
+              )
+            }
          }
-        }
+        )
+      }
+    ) { paddingValues ->
+      HomeViewContent(
+        homeViewModel,
+        navController,
+        modifier = Modifier
+          .padding(
+            top = paddingValues.calculateTopPadding(),
+            bottom = paddingValues.calculateBottomPadding()
+          )
      )
    }
-  ) { paddingValues ->
-    HomeViewContent(
-      homeViewModel,
-      navController,
-      modifier = Modifier
-        .padding(
-          top = paddingValues.calculateTopPadding(),
-          bottom = paddingValues.calculateBottomPadding()
-        )
-    )
-  }
 }

@Composable
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/HomeViewModel.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/HomeViewModel.kt
@ -13,6 +13,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.compose.ui.window.Dialog
+import androidx.core.net.toUri
 import androidx.lifecycle.*
 import app.omnivore.omnivore.AppleConstants
 import app.omnivore.omnivore.Constants
@ -67,6 +68,8 @@ class HomeViewModel @Inject constructor(
          readingProgressAnchor = it.node.readingProgressAnchorIndex,
          imageURLString = it.node.image,
          descriptionText = it.node.description,
+          publisherURLString = it.node.originalArticleUrl,
+          author = it.node.author,
          slug = it.node.slug
        )
      }
@ -90,12 +93,16 @@ public data class LinkedItem(
 //  public val documentDirectoryPath: String?,
 //  public val pageURLString: String,
  public val descriptionText: String?,
-//  public val publisherURLString: String?,
+  public val publisherURLString: String?,
 //  public val siteName: String?,
-//  public val author: String?,
+  public val author: String?,
 //  public val publishDate: Any?,
  public val slug: String,
 //  public val isArchived: Boolean,
 //  public val contentReader: String?,
 //  public val originalHtml: String?,
-)
+) {
+  fun publisherDisplayName(): String? {
+    return publisherURLString?.toUri()?.host
+  }
+}
--- 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
@ -2,52 +2,77 @@ 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.foundation.clickable
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Divider
 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.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 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)
-      )
+fun LinkedItemCard(item: LinkedItem, onClickHandler: () -> Unit) {
+  val publisherDisplayName = item.publisherDisplayName()

-      Column(modifier = Modifier.padding(8.dp)) {
+  Column {
+    Row(
+      horizontalArrangement = Arrangement.SpaceBetween,
+      verticalAlignment = Alignment.Top,
+      modifier = Modifier
+        .fillMaxWidth()
+        .padding(12.dp)
+        .clickable(onClick = onClickHandler)
+    ) {
+      Column(
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+        modifier = Modifier
+          .weight(1f, fill = false)
+          .padding(end = 8.dp)
+      ) {
        Text(
          text = item.title,
          style = MaterialTheme.typography.titleMedium,
-          maxLines = 2,
-          overflow = TextOverflow.Ellipsis
+          lineHeight = 20.sp
        )

-        Text(
-          text = item.descriptionText ?: "",
-          maxLines = 1,
-          overflow = TextOverflow.Ellipsis,
-          style = MaterialTheme.typography.bodyMedium
+        if (item.author != null) {
+          Text(
+            text = "By ${item.author}",
+            style = MaterialTheme.typography.bodyMedium,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
+          )
+        }
+
+        if (publisherDisplayName != null) {
+          Text(
+            text = publisherDisplayName,
+            style = MaterialTheme.typography.bodyMedium,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
+          )
+        }
+      }
+
+      if (item.imageURLString != null) {
+        Image(
+          painter = rememberAsyncImagePainter(item.imageURLString),
+          contentDescription = "Image associated with linked item",
+          modifier = Modifier
+            .padding(top = 6.dp)
+            .clip(RoundedCornerShape(6.dp))
+            .size(80.dp)
        )
      }
    }
+
+    Divider(color = MaterialTheme.colorScheme.outlineVariant, thickness = 1.dp)
  }
 }
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/reader/WebAppReader.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/reader/WebAppReader.kt
@ -6,6 +6,7 @@ import android.webkit.CookieManager
 import android.webkit.WebView
 import android.webkit.WebViewClient
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.viewinterop.AndroidView

@SuppressLint("SetJavaScriptEnabled")
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/root/RootView.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/root/RootView.kt
@ -1,9 +1,15 @@
 package app.omnivore.omnivore.ui.root

 import SettingsView
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
@ -13,20 +19,46 @@ import app.omnivore.omnivore.ui.auth.WelcomeScreen
 import app.omnivore.omnivore.ui.home.HomeView
 import app.omnivore.omnivore.ui.home.HomeViewModel
 import app.omnivore.omnivore.ui.reader.ArticleWebView
+import com.google.accompanist.systemuicontroller.rememberSystemUiController

@Composable
-fun RootView(loginViewModel: LoginViewModel, homeViewModel: HomeViewModel) {
+fun RootView(
+  loginViewModel: LoginViewModel,
+  homeViewModel: HomeViewModel
+) {
  val hasAuthToken: Boolean by loginViewModel.hasAuthTokenLiveData.observeAsState(false)
+  val systemUiController = rememberSystemUiController()
+  val useDarkIcons = !isSystemInDarkTheme()

-  if (hasAuthToken) {
-    PrimaryNavigator(loginViewModel = loginViewModel, homeViewModel = homeViewModel)
-  } else {
-    WelcomeScreen(viewModel = loginViewModel)
+  DisposableEffect(systemUiController, useDarkIcons) {
+    systemUiController.setSystemBarsColor(
+      color = Color.Black,
+      darkIcons = false
+    )
+
+    onDispose {}
+  }
+
+  Box(
+    modifier = Modifier
+      .systemBarsPadding()
+  ) {
+    if (hasAuthToken) {
+      PrimaryNavigator(
+        loginViewModel = loginViewModel,
+        homeViewModel = homeViewModel
+      )
+    } else {
+      WelcomeScreen(viewModel = loginViewModel)
+    }
  }
 }

@Composable
-fun PrimaryNavigator(loginViewModel: LoginViewModel, homeViewModel: HomeViewModel){
+fun PrimaryNavigator(
+  loginViewModel: LoginViewModel,
+  homeViewModel: HomeViewModel
+) {
  val navController = rememberNavController()

  NavHost(navController = navController, startDestination = Routes.Home.route) {
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/settings/SettingsContent.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/settings/SettingsContent.kt
@ -23,7 +23,7 @@ import com.google.android.gms.auth.api.signin.GoogleSignInOptions
@Composable
 fun SettingsView(
  loginViewModel: LoginViewModel,
-  navController: NavHostController
+  navController: NavHostController,
 ) {
  Scaffold(
    topBar = {
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/theme/Theme.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/theme/Theme.kt
@ -77,7 +77,7 @@ fun OmnivoreTheme(
    val context = LocalContext.current
    if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
  } else {
-    if (darkTheme) DarkColors else LightColors
+    if (darkTheme) darkColorScheme() else lightColorScheme()
  }

  MaterialTheme(