Adapt Jetnews to large screens and Jetcaster to tabletop posture (#678)

* [Jetnews] Snackbars large screens support (#631) * [Jetnews] Add WindowSize breakpoints (#632) * [Jetnews] Add NavRail for large screens (#636) * Add initial large screen exploration * PR feedback and refine integration with navrail * Fix formatting and tests * Use rememberUpdatedState for notifyInput * Add remember for windowSize * [Jetnews] Interests screen LS support (#639) * [Jetnews] Large screen support for the Interests tab (#641) * [JetNews] Fix state saving with drawer (#653) * [JetNews] Fix state saving with drawer * Extract into rememberSizeAwareDrawerState * [JetNews] Convert navrail/drawer decision to use currentWindowMetrics (#654) * [JetNews] Convert navrail/drawer decision to use currentWindowMetrics * Move window metrics helpers to WindowSize.kt * [Jetnews] Better TopAppBar in large screens (#650) * [Jetnews] Move NavRail to top level component (#655) * [JetNews] Update window size breakpoints (#658) * [JetNews] Adjust medium behavior (#657) * [JetNews] Adjust medium behavior * Move column decision out of BoxWithConstraints * Follow my own rule for isDrawerActive * Update for PR feedback * Spotless apply * Add TODO for BoxWithConstraints usage * [JetNews] Replace currentWindowMetrics flow with synchronous calculation (#660) * [Jetnews] Consolidate compact and medium layouts (#659) * [Jetnews] Add space between NavRail icons (#663) * [Jetnews] Custom interests layout (#665) * [JetNews] Move window size calculation to activity level (#667) * [JetNews] Move window size calculation to activity level * Re-order WindowSize functions * Fix formatting * Merge main into ls (#672) * Implemented swipe to delete for Jetsnack cart * Replace logic for SwipeToDismiss composable Added Animated visibility as well * Requested adjustments * Removed Opt in * Spotless apply * PR fixes * Swipe to delete polish * Spotless * Removed unnecessary Row * Code polish * feat : improve UX by setting Button semantic role to play image button fix : fix not beeing able to move from CategoryPodcast to EpisodeList with Talkback feat: merge podcast category card with podcast title * Break long lines * Content to trailing lambda, added comments * Fix invalid neutral color #591 * [Jetnews] Showcase PreviewParameterProvider usage. * [Jetnews] Move PostPreviewParameterProvider.kt and add documentation * Fix kdoc format * [Jetsnack] Snackbar support (#645) * Finish checksum.sh sentence (#622) * [All] Update to Compose 1.0.2 * Spotless apply * [All] Revert to previous version of ktlint * [Jetsnack] Add state holder to JetsnackApp (#646) * fix : fixing formating issue * Update Compose Material Catalog AOSP link (#656) * [Crane] Use createEmptyComposeRule for test with injection * [All] Update to Compose 1.0.3 (#671) * [Jetnews] Update to Compose 1.1.0-alpha05 * [Jetnews] Spotless Co-authored-by: Angeles <[email protected]> Co-authored-by: DEMEY Fanny <[email protected]> Co-authored-by: Chris Sinco <[email protected]> Co-authored-by: Jolanda Verhoef <[email protected]> Co-authored-by: Jose Alcérreca <[email protected]> Co-authored-by: Alex Vanyo <[email protected]> Co-authored-by: Nick Rout <[email protected]> * [Jetcaster] Add tabletop posture support to the Player screen (#676) Co-authored-by: Alex Vanyo <[email protected]> Co-authored-by: Angeles <[email protected]> Co-authored-by: DEMEY Fanny <[email protected]> Co-authored-by: Chris Sinco <[email protected]> Co-authored-by: Jolanda Verhoef <[email protected]> Co-authored-by: Jose Alcérreca <[email protected]> Co-authored-by: Nick Rout <[email protected]>
android · Oct 13, 2021 · d380475 · d380475
2 parents 2332f47 + 99aef7b
commit d380475
Show file tree

Hide file tree

Showing 45 changed files with 2,557 additions and 1,241 deletions.
diff --git a/JetNews/app/build.gradle b/JetNews/app/build.gradle
@@ -117,6 +117,8 @@ dependencies {
 
     implementation 'androidx.navigation:navigation-compose:2.4.0-alpha10'
 
+    implementation "androidx.window:window:1.0.0-beta02"
+
     androidTestImplementation 'androidx.test:core:1.4.0'
     androidTestImplementation 'androidx.test:rules:1.4.0'
     androidTestImplementation 'androidx.test:runner:1.4.0'

diff --git a/JetNews/app/src/main/java/com/example/jetnews/data/interests/InterestsRepository.kt b/JetNews/app/src/main/java/com/example/jetnews/data/interests/InterestsRepository.kt
@@ -19,7 +19,7 @@ package com.example.jetnews.data.interests
 import com.example.jetnews.data.Result
 import kotlinx.coroutines.flow.Flow
 
-typealias TopicsMap = Map<String, List<String>>
+data class InterestSection(val title: String, val interests: List<String>)
 
 /**
  * Interface to the Interests data layer.
@@ -29,7 +29,7 @@ interface InterestsRepository {
     /**
      * Get relevant topics to the user.
      */
-    suspend fun getTopics(): Result<TopicsMap>
+    suspend fun getTopics(): Result<List<InterestSection>>
 
     /**
      * Get list of people.

diff --git a/JetNews/app/src/main/java/com/example/jetnews/data/interests/impl/FakeInterestsRepository.kt b/JetNews/app/src/main/java/com/example/jetnews/data/interests/impl/FakeInterestsRepository.kt
@@ -17,9 +17,9 @@
 package com.example.jetnews.data.interests.impl
 
 import com.example.jetnews.data.Result
+import com.example.jetnews.data.interests.InterestSection
 import com.example.jetnews.data.interests.InterestsRepository
 import com.example.jetnews.data.interests.TopicSelection
-import com.example.jetnews.data.interests.TopicsMap
 import com.example.jetnews.utils.addOrRemove
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.flow.Flow
@@ -35,10 +35,13 @@ import kotlinx.coroutines.sync.withLock
 class FakeInterestsRepository : InterestsRepository {
 
     private val topics by lazy {
-        mapOf(
-            "Android" to listOf("Jetpack Compose", "Kotlin", "Jetpack"),
-            "Programming" to listOf("Kotlin", "Declarative UIs", "Java"),
-            "Technology" to listOf("Pixel", "Google")
+        listOf(
+            InterestSection("Android", listOf("Jetpack Compose", "Kotlin", "Jetpack")),
+            InterestSection(
+                "Programming",
+                listOf("Kotlin", "Declarative UIs", "Java", "Unidirectional Data Flow", "C++")
+            ),
+            InterestSection("Technology", listOf("Pixel", "Google"))
         )
     }
 
@@ -78,7 +81,7 @@ class FakeInterestsRepository : InterestsRepository {
     // Used to make suspend functions that read and update state safe to call from any thread
     private val mutex = Mutex()
 
-    override suspend fun getTopics(): Result<TopicsMap> {
+    override suspend fun getTopics(): Result<List<InterestSection>> {
         return Result.Success(topics)
     }
 

diff --git a/JetNews/app/src/main/java/com/example/jetnews/data/posts/PostsRepository.kt b/JetNews/app/src/main/java/com/example/jetnews/data/posts/PostsRepository.kt
@@ -18,6 +18,7 @@ package com.example.jetnews.data.posts
 
 import com.example.jetnews.data.Result
 import com.example.jetnews.model.Post
+import com.example.jetnews.model.PostsFeed
 import kotlinx.coroutines.flow.Flow
 
 /**
@@ -33,7 +34,7 @@ interface PostsRepository {
     /**
      * Get JetNews posts.
      */
-    suspend fun getPosts(): Result<List<Post>>
+    suspend fun getPostsFeed(): Result<PostsFeed>
 
     /**
      * Observe the current favorites

diff --git a/JetNews/app/src/main/java/com/example/jetnews/data/posts/impl/BlockingFakePostsRepository.kt b/JetNews/app/src/main/java/com/example/jetnews/data/posts/impl/BlockingFakePostsRepository.kt
@@ -19,6 +19,7 @@ package com.example.jetnews.data.posts.impl
 import com.example.jetnews.data.Result
 import com.example.jetnews.data.posts.PostsRepository
 import com.example.jetnews.model.Post
+import com.example.jetnews.model.PostsFeed
 import com.example.jetnews.utils.addOrRemove
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
@@ -38,7 +39,7 @@ class BlockingFakePostsRepository : PostsRepository {
 
     override suspend fun getPost(postId: String?): Result<Post> {
         return withContext(Dispatchers.IO) {
-            val post = posts.find { it.id == postId }
+            val post = posts.allPosts.find { it.id == postId }
             if (post == null) {
                 Result.Error(IllegalArgumentException("Unable to find post"))
             } else {
@@ -47,7 +48,7 @@ class BlockingFakePostsRepository : PostsRepository {
         }
     }
 
-    override suspend fun getPosts(): Result<List<Post>> {
+    override suspend fun getPostsFeed(): Result<PostsFeed> {
         return Result.Success(posts)
     }
 

diff --git a/JetNews/app/src/main/java/com/example/jetnews/data/posts/impl/FakePostsRepository.kt b/JetNews/app/src/main/java/com/example/jetnews/data/posts/impl/FakePostsRepository.kt
@@ -19,6 +19,7 @@ package com.example.jetnews.data.posts.impl
 import com.example.jetnews.data.Result
 import com.example.jetnews.data.posts.PostsRepository
 import com.example.jetnews.model.Post
+import com.example.jetnews.model.PostsFeed
 import com.example.jetnews.utils.addOrRemove
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
@@ -44,7 +45,7 @@ class FakePostsRepository : PostsRepository {
 
     override suspend fun getPost(postId: String?): Result<Post> {
         return withContext(Dispatchers.IO) {
-            val post = posts.find { it.id == postId }
+            val post = posts.allPosts.find { it.id == postId }
             if (post == null) {
                 Result.Error(IllegalArgumentException("Post not found"))
             } else {
@@ -53,7 +54,7 @@ class FakePostsRepository : PostsRepository {
         }
     }
 
-    override suspend fun getPosts(): Result<List<Post>> {
+    override suspend fun getPostsFeed(): Result<PostsFeed> {
         return withContext(Dispatchers.IO) {
             delay(800) // pretend we're on a slow network
             if (shouldRandomlyFail()) {

diff --git a/JetNews/app/src/main/java/com/example/jetnews/data/posts/impl/PostsData.kt b/JetNews/app/src/main/java/com/example/jetnews/data/posts/impl/PostsData.kt
@@ -24,6 +24,7 @@ import com.example.jetnews.model.Paragraph
 import com.example.jetnews.model.ParagraphType
 import com.example.jetnews.model.Post
 import com.example.jetnews.model.PostAuthor
+import com.example.jetnews.model.PostsFeed
 import com.example.jetnews.model.Publication
 
 /**
@@ -1012,16 +1013,18 @@ val post5 = Post(
     imageThumbId = R.drawable.post_5_thumb
 )
 
-val posts: List<Post> =
-    listOf(
-        post1,
-        post2,
-        post3,
-        post4,
-        post5,
-        post1.copy(id = "post6"),
-        post2.copy(id = "post7"),
-        post3.copy(id = "post8"),
-        post4.copy(id = "post9"),
-        post5.copy(id = "post10")
+val posts: PostsFeed =
+    PostsFeed(
+        highlightedPost = post4,
+        recommendedPosts = listOf(post1, post2, post3),
+        popularPosts = listOf(
+            post5,
+            post1.copy(id = "post6"),
+            post2.copy(id = "post7")
+        ),
+        recentPosts = listOf(
+            post3.copy(id = "post8"),
+            post4.copy(id = "post9"),
+            post5.copy(id = "post10")
+        )
     )
diff --git a/...va/com/example/jetnews/utils/Modifiers.kt → ...va/com/example/jetnews/model/PostsFeed.kt b/...va/com/example/jetnews/utils/Modifiers.kt → ...va/com/example/jetnews/model/PostsFeed.kt
@@ -14,19 +14,20 @@
  * limitations under the License.
  */
 
-package com.example.jetnews.utils
-
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.layout.wrapContentWidth
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
+package com.example.jetnews.model
 
 /**
- * Support wide screen by making the content width max 840dp, centered horizontally.
+ * A container of [Post]s, partitioned into different categories.
  */
-fun Modifier.supportWideScreen() = this
-    .fillMaxWidth()
-    .wrapContentWidth(align = Alignment.CenterHorizontally)
-    .widthIn(max = 840.dp)
+data class PostsFeed(
+    val highlightedPost: Post,
+    val recommendedPosts: List<Post>,
+    val popularPosts: List<Post>,
+    val recentPosts: List<Post>,
+) {
+    /**
+     * Returns a flattened list of all posts contained in the feed.
+     */
+    val allPosts: List<Post> =
+        listOf(highlightedPost) + recommendedPosts + popularPosts + recentPosts
+}
diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/AppDrawer.kt
@@ -24,7 +24,6 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.Divider
@@ -46,24 +45,25 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.jetnews.R
+import com.example.jetnews.ui.components.JetnewsIcon
+import com.example.jetnews.ui.components.NavigationIcon
 import com.example.jetnews.ui.theme.JetnewsTheme
 
 @Composable
 fun AppDrawer(
     currentRoute: String,
     navigateToHome: () -> Unit,
     navigateToInterests: () -> Unit,
-    closeDrawer: () -> Unit
+    closeDrawer: () -> Unit,
+    modifier: Modifier = Modifier
 ) {
-
-    Column(modifier = Modifier.fillMaxSize()) {
-        Spacer(Modifier.height(24.dp))
+    Column(modifier = modifier.fillMaxSize()) {
         JetNewsLogo(Modifier.padding(16.dp))
         Divider(color = MaterialTheme.colors.onSurface.copy(alpha = .2f))
         DrawerButton(
             icon = Icons.Filled.Home,
             label = stringResource(id = R.string.home_title),
-            isSelected = currentRoute == MainDestinations.HOME_ROUTE,
+            isSelected = currentRoute == JetnewsDestinations.HOME_ROUTE,
             action = {
                 navigateToHome()
                 closeDrawer()
@@ -73,7 +73,7 @@ fun AppDrawer(
         DrawerButton(
             icon = Icons.Filled.ListAlt,
             label = stringResource(id = R.string.interests_title),
-            isSelected = currentRoute == MainDestinations.INTERESTS_ROUTE,
+            isSelected = currentRoute == JetnewsDestinations.INTERESTS_ROUTE,
             action = {
                 navigateToInterests()
                 closeDrawer()
@@ -85,11 +85,7 @@ fun AppDrawer(
 @Composable
 private fun JetNewsLogo(modifier: Modifier = Modifier) {
     Row(modifier = modifier) {
-        Image(
-            painter = painterResource(R.drawable.ic_jetnews_logo),
-            contentDescription = null, // decorative
-            colorFilter = ColorFilter.tint(MaterialTheme.colors.primary)
-        )
+        JetnewsIcon()
         Spacer(Modifier.width(8.dp))
         Image(
             painter = painterResource(R.drawable.ic_jetnews_wordmark),
@@ -108,11 +104,6 @@ private fun DrawerButton(
     modifier: Modifier = Modifier
 ) {
     val colors = MaterialTheme.colors
-    val imageAlpha = if (isSelected) {
-        1f
-    } else {
-        0.6f
-    }
     val textIconColor = if (isSelected) {
         colors.primary
     } else {
@@ -141,11 +132,11 @@ private fun DrawerButton(
                 verticalAlignment = Alignment.CenterVertically,
                 modifier = Modifier.fillMaxWidth()
             ) {
-                Image(
-                    imageVector = icon,
+                NavigationIcon(
+                    icon = icon,
+                    isSelected = isSelected,
                     contentDescription = null, // decorative
-                    colorFilter = ColorFilter.tint(textIconColor),
-                    alpha = imageAlpha
+                    tintColor = textIconColor
                 )
                 Spacer(Modifier.width(16.dp))
                 Text(
@@ -165,7 +156,7 @@ fun PreviewAppDrawer() {
     JetnewsTheme {
         Surface {
             AppDrawer(
-                currentRoute = MainDestinations.HOME_ROUTE,
+                currentRoute = JetnewsDestinations.HOME_ROUTE,
                 navigateToHome = {},
                 navigateToInterests = {},
                 closeDrawer = { }