Modify main search bar

2024-02-09 21:14:38 +03:00
parent 9436b36697
commit e2b860c4da
4 changed files with 51 additions and 30 deletions
--- a/app/src/main/java/org/xtimms/tokusho/MainActivity.kt
+++ b/app/src/main/java/org/xtimms/tokusho/MainActivity.kt
@@ -4,11 +4,11 @@ import android.content.Intent
 import android.os.Bundle
 import android.util.Log
 import androidx.activity.ComponentActivity
-import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
@@ -18,21 +18,23 @@ import androidx.compose.foundation.layout.calculateEndPadding
 import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.lazy.grid.LazyGridState
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
 import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.dp
@@ -46,7 +48,6 @@ import kotlinx.coroutines.launch
 import org.xtimms.tokusho.core.Navigation
 import org.xtimms.tokusho.core.components.BottomNavBar
 import org.xtimms.tokusho.core.components.TopAppBar
-import org.xtimms.tokusho.sections.list.LIST_DESTINATION
 import org.xtimms.tokusho.ui.theme.TokushoTheme
 import org.xtimms.tokusho.utils.lang.processLifecycleScope
 import javax.inject.Inject
@@ -119,16 +120,24 @@ fun MainView(
    var topBarHeightPx by remember { mutableFloatStateOf(0f) }
    val topBarOffsetY = remember { Animatable(0f) }

+    val scroll: LazyGridState = rememberLazyGridState()
+
    Scaffold(
        topBar = {
            if (isCompactScreen) {
+                val isScrolled by remember {
+                    derivedStateOf { scroll.firstVisibleItemScrollOffset > 0 }
+                }
+                val animatedBgAlpha by animateFloatAsState(
+                    if (isScrolled) 1f else 0f,
+                    label = "Top Bar Background",
+                )
                TopAppBar(
                    navController = navController,
                    modifier = Modifier
-                        .padding(0.dp, 8.dp)
-                        .graphicsLayer {
-                            translationY = topBarOffsetY.value
-                        }
+                        .statusBarsPadding()
+                        .padding(0.dp, 16.dp),
+                    backgroundAlphaProvider = { animatedBgAlpha },
                )
            }
        },
@@ -161,7 +170,8 @@ fun MainView(
                        bottom = systemBarsPadding.calculateBottomPadding()
                    ),
                    topBarHeightPx = topBarHeightPx,
-                    topBarOffsetY = topBarOffsetY
+                    topBarOffsetY = topBarOffsetY,
+                    listState = scroll
                )
            }
        } else {
@@ -178,7 +188,8 @@ fun MainView(
                ),
                padding = padding,
                topBarHeightPx = topBarHeightPx,
-                topBarOffsetY = topBarOffsetY
+                topBarOffsetY = topBarOffsetY,
+                listState = scroll
            )
        }
    }
--- a/app/src/main/java/org/xtimms/tokusho/core/Navigation.kt
+++ b/app/src/main/java/org/xtimms/tokusho/core/Navigation.kt
@@ -7,6 +7,7 @@ import androidx.compose.animation.core.AnimationVector1D
 import androidx.compose.animation.core.Easing
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.IntOffset
@@ -36,6 +37,8 @@ import org.xtimms.tokusho.sections.settings.about.ABOUT_DESTINATION
 import org.xtimms.tokusho.sections.settings.about.AboutView
 import org.xtimms.tokusho.sections.settings.about.UPDATES_DESTINATION
 import org.xtimms.tokusho.sections.settings.about.UpdateView
+import org.xtimms.tokusho.sections.settings.advanced.ADVANCED_DESTINATION
+import org.xtimms.tokusho.sections.settings.advanced.AdvancedView
 import org.xtimms.tokusho.sections.settings.appearance.APPEARANCE_DESTINATION
 import org.xtimms.tokusho.sections.settings.appearance.AppearanceView
 import org.xtimms.tokusho.sections.settings.appearance.DARK_THEME_DESTINATION
@@ -63,6 +66,7 @@ fun Navigation(
    padding: PaddingValues,
    topBarHeightPx: Float,
    topBarOffsetY: Animatable<Float, AnimationVector1D>,
+    listState: LazyGridState,
 ) {

    val navigateBack: () -> Unit = { navController.popBackStack() }
@@ -124,7 +128,8 @@ fun Navigation(
                },
                padding = padding,
                topBarHeightPx = topBarHeightPx,
-                topBarOffsetY = topBarOffsetY
+                topBarOffsetY = topBarOffsetY,
+                listState = listState
            )
        }

--- a/app/src/main/java/org/xtimms/tokusho/core/components/TopAppBar.kt
+++ b/app/src/main/java/org/xtimms/tokusho/core/components/TopAppBar.kt
@@ -1,13 +1,13 @@
 package org.xtimms.tokusho.core.components

 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.RssFeed
@@ -50,8 +50,10 @@ import org.xtimms.tokusho.ui.theme.TokushoTheme
 fun TopAppBar(
    navController: NavController,
    modifier: Modifier = Modifier,
+    backgroundAlphaProvider: () -> Float,
 ) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
+
    val isVisible by remember {
        derivedStateOf {
            when (navBackStackEntry?.destination?.route) {
@@ -69,10 +71,15 @@ fun TopAppBar(
        exit = materialSharedAxisXOut(targetOffsetX = { -(it * initialOffset).toInt() })
    ) {
        Row(
-            modifier = modifier
-                .statusBarsPadding()
+            modifier = Modifier
                .fillMaxWidth()
-                .padding(start = 16.dp, end = 16.dp),
+                .background(
+                    MaterialTheme.colorScheme
+                        .surfaceColorAtElevation(3.dp)
+                        .copy(
+                            alpha = backgroundAlphaProvider()
+                        )
+                ),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(8.dp),
        ) {
@@ -80,14 +87,15 @@ fun TopAppBar(
                onClick = { navController.navigate(SEARCH_DESTINATION) },
                modifier = modifier
                    .weight(1f)
-                    .height(56.dp),
+                    .height(56.dp)
+                    .padding(start = 16.dp),
                shape = RoundedCornerShape(50),
                colors = CardDefaults.cardColors(
                    containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(6.dp)
                ),
            ) {
                Row(
-                    modifier = modifier
+                    modifier = Modifier
                        .padding(horizontal = 16.dp)
                        .fillMaxHeight(),
                    horizontalArrangement = Arrangement.spacedBy(16.dp),
@@ -106,11 +114,11 @@ fun TopAppBar(
                }
            }
            Row(
-                modifier = modifier,
+                modifier = modifier.padding(end = 16.dp),
            ) {
                IconButton(
-                    onClick = {  },
-                    modifier = modifier.padding(0.dp),
+                    onClick = { },
+                    modifier = Modifier.padding(0.dp),
                ) {
                    Icon(
                        Icons.Outlined.RssFeed,
@@ -120,7 +128,7 @@ fun TopAppBar(
                }
                IconButton(
                    onClick = { navController.navigate(SETTINGS_DESTINATION) },
-                    modifier = modifier.padding(0.dp),
+                    modifier = Modifier.padding(0.dp),
                ) {
                    Icon(
                        Icons.Outlined.Settings,
--- a/app/src/main/java/org/xtimms/tokusho/sections/explore/ExploreView.kt
+++ b/app/src/main/java/org/xtimms/tokusho/sections/explore/ExploreView.kt
@@ -12,10 +12,9 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
+import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
-import androidx.compose.foundation.lazy.grid.rememberLazyGridState
-import androidx.compose.foundation.rememberScrollState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Bookmarks
 import androidx.compose.material.icons.outlined.Download
@@ -34,7 +33,6 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import androidx.navigation.NavController
 import coil.ImageLoader
 import org.koitharu.kotatsu.parsers.model.MangaSource
 import org.xtimms.tokusho.R
@@ -43,7 +41,6 @@ import org.xtimms.tokusho.core.components.ExploreButton
 import org.xtimms.tokusho.core.components.SourceItem
 import org.xtimms.tokusho.core.components.icons.Dice
 import org.xtimms.tokusho.core.parser.favicon.faviconUri
-import org.xtimms.tokusho.sections.list.LIST_DESTINATION
 import org.xtimms.tokusho.utils.system.toast

 const val EXPLORE_DESTINATION = "explore"
@@ -54,6 +51,7 @@ fun ExploreView(
    navigateToSource: (MangaSource) -> Unit,
    topBarHeightPx: Float,
    topBarOffsetY: Animatable<Float, AnimationVector1D>,
+    listState: LazyGridState,
    padding: PaddingValues,
 ) {
    val viewModel: ExploreViewModel = hiltViewModel()
@@ -66,6 +64,7 @@ fun ExploreView(
        event = viewModel,
        topBarHeightPx = topBarHeightPx,
        topBarOffsetY = topBarOffsetY,
+        listState = listState,
        padding = padding
    )
 }
@@ -79,14 +78,13 @@ fun ExploreViewContent(
    nestedScrollConnection: NestedScrollConnection? = null,
    topBarHeightPx: Float = 0f,
    topBarOffsetY: Animatable<Float, AnimationVector1D> = Animatable(0f),
+    listState: LazyGridState,
    padding: PaddingValues = PaddingValues(),
 ) {

    val context = LocalContext.current
    val layoutDirection = LocalLayoutDirection.current

-    val scrollState = rememberScrollState()
-
    if (uiState.message != null) {
        LaunchedEffect(uiState.message) {
            context.toast(uiState.message)
@@ -100,7 +98,6 @@ fun ExploreViewContent(
            .fillMaxSize(),
        contentAlignment = Alignment.TopCenter
    ) {
-        val listState = rememberLazyGridState()
        val listModifier = Modifier
            .fillMaxWidth()
            .align(Alignment.TopStart)
@@ -110,7 +107,7 @@ fun ExploreViewContent(
                else Modifier
            )
        LazyVerticalGrid(
-            columns = GridCells.Adaptive(minSize = 72.dp),
+            columns = GridCells.Adaptive(minSize = 90.dp),
            modifier = listModifier
                .collapsable(
                    state = listState,
@@ -120,7 +117,7 @@ fun ExploreViewContent(
            state = listState,
            contentPadding = PaddingValues(
                start = padding.calculateStartPadding(layoutDirection) + 8.dp,
-                top = padding.calculateTopPadding(),
+                top = padding.calculateTopPadding() + 8.dp,
                end = padding.calculateEndPadding(layoutDirection) + 8.dp,
                bottom = padding.calculateBottomPadding()
            ),