From 29e4c0bb305ac00ce62d870d35ade8c8c4df915c Mon Sep 17 00:00:00 2001 From: utamori Date: Sun, 3 Nov 2024 18:32:07 +0900 Subject: [PATCH 1/5] update material3 --- composeApp/build.gradle.kts | 2 +- .../kotlin/com/jetbrains/kmpapp/App.kt | 10 +++---- .../kmpapp/screens/EmptyScreenContent.kt | 2 +- .../kmpapp/screens/detail/DetailScreen.kt | 28 +++++++++++-------- .../kmpapp/screens/list/ListScreen.kt | 10 +++---- 5 files changed, 29 insertions(+), 23 deletions(-) diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts index fd41ef4..d77bb73 100644 --- a/composeApp/build.gradle.kts +++ b/composeApp/build.gradle.kts @@ -40,7 +40,7 @@ kotlin { commonMain.dependencies { implementation(compose.runtime) implementation(compose.foundation) - implementation(compose.material) + implementation(compose.material3) implementation(compose.ui) implementation(compose.components.resources) implementation(compose.components.uiToolingPreview) diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/App.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/App.kt index 288ff74..e03e1c4 100644 --- a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/App.kt +++ b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/App.kt @@ -1,10 +1,10 @@ package com.jetbrains.kmpapp import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Surface -import androidx.compose.material.darkColors -import androidx.compose.material.lightColors +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.material3.lightColorScheme +import androidx.compose.material3.darkColorScheme import androidx.compose.runtime.Composable import androidx.navigation.NavHostController import androidx.navigation.compose.NavHost @@ -24,7 +24,7 @@ data class DetailDestination(val objectId: Int) @Composable fun App() { MaterialTheme( - colors = if (isSystemInDarkTheme()) darkColors() else lightColors() + colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme() ) { Surface { val navController: NavHostController = rememberNavController() diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/EmptyScreenContent.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/EmptyScreenContent.kt index 2382f66..ae7def6 100644 --- a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/EmptyScreenContent.kt +++ b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/EmptyScreenContent.kt @@ -1,7 +1,7 @@ package com.jetbrains.kmpapp.screens import androidx.compose.foundation.layout.Box -import androidx.compose.material.Text +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt index 35fafc7..5837309 100644 --- a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt @@ -14,14 +14,15 @@ import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.text.selection.SelectionContainer import androidx.compose.foundation.verticalScroll -import androidx.compose.material.Icon -import androidx.compose.material.IconButton -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Scaffold -import androidx.compose.material.Text -import androidx.compose.material.TopAppBar +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Scaffold +import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBar import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue @@ -66,6 +67,7 @@ fun DetailScreen( } } +@OptIn(ExperimentalMaterial3Api::class) @Composable private fun ObjectDetails( obj: MuseumObject, @@ -74,11 +76,15 @@ private fun ObjectDetails( ) { Scaffold( topBar = { - TopAppBar(backgroundColor = MaterialTheme.colors.background) { - IconButton(onClick = onBackClick) { - Icon(Icons.AutoMirrored.Filled.ArrowBack, stringResource(Res.string.back)) + TopAppBar( + title = { Text("") }, + modifier = Modifier.background(color = MaterialTheme.colorScheme.background), + navigationIcon = { + IconButton(onClick = onBackClick) { + Icon(Icons.AutoMirrored.Filled.ArrowBack, stringResource(Res.string.back)) + } } - } + ) }, modifier = modifier.windowInsetsPadding(WindowInsets.systemBars), ) { paddingValues -> @@ -98,7 +104,7 @@ private fun ObjectDetails( SelectionContainer { Column(Modifier.padding(12.dp)) { - Text(obj.title, style = MaterialTheme.typography.h6.copy(fontWeight = FontWeight.Bold)) + Text(obj.title, style = MaterialTheme.typography.titleLarge.copy(fontWeight = FontWeight.Bold)) Spacer(Modifier.height(6.dp)) LabeledInfo(stringResource(Res.string.label_title), obj.title) LabeledInfo(stringResource(Res.string.label_artist), obj.artistDisplayName) diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt index 1b9d633..d920701 100644 --- a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt @@ -18,8 +18,8 @@ import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.items -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Text +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue @@ -101,9 +101,9 @@ private fun ObjectFrame( Text( obj.title, - style = MaterialTheme.typography.subtitle1.copy(fontWeight = FontWeight.Bold) + style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.Bold) ) - Text(obj.artistDisplayName, style = MaterialTheme.typography.body2) - Text(obj.objectDate, style = MaterialTheme.typography.caption) + Text(obj.artistDisplayName, style = MaterialTheme.typography.bodyMedium) + Text(obj.objectDate, style = MaterialTheme.typography.bodySmall) } } From c95c407e5f4895d12fbe6c8f18b2abcd78f6b7dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Braun?= Date: Tue, 12 Nov 2024 13:26:15 +0100 Subject: [PATCH 2/5] Move opt-in annotation to TopAppBar usage --- .../kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt index 5837309..07f2464 100644 --- a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt @@ -67,7 +67,6 @@ fun DetailScreen( } } -@OptIn(ExperimentalMaterial3Api::class) @Composable private fun ObjectDetails( obj: MuseumObject, @@ -76,6 +75,7 @@ private fun ObjectDetails( ) { Scaffold( topBar = { + @OptIn(ExperimentalMaterial3Api::class) TopAppBar( title = { Text("") }, modifier = Modifier.background(color = MaterialTheme.colorScheme.background), From d60e85c0b952fcaca768ba85fc38a97f20c8ebbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Braun?= Date: Tue, 12 Nov 2024 13:26:34 +0100 Subject: [PATCH 3/5] Sort imports --- .../src/commonMain/kotlin/com/jetbrains/kmpapp/App.kt | 2 +- .../com/jetbrains/kmpapp/screens/detail/DetailScreen.kt | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/App.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/App.kt index e03e1c4..2734e92 100644 --- a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/App.kt +++ b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/App.kt @@ -3,8 +3,8 @@ package com.jetbrains.kmpapp import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface -import androidx.compose.material3.lightColorScheme import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable import androidx.navigation.NavHostController import androidx.navigation.compose.NavHost diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt index 07f2464..6a76705 100644 --- a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt @@ -14,15 +14,15 @@ import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.text.selection.SelectionContainer import androidx.compose.foundation.verticalScroll +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.automirrored.filled.ArrowBack +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.automirrored.filled.ArrowBack -import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue From 01b265d9f9d59d3b0fa03664eb16b098d1cf7fa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Braun?= Date: Tue, 12 Nov 2024 13:35:14 +0100 Subject: [PATCH 4/5] Adjust text styling --- .../com/jetbrains/kmpapp/screens/detail/DetailScreen.kt | 4 ++-- .../kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt | 6 +----- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt index 6a76705..e0e75f5 100644 --- a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt @@ -77,7 +77,7 @@ private fun ObjectDetails( topBar = { @OptIn(ExperimentalMaterial3Api::class) TopAppBar( - title = { Text("") }, + title = {}, modifier = Modifier.background(color = MaterialTheme.colorScheme.background), navigationIcon = { IconButton(onClick = onBackClick) { @@ -104,7 +104,7 @@ private fun ObjectDetails( SelectionContainer { Column(Modifier.padding(12.dp)) { - Text(obj.title, style = MaterialTheme.typography.titleLarge.copy(fontWeight = FontWeight.Bold)) + Text(obj.title, style = MaterialTheme.typography.headlineMedium) Spacer(Modifier.height(6.dp)) LabeledInfo(stringResource(Res.string.label_title), obj.title) LabeledInfo(stringResource(Res.string.label_artist), obj.artistDisplayName) diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt index d920701..ef2d6e3 100644 --- a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/list/ListScreen.kt @@ -26,7 +26,6 @@ import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import coil3.compose.AsyncImage import com.jetbrains.kmpapp.data.MuseumObject @@ -99,10 +98,7 @@ private fun ObjectFrame( Spacer(Modifier.height(2.dp)) - Text( - obj.title, - style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.Bold) - ) + Text(obj.title, style = MaterialTheme.typography.titleMedium) Text(obj.artistDisplayName, style = MaterialTheme.typography.bodyMedium) Text(obj.objectDate, style = MaterialTheme.typography.bodySmall) } From debcdc84e9acc446aff37f54e90812d270940c18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20Braun?= Date: Tue, 12 Nov 2024 13:37:34 +0100 Subject: [PATCH 5/5] Remove unused background color --- .../kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt | 1 - 1 file changed, 1 deletion(-) diff --git a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt index e0e75f5..3ba9a1d 100644 --- a/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/jetbrains/kmpapp/screens/detail/DetailScreen.kt @@ -78,7 +78,6 @@ private fun ObjectDetails( @OptIn(ExperimentalMaterial3Api::class) TopAppBar( title = {}, - modifier = Modifier.background(color = MaterialTheme.colorScheme.background), navigationIcon = { IconButton(onClick = onBackClick) { Icon(Icons.AutoMirrored.Filled.ArrowBack, stringResource(Res.string.back))