fully edge to edge

DatL4g · Mar 15, 2024 · e125acb · e125acb
1 parent 8765532
commit e125acb
Show file tree

Hide file tree

Showing 13 changed files with 177 additions and 172 deletions.
diff --git a/app/android/src/androidMain/res/values-night/themes.xml b/app/android/src/androidMain/res/values-night/themes.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:tools="http://schemas.android.com/tools">
-    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <item name="isLightTheme">false</item>
         <item name="android:isLightTheme" tools:targetApi="q">false</item>
     </style>

diff --git a/app/android/src/androidMain/res/values/themes.xml b/app/android/src/androidMain/res/values/themes.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:tools="http://schemas.android.com/tools">
-    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <item name="isLightTheme">true</item>
         <item name="android:isLightTheme" tools:targetApi="q">true</item>
     </style>

diff --git a/app/shared/build.gradle.kts b/app/shared/build.gradle.kts
@@ -36,7 +36,6 @@ kotlin {
             dependencies {
                 api(compose.runtime)
                 api(compose.foundation)
-                api(compose.material)
                 api(compose.material3)
                 api(compose.materialIconsExtended)
                 api(compose.ui)
@@ -59,7 +58,9 @@ kotlin {
                 api(libs.kolor)
 
                 api(libs.windowsize.multiplatform)
-                api(libs.insetsx)
+
+                implementation(libs.haze)
+                implementation(libs.haze.materials)
 
                 api(libs.ktor)
                 api(libs.ktor.content.negotiation)

diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/App.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/App.kt
@@ -1,36 +1,29 @@
 package dev.datlag.burningseries.shared
 
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.Modifier
-import com.moriatsushi.insetsx.rememberWindowInsetsController
+import dev.chrisbanes.haze.HazeState
 import dev.datlag.burningseries.shared.ui.theme.*
 import org.kodein.di.DI
 
 val LocalDarkMode = compositionLocalOf<Boolean> { error("No dark mode state provided") }
 val LocalDI = compositionLocalOf<DI> { error("No dependency injection provided") }
+val LocalHaze = compositionLocalOf<HazeState> { error("No Haze state provided") }
+val LocalPaddingValues = compositionLocalOf<PaddingValues?> { null }
 
 @Composable
 fun App(
     di: DI,
     systemDarkTheme: Boolean = isSystemInDarkTheme(),
     content: @Composable () -> Unit
 ) {
-    val windowInsetsController = rememberWindowInsetsController()
-
-    LaunchedEffect(systemDarkTheme) {
-        windowInsetsController?.apply {
-            setStatusBarContentColor(dark = !systemDarkTheme)
-            setNavigationBarsContentColor(dark = !systemDarkTheme)
-        }
-    }
-
     CompositionLocalProvider(
         LocalDarkMode provides systemDarkTheme,
         LocalDI provides di
@@ -39,20 +32,14 @@ fun App(
             colorScheme = if (systemDarkTheme) Colors.getDarkScheme() else Colors.getLightScheme(),
             typography = ManropeTypography()
         ) {
-            androidx.compose.material.MaterialTheme(
-                colors = MaterialTheme.colorScheme.toLegacyColors(systemDarkTheme),
-                shapes = MaterialTheme.shapes.toLegacyShapes(),
-                typography = ManropeTypographyLegacy()
-            ) {
-                SystemProvider {
-                    CommonSchemeTheme {
-                        Surface(
-                            modifier = Modifier.fillMaxSize(),
-                            color = MaterialTheme.colorScheme.background,
-                            contentColor = MaterialTheme.colorScheme.onBackground
-                        ) {
-                            content()
-                        }
+            SystemProvider {
+                CommonSchemeTheme {
+                    Surface(
+                        modifier = Modifier.fillMaxSize(),
+                        color = MaterialTheme.colorScheme.background,
+                        contentColor = MaterialTheme.colorScheme.onBackground
+                    ) {
+                        content()
                     }
                 }
             }

diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/common/ExtendCompose.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/common/ExtendCompose.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.hoverable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsFocusedAsState
 import androidx.compose.foundation.interaction.collectIsHoveredAsState
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyGridItemScope
@@ -20,8 +21,13 @@ import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.vector.PathBuilder
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
 import dev.datlag.burningseries.model.common.collectSafe
+import dev.datlag.burningseries.shared.LocalPaddingValues
 import dev.datlag.burningseries.shared.ui.theme.shape.DiagonalShape
 import kotlin.math.max
 
@@ -201,4 +207,41 @@ fun PathBuilder.drawPathFromSvgData(data: String) {
             "Z", "z" -> close()
         }
     }
-}
+}
+
+@Composable
+operator fun PaddingValues.plus(other: PaddingValues): PaddingValues {
+    val direction = LocalLayoutDirection.current
+
+    return PaddingValues(
+        start = this.calculateStartPadding(direction) + other.calculateStartPadding(direction),
+        top = this.calculateTopPadding() + other.calculateTopPadding(),
+        end = this.calculateEndPadding(direction) + other.calculateEndPadding(direction),
+        bottom = this.calculateBottomPadding() + other.calculateBottomPadding()
+    )
+}
+
+fun Modifier.localPadding(additional: PaddingValues = PaddingValues(0.dp)) = composed {
+    this.padding(LocalPaddingValues.current?.plus(additional) ?: additional)
+}
+
+fun Modifier.localPadding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp) = composed {
+    this.localPadding(PaddingValues(horizontal = horizontal, vertical = vertical))
+}
+
+@Composable
+fun LocalPadding(additional: PaddingValues = PaddingValues(0.dp)): PaddingValues {
+    return LocalPaddingValues.current?.plus(additional) ?: additional
+}
+
+@Composable
+fun LocalPadding(additional: Dp): PaddingValues {
+    return LocalPaddingValues.current?.plus(PaddingValues(additional)) ?: PaddingValues(additional)
+}
+
+@Composable
+fun LocalPadding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): PaddingValues {
+    return LocalPaddingValues.current?.plus(
+        PaddingValues(horizontal = horizontal, vertical = vertical)
+    ) ?: PaddingValues(horizontal = horizontal, vertical = vertical)
+}
diff --git a/...c/commonMain/kotlin/dev/datlag/burningseries/shared/ui/custom/DefaultCollapsingToolbar.kt b/...c/commonMain/kotlin/dev/datlag/burningseries/shared/ui/custom/DefaultCollapsingToolbar.kt
@@ -1,20 +1,21 @@
 package dev.datlag.burningseries.shared.ui.custom
 
-import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.defaultMinSize
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.TopAppBar
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.*
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import dev.datlag.burningseries.shared.common.LocalPadding
 import dev.datlag.burningseries.shared.common.launchMain
+import dev.datlag.burningseries.shared.common.toWindowInsets
 import dev.datlag.burningseries.shared.common.withIOContext
 import dev.datlag.burningseries.shared.ui.custom.toolbar.*
+import io.github.aakira.napier.Napier
 import kotlinx.coroutines.delay
 import kotlin.math.abs
 
@@ -37,24 +38,45 @@ fun DefaultCollapsingToolbar(
         modifier = Modifier.fillMaxSize(),
         state = state,
         scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
-        toolbarModifier = Modifier.fillMaxWidth().defaultMinSize(minHeight = 56.dp).verticalScroll(rememberScrollState()),
+        toolbarModifier = Modifier.fillMaxWidth(),
         toolbarScrollable = true,
         toolbar = {
             expandedBody(state)
 
-            TopAppBar(
+            Surface(
                 modifier = Modifier.pin(),
-                backgroundColor = MaterialTheme.colorScheme.surface.copy(alpha = reversedProgress),
-                contentColor = MaterialTheme.colorScheme.onSurface,
-                title = {
-                    title(state)
-                },
-                navigationIcon = if (navigationIcon == null) null else { { navigationIcon(state) } },
-                actions = {
-                    actions(state)
-                },
-                elevation = 0.dp
-            )
+                color = MaterialTheme.colorScheme.surface.copy(alpha = reversedProgress),
+                contentColor = MaterialTheme.colorScheme.onSurface
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxSize().windowInsetsPadding(TopAppBarDefaults.windowInsets),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(4.dp)
+                ) {
+                    Box(
+                        modifier = Modifier.padding(start = 4.dp)
+                    ) {
+                        navigationIcon?.invoke(state)
+                    }
+                    Box(
+                        modifier = Modifier.weight(1F),
+                        contentAlignment = Alignment.CenterStart
+                    ) {
+                        CompositionLocalProvider(
+                            LocalTextStyle provides MaterialTheme.typography.titleLarge
+                        ) {
+                            title(state)
+                        }
+                    }
+                    Row(
+                        modifier = Modifier.padding(end = 4.dp),
+                        horizontalArrangement = Arrangement.End,
+                        verticalAlignment = Alignment.CenterVertically,
+                    ) {
+                        actions(state)
+                    }
+                }
+            }
         }
     ) {
         content()

diff --git a/.../src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialScreen.kt b/.../src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialScreen.kt
@@ -9,13 +9,14 @@ import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSiz
 import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.arkivanov.decompose.ExperimentalDecomposeApi
 import com.arkivanov.decompose.extensions.compose.pages.Pages
 import com.arkivanov.decompose.extensions.compose.subscribeAsState
-import com.moriatsushi.insetsx.ExperimentalSoftwareKeyboardApi
+import dev.datlag.burningseries.shared.LocalPaddingValues
 import dev.datlag.burningseries.shared.common.lifecycle.collectAsStateWithLifecycle
 import dev.datlag.burningseries.shared.rememberIsTv
 import dev.datlag.burningseries.shared.ui.custom.ExpandedPages
@@ -41,7 +42,7 @@ fun InitialScreen(component: InitialComponent) {
     }
 }
 
-@OptIn(ExperimentalSoftwareKeyboardApi::class, ExperimentalDecomposeApi::class, ExperimentalFoundationApi::class)
+@OptIn(ExperimentalDecomposeApi::class, ExperimentalFoundationApi::class)
 @Composable
 private fun CompactScreen(
     component: InitialComponent
@@ -72,41 +73,45 @@ private fun CompactScreen(
             }
         }
     ) {
-        Box(modifier = Modifier.padding(it)) {
-            val homeScrollEnabled by component.homeScrollEnabled.collectAsStateWithLifecycle()
-            val favoriteScrollEnabled by component.favoriteScrollEnabled.collectAsStateWithLifecycle()
-            val searchScrollEnabled by component.searchScrollEnabled.collectAsStateWithLifecycle()
+        CompositionLocalProvider(
+            LocalPaddingValues provides it
+        ) {
+            Box(modifier = Modifier.fillMaxSize()) {
+                val homeScrollEnabled by component.homeScrollEnabled.collectAsStateWithLifecycle()
+                val favoriteScrollEnabled by component.favoriteScrollEnabled.collectAsStateWithLifecycle()
+                val searchScrollEnabled by component.searchScrollEnabled.collectAsStateWithLifecycle()
 
-            Pages(
-                pages = component.pages,
-                onPageSelected = { index ->
-                    if (selectedPage != index) {
-                        component.selectPage(index)
-                    }
-                },
-                pager = { modifier, state, key, pageContent ->
-                    val scrollEnabled = when (state.currentPage) {
-                        0 -> homeScrollEnabled
-                        1 -> favoriteScrollEnabled
-                        2 -> searchScrollEnabled
-                        else -> homeScrollEnabled && favoriteScrollEnabled && searchScrollEnabled
+                Pages(
+                    pages = component.pages,
+                    onPageSelected = { index ->
+                        if (selectedPage != index) {
+                            component.selectPage(index)
+                        }
+                    },
+                    pager = { modifier, state, key, pageContent ->
+                        val scrollEnabled = when (state.currentPage) {
+                            0 -> homeScrollEnabled
+                            1 -> favoriteScrollEnabled
+                            2 -> searchScrollEnabled
+                            else -> homeScrollEnabled && favoriteScrollEnabled && searchScrollEnabled
+                        }
+                        HorizontalPager(
+                            modifier = modifier,
+                            state = state,
+                            key = key,
+                            pageContent = pageContent,
+                            userScrollEnabled = scrollEnabled
+                        )
                     }
-                    HorizontalPager(
-                        modifier = modifier,
-                        state = state,
-                        key = key,
-                        pageContent = pageContent,
-                        userScrollEnabled = scrollEnabled
-                    )
+                ) { _, page ->
+                    page.render()
                 }
-            ) { _, page ->
-                page.render()
             }
         }
     }
 }
 
-@OptIn(ExperimentalSoftwareKeyboardApi::class, ExperimentalDecomposeApi::class)
+@OptIn(ExperimentalDecomposeApi::class)
 @Composable
 private fun MediumScreen(
     component: InitialComponent
@@ -147,7 +152,7 @@ private fun MediumScreen(
     }
 }
 
-@OptIn(ExperimentalSoftwareKeyboardApi::class, ExperimentalDecomposeApi::class)
+@OptIn(ExperimentalDecomposeApi::class)
 @Composable
 private fun ExpandedScreen(
     component: InitialComponent

diff --git a/...nMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/favorite/FavoriteScreen.kt b/...nMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/favorite/FavoriteScreen.kt
@@ -25,6 +25,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.min
 import com.arkivanov.decompose.extensions.compose.subscribeAsState
 import dev.datlag.burningseries.shared.SharedRes
+import dev.datlag.burningseries.shared.common.LocalPadding
 import dev.datlag.burningseries.shared.common.header
 import dev.datlag.burningseries.shared.common.lifecycle.collectAsStateWithLifecycle
 import dev.datlag.burningseries.shared.common.onClick
@@ -94,7 +95,7 @@ private fun ExpandedView(component: FavoriteComponent) {
 @Composable
 private fun MainView(component: FavoriteComponent, modifier: Modifier = Modifier) {
     Row(
-        modifier = modifier.fillMaxWidth(),
+        modifier = modifier.fillMaxWidth().padding(horizontal = 16.dp),
         horizontalArrangement = Arrangement.spacedBy(2.dp)
     ) {
         val favorites by component.favorites.collectAsStateWithLifecycle()
@@ -106,7 +107,7 @@ private fun MainView(component: FavoriteComponent, modifier: Modifier = Modifier
             state = listState,
             verticalArrangement = Arrangement.spacedBy(8.dp),
             horizontalArrangement = Arrangement.spacedBy(8.dp),
-            contentPadding = PaddingValues(8.dp)
+            contentPadding = LocalPadding()
         ) {
             header {
                 SearchBar(component)