From a49327f9f1435b9a79421f9bc61a699e07f4dd76 Mon Sep 17 00:00:00 2001 From: Zac Sweers Date: Mon, 3 Jun 2024 00:44:36 -0400 Subject: [PATCH] Try ListDetailPaneScaffold But it's broken in beta02 --- app-scaffold/build.gradle.kts | 3 ++ .../kotlin/catchup/app/home/HomeScreen.kt | 45 ++++++++++--------- gradle/libs.versions.toml | 4 ++ 3 files changed, 30 insertions(+), 22 deletions(-) diff --git a/app-scaffold/build.gradle.kts b/app-scaffold/build.gradle.kts index 0e4ac96fa..deb6d609b 100755 --- a/app-scaffold/build.gradle.kts +++ b/app-scaffold/build.gradle.kts @@ -187,6 +187,9 @@ dependencies { implementation(libs.coil.compose.base) implementation(libs.coil.default) implementation(libs.coil.gif) + implementation(libs.compose.material3.adaptive) + implementation(libs.compose.material3.adaptive.layout) + implementation(libs.compose.material3.adaptive.navigation) implementation(libs.collapsingToolbar) implementation(libs.errorProneAnnotations) implementation(libs.fileSize) diff --git a/app-scaffold/src/main/kotlin/catchup/app/home/HomeScreen.kt b/app-scaffold/src/main/kotlin/catchup/app/home/HomeScreen.kt index c8f753c29..d1467792c 100644 --- a/app-scaffold/src/main/kotlin/catchup/app/home/HomeScreen.kt +++ b/app-scaffold/src/main/kotlin/catchup/app/home/HomeScreen.kt @@ -1,5 +1,7 @@ package catchup.app.home +import android.os.Parcelable +import androidx.activity.compose.BackHandler import androidx.activity.compose.ReportDrawnWhen import androidx.annotation.ColorRes import androidx.compose.animation.Animatable @@ -30,6 +32,10 @@ import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults.topAppBarColors import androidx.compose.material3.VerticalDivider +import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi +import androidx.compose.material3.adaptive.layout.AnimatedPane +import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold +import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.LaunchedEffect @@ -81,8 +87,6 @@ import catchup.deeplink.DeepLinkable import catchup.di.AppScope import catchup.service.api.ServiceMeta import catchup.util.toDayContext -import com.google.accompanist.adaptive.HorizontalTwoPaneStrategy -import com.google.accompanist.adaptive.TwoPane import com.slack.circuit.backstack.rememberSaveableBackStack import com.slack.circuit.codegen.annotations.CircuitInject import com.slack.circuit.foundation.CircuitContent @@ -230,7 +234,9 @@ constructor( } } -@OptIn(ExperimentalMaterial3Api::class) +@Parcelize class HomeItem(val id: String) : Parcelable + +@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3AdaptiveApi::class) @Composable @CircuitInject(HomeScreen::class, AppScope::class) fun Home(state: State, modifier: Modifier = Modifier) { @@ -244,16 +250,22 @@ fun Home(state: State, modifier: Modifier = Modifier) { if (foldingFeature != null) { // TODO // try a PaneledCircuitContent where it's just a row of the backstack? - - TwoPane( - first = { - Box { - HomeList(state) - VerticalDivider(Modifier.align(Alignment.CenterEnd), thickness = Dp.Hairline) + val navigator = rememberListDetailPaneScaffoldNavigator() + + BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } + + ListDetailPaneScaffold( + directive = navigator.scaffoldDirective, + value = navigator.scaffoldValue, + listPane = { + AnimatedPane { + Box { + HomeList(state) + VerticalDivider(Modifier.align(Alignment.CenterEnd), thickness = Dp.Hairline) + } } }, - // TODO animate content changes, ideally same as nav decoration - second = { + detailPane = { // TODO // should probably just synthesize putting the settings in the list // crossfade? @@ -304,17 +316,6 @@ fun Home(state: State, modifier: Modifier = Modifier) { } } }, - strategy = { density, layoutDirection, layoutCoordinates -> - // Split vertically if the height is larger than the width - if (layoutCoordinates.size.height >= layoutCoordinates.size.width) { - HorizontalTwoPaneStrategy(splitFraction = 0.4f) - } else { - HorizontalTwoPaneStrategy(splitFraction = 0.5f) - } - .calculateSplitResult(density, layoutDirection, layoutCoordinates) - }, - displayFeatures = displayFeatures, - modifier = modifier, ) } else { HomePager(state, modifier) diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 1b6572fef..897e38744 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -31,6 +31,7 @@ leakcanary = "3.0-alpha-7" lifecycle = "2.8.1" # TODO don't depend on newer until https://github.com/mikepenz/multiplatform-markdown-renderer/issues/154 markdown = "0.16.0" +material3-adaptive = "1.0.0-beta02" moshi = "1.15.1" moshix = "0.27.1" okhttp = "5.0.0-alpha.14" @@ -146,6 +147,9 @@ compose-uiUtil = { module = "org.jetbrains.compose.ui:ui-util", version.ref = "c compose-foundation = { module = "org.jetbrains.compose.foundation:foundation", version.ref = "compose-jb" } compose-material-material = { module = "org.jetbrains.compose.material:material", version.ref = "compose-jb" } compose-material-material3 = { module = "org.jetbrains.compose.material3:material3", version.ref = "compose-jb" } +compose-material3-adaptive = { module = "androidx.compose.material3.adaptive:adaptive", version.ref = "material3-adaptive" } +compose-material3-adaptive-layout = { module = "androidx.compose.material3.adaptive:adaptive-layout", version.ref = "material3-adaptive" } +compose-material3-adaptive-navigation = { module = "androidx.compose.material3.adaptive:adaptive-navigation", version.ref = "material3-adaptive" } firebase-core = "com.google.firebase:firebase-core:21.1.1" firebase-database = "com.google.firebase:firebase-database:21.0.0"