feat: adds haze effect to app list and grid

This commit introduces a haze effect to the app list and grid items, enhancing the visual appeal of the launcher .
Tgo1014 · Sep 9, 2024 · 48804a6 · 48804a6
1 parent 7fd1cb4
commit 48804a6
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 20 deletions.
diff --git a/app/src/main/java/tgo1014/gridlauncher/domain/usecases/wallpaper/Constants.kt b/app/src/main/java/tgo1014/gridlauncher/domain/usecases/wallpaper/Constants.kt
@@ -1,10 +1,24 @@
 package tgo1014.gridlauncher.domain.usecases.wallpaper
 
 import android.content.Context
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
+import dev.chrisbanes.haze.HazeStyle
+import dev.chrisbanes.haze.HazeTint
 import java.io.File
 
 val Context.wallpaperFile: File
     get() = File(cacheDir, "wallpaper.png")
 
 val Context.wallpaperDarkFile: File
-    get() = File(cacheDir, "wallpaperDark.png")
+    get() = File(cacheDir, "wallpaperDark.png")
+
+
+val AppHazeStyle: HazeStyle
+    @Composable get() = HazeStyle(
+        backgroundColor = MaterialTheme.colorScheme.primary,
+        tint = HazeTint.Color(MaterialTheme.colorScheme.primaryContainer.copy(0.3f)),
+        blurRadius = 10.dp,
+        noiseFactor = 0.02f
+    )
diff --git a/app/src/main/java/tgo1014/gridlauncher/ui/composables/TileLayout.kt b/app/src/main/java/tgo1014/gridlauncher/ui/composables/TileLayout.kt
@@ -13,7 +13,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -31,8 +30,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.fastMaxOfOrNull
 import dev.chrisbanes.haze.HazeState
-import dev.chrisbanes.haze.HazeStyle
-import dev.chrisbanes.haze.HazeTint
 import dev.chrisbanes.haze.hazeChild
 import dev.chrisbanes.haze.materials.ExperimentalHazeMaterialsApi
 import eu.wewox.lazytable.LazyTable
@@ -42,6 +39,7 @@ import eu.wewox.lazytable.lazyTableDimensions
 import tgo1014.gridlauncher.app.Constants.gridColumns
 import tgo1014.gridlauncher.domain.models.App
 import tgo1014.gridlauncher.domain.models.TileSettings
+import tgo1014.gridlauncher.domain.usecases.wallpaper.AppHazeStyle
 import tgo1014.gridlauncher.ui.models.GridItem
 import tgo1014.gridlauncher.ui.theme.modifyIf
 import tgo1014.gridlauncher.ui.theme.plus
@@ -82,12 +80,7 @@ fun TileLayout(
         .clip(RoundedCornerShape(tileSettings.cornerRadius))
         .hazeChild(
             state = hazeState,
-            style = HazeStyle(
-                backgroundColor = MaterialTheme.colorScheme.primary,
-                tint = HazeTint.Color(MaterialTheme.colorScheme.primaryContainer.copy(0.3f)),
-                blurRadius = 10.dp,
-                noiseFactor = 0.02f
-            ),
+            style = AppHazeStyle,
         )
     LazyTable(
         scrollDirection = LazyTableScrollDirection.VERTICAL,

diff --git a/app/src/main/java/tgo1014/gridlauncher/ui/home/AppListScreen.kt b/app/src/main/java/tgo1014/gridlauncher/ui/home/AppListScreen.kt
@@ -4,6 +4,7 @@ import androidx.activity.compose.BackHandler
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.combinedClickable
@@ -28,11 +29,10 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ElevatedCard
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
@@ -56,13 +56,16 @@ import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Popup
+import dev.chrisbanes.haze.HazeState
+import dev.chrisbanes.haze.hazeChild
 import kotlinx.coroutines.DelicateCoroutinesApi
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.GlobalScope
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import tgo1014.gridlauncher.R
 import tgo1014.gridlauncher.domain.models.App
+import tgo1014.gridlauncher.domain.usecases.wallpaper.AppHazeStyle
 import tgo1014.gridlauncher.ui.composables.LaunchedIfTrueEffect
 import tgo1014.gridlauncher.ui.composables.SearchFab
 import tgo1014.gridlauncher.ui.composables.SearchFabState
@@ -79,6 +82,7 @@ import tgo1014.gridlauncher.ui.theme.plus
 @Composable
 fun AppListScreen(
     state: HomeState,
+    hazeState: HazeState = remember { HazeState() },
     onAppClicked: (App) -> Unit = {},
     onAddToGrid: (App) -> Unit = {},
     onOpenNotificationShade: () -> Unit = {},
@@ -129,21 +133,37 @@ fun AppListScreen(
         val shape = RoundedCornerShape(state.tileSettings.cornerRadius)
         listByLetter.forEach { group ->
             item(key = group.key) {
-                Card(
-                    shape = shape,
-                    colors = CardDefaults.cardColors(containerColor = mainColor),
+                val primaryContainer = MaterialTheme.colorScheme.primaryContainer
+                Box(
                     modifier = Modifier
                         .graphicsLayer { rotationX = angle }
                         .size(50.dp)
                         .animateItem()
+                        .clip(shape)
+                        .modifyIf(!state.tileSettings.isTransparencyEnabled) {
+                            background(primaryContainer)
+                        }
+                        .hazeChild(
+                            state = hazeState,
+                            style = AppHazeStyle,
+                        )
                 ) {
                     Box(
                         modifier = Modifier
                             .fillMaxSize()
                             .padding(6.dp)
                     ) {
+                        val onContainer = MaterialTheme.colorScheme.onPrimaryContainer
+                        val contentColor = contentColorFor(MaterialTheme.colorScheme.primaryContainer)
+                        val textColor = remember {
+                            when {
+                                state.tileSettings.isTransparencyEnabled -> contentColor
+                                else -> onContainer
+                            }
+                        }
                         Text(
                             text = group.key.uppercase(),
+                            color = textColor,
                             fontSize = 30.sp,
                             modifier = Modifier.align(Alignment.BottomStart)
                         )

diff --git a/app/src/main/java/tgo1014/gridlauncher/ui/home/GridScreen.kt b/app/src/main/java/tgo1014/gridlauncher/ui/home/GridScreen.kt
@@ -15,7 +15,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
 import androidx.compose.material.icons.filled.Settings
-import androidx.compose.material3.Button
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -159,10 +158,11 @@ private fun SettingsIcon(
                 )
             }
         } else {
-            Button(
-                shape = RoundedCornerShape(tileSettings.cornerRadius),
-                onClick = { onClicked() },
-                contentPadding = PaddingValues(0.dp),
+            Box(
+                modifier = modifier
+                    .background(MaterialTheme.colorScheme.primaryContainer)
+                    .clickable { onClicked() }
+                    .padding(8.dp)
             ) {
                 Icon(
                     imageVector = Icons.Filled.Settings,

diff --git a/app/src/main/java/tgo1014/gridlauncher/ui/home/HomeScreen.kt b/app/src/main/java/tgo1014/gridlauncher/ui/home/HomeScreen.kt
@@ -137,6 +137,7 @@ private fun HomeScreen(
 
             1 -> AppListScreen(
                 state = state,
+                hazeState = hazeState,
                 onAppClicked = onAppClicked,
                 onOpenNotificationShade = onOpenNotificationShade,
                 onAddToGrid = onAddToGrid,