Bump to dev05 snapshot version

Changes: - Bumped version - Convert screens to use new Scaffold component - Use modifiers for PostCardPopular instead of Space for margin - Add @Preview throughout for various states and components - Fixed all warnings - Updated to new Ambient syntax
omtians9425 · Mar 6, 2020 · 7be7514 · 7be7514
1 parent fc15b20
commit 7be7514
Show file tree

Hide file tree

Showing 8 changed files with 248 additions and 146 deletions.
diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt
@@ -18,7 +18,6 @@ package com.example.jetnews.ui
 
 import androidx.annotation.DrawableRes
 import androidx.compose.Composable
-import androidx.compose.state
 import androidx.ui.animation.Crossfade
 import androidx.ui.core.Modifier
 import androidx.ui.core.Text
@@ -33,9 +32,7 @@ import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
 import androidx.ui.layout.Spacer
 import androidx.ui.material.Divider
-import androidx.ui.material.DrawerState
 import androidx.ui.material.MaterialTheme
-import androidx.ui.material.ModalDrawerLayout
 import androidx.ui.material.TextButton
 import androidx.ui.material.surface.Surface
 import androidx.ui.tooling.preview.Preview
@@ -48,42 +45,29 @@ import com.example.jetnews.ui.interests.InterestsScreen
 @Composable
 fun JetnewsApp() {
 
-    val (drawerState, onDrawerStateChange) = state { DrawerState.Closed }
-
     MaterialTheme(
         colors = lightThemeColors,
         typography = themeTypography
     ) {
-        ModalDrawerLayout(
-            drawerState = drawerState,
-            onStateChange = onDrawerStateChange,
-            gesturesEnabled = drawerState == DrawerState.Opened,
-            drawerContent = {
-                AppDrawer(
-                    currentScreen = JetnewsStatus.currentScreen,
-                    closeDrawer = { onDrawerStateChange(DrawerState.Closed) }
-                )
-            },
-            bodyContent = { AppContent { onDrawerStateChange(DrawerState.Opened) } }
-        )
+       AppContent()
     }
 }
 
 @Composable
-private fun AppContent(openDrawer: () -> Unit) {
+private fun AppContent() {
     Crossfade(JetnewsStatus.currentScreen) { screen ->
         Surface(color = MaterialTheme.colors().background) {
             when (screen) {
-                is Screen.Home -> HomeScreen { openDrawer() }
-                is Screen.Interests -> InterestsScreen { openDrawer() }
+                is Screen.Home -> HomeScreen()
+                is Screen.Interests -> InterestsScreen()
                 is Screen.Article -> ArticleScreen(postId = screen.postId)
             }
         }
     }
 }
 
 @Composable
-private fun AppDrawer(
+fun AppDrawer(
     currentScreen: Screen,
     closeDrawer: () -> Unit
 ) {
@@ -169,7 +153,7 @@ private fun DrawerButton(
 
 @Preview
 @Composable
-fun preview() {
+fun PreviewJetnewsApp() {
     AppDrawer(
         currentScreen = JetnewsStatus.currentScreen,
         closeDrawer = { }

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
@@ -26,14 +26,14 @@ import androidx.ui.core.ContextAmbient
 import androidx.ui.core.Text
 import androidx.ui.foundation.Clickable
 import androidx.ui.graphics.vector.DrawVector
-import androidx.ui.layout.Column
 import androidx.ui.layout.Container
 import androidx.ui.layout.LayoutHeight
 import androidx.ui.layout.LayoutPadding
 import androidx.ui.layout.LayoutSize
 import androidx.ui.layout.Row
 import androidx.ui.material.AlertDialog
 import androidx.ui.material.MaterialTheme
+import androidx.ui.material.Scaffold
 import androidx.ui.material.TextButton
 import androidx.ui.material.TopAppBar
 import androidx.ui.material.ripple.Ripple
@@ -65,28 +65,34 @@ fun ArticleScreen(postId: String) {
         }
     }
 
-    Column {
-        TopAppBar(
-            title = {
-                Text(
-                    text = "Published in: ${post.publication?.name}",
-                    style = MaterialTheme.typography().subtitle2
-                )
-            },
-            navigationIcon = {
-                VectorImageButton(R.drawable.ic_back) {
-                    navigateTo(Screen.Home)
+    Scaffold(
+        topAppBar = {
+            TopAppBar(
+                title = {
+                    Text(
+                        text = "Published in: ${post.publication?.name}",
+                        style = MaterialTheme.typography().subtitle2
+                    )
+                },
+                navigationIcon = {
+                    VectorImageButton(R.drawable.ic_back) {
+                        navigateTo(Screen.Home)
+                    }
                 }
-            }
-        )
-        PostContent(modifier = LayoutFlexible(1f), post = post)
-        BottomBar(post) { showDialog = true }
-    }
+            )
+        },
+        bodyContent = {
+            PostContent(post = post)
+        },
+        bottomAppBar = {
+            BottomBar(post) { showDialog = true }
+        }
+    )
 }
 
 @Composable
 private fun BottomBar(post: Post, onUnimplementedAction: () -> Unit) {
-    val context = ambient(ContextAmbient)
+    val context = ContextAmbient.current
     Surface(elevation = 2.dp) {
         Container(modifier = LayoutHeight(56.dp) + LayoutSize.Fill) {
             Row {

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
@@ -17,54 +17,80 @@
 package com.example.jetnews.ui.home
 
 import androidx.compose.Composable
+import androidx.compose.remember
+import androidx.ui.core.Modifier
 import androidx.ui.core.Opacity
 import androidx.ui.core.Text
 import androidx.ui.foundation.Clickable
 import androidx.ui.foundation.HorizontalScroller
 import androidx.ui.foundation.VerticalScroller
 import androidx.ui.layout.Column
 import androidx.ui.layout.LayoutPadding
-import androidx.ui.layout.LayoutWidth
 import androidx.ui.layout.Row
-import androidx.ui.layout.Spacer
 import androidx.ui.material.Divider
+import androidx.ui.material.DrawerState
 import androidx.ui.material.EmphasisLevels
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.ProvideEmphasis
+import androidx.ui.material.Scaffold
+import androidx.ui.material.ScaffoldState
 import androidx.ui.material.TopAppBar
 import androidx.ui.material.ripple.Ripple
 import androidx.ui.tooling.preview.Preview
 import androidx.ui.unit.dp
 import com.example.jetnews.R
 import com.example.jetnews.data.posts
 import com.example.jetnews.model.Post
+import com.example.jetnews.ui.AppDrawer
 import com.example.jetnews.ui.Screen
 import com.example.jetnews.ui.VectorImageButton
 import com.example.jetnews.ui.navigateTo
 
 @Composable
-fun HomeScreen(openDrawer: () -> Unit) {
+fun HomeScreen(scaffoldState: ScaffoldState = remember { ScaffoldState() }) {
+    Column {
+        Scaffold(
+            scaffoldState = scaffoldState,
+            drawerContent = {
+                AppDrawer(
+                    currentScreen = Screen.Home,
+                    closeDrawer = { scaffoldState.drawerState = DrawerState.Closed }
+                )
+            },
+            topAppBar = {
+                TopAppBar(
+                    title = { Text(text = "Jetnews") },
+                    navigationIcon = {
+                        VectorImageButton(R.drawable.ic_jetnews_logo) {
+                            scaffoldState.drawerState = DrawerState.Opened
+                        }
+                    }
+                )
+            },
+            bodyContent = {
+                HomeScreenBody(posts)
+            }
+        )
+
+
+    }
+}
+
+private fun HomeScreenBody(
+    posts: List<Post>,
+    modifier: Modifier = Modifier.None
+) {
     val postTop = posts[3]
     val postsSimple = posts.subList(0, 2)
     val postsPopular = posts.subList(2, 7)
     val postsHistory = posts.subList(7, 10)
 
-    Column {
-        TopAppBar(
-            title = { Text(text = "Jetnews") },
-            navigationIcon = {
-                VectorImageButton(R.drawable.ic_jetnews_logo) {
-                    openDrawer()
-                }
-            }
-        )
-        VerticalScroller(modifier = LayoutFlexible(1f)) {
-            Column {
-                HomeScreenTopSection(post = postTop)
-                HomeScreenSimpleSection(posts = postsSimple)
-                HomeScreenPopularSection(posts = postsPopular)
-                HomeScreenHistorySection(posts = postsHistory)
-            }
+    VerticalScroller(modifier = modifier) {
+        Column {
+            HomeScreenTopSection(post = postTop)
+            HomeScreenSimpleSection(posts = postsSimple)
+            HomeScreenPopularSection(posts = postsPopular)
+            HomeScreenHistorySection(posts = postsHistory)
         }
     }
 }
@@ -109,8 +135,7 @@ private fun HomeScreenPopularSection(posts: List<Post>) {
     HorizontalScroller {
         Row(modifier = LayoutPadding(0.dp, 0.dp, right = 16.dp, bottom = 16.dp)) {
             posts.forEach { post ->
-                Spacer(LayoutWidth(16.dp))
-                PostCardPopular(post)
+                PostCardPopular(post, modifier = LayoutPadding(left = 16.dp))
             }
         }
     }
@@ -134,6 +159,12 @@ private fun HomeScreenDivider() {
 
 @Preview
 @Composable
-fun preview() {
-    HomeScreen {}
+fun PreviewHomeScreen() {
+    HomeScreen()
+}
+
+@Preview
+@Composable
+private fun PreviewDrawerOpen() {
+    HomeScreen(scaffoldState = ScaffoldState(drawerState = DrawerState.Opened))
 }
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
@@ -107,7 +107,7 @@ fun TutorialPreviewTemplate(
     colors: ColorPalette = lightThemeColors,
     typography: Typography = themeTypography
 ) {
-    val context = ambient(ContextAmbient)
+    val context = ContextAmbient.current
     val previewPosts = getPostsWithImagesLoaded(posts.subList(1, 2), context.resources)
     val post = previewPosts[0]
     MaterialTheme(colors = colors, typography = typography) {