added haze

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

Hide file tree

Showing 6 changed files with 70 additions and 54 deletions.
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
@@ -21,6 +21,7 @@ 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.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
@@ -225,7 +226,11 @@ fun Modifier.localPadding(additional: PaddingValues = PaddingValues(0.dp)) = com
     this.padding(LocalPaddingValues.current?.plus(additional) ?: additional)
 }
 
-fun Modifier.localPadding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp) = composed {
+fun Modifier.localPadding(all: Dp) = composed {
+    this.localPadding(PaddingValues(all))
+}
+
+fun Modifier.localPadding(horizontal: Dp, vertical: Dp = 0.dp) = composed {
     this.localPadding(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
@@ -12,7 +12,6 @@ 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
@@ -43,40 +42,24 @@ fun DefaultCollapsingToolbar(
         toolbar = {
             expandedBody(state)
 
-            Surface(
-                modifier = Modifier.pin(),
-                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)
-                    }
+            TopAppBar(
+                modifier = Modifier.fillMaxSize(),
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.surface.copy(alpha = reversedProgress),
+                    navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
+                    titleContentColor = MaterialTheme.colorScheme.onSurface,
+                    actionIconContentColor = MaterialTheme.colorScheme.onSurface
+                ),
+                navigationIcon = {
+                    navigationIcon?.invoke(state)
+                },
+                title = {
+                    title(state)
+                },
+                actions = {
+                    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
@@ -11,11 +11,18 @@ import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 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 dev.chrisbanes.haze.HazeState
+import dev.chrisbanes.haze.hazeChild
+import dev.chrisbanes.haze.materials.ExperimentalHazeMaterialsApi
+import dev.chrisbanes.haze.materials.HazeMaterials
+import dev.datlag.burningseries.shared.LocalHaze
 import dev.datlag.burningseries.shared.LocalPaddingValues
 import dev.datlag.burningseries.shared.common.lifecycle.collectAsStateWithLifecycle
 import dev.datlag.burningseries.shared.rememberIsTv
@@ -25,24 +32,30 @@ import dev.icerock.moko.resources.compose.stringResource
 @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
 @Composable
 fun InitialScreen(component: InitialComponent) {
-    Box(
-        modifier = Modifier.fillMaxSize()
+    val haze = remember { HazeState() }
+
+    CompositionLocalProvider(
+        LocalHaze provides haze
     ) {
-        when (calculateWindowSizeClass().widthSizeClass) {
-            WindowWidthSizeClass.Compact -> CompactScreen(component)
-            WindowWidthSizeClass.Medium -> MediumScreen(component)
-            WindowWidthSizeClass.Expanded -> {
-                if (rememberIsTv()) {
-                    MediumScreen(component)
-                } else {
-                    ExpandedScreen(component)
+        Box(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            when (calculateWindowSizeClass().widthSizeClass) {
+                WindowWidthSizeClass.Compact -> CompactScreen(component)
+                WindowWidthSizeClass.Medium -> MediumScreen(component)
+                WindowWidthSizeClass.Expanded -> {
+                    if (rememberIsTv()) {
+                        MediumScreen(component)
+                    } else {
+                        ExpandedScreen(component)
+                    }
                 }
             }
         }
     }
 }
 
-@OptIn(ExperimentalDecomposeApi::class, ExperimentalFoundationApi::class)
+@OptIn(ExperimentalDecomposeApi::class, ExperimentalFoundationApi::class, ExperimentalHazeMaterialsApi::class)
 @Composable
 private fun CompactScreen(
     component: InitialComponent
@@ -51,7 +64,14 @@ private fun CompactScreen(
 
     Scaffold(
         bottomBar = {
-            NavigationBar {
+            NavigationBar(
+                modifier = Modifier.hazeChild(
+                    state = LocalHaze.current,
+                    style = HazeMaterials.thin(NavigationBarDefaults.containerColor)
+                ).fillMaxWidth(),
+                containerColor = Color.Transparent,
+                contentColor = MaterialTheme.colorScheme.contentColorFor(NavigationBarDefaults.containerColor)
+            ) {
                 component.pagerItems.forEachIndexed { index, item ->
                     NavigationBarItem(
                         selected = selectedPage == index,

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
@@ -24,6 +24,8 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.min
 import com.arkivanov.decompose.extensions.compose.subscribeAsState
+import dev.chrisbanes.haze.haze
+import dev.datlag.burningseries.shared.LocalHaze
 import dev.datlag.burningseries.shared.SharedRes
 import dev.datlag.burningseries.shared.common.LocalPadding
 import dev.datlag.burningseries.shared.common.header
@@ -103,7 +105,7 @@ private fun MainView(component: FavoriteComponent, modifier: Modifier = Modifier
 
         LazyVerticalGrid(
             columns = GridCells.Adaptive(400.dp),
-            modifier = Modifier.weight(1F),
+            modifier = Modifier.weight(1F).haze(state = LocalHaze.current),
             state = listState,
             verticalArrangement = Arrangement.spacedBy(8.dp),
             horizontalArrangement = Arrangement.spacedBy(8.dp),

diff --git a/...rc/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/home/HomeScreen.kt b/...rc/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/home/HomeScreen.kt
@@ -17,8 +17,10 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.arkivanov.decompose.extensions.compose.subscribeAsState
+import dev.chrisbanes.haze.haze
 import dev.datlag.burningseries.model.Home
 import dev.datlag.burningseries.model.state.HomeState
+import dev.datlag.burningseries.shared.LocalHaze
 import dev.datlag.burningseries.shared.SharedRes
 import dev.datlag.burningseries.shared.common.LocalPadding
 import dev.datlag.burningseries.shared.common.header
@@ -135,7 +137,7 @@ private fun MainView(home: Home, component: HomeComponent, modifier: Modifier =
 
         LazyVerticalGrid(
             columns = GridCells.Adaptive(400.dp),
-            modifier = Modifier.weight(1F),
+            modifier = Modifier.weight(1F).haze(state = LocalHaze.current),
             verticalArrangement = Arrangement.spacedBy(8.dp),
             horizontalArrangement = Arrangement.spacedBy(8.dp),
             contentPadding = LocalPadding(),

diff --git a/...ommonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/series/SeriesScreen.kt b/...ommonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/series/SeriesScreen.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Redo
 import androidx.compose.material.icons.filled.*
 import androidx.compose.material3.*
 import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
@@ -21,14 +22,17 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.arkivanov.decompose.extensions.compose.subscribeAsState
+import dev.chrisbanes.haze.haze
 import dev.datlag.burningseries.database.Episode
 import dev.datlag.burningseries.model.BSUtil
 import dev.datlag.burningseries.model.Series
 import dev.datlag.burningseries.model.state.SeriesState
+import dev.datlag.burningseries.shared.LocalHaze
 import dev.datlag.burningseries.shared.SharedRes
 import dev.datlag.burningseries.shared.common.LocalPadding
 import dev.datlag.burningseries.shared.common.diagonalShape
 import dev.datlag.burningseries.shared.common.lifecycle.collectAsStateWithLifecycle
+import dev.datlag.burningseries.shared.common.localPadding
 import dev.datlag.burningseries.shared.other.StateSaver
 import dev.datlag.burningseries.shared.ui.custom.Cover
 import dev.datlag.burningseries.shared.ui.custom.DefaultCollapsingToolbar
@@ -78,7 +82,7 @@ fun SeriesScreen(component: SeriesComponent) {
                     onClick = {
                         component.itemClicked(next)
                     },
-                    modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp)
+                    modifier = Modifier.align(Alignment.BottomEnd).localPadding(16.dp)
                 ) {
                     Icon(
                         imageVector = Icons.Default.PlayArrow,
@@ -94,7 +98,7 @@ fun SeriesScreen(component: SeriesComponent) {
                     onClick = {
                         component.switchToSeason(next)
                     },
-                    modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp)
+                    modifier = Modifier.align(Alignment.BottomEnd).localPadding(16.dp)
                 ) {
                     val seasonText = if (next.title.toIntOrNull() != null) {
                         stringResource(SharedRes.strings.season_placeholder, next.title)
@@ -103,7 +107,7 @@ fun SeriesScreen(component: SeriesComponent) {
                     }
 
                     Icon(
-                        imageVector = Icons.Default.Redo,
+                        imageVector = Icons.AutoMirrored.Default.Redo,
                         contentDescription = next.title,
                         modifier = Modifier.size(ButtonDefaults.IconSize)
                     )
@@ -270,7 +274,7 @@ private fun CompactScreen(component: SeriesComponent) {
                 val dbEpisodes by component.dbEpisodes.collectAsStateWithLifecycle()
 
                 LazyColumn(
-                    modifier = Modifier.fillMaxSize(),
+                    modifier = Modifier.fillMaxSize().haze(state = LocalHaze.current),
                     contentPadding = LocalPadding(horizontal = 16.dp)
                 ) {
                     item(key = current.series.description) {
@@ -353,7 +357,7 @@ private fun DefaultScreen(component: SeriesComponent) {
 
                 LazyColumn(
                     state = state,
-                    modifier = Modifier.weight(1F),
+                    modifier = Modifier.weight(1F).haze(state = LocalHaze.current),
                     contentPadding = PaddingValues(16.dp)
                 ) {
                     item {