Migrating to Material 3 (3)

oblakr24 · Jul 9, 2023 · 43e9cff · 43e9cff
1 parent a066fa0
commit 43e9cff
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 66 deletions.
diff --git a/app/src/main/java/com/rokoblak/chatbackup/home/HomeScaffold.kt b/app/src/main/java/com/rokoblak/chatbackup/home/HomeScaffold.kt
@@ -1,17 +1,19 @@
 package com.rokoblak.chatbackup.home
 
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Message
+import androidx.compose.material3.DrawerState
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalDrawerSheet
+import androidx.compose.material3.ModalNavigationDrawer
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import com.rokoblak.chatbackup.ui.commonui.ButtonWithIcon
 import com.rokoblak.chatbackup.ui.commonui.ConversationsListingUIState
 import com.rokoblak.chatbackup.ui.theme.ChatBackupTheme
@@ -23,54 +25,76 @@ data class HomeScaffoldUIState(
     val contentPermissions: HomeContentUIPermissionsState
 )
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun HomeScaffold(
     searchQuery: String?,
     state: HomeScaffoldUIState,
-    scaffoldState: ScaffoldState = rememberScaffoldState(),
+    drawerState: DrawerState = rememberDrawerState(initialValue = DrawerValue.Closed),
     onAction: (HomeAction) -> Unit,
     onLaunchPermissions: () -> Unit,
 ) {
-    val coroutineScope = rememberCoroutineScope()
-    Scaffold(
-        modifier = Modifier.fillMaxSize(),
-        scaffoldState = scaffoldState,
-        topBar = {
-            HomeTopAppBar(state.appbar, onAction) {
-                coroutineScope.launch {
-                    scaffoldState.drawerState.open()
-                }
-            }
-        },
+    ModalNavigationDrawer(
+        drawerState = drawerState,
         drawerContent = {
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-            ) {
+            val coroutineScope = rememberCoroutineScope()
+            ModalDrawerSheet {
                 HomeDrawer(state.drawer) {
                     coroutineScope.launch {
-                        scaffoldState.drawerState.close()
+                        drawerState.close()
                         onAction(it)
                     }
                 }
             }
-        }, content = {
-            it.calculateBottomPadding()
-            HomeContent(searchQuery, state.contentPermissions, onAction, onLaunchPermissions)
-        }, floatingActionButton = {
+        }
+    ) {
+        HomeScaffoldContent(
+            searchQuery = searchQuery,
+            state = state,
+            drawerState = drawerState,
+            onAction = onAction,
+            onLaunchPermissions = onLaunchPermissions,
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun HomeScaffoldContent(
+    searchQuery: String?,
+    state: HomeScaffoldUIState,
+    drawerState: DrawerState,
+    onAction: (HomeAction) -> Unit,
+    onLaunchPermissions: () -> Unit,
+) {
+    Scaffold(
+        topBar = {
+            val coroutineScope = rememberCoroutineScope()
+
+            HomeTopAppBar(state.appbar, onAction) {
+                coroutineScope.launch {
+                    drawerState.open()
+                }
+            }
+        },
+        floatingActionButton = {
             if (state.contentPermissions is HomeContentUIPermissionsState.PermissionsGiven) {
                 ButtonWithIcon(modifier = Modifier,
                     text = "Compose",
                     icon = Icons.Filled.Message,
                     onClick = { onAction(HomeAction.ComposeClicked) })
             }
-        })
+        }
+    ) { paddingValues ->
+        val topPadding = paddingValues.calculateTopPadding()
+        HomeContent(modifier = Modifier.padding(top = topPadding), searchQuery, state.contentPermissions, onAction, onLaunchPermissions)
+    }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Preview
 @Composable
 private fun HomeScaffoldPreview() {
-    val drawerOpenState = DrawerValue.Closed
     val drawerState = HomeDrawerUIState(
         darkMode = true,
         showDefaultSMSLabel = true,
@@ -86,10 +110,9 @@ private fun HomeScaffoldPreview() {
     )
     ChatBackupTheme {
         val state = ConversationsListingUIState.Loading
-        val scaffoldState = ScaffoldState(DrawerState(drawerOpenState), SnackbarHostState())
         HomeScaffold(
             searchQuery = "",
-            scaffoldState = scaffoldState,
+            drawerState = DrawerState(DrawerValue.Closed),
             state = HomeScaffoldUIState(
                 appbarState,
                 drawerState,

diff --git a/app/src/main/java/com/rokoblak/chatbackup/home/HomeScreen.kt b/app/src/main/java/com/rokoblak/chatbackup/home/HomeScreen.kt
@@ -4,6 +4,7 @@ import android.content.Intent
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.ActivityResultLauncher
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.ExperimentalComposeUiApi
@@ -28,7 +29,7 @@ data class HomeScreenUIState(
     }
 }
 
-@OptIn(ExperimentalPermissionsApi::class)
+@OptIn(ExperimentalPermissionsApi::class, ExperimentalMaterial3Api::class)
 @Composable
 fun HomeScreen(viewModel: HomeViewModel = hiltViewModel()) {
     var deniedPermissions: Boolean by rememberSaveable {

diff --git a/app/src/main/java/com/rokoblak/chatbackup/home/HomeTopAppBar.kt b/app/src/main/java/com/rokoblak/chatbackup/home/HomeTopAppBar.kt
@@ -3,14 +3,20 @@ package com.rokoblak.chatbackup.home
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Popup
 import androidx.compose.ui.window.PopupProperties
@@ -26,13 +32,18 @@ data class HomeAppbarUIState(
     val deleteShowsPrompt: Boolean,
 )
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun HomeTopAppBar(
     state: HomeAppbarUIState,
     onAction: (HomeAction) -> Unit,
     onNavIconClick: () -> Unit
 ) {
     TopAppBar(
+        colors = TopAppBarDefaults.smallTopAppBarColors(
+            containerColor = MaterialTheme.colorScheme.primaryContainer,
+            titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer
+        ),
         title = { Text(text = "Chat Backup") },
         actions = {
             if (state.hideIcons) {
@@ -57,7 +68,7 @@ fun HomeTopAppBar(
                             .shadow(8.dp)
                             .wrapContentSize()
                             .background(
-                                MaterialTheme.colors.surface,
+                                MaterialTheme.colorScheme.surface,
                                 RoundedCornerShape(8.dp)
                             )
                     ) {

diff --git a/app/src/main/java/com/rokoblak/chatbackup/importfile/ImportContent.kt b/app/src/main/java/com/rokoblak/chatbackup/importfile/ImportContent.kt
@@ -1,23 +1,30 @@
 package com.rokoblak.chatbackup.importfile
 
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.CircularProgressIndicator
-import androidx.compose.material.Text
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.DataObject
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.rokoblak.chatbackup.ui.commonui.PreviewDataUtils.mockConversations
 import com.rokoblak.chatbackup.ui.commonui.ButtonWithIcon
 import com.rokoblak.chatbackup.ui.commonui.ConversationDisplayData
 import com.rokoblak.chatbackup.ui.commonui.ConversationsListing
 import com.rokoblak.chatbackup.ui.commonui.ConversationsListingUIState
 import com.rokoblak.chatbackup.ui.commonui.DetailsContent
+import com.rokoblak.chatbackup.ui.commonui.PreviewDataUtils.mockConversations
+import com.rokoblak.chatbackup.ui.theme.AppThemePreviews
 import com.rokoblak.chatbackup.ui.theme.ChatBackupTheme
-import com.rokoblak.chatbackup.ui.theme.LocalTypography
 import kotlinx.collections.immutable.ImmutableList
 
 sealed interface ImportScreenUIState {
@@ -52,9 +59,6 @@ fun ImportContent(
                     ButtonWithIcon("Import JSON", icon = Icons.Filled.DataObject) {
                         onAction(ImportAction.ImportJSONClicked)
                     }
-//                    ButtonWithIcon("Import XML", icon = Icons.Filled.DataArray) {
-//                        onAction(ImportAction.ImportXMLClicked)
-//                    }
                 }
             }
             ImportScreenUIState.Loading -> {
@@ -81,7 +85,7 @@ fun ImportContent(
                                 strokeWidth = 2.dp
                             )
                         }
-                        Text(state.subtitle, style = LocalTypography.current.subheadRegular)
+                        Text(state.subtitle, style = MaterialTheme.typography.labelSmall)
                     }
                 }
                 val conversationsState = ConversationsListingUIState.Loaded(state.listing)
@@ -98,6 +102,7 @@ fun ImportContent(
     }
 }
 
+@AppThemePreviews
 @Preview
 @Composable
 fun ImportContentPreview() {

diff --git a/app/src/main/java/com/rokoblak/chatbackup/importfile/ImportTopToolbar.kt b/app/src/main/java/com/rokoblak/chatbackup/importfile/ImportTopToolbar.kt
@@ -3,9 +3,15 @@ package com.rokoblak.chatbackup.importfile
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -29,14 +35,17 @@ data class ImportTopToolbarUIState(
     val deleteEnabled: Boolean,
 )
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ImportTopToolbar(
     state: ImportTopToolbarUIState,
     onAction: (ImportAction) -> Unit,
 ) {
     TopAppBar(
-        backgroundColor = MaterialTheme.colors.primaryVariant.alpha(0.9f),
-        elevation = 0.dp,
+        colors = TopAppBarDefaults.smallTopAppBarColors(
+            containerColor = MaterialTheme.colorScheme.primaryContainer,
+            titleContentColor = MaterialTheme.colorScheme.primaryContainer
+        ),
         title = { },
         actions = {
             var openSMSDefaultPrompt by remember {
@@ -57,7 +66,7 @@ fun ImportTopToolbar(
                             .shadow(8.dp)
                             .wrapContentSize()
                             .background(
-                                MaterialTheme.colors.surface,
+                                MaterialTheme.colorScheme.surface,
                                 RoundedCornerShape(8.dp)
                             )
                     ) {

diff --git a/app/src/main/java/com/rokoblak/chatbackup/main/MainScreen.kt b/app/src/main/java/com/rokoblak/chatbackup/main/MainScreen.kt
@@ -1,8 +1,8 @@
 package com.rokoblak.chatbackup.main
 
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
@@ -31,7 +31,7 @@ fun MainScreen(viewModel: MainViewModel = hiltViewModel()) {
     ChatBackupTheme(overrideDarkMode = state.isDarkTheme) {
         Surface(
             modifier = Modifier.fillMaxSize(),
-            color = MaterialTheme.colors.background
+            color = MaterialTheme.colorScheme.background
         ) {
             MainNavHostContainer(navController)
         }

diff --git a/app/src/main/java/com/rokoblak/chatbackup/ui/commonui/ButtonWithIcon.kt b/app/src/main/java/com/rokoblak/chatbackup/ui/commonui/ButtonWithIcon.kt
@@ -3,17 +3,18 @@ package com.rokoblak.chatbackup.ui.commonui
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.material.Button
-import androidx.compose.material.Icon
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ImportExport
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.rokoblak.chatbackup.ui.theme.AppThemePreviews
 import com.rokoblak.chatbackup.ui.theme.ChatBackupTheme
 
 @Composable
@@ -26,7 +27,7 @@ fun ButtonWithIcon(
 ) {
     Button(
         enabled = enabled, modifier = modifier,
-        onClick = onClick
+        onClick = onClick,
     ) {
         Row(
             modifier = Modifier.widthIn(80.dp, 320.dp),
@@ -41,6 +42,7 @@ fun ButtonWithIcon(
     }
 }
 
+@AppThemePreviews
 @Preview
 @Composable
 fun IconButtonPreviewShort() {
@@ -49,6 +51,7 @@ fun IconButtonPreviewShort() {
     }
 }
 
+@AppThemePreviews
 @Preview
 @Composable
 fun IconButtonPreviewLong() {