From 043c0f9fc318122abf97ba8f47b1e543052f837b Mon Sep 17 00:00:00 2001 From: Sean McQuillan Date: Mon, 30 Mar 2020 16:03:00 -0700 Subject: [PATCH 1/9] Bump to dev08. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changes: * Refactored modifiers to use fluent style throughout * Switched to new use Icon and Image composables * Switch to using IconButton where appropriate * Updated Scaffolding to use IconButton for navigationIcon * Removed vector helpers from sample that are now included in the library * Update typography of code paraghraphs to expand, and avoid setting background on text in code blocks as alpha is not respected – use the background of the Box * Replaced all Container with Box * General code cleanup to remove nesting that can be replaced with modifiers * Moved Modifiers to *first default argument* to follow style * Aligned bullets with baseline of text * Sized bullets based on font scaling * Removed many named arguments that were not required for readibility --- .../java/com/example/jetnews/JetnewsUiTest.kt | 8 - .../java/com/example/jetnews/TestHelper.kt | 2 +- .../java/com/example/jetnews/model/Post.kt | 6 +- .../java/com/example/jetnews/ui/JetnewsApp.kt | 112 +++++++------ .../com/example/jetnews/ui/PreviewUtils.kt | 2 +- .../java/com/example/jetnews/ui/Vectors.kt | 51 ------ .../jetnews/ui/article/ArticleScreen.kt | 69 ++++---- .../example/jetnews/ui/article/PostContent.kt | 145 +++++++++-------- .../com/example/jetnews/ui/home/HomeScreen.kt | 133 ++++++++-------- .../example/jetnews/ui/home/PostCardTop.kt | 51 +++--- .../jetnews/ui/home/PostCardYourNetwork.kt | 88 +++++------ .../com/example/jetnews/ui/home/PostCards.kt | 149 +++++++++--------- .../jetnews/ui/interests/InterestsScreen.kt | 99 ++++++------ .../jetnews/ui/interests/SelectTopicButton.kt | 32 ++-- JetNews/build.gradle | 5 +- 15 files changed, 449 insertions(+), 503 deletions(-) delete mode 100644 JetNews/app/src/main/java/com/example/jetnews/ui/Vectors.kt diff --git a/JetNews/app/src/androidTest/java/com/example/jetnews/JetnewsUiTest.kt b/JetNews/app/src/androidTest/java/com/example/jetnews/JetnewsUiTest.kt index 8bc8f887fd..9757dde837 100644 --- a/JetNews/app/src/androidTest/java/com/example/jetnews/JetnewsUiTest.kt +++ b/JetNews/app/src/androidTest/java/com/example/jetnews/JetnewsUiTest.kt @@ -41,19 +41,11 @@ class JetnewsUiTest { } @Test - fun avoidemptyTestSuite() { - // this is an empty test to make gradle pass the suite - // TODO(b/150728822): remove this after test runner is fixed - } - - @Test - @Suppress // TODO(b/150728822): re-enabled after test runner is fixed fun app_launches() { findByText("Jetnews").assertIsDisplayed() } @Test - @Suppress // TODO(b/150728822): re-enabled after test runner is fixed fun app_opensArticle() { findAllBySubstring("Manuel Vivo").first().doClick() findAllBySubstring("July 30 • 3 min read").first().assertIsDisplayed() diff --git a/JetNews/app/src/androidTest/java/com/example/jetnews/TestHelper.kt b/JetNews/app/src/androidTest/java/com/example/jetnews/TestHelper.kt index 8c96830ee8..8fcc48b9a5 100644 --- a/JetNews/app/src/androidTest/java/com/example/jetnews/TestHelper.kt +++ b/JetNews/app/src/androidTest/java/com/example/jetnews/TestHelper.kt @@ -18,7 +18,7 @@ package com.example.jetnews import androidx.compose.Composable import androidx.ui.material.MaterialTheme -import androidx.ui.material.surface.Surface +import androidx.ui.material.Surface import androidx.ui.test.ComposeTestRule import androidx.ui.test.SemanticsNodeInteraction import androidx.ui.test.findAll diff --git a/JetNews/app/src/main/java/com/example/jetnews/model/Post.kt b/JetNews/app/src/main/java/com/example/jetnews/model/Post.kt index 3eef03cd1f..0af63bc697 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/model/Post.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/model/Post.kt @@ -16,7 +16,7 @@ package com.example.jetnews.model -import androidx.ui.graphics.Image +import androidx.ui.graphics.ImageAsset data class Post( val id: String, @@ -28,8 +28,8 @@ data class Post( val paragraphs: List = emptyList(), val imageId: Int, val imageThumbId: Int, - val image: Image? = null, - val imageThumb: Image? = null + val image: ImageAsset? = null, + val imageThumb: ImageAsset? = null ) data class Metadata( 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 index 3c930b8944..8df7132efd 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt @@ -20,21 +20,25 @@ import androidx.annotation.DrawableRes import androidx.compose.Composable import androidx.ui.animation.Crossfade import androidx.ui.core.Modifier -import androidx.ui.core.Text +import androidx.ui.foundation.Image +import androidx.ui.foundation.Text import androidx.ui.foundation.shape.corner.RoundedCornerShape +import androidx.ui.graphics.BlendMode +import androidx.ui.graphics.ColorFilter import androidx.ui.layout.Arrangement import androidx.ui.layout.Column -import androidx.ui.layout.LayoutGravity -import androidx.ui.layout.LayoutHeight -import androidx.ui.layout.LayoutPadding -import androidx.ui.layout.LayoutSize -import androidx.ui.layout.LayoutWidth import androidx.ui.layout.Row import androidx.ui.layout.Spacer +import androidx.ui.layout.fillMaxSize +import androidx.ui.layout.fillMaxWidth +import androidx.ui.layout.padding +import androidx.ui.layout.preferredHeight +import androidx.ui.layout.preferredWidth import androidx.ui.material.Divider import androidx.ui.material.MaterialTheme +import androidx.ui.material.Surface import androidx.ui.material.TextButton -import androidx.ui.material.surface.Surface +import androidx.ui.res.vectorResource import androidx.ui.tooling.preview.Preview import androidx.ui.unit.dp import com.example.jetnews.R @@ -56,7 +60,7 @@ fun JetnewsApp() { @Composable private fun AppContent() { Crossfade(JetnewsStatus.currentScreen) { screen -> - Surface(color = MaterialTheme.colors().background) { + Surface(color = MaterialTheme.colors.background) { when (screen) { is Screen.Home -> HomeScreen() is Screen.Interests -> InterestsScreen() @@ -71,49 +75,61 @@ fun AppDrawer( currentScreen: Screen, closeDrawer: () -> Unit ) { - Column(modifier = LayoutSize.Fill) { - Spacer(LayoutHeight(24.dp)) - Row(modifier = LayoutPadding(16.dp)) { - VectorImage( - id = R.drawable.ic_jetnews_logo, - tint = MaterialTheme.colors().primary - ) - Spacer(LayoutWidth(8.dp)) - VectorImage( - id = R.drawable.ic_jetnews_wordmark, - tint = MaterialTheme.colors().onSurface - ) - } - Divider(color = MaterialTheme.colors().onSurface.copy(alpha = .2f)) + Column(modifier = Modifier.fillMaxSize()) { + Spacer(Modifier.preferredHeight(24.dp)) + JetNewsLogo(Modifier.padding(16.dp)) + Divider(color = MaterialTheme.colors.onSurface.copy(alpha = .2f)) DrawerButton( icon = R.drawable.ic_home, label = "Home", - isSelected = currentScreen == Screen.Home - ) { - navigateTo(Screen.Home) - closeDrawer() - } + isSelected = currentScreen == Screen.Home, + action = { + navigateTo(Screen.Home) + closeDrawer() + } + ) DrawerButton( icon = R.drawable.ic_interests, label = "Interests", - isSelected = currentScreen == Screen.Interests - ) { - navigateTo(Screen.Interests) - closeDrawer() - } + isSelected = currentScreen == Screen.Interests, + action = { + navigateTo(Screen.Interests) + closeDrawer() + } + ) + } +} + +@Composable +private fun JetNewsLogo(modifier: Modifier = Modifier) { + Row(modifier = modifier) { + Image( + asset = vectorResource(R.drawable.ic_jetnews_logo), + colorFilter = ColorFilter(MaterialTheme.colors.primary, BlendMode.srcATop) + ) + Spacer(Modifier.preferredWidth(8.dp)) + Image( + asset = vectorResource(R.drawable.ic_jetnews_wordmark), + colorFilter = ColorFilter(MaterialTheme.colors.onSurface, BlendMode.srcATop) + ) } } @Composable private fun DrawerButton( - modifier: Modifier = Modifier.None, @DrawableRes icon: Int, label: String, isSelected: Boolean, - action: () -> Unit + action: () -> Unit, + modifier: Modifier = Modifier ) { - val colors = MaterialTheme.colors() + val colors = MaterialTheme.colors + val imageAlpha = if (isSelected) { + 1f + } else { + 0.6f + } val textIconColor = if (isSelected) { colors.primary } else { @@ -125,28 +141,26 @@ private fun DrawerButton( colors.surface } - val surfaceModifier = modifier + - LayoutPadding(start = 8.dp, top = 8.dp, end = 8.dp, bottom = 0.dp) + - LayoutWidth.Fill + val surfaceModifier = modifier + .padding(start = 8.dp, top = 8.dp, end = 8.dp, bottom = 0.dp) + .fillMaxWidth() Surface( modifier = surfaceModifier, color = backgroundColor, shape = RoundedCornerShape(4.dp) ) { - TextButton(onClick = action, modifier = LayoutWidth.Fill) { - Row(arrangement = Arrangement.Start, modifier = LayoutWidth.Fill) { - VectorImage( - modifier = LayoutGravity.Center, - id = icon, - tint = textIconColor + TextButton(onClick = action, modifier = Modifier.fillMaxWidth()) { + Row(arrangement = Arrangement.Start, modifier = Modifier.fillMaxWidth()) { + Image( + asset = vectorResource(icon), + colorFilter = ColorFilter(textIconColor, BlendMode.srcATop), + alpha = imageAlpha ) - Spacer(LayoutWidth(16.dp)) + Spacer(Modifier.preferredWidth(16.dp)) Text( text = label, - style = (MaterialTheme.typography()).body2.copy( - color = textIconColor - ), - modifier = LayoutWidth.Fill + style = MaterialTheme.typography.body2.copy(color = textIconColor), + modifier = Modifier.fillMaxWidth() ) } } 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 index 8c4a3306e1..c5a968dcf4 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/PreviewUtils.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/PreviewUtils.kt @@ -19,8 +19,8 @@ package com.example.jetnews.ui import androidx.compose.Composable import androidx.ui.material.ColorPalette import androidx.ui.material.MaterialTheme +import androidx.ui.material.Surface import androidx.ui.material.Typography -import androidx.ui.material.surface.Surface @Composable internal fun ThemedPreview( diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/Vectors.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/Vectors.kt deleted file mode 100644 index bfa287a958..0000000000 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/Vectors.kt +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Copyright 2019 Google, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -package com.example.jetnews.ui - -import androidx.annotation.DrawableRes -import androidx.compose.Composable -import androidx.ui.core.Modifier -import androidx.ui.foundation.Clickable -import androidx.ui.graphics.Color -import androidx.ui.graphics.vector.DrawVector -import androidx.ui.layout.Container -import androidx.ui.layout.LayoutSize -import androidx.ui.material.ripple.Ripple -import androidx.ui.res.vectorResource - -@Composable -fun VectorImageButton(@DrawableRes id: Int, onClick: () -> Unit) { - Ripple(bounded = false) { - Clickable(onClick = onClick) { - VectorImage(id = id) - } - } -} - -@Composable -fun VectorImage( - modifier: Modifier = Modifier.None, - @DrawableRes id: Int, - tint: Color = Color.Transparent -) { - val vector = vectorResource(id) - Container( - modifier = modifier + LayoutSize(vector.defaultWidth, vector.defaultHeight) - ) { - DrawVector(vector, tint) - } -} 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 index ec3c1cc0cf..156c8fafe1 100644 --- 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 @@ -22,21 +22,25 @@ import androidx.annotation.DrawableRes import androidx.compose.Composable import androidx.compose.state 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.Container -import androidx.ui.layout.LayoutHeight -import androidx.ui.layout.LayoutPadding -import androidx.ui.layout.LayoutSize +import androidx.ui.core.Modifier +import androidx.ui.foundation.Box +import androidx.ui.foundation.Icon +import androidx.ui.foundation.Image +import androidx.ui.foundation.Text +import androidx.ui.foundation.contentColor import androidx.ui.layout.Row +import androidx.ui.layout.Spacer +import androidx.ui.layout.fillMaxSize +import androidx.ui.layout.padding +import androidx.ui.layout.preferredHeight +import androidx.ui.layout.preferredSize import androidx.ui.material.AlertDialog +import androidx.ui.material.IconButton import androidx.ui.material.MaterialTheme import androidx.ui.material.Scaffold +import androidx.ui.material.Surface import androidx.ui.material.TextButton import androidx.ui.material.TopAppBar -import androidx.ui.material.ripple.Ripple -import androidx.ui.material.surface.Surface import androidx.ui.res.vectorResource import androidx.ui.tooling.preview.Preview import androidx.ui.unit.dp @@ -46,7 +50,6 @@ import com.example.jetnews.data.posts import com.example.jetnews.model.Post import com.example.jetnews.ui.Screen import com.example.jetnews.ui.ThemedPreview -import com.example.jetnews.ui.VectorImageButton import com.example.jetnews.ui.darkThemeColors import com.example.jetnews.ui.home.BookmarkButton import com.example.jetnews.ui.home.isFavorite @@ -61,9 +64,7 @@ fun ArticleScreen(postId: String) { val post = posts.find { it.id == postId } ?: return if (showDialog) { - FunctionalityNotAvailablePopup { - showDialog = false - } + FunctionalityNotAvailablePopup { showDialog = false } } Scaffold( @@ -72,18 +73,18 @@ fun ArticleScreen(postId: String) { title = { Text( text = "Published in: ${post.publication?.name}", - style = MaterialTheme.typography().subtitle2 + style = MaterialTheme.typography.subtitle2.copy(color = contentColor()) ) }, navigationIcon = { - VectorImageButton(R.drawable.ic_back) { - navigateTo(Screen.Home) + IconButton(onClick = { navigateTo(Screen.Home) }) { + Icon(vectorResource(R.drawable.ic_back)) } } ) }, bodyContent = { modifier -> - PostContent(modifier = modifier, post = post) + PostContent(post, modifier) }, bottomAppBar = { BottomBar(post) { showDialog = true } @@ -95,22 +96,16 @@ fun ArticleScreen(postId: String) { private fun BottomBar(post: Post, onUnimplementedAction: () -> Unit) { val context = ContextAmbient.current Surface(elevation = 2.dp) { - Container(modifier = LayoutHeight(56.dp) + LayoutSize.Fill) { + Box(modifier = Modifier.preferredHeight(56.dp).fillMaxSize()) { Row { - BottomBarAction(R.drawable.ic_favorite) { - onUnimplementedAction() - } + BottomBarAction(R.drawable.ic_favorite) { onUnimplementedAction() } BookmarkButton( isBookmarked = isFavorite(postId = post.id), onBookmark = { toggleBookmark(postId = post.id) } ) - BottomBarAction(R.drawable.ic_share) { - sharePost(post, context) - } - Container(modifier = LayoutFlexible(1f)) { } // TODO: Any element works - BottomBarAction(R.drawable.ic_text_settings) { - onUnimplementedAction() - } + BottomBarAction(R.drawable.ic_share) { sharePost(post, context) } + Spacer(modifier = Modifier.weight(1f)) + BottomBarAction(R.drawable.ic_text_settings) { onUnimplementedAction() } } } } @@ -121,15 +116,9 @@ private fun BottomBarAction( @DrawableRes id: Int, onClick: () -> Unit ) { - Ripple( - bounded = false, - radius = 24.dp - ) { - Clickable(onClick = onClick) { - Container(modifier = LayoutPadding(12.dp) + LayoutSize(24.dp, 24.dp)) { - DrawVector(vectorResource(id)) - } - } + IconButton(onClick = onClick, modifier = Modifier.padding(12.dp).preferredSize(24.dp, 24.dp)) { + // use Image instead of Icon to retain coloring from vector graphic + Image(vectorResource(id)) } } @@ -140,13 +129,11 @@ private fun FunctionalityNotAvailablePopup(onDismiss: () -> Unit) { text = { Text( text = "Functionality not available \uD83D\uDE48", - style = MaterialTheme.typography().body2 + style = MaterialTheme.typography.body2 ) }, confirmButton = { - TextButton( - onClick = onDismiss - ) { + TextButton(onClick = onDismiss) { Text(text = "CLOSE") } } 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 index 0f1a1a98ab..51fc24b312 100644 --- 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 @@ -17,32 +17,38 @@ package com.example.jetnews.ui.article import androidx.compose.Composable -import androidx.ui.core.Clip +import androidx.ui.core.DensityAmbient +import androidx.ui.core.FirstBaseline +import androidx.ui.core.LastBaseline import androidx.ui.core.Modifier -import androidx.ui.core.Text -import androidx.ui.core.toModifier +import androidx.ui.core.clip import androidx.ui.foundation.Box +import androidx.ui.foundation.Image +import androidx.ui.foundation.Text import androidx.ui.foundation.VerticalScroller import androidx.ui.foundation.contentColor import androidx.ui.foundation.shape.corner.CircleShape import androidx.ui.foundation.shape.corner.RoundedCornerShape +import androidx.ui.graphics.BlendMode import androidx.ui.graphics.Color +import androidx.ui.graphics.ColorFilter import androidx.ui.graphics.ScaleFit -import androidx.ui.graphics.painter.ImagePainter 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.LayoutWidth import androidx.ui.layout.Row import androidx.ui.layout.Spacer +import androidx.ui.layout.fillMaxWidth +import androidx.ui.layout.padding +import androidx.ui.layout.preferredHeight +import androidx.ui.layout.preferredHeightIn +import androidx.ui.layout.preferredSize +import androidx.ui.layout.preferredWidth import androidx.ui.material.ColorPalette -import androidx.ui.material.EmphasisLevels +import androidx.ui.material.EmphasisAmbient import androidx.ui.material.MaterialTheme import androidx.ui.material.ProvideEmphasis +import androidx.ui.material.Surface import androidx.ui.material.Typography -import androidx.ui.material.surface.Surface +import androidx.ui.res.vectorResource import androidx.ui.text.AnnotatedString import androidx.ui.text.ParagraphStyle import androidx.ui.text.SpanStyle @@ -65,40 +71,39 @@ 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.VectorImage import com.example.jetnews.ui.darkThemeColors private val defaultSpacerSize = 16.dp @Composable -fun PostContent(modifier: Modifier = Modifier.None, post: Post) { - val typography = MaterialTheme.typography() +fun PostContent(post: Post, modifier: Modifier = Modifier) { + val typography = MaterialTheme.typography VerticalScroller { Column( - modifier = modifier + LayoutPadding( + modifier = modifier.padding( start = defaultSpacerSize, top = 0.dp, end = defaultSpacerSize, bottom = 0.dp ) ) { - Spacer(LayoutHeight(defaultSpacerSize)) + Spacer(Modifier.preferredHeight(defaultSpacerSize)) PostHeaderImage(post) Text(text = post.title, style = typography.h4) - Spacer(LayoutHeight(8.dp)) + Spacer(Modifier.preferredHeight(8.dp)) post.subtitle?.let { subtitle -> - ProvideEmphasis(emphasis = EmphasisLevels().medium) { + ProvideEmphasis(EmphasisAmbient.current.medium) { Text( text = subtitle, style = typography.body2.merge(TextStyle(lineHeight = 20.sp)) ) } - Spacer(LayoutHeight(defaultSpacerSize)) + Spacer(Modifier.preferredHeight(defaultSpacerSize)) } - PostMetadata(metadata = post.metadata) - Spacer(LayoutHeight(24.dp)) - PostContents(paragraphs = post.paragraphs) - Spacer(LayoutHeight(48.dp)) + PostMetadata(post.metadata) + Spacer(Modifier.preferredHeight(24.dp)) + PostContents(post.paragraphs) + Spacer(Modifier.preferredHeight(48.dp)) } } } @@ -106,41 +111,35 @@ fun PostContent(modifier: Modifier = Modifier.None, post: Post) { @Composable private fun PostHeaderImage(post: Post) { post.image?.let { image -> - // FIXME (dev07): This duplicate sizing is a workaround for the way Draw modifiers work in - // dev06. In a future release (dev07?) replace this with a single Image composable with a - // Clip modifier applied. - - // This sizing is currently applied twice to make the image expand propertly inside the - // Clip. - val sizingModifier = LayoutHeight.Min(180.dp) + LayoutWidth.Fill - Box(modifier = sizingModifier) { - Clip(shape = RoundedCornerShape(4.dp)) { - val imageModifier = ImagePainter(image).toModifier(scaleFit = ScaleFit.FillHeight) - Box(modifier = sizingModifier + imageModifier) - } - } - Spacer(LayoutHeight(defaultSpacerSize)) + val imageModifier = Modifier + .preferredHeightIn(minHeight = 180.dp) + .fillMaxWidth() + .clip(shape = RoundedCornerShape(4.dp)) + Image(image, imageModifier, scaleFit = ScaleFit.FillHeight) + Spacer(Modifier.preferredHeight(defaultSpacerSize)) } } @Composable private fun PostMetadata(metadata: Metadata) { - val typography = MaterialTheme.typography() + val typography = MaterialTheme.typography Row { - VectorImage( - id = R.drawable.ic_account_circle_black, - tint = contentColor() + Image( + asset = vectorResource(R.drawable.ic_account_circle_black), + colorFilter = ColorFilter( + color = contentColor(), + blendMode = BlendMode.srcATop) ) - Spacer(LayoutWidth(8.dp)) + Spacer(Modifier.preferredWidth(8.dp)) Column { - Spacer(LayoutHeight(4.dp)) - ProvideEmphasis(emphasis = EmphasisLevels().high) { + ProvideEmphasis(EmphasisAmbient.current.high) { Text( text = metadata.author.name, - style = typography.caption + style = typography.caption, + modifier = Modifier.padding(top = 4.dp) ) } - ProvideEmphasis(emphasis = EmphasisLevels().medium) { + ProvideEmphasis(EmphasisAmbient.current.medium) { Text( text = "${metadata.date} • ${metadata.readTimeMinutes} min read", style = typography.caption @@ -163,10 +162,10 @@ private fun Paragraph(paragraph: Paragraph) { val annotatedString = paragraphToAnnotatedString( paragraph, - MaterialTheme.typography(), - MaterialTheme.colors().codeBlockBackground + MaterialTheme.typography, + MaterialTheme.colors.codeBlockBackground ) - Container(modifier = LayoutPadding(0.dp, 0.dp, 0.dp, bottom = trailingPadding)) { + Box(modifier = Modifier.padding(0.dp, 0.dp, 0.dp, bottom = trailingPadding)) { when (paragraph.type) { ParagraphType.Bullet -> BulletParagraph( text = annotatedString, @@ -180,13 +179,13 @@ private fun Paragraph(paragraph: Paragraph) { ) ParagraphType.Header -> { Text( - modifier = LayoutPadding(4.dp), + modifier = Modifier.padding(4.dp), text = annotatedString, style = textStyle.merge(paragraphStyle) ) } else -> Text( - modifier = LayoutPadding(4.dp), + modifier = Modifier.padding(4.dp), text = annotatedString, style = textStyle ) @@ -201,11 +200,12 @@ private fun CodeBlockParagraph( paragraphStyle: ParagraphStyle ) { Surface( - color = MaterialTheme.colors().codeBlockBackground, - shape = RoundedCornerShape(4.dp) + color = MaterialTheme.colors.codeBlockBackground, + shape = RoundedCornerShape(4.dp), + modifier = Modifier.fillMaxWidth() ) { Text( - modifier = LayoutPadding(start = 0.dp, top = 16.dp, end = 0.dp, bottom = 0.dp), + modifier = Modifier.padding(16.dp), text = text, style = textStyle.merge(paragraphStyle) ) @@ -219,17 +219,25 @@ private fun BulletParagraph( paragraphStyle: ParagraphStyle ) { Row { - Box( - modifier = LayoutSize(8.dp, 8.dp), - backgroundColor = contentColor(), - shape = CircleShape - ) { - // empty box + with(DensityAmbient.current) { + // this box is acting as a character, so it's sized with font scaling (sp) + Box( + modifier = Modifier + .preferredSize(8.sp.toDp(), 8.sp.toDp()) + .alignWithSiblings { + // this makes the baseline of the Box be 9.sp from the top + 9.sp.toIntPx() + }, + backgroundColor = contentColor(), + shape = CircleShape + ) } Text( - modifier = LayoutFlexible(1f), - text = text, - style = textStyle.merge(paragraphStyle) + modifier = Modifier + .weight(1f) + .alignWithSiblings(FirstBaseline), + text = text, + style = textStyle.merge(paragraphStyle) ) } } @@ -242,7 +250,7 @@ private data class ParagraphStyling( @Composable private fun ParagraphType.getTextAndParagraphStyle(): ParagraphStyling { - val typography = MaterialTheme.typography() + val typography = MaterialTheme.typography var textStyle: TextStyle = typography.body1 var paragraphStyle = ParagraphStyle() var trailingPadding = 24.dp @@ -262,12 +270,9 @@ private fun ParagraphType.getTextAndParagraphStyle(): ParagraphStyling { textStyle = typography.h5 trailingPadding = 16.dp } - ParagraphType.CodeBlock -> textStyle = - (typography.body1) - .copy( - background = MaterialTheme.colors().codeBlockBackground, - fontFamily = FontFamily.Monospace - ) + ParagraphType.CodeBlock -> textStyle = typography.body1.copy( + fontFamily = FontFamily.Monospace + ) ParagraphType.Quote -> textStyle = typography.body1 ParagraphType.Bullet -> { paragraphStyle = ParagraphStyle(textIndent = TextIndent(firstLine = 8.sp)) 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 index dcf6c7f147..0c6d63b3ae 100644 --- 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 @@ -19,23 +19,25 @@ 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.Icon +import androidx.ui.foundation.Text import androidx.ui.foundation.VerticalScroller import androidx.ui.layout.Column -import androidx.ui.layout.LayoutPadding import androidx.ui.layout.Row +import androidx.ui.layout.padding import androidx.ui.material.Divider import androidx.ui.material.DrawerState -import androidx.ui.material.EmphasisLevels +import androidx.ui.material.EmphasisAmbient +import androidx.ui.material.IconButton 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.material.ripple.ripple +import androidx.ui.res.vectorResource import androidx.ui.tooling.preview.Preview import androidx.ui.unit.dp import com.example.jetnews.R @@ -44,42 +46,39 @@ import com.example.jetnews.model.Post import com.example.jetnews.ui.AppDrawer import com.example.jetnews.ui.Screen import com.example.jetnews.ui.ThemedPreview -import com.example.jetnews.ui.VectorImageButton import com.example.jetnews.ui.darkThemeColors import com.example.jetnews.ui.navigateTo @Composable 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 - } + Scaffold( + scaffoldState = scaffoldState, + drawerContent = { + AppDrawer( + currentScreen = Screen.Home, + closeDrawer = { scaffoldState.drawerState = DrawerState.Closed } + ) + }, + topAppBar = { + TopAppBar( + title = { Text(text = "Jetnews") }, + navigationIcon = { + IconButton(onClick = { scaffoldState.drawerState = DrawerState.Opened }) { + Icon(vectorResource(R.drawable.ic_jetnews_logo)) } - ) - }, - bodyContent = { modifier -> - HomeScreenBody(modifier = modifier, posts = posts) - } - ) - } + } + ) + }, + bodyContent = { modifier -> + HomeScreenBody(posts, modifier) + } + ) } @Composable private fun HomeScreenBody( - modifier: Modifier = Modifier.None, - posts: List + posts: List, + modifier: Modifier = Modifier ) { val postTop = posts[3] val postsSimple = posts.subList(0, 2) @@ -87,74 +86,76 @@ private fun HomeScreenBody( val postsHistory = posts.subList(7, 10) VerticalScroller { - Column(modifier = modifier) { - HomeScreenTopSection(post = postTop) - HomeScreenSimpleSection(posts = postsSimple) - HomeScreenPopularSection(posts = postsPopular) - HomeScreenHistorySection(posts = postsHistory) + Column(modifier) { + HomeScreenTopSection(postTop) + HomeScreenSimpleSection(postsSimple) + HomeScreenPopularSection(postsPopular) + HomeScreenHistorySection(postsHistory) } } } @Composable private fun HomeScreenTopSection(post: Post) { -ProvideEmphasis(emphasis = EmphasisLevels().high) { + ProvideEmphasis(EmphasisAmbient.current.high) { Text( - modifier = LayoutPadding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 0.dp), + modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 0.dp), text = "Top stories for you", - style = MaterialTheme.typography().subtitle1 + style = MaterialTheme.typography.subtitle1 ) } - Ripple(bounded = true) { - Clickable(onClick = { - navigateTo(Screen.Article(post.id)) - }) { - PostCardTop(post = post) - } + Clickable(modifier = Modifier.ripple(), onClick = { navigateTo(Screen.Article(post.id)) }) { + PostCardTop(post = post) } HomeScreenDivider() } @Composable private fun HomeScreenSimpleSection(posts: List) { - posts.forEach { post -> - PostCardSimple(post) - HomeScreenDivider() + Column { + posts.forEach { post -> + PostCardSimple(post) + HomeScreenDivider() + } } } @Composable private fun HomeScreenPopularSection(posts: List) { - ProvideEmphasis(emphasis = EmphasisLevels().high) { - Text( - modifier = LayoutPadding(16.dp), - text = "Popular on Jetnews", - style = MaterialTheme.typography().subtitle1 - ) - } - HorizontalScroller { - Row(modifier = LayoutPadding(top = 0.dp, start = 0.dp, end = 16.dp, bottom = 16.dp)) { - posts.forEach { post -> - PostCardPopular(modifier = LayoutPadding(start = 16.dp), post = post) + Column { + ProvideEmphasis(EmphasisAmbient.current.high) { + Text( + modifier = Modifier.padding(16.dp), + text = "Popular on Jetnews", + style = MaterialTheme.typography.subtitle1 + ) + } + HorizontalScroller { + Row(modifier = Modifier.padding(start = 0.dp, top = 0.dp, end = 16.dp, bottom = 16.dp)) { + posts.forEach { post -> + PostCardPopular(post, Modifier.padding(start = 16.dp)) + } } } + HomeScreenDivider() } - HomeScreenDivider() } @Composable private fun HomeScreenHistorySection(posts: List) { - posts.forEach { post -> - PostCardHistory(post) - HomeScreenDivider() + Column { + posts.forEach { post -> + PostCardHistory(post) + HomeScreenDivider() + } } } @Composable private fun HomeScreenDivider() { - Opacity(0.08f) { - Divider(modifier = LayoutPadding(start = 14.dp, top = 0.dp, end = 14.dp, bottom = 0.dp)) - } + Divider( + modifier = Modifier.padding(start = 14.dp, top = 0.dp, end = 14.dp, bottom = 0.dp), + color = MaterialTheme.colors.onSurface.copy(alpha = 0.08f)) } @Preview("Home screen") 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 index 3066625a5e..fb4f3c8e62 100644 --- 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 @@ -17,22 +17,21 @@ package com.example.jetnews.ui.home import androidx.compose.Composable -import androidx.ui.core.Clip import androidx.ui.core.ContextAmbient -import androidx.ui.core.Text -import androidx.ui.core.toModifier -import androidx.ui.foundation.Box +import androidx.ui.core.Modifier +import androidx.ui.core.clip +import androidx.ui.foundation.Image +import androidx.ui.foundation.Text import androidx.ui.foundation.shape.corner.RoundedCornerShape import androidx.ui.graphics.ScaleFit -import androidx.ui.graphics.painter.ImagePainter import androidx.ui.layout.Column -import androidx.ui.layout.Container -import androidx.ui.layout.LayoutHeight -import androidx.ui.layout.LayoutPadding -import androidx.ui.layout.LayoutWidth import androidx.ui.layout.Spacer +import androidx.ui.layout.fillMaxWidth +import androidx.ui.layout.padding +import androidx.ui.layout.preferredHeight +import androidx.ui.layout.preferredHeightIn import androidx.ui.material.ColorPalette -import androidx.ui.material.EmphasisLevels +import androidx.ui.material.EmphasisAmbient import androidx.ui.material.MaterialTheme import androidx.ui.material.ProvideEmphasis import androidx.ui.tooling.preview.Preview @@ -48,39 +47,31 @@ import com.example.jetnews.ui.lightThemeColors @Composable fun PostCardTop(post: Post) { // TUTORIAL CONTENT STARTS HERE - val typography = MaterialTheme.typography() - Column(modifier = LayoutWidth.Fill + LayoutPadding(16.dp)) { + val typography = MaterialTheme.typography + Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) { post.image?.let { image -> - // FIXME (dev07): This duplicate sizing is a workaround for the way Draw modifiers work in - // dev06. In a future release (dev07?) replace this with a single Image composable with a - // Clip modifier applied. - - // This sizing is currently applied twice to make the image expand propertly inside the - // Clip. - val sizeModifier = LayoutHeight.Min(180.dp) + LayoutWidth.Fill - Container(modifier = sizeModifier) { - Clip(shape = RoundedCornerShape(4.dp)) { - val imageModifier = ImagePainter(image).toModifier(scaleFit = ScaleFit.FillHeight) - Box(modifier = sizeModifier + imageModifier) - } - } + val imageModifier = Modifier + .preferredHeightIn(minHeight = 180.dp) + .fillMaxWidth() + .clip(shape = RoundedCornerShape(4.dp)) + Image(image, modifier = imageModifier, scaleFit = ScaleFit.FillHeight) } - Spacer(LayoutHeight(16.dp)) + Spacer(Modifier.preferredHeight(16.dp)) - val emphasisLevels = EmphasisLevels() - ProvideEmphasis(emphasis = emphasisLevels.high) { + val emphasisLevels = EmphasisAmbient.current + ProvideEmphasis(emphasisLevels.high) { Text( text = post.title, style = typography.h6 ) } - ProvideEmphasis(emphasis = emphasisLevels.high) { + ProvideEmphasis(emphasisLevels.high) { Text( text = post.metadata.author.name, style = typography.body2 ) } - ProvideEmphasis(emphasis = emphasisLevels.medium) { + ProvideEmphasis(emphasisLevels.medium) { Text( text = "${post.metadata.date} - ${post.metadata.readTimeMinutes} min read", style = typography.body2 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 index 7ca97a12ab..d856874488 100644 --- 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 @@ -18,20 +18,20 @@ package com.example.jetnews.ui.home import androidx.compose.Composable import androidx.ui.core.Modifier -import androidx.ui.core.Text -import androidx.ui.core.toModifier -import androidx.ui.foundation.Box import androidx.ui.foundation.Clickable +import androidx.ui.foundation.Image +import androidx.ui.foundation.Text import androidx.ui.foundation.shape.corner.RoundedCornerShape -import androidx.ui.graphics.painter.ImagePainter import androidx.ui.layout.Column -import androidx.ui.layout.LayoutHeight -import androidx.ui.layout.LayoutPadding -import androidx.ui.layout.LayoutSize +import androidx.ui.layout.fillMaxSize +import androidx.ui.layout.padding +import androidx.ui.layout.preferredHeight +import androidx.ui.layout.preferredSize +import androidx.ui.material.Card +import androidx.ui.material.EmphasisAmbient import androidx.ui.material.MaterialTheme import androidx.ui.material.ProvideEmphasis -import androidx.ui.material.ripple.Ripple -import androidx.ui.material.surface.Card +import androidx.ui.material.ripple.ripple import androidx.ui.res.imageResource import androidx.ui.text.style.TextOverflow import androidx.ui.tooling.preview.Preview @@ -45,44 +45,40 @@ import com.example.jetnews.ui.ThemedPreview import com.example.jetnews.ui.darkThemeColors import com.example.jetnews.ui.navigateTo -private val cardSize = LayoutSize(280.dp, 240.dp) - @Composable -fun PostCardPopular(modifier: Modifier = Modifier.None, post: Post) { - Card(modifier = modifier, shape = RoundedCornerShape(4.dp)) { - Ripple(bounded = true) { - Clickable(onClick = { - navigateTo(Screen.Article(post.id)) - }) { - Column(modifier = cardSize) { - val image = post.image ?: imageResource(R.drawable.placeholder_4_3) - val imageModifier = ImagePainter(image).toModifier() - Box(modifier = LayoutHeight(100.dp) + LayoutSize.Fill + imageModifier) - Column(modifier = LayoutPadding(16.dp)) { - val emphasisLevels = MaterialTheme.emphasisLevels() - ProvideEmphasis(emphasis = emphasisLevels.high) { - Text( - text = post.title, - style = MaterialTheme.typography().h6, - maxLines = 2, - overflow = TextOverflow.Ellipsis - ) - } - ProvideEmphasis(emphasis = emphasisLevels.high) { - Text( - text = post.metadata.author.name, - maxLines = 1, - overflow = TextOverflow.Ellipsis, - style = MaterialTheme.typography().body2 - ) - } - ProvideEmphasis(emphasis = emphasisLevels.high) { - Text( - text = "${post.metadata.date} - " + - "${post.metadata.readTimeMinutes} min read", - style = MaterialTheme.typography().body2 - ) - } +fun PostCardPopular(post: Post, modifier: Modifier = Modifier) { + Card(modifier = modifier.preferredSize(280.dp, 240.dp), shape = RoundedCornerShape(4.dp)) { + Clickable( + modifier = Modifier.ripple(), + onClick = { navigateTo(Screen.Article(post.id)) } + ) { + Column { + val image = post.image ?: imageResource(R.drawable.placeholder_4_3) + Image(image, Modifier.preferredHeight(100.dp).fillMaxSize()) + Column(modifier = Modifier.padding(16.dp)) { + val emphasisLevels = EmphasisAmbient.current + ProvideEmphasis(emphasisLevels.high) { + Text( + text = post.title, + style = MaterialTheme.typography.h6, + maxLines = 2, + overflow = TextOverflow.Ellipsis + ) + } + ProvideEmphasis(emphasisLevels.high) { + Text( + text = post.metadata.author.name, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = MaterialTheme.typography.body2 + ) + } + ProvideEmphasis(emphasisLevels.high) { + Text( + text = "${post.metadata.date} - " + + "${post.metadata.readTimeMinutes} min read", + style = MaterialTheme.typography.body2 + ) } } } diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt index 2bc8d2da04..f84e52f3ce 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt @@ -17,23 +17,22 @@ package com.example.jetnews.ui.home import androidx.compose.Composable +import androidx.compose.state import androidx.ui.core.Modifier -import androidx.ui.core.Text -import androidx.ui.core.toModifier -import androidx.ui.foundation.Box import androidx.ui.foundation.Clickable +import androidx.ui.foundation.Image +import androidx.ui.foundation.Text import androidx.ui.foundation.selection.Toggleable -import androidx.ui.graphics.painter.ImagePainter import androidx.ui.layout.Column -import androidx.ui.layout.Container -import androidx.ui.layout.LayoutPadding -import androidx.ui.layout.LayoutSize import androidx.ui.layout.Row -import androidx.ui.material.EmphasisLevels +import androidx.ui.layout.padding +import androidx.ui.layout.preferredSize +import androidx.ui.material.EmphasisAmbient import androidx.ui.material.MaterialTheme import androidx.ui.material.ProvideEmphasis -import androidx.ui.material.ripple.Ripple +import androidx.ui.material.ripple.ripple import androidx.ui.res.imageResource +import androidx.ui.res.vectorResource import androidx.ui.tooling.preview.Preview import androidx.ui.unit.dp import com.example.jetnews.R @@ -42,90 +41,76 @@ import com.example.jetnews.model.Post import com.example.jetnews.ui.JetnewsStatus import com.example.jetnews.ui.Screen import com.example.jetnews.ui.ThemedPreview -import com.example.jetnews.ui.VectorImage import com.example.jetnews.ui.darkThemeColors import com.example.jetnews.ui.navigateTo @Composable fun AuthorAndReadTime(post: Post) { Row { - - val textStyle = MaterialTheme.typography().body2 - ProvideEmphasis(emphasis = EmphasisLevels().medium) { + val textStyle = MaterialTheme.typography.body2 + ProvideEmphasis(EmphasisAmbient.current.medium) { Text(text = post.metadata.author.name, style = textStyle) - Text( - text = " - ${post.metadata.readTimeMinutes} min read", - style = textStyle - ) + Text(text = " - ${post.metadata.readTimeMinutes} min read", style = textStyle) } } } @Composable -fun PostImage(modifier: Modifier = Modifier.None, post: Post) { +fun PostImage(post: Post, modifier: Modifier = Modifier) { val image = post.imageThumb ?: imageResource(R.drawable.placeholder_1_1) - val imageModifier = ImagePainter(image).toModifier() - - Box(modifier = modifier + LayoutSize(40.dp, 40.dp) + imageModifier) + Image(image, modifier.preferredSize(40.dp, 40.dp)) } @Composable fun PostTitle(post: Post) { - ProvideEmphasis(emphasis = EmphasisLevels().high) { - Text(post.title, style = MaterialTheme.typography().subtitle1) + ProvideEmphasis(EmphasisAmbient.current.high) { + Text(post.title, style = MaterialTheme.typography.subtitle1) } } @Composable fun PostCardSimple(post: Post) { - Ripple(bounded = true) { - Clickable(onClick = { - navigateTo(Screen.Article(post.id)) - }) { - Row(modifier = LayoutPadding(16.dp)) { - PostImage( - modifier = LayoutPadding(start = 0.dp, top = 0.dp, end = 16.dp, bottom = 0.dp), - post = post - ) - Column(modifier = LayoutFlexible(1f)) { - PostTitle(post) - AuthorAndReadTime(post) - } - BookmarkButton( - isBookmarked = isFavorite(postId = post.id), - onBookmark = { toggleBookmark(postId = post.id) } - ) + Clickable( + modifier = Modifier.ripple(), + onClick = { navigateTo(Screen.Article(post.id)) } + ) { + Row(modifier = Modifier.padding(16.dp)) { + PostImage(post, Modifier.padding(end = 16.dp, bottom = 0.dp)) + Column(modifier = Modifier.weight(1f)) { + PostTitle(post) + AuthorAndReadTime(post) } + BookmarkButton( + isBookmarked = isFavorite(postId = post.id), + onBookmark = { toggleBookmark(postId = post.id) } + ) } } } @Composable fun PostCardHistory(post: Post) { - Ripple(bounded = true) { - Clickable(onClick = { - navigateTo(Screen.Article(post.id)) - }) { - Row(modifier = LayoutPadding(all = 16.dp)) { - PostImage( - modifier = LayoutPadding(start = 0.dp, top = 0.dp, end = 16.dp, bottom = 0.dp), - post = post - ) - Column(modifier = LayoutFlexible(1f)) { - ProvideEmphasis(emphasis = EmphasisLevels().medium) { - Text( - text = "BASED ON YOUR HISTORY", - style = MaterialTheme.typography().overline - ) - } - PostTitle(post = post) - AuthorAndReadTime(post) + Clickable( + modifier = Modifier.ripple(), + onClick = { navigateTo(Screen.Article(post.id)) } + ) { + Row(Modifier.padding(16.dp)) { + PostImage( + post, + Modifier.padding(end = 16.dp) + ) + Column(Modifier.weight(1f)) { + ProvideEmphasis(EmphasisAmbient.current.medium) { + Text( + text = "BASED ON YOUR HISTORY", + style = MaterialTheme.typography.overline + ) } - VectorImage( - modifier = LayoutPadding(start = 0.dp, top = 8.dp, end = 0.dp, bottom = 8.dp), - id = R.drawable.ic_more - ) + PostTitle(post = post) + AuthorAndReadTime(post) } + Modifier.padding(top = 8.dp, bottom = 8.dp) + Image(vectorResource(R.drawable.ic_more)) } } } @@ -133,24 +118,32 @@ fun PostCardHistory(post: Post) { @Composable fun BookmarkButton( isBookmarked: Boolean, - onBookmark: (Boolean) -> Unit + onBookmark: (Boolean) -> Unit, + modifier: Modifier = Modifier ) { - Ripple( - bounded = false, - radius = 24.dp + val imageSize = Modifier.preferredSize(48.dp, 48.dp) + Toggleable( + modifier = modifier.ripple(bounded = false, radius = 24.dp), + value = isBookmarked, + onValueChange = onBookmark ) { - Toggleable(isBookmarked, onBookmark) { - Container(modifier = LayoutSize(48.dp, 48.dp)) { - if (isBookmarked) { - VectorImage(id = R.drawable.ic_bookmarked) - } else { - VectorImage(id = R.drawable.ic_bookmark) - } - } + if (isBookmarked) { + // we want the color from the vector image so use Image here instead of Icon + Image(vectorResource(R.drawable.ic_bookmarked), imageSize) + } else { + // we want the color from the vector image so use Image here instead of Icon + Image(vectorResource(R.drawable.ic_bookmark), imageSize) } } } +@Preview("Bookmark Button") +@Composable +fun PreviewBookmarkButton() { + val (bookmarked, updateBookmarked) = state { false } + BookmarkButton(isBookmarked = bookmarked, onBookmark = updateBookmarked) +} + @Preview("Simple post card") @Composable fun PreviewSimplePost() { @@ -159,6 +152,14 @@ fun PreviewSimplePost() { } } +@Preview("History post card") +@Composable +fun PreviewHistoryPost() { + ThemedPreview { + PostCardHistory(post = post3) + } +} + @Preview("Simple post card dark theme") @Composable fun PreviewSimplePostDark() { diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt index 22a3f57e96..72791838fa 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt @@ -19,30 +19,32 @@ package com.example.jetnews.ui.interests import androidx.compose.Composable import androidx.compose.remember import androidx.compose.state -import androidx.ui.core.Clip -import androidx.ui.core.Opacity -import androidx.ui.core.Text +import androidx.ui.core.Modifier +import androidx.ui.core.clip import androidx.ui.foundation.Box -import androidx.ui.foundation.SimpleImage +import androidx.ui.foundation.Icon +import androidx.ui.foundation.Image +import androidx.ui.foundation.Text import androidx.ui.foundation.VerticalScroller import androidx.ui.foundation.selection.Toggleable import androidx.ui.foundation.shape.corner.RoundedCornerShape import androidx.ui.layout.Column -import androidx.ui.layout.Container -import androidx.ui.layout.LayoutGravity -import androidx.ui.layout.LayoutPadding -import androidx.ui.layout.LayoutSize import androidx.ui.layout.Row +import androidx.ui.layout.RowAlign +import androidx.ui.layout.padding +import androidx.ui.layout.preferredSize import androidx.ui.material.Divider import androidx.ui.material.DrawerState +import androidx.ui.material.IconButton import androidx.ui.material.MaterialTheme import androidx.ui.material.Scaffold import androidx.ui.material.ScaffoldState import androidx.ui.material.Tab import androidx.ui.material.TabRow import androidx.ui.material.TopAppBar -import androidx.ui.material.ripple.Ripple +import androidx.ui.material.ripple.ripple import androidx.ui.res.imageResource +import androidx.ui.res.vectorResource import androidx.ui.tooling.preview.Preview import androidx.ui.unit.dp import com.example.jetnews.R @@ -53,7 +55,6 @@ import com.example.jetnews.ui.AppDrawer import com.example.jetnews.ui.JetnewsStatus import com.example.jetnews.ui.Screen import com.example.jetnews.ui.ThemedPreview -import com.example.jetnews.ui.VectorImageButton import com.example.jetnews.ui.darkThemeColors private enum class Sections(val title: String) { @@ -76,8 +77,8 @@ fun InterestsScreen(scaffoldState: ScaffoldState = remember { ScaffoldState() }) TopAppBar( title = { Text("Interests") }, navigationIcon = { - VectorImageButton(R.drawable.ic_jetnews_logo) { - scaffoldState.drawerState = DrawerState.Opened + IconButton(onClick = { scaffoldState.drawerState = DrawerState.Opened }) { + Icon(vectorResource(R.drawable.ic_jetnews_logo)) } } ) @@ -105,7 +106,7 @@ private fun InterestsScreenBody( updateSection(Sections.values()[index]) }) } - Container(modifier = LayoutFlexible(1f)) { + Box(modifier = Modifier.weight(1f)) { when (currentSection) { Sections.Topics -> TopicsTab() Sections.People -> PeopleTab() @@ -142,7 +143,7 @@ private fun PublicationsTab() { @Composable private fun TabWithTopics(tabName: String, topics: List) { VerticalScroller { - Column(modifier = LayoutPadding(top = 16.dp)) { + Column(modifier = Modifier.padding(top = 16.dp)) { topics.forEach { topic -> TopicItem( getTopicKey( @@ -168,8 +169,8 @@ private fun TabWithSections( sections.forEach { (section, topics) -> Text( text = section, - modifier = LayoutPadding(16.dp), - style = (MaterialTheme.typography()).subtitle1) + modifier = Modifier.padding(16.dp), + style = MaterialTheme.typography.subtitle1) topics.forEach { topic -> TopicItem( getTopicKey( @@ -188,43 +189,47 @@ private fun TabWithSections( @Composable private fun TopicItem(topicKey: String, itemTitle: String) { val image = imageResource(R.drawable.placeholder_1_1) - - Ripple(bounded = true) { - val selected = isTopicSelected(topicKey) - val onSelected = { it: Boolean -> - selectTopic(topicKey, it) - } - Toggleable(selected, onSelected) { - // TODO(b/150060763): Remove box after "Bug in ripple + modifiers." - Box { - Row( - modifier = LayoutPadding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 0.dp) - ) { - Container(modifier = LayoutGravity.Center + LayoutSize(56.dp, 56.dp)) { - Clip(RoundedCornerShape(4.dp)) { - SimpleImage(image = image) - } - } - Text( - text = itemTitle, - modifier = LayoutFlexible(1f) + LayoutGravity.Center + LayoutPadding(16.dp), - style = (MaterialTheme.typography()).subtitle1 - ) - SelectTopicButton( - modifier = LayoutGravity.Center, - selected = selected - ) - } - } + val selected = isTopicSelected(topicKey) + val onSelected = { it: Boolean -> + selectTopic(topicKey, it) + } + Toggleable( + value = selected, + onValueChange = onSelected, + modifier = Modifier.ripple() + ) { + Row( + modifier = Modifier.padding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 0.dp) + ) { + Image( + image, + Modifier + .gravity(RowAlign.Center) + .preferredSize(56.dp, 56.dp) + .clip(RoundedCornerShape(4.dp)) + ) + Text( + text = itemTitle, + modifier = Modifier + .weight(1f) + .gravity(RowAlign.Center) + .padding(16.dp), + style = MaterialTheme.typography.subtitle1 + ) + SelectTopicButton( + modifier = Modifier.gravity(RowAlign.Center), + selected = selected + ) } } } @Composable private fun TopicDivider() { - Opacity(0.08f) { - Divider(LayoutPadding(start = 72.dp, top = 8.dp, end = 0.dp, bottom = 8.dp)) - } + Divider( + modifier = Modifier.padding(start = 72.dp, top = 8.dp, end = 0.dp, bottom = 8.dp), + color = MaterialTheme.colors.surface.copy(alpha = 0.08f) + ) } private fun getTopicKey(tab: String, group: String, topic: String) = "$tab-$group-$topic" diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt index bcc4a60136..fa0f5597f5 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt @@ -19,11 +19,13 @@ package com.example.jetnews.ui.interests import androidx.compose.Composable import androidx.ui.core.Modifier import androidx.ui.foundation.Box +import androidx.ui.foundation.Image import androidx.ui.foundation.contentColor import androidx.ui.foundation.shape.corner.CircleShape -import androidx.ui.graphics.vector.DrawVector -import androidx.ui.layout.LayoutPadding -import androidx.ui.layout.LayoutSize +import androidx.ui.graphics.BlendMode +import androidx.ui.graphics.ColorFilter +import androidx.ui.layout.padding +import androidx.ui.layout.preferredSize import androidx.ui.material.ColorPalette import androidx.ui.material.MaterialTheme import androidx.ui.res.vectorResource @@ -36,38 +38,38 @@ import com.example.jetnews.ui.lightThemeColors @Composable fun SelectTopicButton( - modifier: Modifier = Modifier.None, + modifier: Modifier = Modifier, selected: Boolean = false ) { if (selected) { - SelectTopicButtonOn(modifier + LayoutSize(36.dp, 36.dp)) + SelectTopicButtonOn(modifier.preferredSize(36.dp, 36.dp)) } else { - SelectTopicButtonOff(modifier + LayoutSize(36.dp, 36.dp)) + SelectTopicButtonOff(modifier.preferredSize(36.dp, 36.dp)) } } @Composable -private fun SelectTopicButtonOn(modifier: Modifier = Modifier.None) { +private fun SelectTopicButtonOn(modifier: Modifier = Modifier) { Box( - backgroundColor = MaterialTheme.colors().primary, + backgroundColor = MaterialTheme.colors.primary, shape = CircleShape, modifier = modifier ) { - DrawVector(vectorResource(R.drawable.ic_check)) + Image(vectorResource(R.drawable.ic_check)) } } @Composable -private fun SelectTopicButtonOff(modifier: Modifier = Modifier.None) { - val borderColor = MaterialTheme.colors().onSurface.copy(alpha = 0.12f) +private fun SelectTopicButtonOff(modifier: Modifier = Modifier) { + val borderColor = MaterialTheme.colors.onSurface.copy(alpha = 0.12f) Box( backgroundColor = borderColor, shape = CircleShape, modifier = modifier ) { - DrawVector( - vectorImage = vectorResource(R.drawable.ic_add), - tintColor = contentColor() + Image( + asset = vectorResource(R.drawable.ic_add), + colorFilter = ColorFilter(contentColor(), BlendMode.srcATop) ) } } @@ -112,7 +114,7 @@ fun SelectTopicButtonPreviewOnDark() { private fun SelectTopicButtonPreviewTemplate(themeColors: ColorPalette, selected: Boolean) { ThemedPreview(themeColors) { SelectTopicButton( - modifier = LayoutPadding(32.dp), + modifier = Modifier.padding(32.dp), selected = selected ) } diff --git a/JetNews/build.gradle b/JetNews/build.gradle index 28a0d8ca0f..3f7ef7577a 100644 --- a/JetNews/build.gradle +++ b/JetNews/build.gradle @@ -17,7 +17,7 @@ buildscript { ext.kotlin_version = '1.3.71' - def compose_release_version = "dev06" + def compose_release_version = "SNAPSHOT" ext.compose_version = "0.1.0-$compose_release_version" ext.compose_compiler_extension_version = "0.1.0-$compose_release_version" @@ -33,6 +33,9 @@ buildscript { allprojects { repositories { + maven { + url = "https://androidx-dev-prod.appspot.com/snapshots/builds/6345264/artifacts/ui/repository/" + } google() jcenter() } From 36908daef9014a96b6f69de31e1ce3b1e27e507e Mon Sep 17 00:00:00 2001 From: Sean McQuillan Date: Tue, 31 Mar 2020 10:27:27 -0700 Subject: [PATCH 2/9] ktlint: optimize imports. --- .../src/androidTest/java/com/example/jetnews/JetnewsUiTest.kt | 1 - .../src/main/java/com/example/jetnews/ui/article/PostContent.kt | 1 - 2 files changed, 2 deletions(-) diff --git a/JetNews/app/src/androidTest/java/com/example/jetnews/JetnewsUiTest.kt b/JetNews/app/src/androidTest/java/com/example/jetnews/JetnewsUiTest.kt index 9757dde837..9d55fd0685 100644 --- a/JetNews/app/src/androidTest/java/com/example/jetnews/JetnewsUiTest.kt +++ b/JetNews/app/src/androidTest/java/com/example/jetnews/JetnewsUiTest.kt @@ -17,7 +17,6 @@ package com.example.jetnews import androidx.test.filters.MediumTest -import androidx.test.filters.Suppress import androidx.ui.test.assertIsDisplayed import androidx.ui.test.createComposeRule import androidx.ui.test.doClick 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 index 51fc24b312..78e6819563 100644 --- 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 @@ -19,7 +19,6 @@ package com.example.jetnews.ui.article import androidx.compose.Composable import androidx.ui.core.DensityAmbient import androidx.ui.core.FirstBaseline -import androidx.ui.core.LastBaseline import androidx.ui.core.Modifier import androidx.ui.core.clip import androidx.ui.foundation.Box From f8c97be3eb32caac25f32e1bc6c46047cf3ad916 Mon Sep 17 00:00:00 2001 From: Sean McQuillan Date: Tue, 31 Mar 2020 15:19:44 -0700 Subject: [PATCH 3/9] PR Review notes: * Swapped Image for Icon in several places * Prefer srcIn * Added note for bugfix w/ link to bug --- .../java/com/example/jetnews/ui/JetnewsApp.kt | 13 +++----- .../jetnews/ui/article/ArticleScreen.kt | 5 ++- .../example/jetnews/ui/article/PostContent.kt | 33 ++++++++----------- .../com/example/jetnews/ui/home/PostCards.kt | 14 +++----- .../jetnews/ui/interests/SelectTopicButton.kt | 12 ++----- JetNews/app/src/main/res/drawable/ic_back.xml | 25 -------------- 6 files changed, 29 insertions(+), 73 deletions(-) delete mode 100644 JetNews/app/src/main/res/drawable/ic_back.xml 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 index 8df7132efd..c928bac986 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt @@ -20,6 +20,7 @@ import androidx.annotation.DrawableRes import androidx.compose.Composable import androidx.ui.animation.Crossfade import androidx.ui.core.Modifier +import androidx.ui.foundation.Icon import androidx.ui.foundation.Image import androidx.ui.foundation.Text import androidx.ui.foundation.shape.corner.RoundedCornerShape @@ -104,15 +105,9 @@ fun AppDrawer( @Composable private fun JetNewsLogo(modifier: Modifier = Modifier) { Row(modifier = modifier) { - Image( - asset = vectorResource(R.drawable.ic_jetnews_logo), - colorFilter = ColorFilter(MaterialTheme.colors.primary, BlendMode.srcATop) - ) + Icon(vectorResource(R.drawable.ic_jetnews_logo), tint = MaterialTheme.colors.primary) Spacer(Modifier.preferredWidth(8.dp)) - Image( - asset = vectorResource(R.drawable.ic_jetnews_wordmark), - colorFilter = ColorFilter(MaterialTheme.colors.onSurface, BlendMode.srcATop) - ) + Icon(vectorResource(R.drawable.ic_jetnews_wordmark), tint = MaterialTheme.colors.onSurface) } } @@ -153,7 +148,7 @@ private fun DrawerButton( Row(arrangement = Arrangement.Start, modifier = Modifier.fillMaxWidth()) { Image( asset = vectorResource(icon), - colorFilter = ColorFilter(textIconColor, BlendMode.srcATop), + colorFilter = ColorFilter(textIconColor, BlendMode.srcIn), alpha = imageAlpha ) Spacer(Modifier.preferredWidth(16.dp)) 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 index 156c8fafe1..e164d36868 100644 --- 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 @@ -41,6 +41,8 @@ import androidx.ui.material.Scaffold import androidx.ui.material.Surface import androidx.ui.material.TextButton import androidx.ui.material.TopAppBar +import androidx.ui.material.icons.Icons +import androidx.ui.material.icons.filled.ArrowBack import androidx.ui.res.vectorResource import androidx.ui.tooling.preview.Preview import androidx.ui.unit.dp @@ -73,12 +75,13 @@ fun ArticleScreen(postId: String) { title = { Text( text = "Published in: ${post.publication?.name}", + // FIXME(b/143626708): this contentColor() is a bug workaround style = MaterialTheme.typography.subtitle2.copy(color = contentColor()) ) }, navigationIcon = { IconButton(onClick = { navigateTo(Screen.Home) }) { - Icon(vectorResource(R.drawable.ic_back)) + Icon(Icons.Filled.ArrowBack) } } ) 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 index 78e6819563..afaf3423bd 100644 --- 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 @@ -22,15 +22,14 @@ import androidx.ui.core.FirstBaseline import androidx.ui.core.Modifier import androidx.ui.core.clip import androidx.ui.foundation.Box +import androidx.ui.foundation.Icon import androidx.ui.foundation.Image import androidx.ui.foundation.Text import androidx.ui.foundation.VerticalScroller import androidx.ui.foundation.contentColor import androidx.ui.foundation.shape.corner.CircleShape import androidx.ui.foundation.shape.corner.RoundedCornerShape -import androidx.ui.graphics.BlendMode import androidx.ui.graphics.Color -import androidx.ui.graphics.ColorFilter import androidx.ui.graphics.ScaleFit import androidx.ui.layout.Column import androidx.ui.layout.Row @@ -76,7 +75,6 @@ private val defaultSpacerSize = 16.dp @Composable fun PostContent(post: Post, modifier: Modifier = Modifier) { - val typography = MaterialTheme.typography VerticalScroller { Column( modifier = modifier.padding( @@ -88,13 +86,13 @@ fun PostContent(post: Post, modifier: Modifier = Modifier) { ) { Spacer(Modifier.preferredHeight(defaultSpacerSize)) PostHeaderImage(post) - Text(text = post.title, style = typography.h4) + Text(text = post.title, style = MaterialTheme.typography.h4) Spacer(Modifier.preferredHeight(8.dp)) post.subtitle?.let { subtitle -> ProvideEmphasis(EmphasisAmbient.current.medium) { Text( text = subtitle, - style = typography.body2.merge(TextStyle(lineHeight = 20.sp)) + style = MaterialTheme.typography.body2.merge(TextStyle(lineHeight = 20.sp)) ) } Spacer(Modifier.preferredHeight(defaultSpacerSize)) @@ -123,12 +121,7 @@ private fun PostHeaderImage(post: Post) { private fun PostMetadata(metadata: Metadata) { val typography = MaterialTheme.typography Row { - Image( - asset = vectorResource(R.drawable.ic_account_circle_black), - colorFilter = ColorFilter( - color = contentColor(), - blendMode = BlendMode.srcATop) - ) + Icon(vectorResource(R.drawable.ic_account_circle_black)) Spacer(Modifier.preferredWidth(8.dp)) Column { ProvideEmphasis(EmphasisAmbient.current.high) { @@ -164,7 +157,7 @@ private fun Paragraph(paragraph: Paragraph) { MaterialTheme.typography, MaterialTheme.colors.codeBlockBackground ) - Box(modifier = Modifier.padding(0.dp, 0.dp, 0.dp, bottom = trailingPadding)) { + Box(modifier = Modifier.padding(bottom = trailingPadding)) { when (paragraph.type) { ParagraphType.Bullet -> BulletParagraph( text = annotatedString, @@ -221,14 +214,14 @@ private fun BulletParagraph( with(DensityAmbient.current) { // this box is acting as a character, so it's sized with font scaling (sp) Box( - modifier = Modifier - .preferredSize(8.sp.toDp(), 8.sp.toDp()) - .alignWithSiblings { - // this makes the baseline of the Box be 9.sp from the top - 9.sp.toIntPx() - }, - backgroundColor = contentColor(), - shape = CircleShape + modifier = Modifier + .preferredSize(8.sp.toDp(), 8.sp.toDp()) + .alignWithSiblings { + // Add an alignment "baseline" 1sp below the bottom of the circle + 9.sp.toIntPx() + }, + backgroundColor = contentColor(), + shape = CircleShape ) } Text( diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt index f84e52f3ce..4a15b7a860 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt @@ -22,12 +22,13 @@ import androidx.ui.core.Modifier import androidx.ui.foundation.Clickable import androidx.ui.foundation.Image import androidx.ui.foundation.Text -import androidx.ui.foundation.selection.Toggleable import androidx.ui.layout.Column import androidx.ui.layout.Row +import androidx.ui.layout.fillMaxSize import androidx.ui.layout.padding import androidx.ui.layout.preferredSize import androidx.ui.material.EmphasisAmbient +import androidx.ui.material.IconToggleButton import androidx.ui.material.MaterialTheme import androidx.ui.material.ProvideEmphasis import androidx.ui.material.ripple.ripple @@ -121,18 +122,13 @@ fun BookmarkButton( onBookmark: (Boolean) -> Unit, modifier: Modifier = Modifier ) { - val imageSize = Modifier.preferredSize(48.dp, 48.dp) - Toggleable( - modifier = modifier.ripple(bounded = false, radius = 24.dp), - value = isBookmarked, - onValueChange = onBookmark - ) { + IconToggleButton(checked = isBookmarked, onCheckedChange = onBookmark) { if (isBookmarked) { // we want the color from the vector image so use Image here instead of Icon - Image(vectorResource(R.drawable.ic_bookmarked), imageSize) + Image(vectorResource(R.drawable.ic_bookmarked), Modifier.fillMaxSize()) } else { // we want the color from the vector image so use Image here instead of Icon - Image(vectorResource(R.drawable.ic_bookmark), imageSize) + Image(vectorResource(R.drawable.ic_bookmark), Modifier.fillMaxSize()) } } } diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt index fa0f5597f5..acbc1277da 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt @@ -19,11 +19,8 @@ package com.example.jetnews.ui.interests import androidx.compose.Composable import androidx.ui.core.Modifier import androidx.ui.foundation.Box -import androidx.ui.foundation.Image -import androidx.ui.foundation.contentColor +import androidx.ui.foundation.Icon import androidx.ui.foundation.shape.corner.CircleShape -import androidx.ui.graphics.BlendMode -import androidx.ui.graphics.ColorFilter import androidx.ui.layout.padding import androidx.ui.layout.preferredSize import androidx.ui.material.ColorPalette @@ -55,7 +52,7 @@ private fun SelectTopicButtonOn(modifier: Modifier = Modifier) { shape = CircleShape, modifier = modifier ) { - Image(vectorResource(R.drawable.ic_check)) + Icon(vectorResource(R.drawable.ic_check)) } } @@ -67,10 +64,7 @@ private fun SelectTopicButtonOff(modifier: Modifier = Modifier) { shape = CircleShape, modifier = modifier ) { - Image( - asset = vectorResource(R.drawable.ic_add), - colorFilter = ColorFilter(contentColor(), BlendMode.srcATop) - ) + Icon(vectorResource(R.drawable.ic_add)) } } diff --git a/JetNews/app/src/main/res/drawable/ic_back.xml b/JetNews/app/src/main/res/drawable/ic_back.xml deleted file mode 100644 index e5d020efbc..0000000000 --- a/JetNews/app/src/main/res/drawable/ic_back.xml +++ /dev/null @@ -1,25 +0,0 @@ - - - - From a54e5a9979c90f194feaf3f0d2f10a5a6295cd68 Mon Sep 17 00:00:00 2001 From: Sean McQuillan Date: Wed, 1 Apr 2020 17:26:54 -0700 Subject: [PATCH 4/9] PR review notes: * Switch some Icons back to Image that were not really icons * Use ColorFilter.tint to semantically tint vectors * Formatting --- .../java/com/example/jetnews/ui/JetnewsApp.kt | 16 +++++++++++----- .../example/jetnews/ui/article/PostContent.kt | 9 +-------- .../com/example/jetnews/ui/home/HomeScreen.kt | 6 +++--- .../com/example/jetnews/ui/home/PostCardTop.kt | 2 -- .../jetnews/ui/home/PostCardYourNetwork.kt | 2 -- .../com/example/jetnews/ui/home/PostCards.kt | 2 +- .../jetnews/ui/interests/InterestsScreen.kt | 4 ++-- 7 files changed, 18 insertions(+), 23 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 index c928bac986..03b9323441 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt @@ -105,9 +105,15 @@ fun AppDrawer( @Composable private fun JetNewsLogo(modifier: Modifier = Modifier) { Row(modifier = modifier) { - Icon(vectorResource(R.drawable.ic_jetnews_logo), tint = MaterialTheme.colors.primary) + Image( + asset = vectorResource(R.drawable.ic_jetnews_logo), + colorFilter = ColorFilter.tint(MaterialTheme.colors.primary) + ) Spacer(Modifier.preferredWidth(8.dp)) - Icon(vectorResource(R.drawable.ic_jetnews_wordmark), tint = MaterialTheme.colors.onSurface) + Image( + asset = vectorResource(R.drawable.ic_jetnews_wordmark), + colorFilter = ColorFilter.tint(MaterialTheme.colors.onSurface) + ) } } @@ -137,8 +143,8 @@ private fun DrawerButton( } val surfaceModifier = modifier - .padding(start = 8.dp, top = 8.dp, end = 8.dp, bottom = 0.dp) - .fillMaxWidth() + .padding(start = 8.dp, top = 8.dp, end = 8.dp) + .fillMaxWidth() Surface( modifier = surfaceModifier, color = backgroundColor, @@ -148,7 +154,7 @@ private fun DrawerButton( Row(arrangement = Arrangement.Start, modifier = Modifier.fillMaxWidth()) { Image( asset = vectorResource(icon), - colorFilter = ColorFilter(textIconColor, BlendMode.srcIn), + colorFilter = ColorFilter.tint(textIconColor), alpha = imageAlpha ) Spacer(Modifier.preferredWidth(16.dp)) 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 index afaf3423bd..1350895265 100644 --- 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 @@ -76,14 +76,7 @@ private val defaultSpacerSize = 16.dp @Composable fun PostContent(post: Post, modifier: Modifier = Modifier) { VerticalScroller { - Column( - modifier = modifier.padding( - start = defaultSpacerSize, - top = 0.dp, - end = defaultSpacerSize, - bottom = 0.dp - ) - ) { + Column(modifier = modifier.padding(start = defaultSpacerSize, end = defaultSpacerSize)) { Spacer(Modifier.preferredHeight(defaultSpacerSize)) PostHeaderImage(post) Text(text = post.title, style = MaterialTheme.typography.h4) 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 index 0c6d63b3ae..9b6b89928d 100644 --- 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 @@ -99,7 +99,7 @@ private fun HomeScreenBody( private fun HomeScreenTopSection(post: Post) { ProvideEmphasis(EmphasisAmbient.current.high) { Text( - modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 0.dp), + modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp), text = "Top stories for you", style = MaterialTheme.typography.subtitle1 ) @@ -131,7 +131,7 @@ private fun HomeScreenPopularSection(posts: List) { ) } HorizontalScroller { - Row(modifier = Modifier.padding(start = 0.dp, top = 0.dp, end = 16.dp, bottom = 16.dp)) { + Row(modifier = Modifier.padding(end = 16.dp, bottom = 16.dp)) { posts.forEach { post -> PostCardPopular(post, Modifier.padding(start = 16.dp)) } @@ -154,7 +154,7 @@ private fun HomeScreenHistorySection(posts: List) { @Composable private fun HomeScreenDivider() { Divider( - modifier = Modifier.padding(start = 14.dp, top = 0.dp, end = 14.dp, bottom = 0.dp), + modifier = Modifier.padding(start = 14.dp, end = 14.dp), color = MaterialTheme.colors.onSurface.copy(alpha = 0.08f)) } 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 index fb4f3c8e62..37d9c65248 100644 --- 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 @@ -64,8 +64,6 @@ fun PostCardTop(post: Post) { text = post.title, style = typography.h6 ) - } - ProvideEmphasis(emphasisLevels.high) { Text( text = post.metadata.author.name, style = typography.body2 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 index d856874488..1310713e6c 100644 --- 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 @@ -64,8 +64,6 @@ fun PostCardPopular(post: Post, modifier: Modifier = Modifier) { maxLines = 2, overflow = TextOverflow.Ellipsis ) - } - ProvideEmphasis(emphasisLevels.high) { Text( text = post.metadata.author.name, maxLines = 1, diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt index 4a15b7a860..b949ac79b7 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt @@ -76,7 +76,7 @@ fun PostCardSimple(post: Post) { onClick = { navigateTo(Screen.Article(post.id)) } ) { Row(modifier = Modifier.padding(16.dp)) { - PostImage(post, Modifier.padding(end = 16.dp, bottom = 0.dp)) + PostImage(post, Modifier.padding(end = 16.dp)) Column(modifier = Modifier.weight(1f)) { PostTitle(post) AuthorAndReadTime(post) diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt index 72791838fa..8494d4bb67 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt @@ -199,7 +199,7 @@ private fun TopicItem(topicKey: String, itemTitle: String) { modifier = Modifier.ripple() ) { Row( - modifier = Modifier.padding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 0.dp) + modifier = Modifier.padding(start = 16.dp, end = 16.dp) ) { Image( image, @@ -227,7 +227,7 @@ private fun TopicItem(topicKey: String, itemTitle: String) { @Composable private fun TopicDivider() { Divider( - modifier = Modifier.padding(start = 72.dp, top = 8.dp, end = 0.dp, bottom = 8.dp), + modifier = Modifier.padding(start = 72.dp, top = 8.dp, bottom = 8.dp), color = MaterialTheme.colors.surface.copy(alpha = 0.08f) ) } From 119fa74b226bcdaaa539d704f3ba7a1e6ea4b94e Mon Sep 17 00:00:00 2001 From: Sean McQuillan Date: Wed, 1 Apr 2020 17:34:38 -0700 Subject: [PATCH 5/9] ktlint. --- JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt | 2 -- 1 file changed, 2 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 index 03b9323441..187c9ea563 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt @@ -20,11 +20,9 @@ import androidx.annotation.DrawableRes import androidx.compose.Composable import androidx.ui.animation.Crossfade import androidx.ui.core.Modifier -import androidx.ui.foundation.Icon import androidx.ui.foundation.Image import androidx.ui.foundation.Text import androidx.ui.foundation.shape.corner.RoundedCornerShape -import androidx.ui.graphics.BlendMode import androidx.ui.graphics.ColorFilter import androidx.ui.layout.Arrangement import androidx.ui.layout.Column From fe8463dc200c13a906d54b39d2def3a874ec419b Mon Sep 17 00:00:00 2001 From: Sean McQuillan Date: Wed, 1 Apr 2020 17:50:27 -0700 Subject: [PATCH 6/9] Use public dev08 --- JetNews/build.gradle | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/JetNews/build.gradle b/JetNews/build.gradle index 3f7ef7577a..d1e9f9386e 100644 --- a/JetNews/build.gradle +++ b/JetNews/build.gradle @@ -17,7 +17,7 @@ buildscript { ext.kotlin_version = '1.3.71' - def compose_release_version = "SNAPSHOT" + def compose_release_version = "dev08" ext.compose_version = "0.1.0-$compose_release_version" ext.compose_compiler_extension_version = "0.1.0-$compose_release_version" @@ -33,9 +33,6 @@ buildscript { allprojects { repositories { - maven { - url = "https://androidx-dev-prod.appspot.com/snapshots/builds/6345264/artifacts/ui/repository/" - } google() jcenter() } From 6dd83ad69fef278e5f2e6873912eb39d8caaa3ce Mon Sep 17 00:00:00 2001 From: Sean McQuillan Date: Thu, 2 Apr 2020 23:54:27 -0700 Subject: [PATCH 7/9] PR Review notes: * Revert to Modifier.None for default arugments which is the style in dev08 --- .../app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt | 4 ++-- .../main/java/com/example/jetnews/ui/article/PostContent.kt | 2 +- .../src/main/java/com/example/jetnews/ui/home/HomeScreen.kt | 2 +- .../java/com/example/jetnews/ui/home/PostCardYourNetwork.kt | 2 +- .../src/main/java/com/example/jetnews/ui/home/PostCards.kt | 4 ++-- .../com/example/jetnews/ui/interests/SelectTopicButton.kt | 6 +++--- 6 files changed, 10 insertions(+), 10 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 index 187c9ea563..4430cbbeef 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/JetnewsApp.kt @@ -101,7 +101,7 @@ fun AppDrawer( } @Composable -private fun JetNewsLogo(modifier: Modifier = Modifier) { +private fun JetNewsLogo(modifier: Modifier = Modifier.None) { Row(modifier = modifier) { Image( asset = vectorResource(R.drawable.ic_jetnews_logo), @@ -121,7 +121,7 @@ private fun DrawerButton( label: String, isSelected: Boolean, action: () -> Unit, - modifier: Modifier = Modifier + modifier: Modifier = Modifier.None ) { val colors = MaterialTheme.colors val imageAlpha = if (isSelected) { 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 index 1350895265..587bc09005 100644 --- 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 @@ -74,7 +74,7 @@ import com.example.jetnews.ui.darkThemeColors private val defaultSpacerSize = 16.dp @Composable -fun PostContent(post: Post, modifier: Modifier = Modifier) { +fun PostContent(post: Post, modifier: Modifier = Modifier.None) { VerticalScroller { Column(modifier = modifier.padding(start = defaultSpacerSize, end = defaultSpacerSize)) { Spacer(Modifier.preferredHeight(defaultSpacerSize)) 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 index 9b6b89928d..433e8d1f66 100644 --- 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 @@ -78,7 +78,7 @@ fun HomeScreen(scaffoldState: ScaffoldState = remember { ScaffoldState() }) { @Composable private fun HomeScreenBody( posts: List, - modifier: Modifier = Modifier + modifier: Modifier = Modifier.None ) { val postTop = posts[3] val postsSimple = posts.subList(0, 2) 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 index 1310713e6c..26eb9415a3 100644 --- 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 @@ -46,7 +46,7 @@ import com.example.jetnews.ui.darkThemeColors import com.example.jetnews.ui.navigateTo @Composable -fun PostCardPopular(post: Post, modifier: Modifier = Modifier) { +fun PostCardPopular(post: Post, modifier: Modifier = Modifier.None) { Card(modifier = modifier.preferredSize(280.dp, 240.dp), shape = RoundedCornerShape(4.dp)) { Clickable( modifier = Modifier.ripple(), diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt index b949ac79b7..36a4480782 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt @@ -57,7 +57,7 @@ fun AuthorAndReadTime(post: Post) { } @Composable -fun PostImage(post: Post, modifier: Modifier = Modifier) { +fun PostImage(post: Post, modifier: Modifier = Modifier.None) { val image = post.imageThumb ?: imageResource(R.drawable.placeholder_1_1) Image(image, modifier.preferredSize(40.dp, 40.dp)) } @@ -120,7 +120,7 @@ fun PostCardHistory(post: Post) { fun BookmarkButton( isBookmarked: Boolean, onBookmark: (Boolean) -> Unit, - modifier: Modifier = Modifier + modifier: Modifier = Modifier.None ) { IconToggleButton(checked = isBookmarked, onCheckedChange = onBookmark) { if (isBookmarked) { diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt index acbc1277da..55d06af883 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/interests/SelectTopicButton.kt @@ -35,7 +35,7 @@ import com.example.jetnews.ui.lightThemeColors @Composable fun SelectTopicButton( - modifier: Modifier = Modifier, + modifier: Modifier = Modifier.None, selected: Boolean = false ) { if (selected) { @@ -46,7 +46,7 @@ fun SelectTopicButton( } @Composable -private fun SelectTopicButtonOn(modifier: Modifier = Modifier) { +private fun SelectTopicButtonOn(modifier: Modifier = Modifier.None) { Box( backgroundColor = MaterialTheme.colors.primary, shape = CircleShape, @@ -57,7 +57,7 @@ private fun SelectTopicButtonOn(modifier: Modifier = Modifier) { } @Composable -private fun SelectTopicButtonOff(modifier: Modifier = Modifier) { +private fun SelectTopicButtonOff(modifier: Modifier = Modifier.None) { val borderColor = MaterialTheme.colors.onSurface.copy(alpha = 0.12f) Box( backgroundColor = borderColor, From f90f97f2de2f01d4a9f27c8a5066d24a3dab0c26 Mon Sep 17 00:00:00 2001 From: Sean McQuillan Date: Thu, 2 Apr 2020 23:57:58 -0700 Subject: [PATCH 8/9] PR Review notes: * Use Icon for all Icons, which matches design. --- .../com/example/jetnews/ui/article/ArticleScreen.kt | 3 +-- .../main/java/com/example/jetnews/ui/home/PostCards.kt | 10 ++++------ 2 files changed, 5 insertions(+), 8 deletions(-) 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 index e164d36868..4fe5c0d03e 100644 --- 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 @@ -120,8 +120,7 @@ private fun BottomBarAction( onClick: () -> Unit ) { IconButton(onClick = onClick, modifier = Modifier.padding(12.dp).preferredSize(24.dp, 24.dp)) { - // use Image instead of Icon to retain coloring from vector graphic - Image(vectorResource(id)) + Icon(vectorResource(id)) } } diff --git a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt index 36a4480782..b0bfb0f334 100644 --- a/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt +++ b/JetNews/app/src/main/java/com/example/jetnews/ui/home/PostCards.kt @@ -20,6 +20,7 @@ import androidx.compose.Composable import androidx.compose.state import androidx.ui.core.Modifier import androidx.ui.foundation.Clickable +import androidx.ui.foundation.Icon import androidx.ui.foundation.Image import androidx.ui.foundation.Text import androidx.ui.layout.Column @@ -119,16 +120,13 @@ fun PostCardHistory(post: Post) { @Composable fun BookmarkButton( isBookmarked: Boolean, - onBookmark: (Boolean) -> Unit, - modifier: Modifier = Modifier.None + onBookmark: (Boolean) -> Unit ) { IconToggleButton(checked = isBookmarked, onCheckedChange = onBookmark) { if (isBookmarked) { - // we want the color from the vector image so use Image here instead of Icon - Image(vectorResource(R.drawable.ic_bookmarked), Modifier.fillMaxSize()) + Icon(vectorResource(R.drawable.ic_bookmarked), Modifier.fillMaxSize()) } else { - // we want the color from the vector image so use Image here instead of Icon - Image(vectorResource(R.drawable.ic_bookmark), Modifier.fillMaxSize()) + Icon(vectorResource(R.drawable.ic_bookmark), Modifier.fillMaxSize()) } } } From edbd0b924ee1dfaf3565644ee45ecd32e5756cd9 Mon Sep 17 00:00:00 2001 From: Sean McQuillan Date: Thu, 2 Apr 2020 23:59:05 -0700 Subject: [PATCH 9/9] ktlint: optimize imports. --- .../main/java/com/example/jetnews/ui/article/ArticleScreen.kt | 1 - 1 file changed, 1 deletion(-) 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 index 4fe5c0d03e..4ae6ac0805 100644 --- 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 @@ -25,7 +25,6 @@ import androidx.ui.core.ContextAmbient import androidx.ui.core.Modifier import androidx.ui.foundation.Box import androidx.ui.foundation.Icon -import androidx.ui.foundation.Image import androidx.ui.foundation.Text import androidx.ui.foundation.contentColor import androidx.ui.layout.Row