Merge pull request android#516 from android/jv/jn_improvs

[Jetnews] Improve @previews
bentrengrove · May 17, 2021 · 16b5083 · 16b5083
2 parents 0056e94 + a668bf0
commit 16b5083
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 287 deletions.
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
@@ -16,6 +16,7 @@
 
 package com.example.jetnews.ui
 
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -45,6 +46,7 @@ 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.theme.JetnewsTheme
 
 @Composable
 fun AppDrawer(
@@ -157,27 +159,17 @@ private fun DrawerButton(
 }
 
 @Preview("Drawer contents")
+@Preview("Drawer contents (dark)", uiMode = UI_MODE_NIGHT_YES)
 @Composable
 fun PreviewAppDrawer() {
-    ThemedPreview {
-        AppDrawer(
-            currentRoute = MainDestinations.HOME_ROUTE,
-            navigateToHome = {},
-            navigateToInterests = {},
-            closeDrawer = { }
-        )
-    }
-}
-
-@Preview("Drawer contents dark theme")
-@Composable
-fun PreviewAppDrawerDark() {
-    ThemedPreview(darkTheme = true) {
-        AppDrawer(
-            currentRoute = MainDestinations.HOME_ROUTE,
-            navigateToHome = {},
-            navigateToInterests = {},
-            closeDrawer = { }
-        )
+    JetnewsTheme {
+        Surface {
+            AppDrawer(
+                currentRoute = MainDestinations.HOME_ROUTE,
+                navigateToHome = {},
+                navigateToInterests = {},
+                closeDrawer = { }
+            )
+        }
     }
 }
diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/PreviewUtils.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/PreviewUtils.kt
diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/article/ArticleScreen.kt
@@ -49,6 +49,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.jetnews.R
@@ -258,8 +259,10 @@ private fun sharePost(post: Post, context: Context) {
     context.startActivity(Intent.createChooser(intent, "Share post"))
 }
 
-@Preview("Light theme")
-@Preview("Dark theme", uiMode = UI_MODE_NIGHT_YES)
+@Preview("Article screen")
+@Preview("Article screen (dark)", uiMode = UI_MODE_NIGHT_YES)
+@Preview("Article screen (big font)", fontScale = 1.5f)
+@Preview("Article screen (large screen)", device = Devices.PIXEL_C)
 @Composable
 fun PreviewArticle() {
     JetnewsTheme {

diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/article/PostContent.kt
@@ -16,6 +16,7 @@
 
 package com.example.jetnews.ui.article
 
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -72,7 +73,7 @@ import com.example.jetnews.model.Metadata
 import com.example.jetnews.model.Paragraph
 import com.example.jetnews.model.ParagraphType
 import com.example.jetnews.model.Post
-import com.example.jetnews.ui.ThemedPreview
+import com.example.jetnews.ui.theme.JetnewsTheme
 
 private val defaultSpacerSize = 16.dp
 
@@ -343,17 +344,12 @@ private val Colors.codeBlockBackground: Color
     get() = onSurface.copy(alpha = .15f)
 
 @Preview("Post content")
+@Preview("Post content (dark)", uiMode = UI_MODE_NIGHT_YES)
 @Composable
 fun PreviewPost() {
-    ThemedPreview {
-        PostContent(post = post3)
-    }
-}
-
-@Preview("Post content dark theme")
-@Composable
-fun PreviewPostDark() {
-    ThemedPreview(darkTheme = true) {
-        PostContent(post = post3)
+    JetnewsTheme {
+        Surface {
+            PostContent(post = post3)
+        }
     }
 }
diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt
@@ -16,6 +16,7 @@
 
 package com.example.jetnews.ui.home
 
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -48,16 +49,17 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.jetnews.R
 import com.example.jetnews.data.Result
 import com.example.jetnews.data.posts.PostsRepository
 import com.example.jetnews.data.posts.impl.BlockingFakePostsRepository
 import com.example.jetnews.model.Post
-import com.example.jetnews.ui.ThemedPreview
 import com.example.jetnews.ui.components.InsetAwareTopAppBar
 import com.example.jetnews.ui.state.UiState
+import com.example.jetnews.ui.theme.JetnewsTheme
 import com.example.jetnews.utils.produceUiState
 import com.example.jetnews.utils.supportWideScreen
 import com.google.accompanist.insets.LocalWindowInsets
@@ -415,28 +417,25 @@ private fun PostListDivider() {
     )
 }
 
-@Preview("Home screen body")
+@Preview("Home screen")
+@Preview("Home screen (dark)", uiMode = UI_MODE_NIGHT_YES)
+@Preview("Home screen (big font)", fontScale = 1.5f)
+@Preview("Home screen (large screen)", device = Devices.PIXEL_C)
 @Composable
-fun PreviewHomeScreenBody() {
-    ThemedPreview {
-        val posts = loadFakePosts()
-        PostList(posts, { }, setOf(), {})
-    }
-}
-
-@Preview("Home screen dark theme")
-@Composable
-fun PreviewHomeScreenBodyDark() {
-    ThemedPreview(darkTheme = true) {
-        val posts = loadFakePosts()
-        PostList(posts, {}, setOf(), {})
-    }
-}
-
-@Composable
-private fun loadFakePosts(): List<Post> {
+fun PreviewHomeScreen() {
     val posts = runBlocking {
-        BlockingFakePostsRepository().getPosts()
+        (BlockingFakePostsRepository().getPosts() as Result.Success).data
+    }
+    JetnewsTheme {
+        HomeScreen(
+            posts = UiState(data = posts),
+            favorites = setOf(),
+            onToggleFavorite = { /*TODO*/ },
+            onRefreshPosts = { /*TODO*/ },
+            onErrorDismiss = { /*TODO*/ },
+            navigateToArticle = { /*TODO*/ },
+            openDrawer = { /*TODO*/ },
+            scaffoldState = rememberScaffoldState()
+        )
     }
-    return (posts as Result.Success).data
 }
diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCardTop.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCardTop.kt
@@ -27,6 +27,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -38,7 +39,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.jetnews.data.posts.impl.posts
 import com.example.jetnews.model.Post
-import com.example.jetnews.ui.ThemedPreview
+import com.example.jetnews.ui.theme.JetnewsTheme
 
 @Composable
 fun PostCardTop(post: Post, modifier: Modifier = Modifier) {
@@ -99,13 +100,13 @@ fun TutorialPreviewFontscale() {
 }
 
 @Composable
-fun TutorialPreviewTemplate(
-    darkTheme: Boolean = false
-) {
+fun TutorialPreviewTemplate() {
     val previewPosts = posts.subList(1, 2)
     val post = previewPosts[0]
 
-    ThemedPreview(darkTheme) {
-        PostCardTop(post)
+    JetnewsTheme {
+        Surface {
+            PostCardTop(post)
+        }
     }
 }
diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCardYourNetwork.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCardYourNetwork.kt
@@ -16,6 +16,7 @@
 
 package com.example.jetnews.ui.home
 
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
@@ -25,6 +26,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.Card
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -36,7 +38,7 @@ import androidx.compose.ui.unit.dp
 import com.example.jetnews.data.posts.impl.post1
 import com.example.jetnews.model.Post
 import com.example.jetnews.model.PostAuthor
-import com.example.jetnews.ui.ThemedPreview
+import com.example.jetnews.ui.theme.JetnewsTheme
 
 @Composable
 fun PostCardPopular(
@@ -84,18 +86,13 @@ fun PostCardPopular(
 }
 
 @Preview("Regular colors")
+@Preview("Dark colors", uiMode = UI_MODE_NIGHT_YES)
 @Composable
 fun PreviewPostCardPopular() {
-    ThemedPreview {
-        PostCardPopular(post1, {})
-    }
-}
-
-@Preview("Dark colors")
-@Composable
-fun PreviewPostCardPopularDark() {
-    ThemedPreview(darkTheme = true) {
-        PostCardPopular(post1, {})
+    JetnewsTheme {
+        Surface {
+            PostCardPopular(post1, {})
+        }
     }
 }
 
@@ -111,16 +108,18 @@ fun PreviewPostCardPopularLongText() {
         facilisis eget magna quis, rhoncus volutpat mi. Phasellus vel sollicitudin quam, eu
         consectetur dolor. Proin lobortis venenatis sem, in vestibulum est. Duis ac nibh interdum,
         """.trimIndent()
-    ThemedPreview {
-        PostCardPopular(
-            post1.copy(
-                title = "Title$loremIpsum",
-                metadata = post1.metadata.copy(
-                    author = PostAuthor("Author: $loremIpsum"),
-                    readTimeMinutes = Int.MAX_VALUE
-                )
-            ),
-            {}
-        )
+    JetnewsTheme {
+        Surface {
+            PostCardPopular(
+                post1.copy(
+                    title = "Title$loremIpsum",
+                    metadata = post1.metadata.copy(
+                        author = PostAuthor("Author: $loremIpsum"),
+                        readTimeMinutes = Int.MAX_VALUE
+                    )
+                ),
+                {}
+            )
+        }
     }
 }