Modify main search bar

master
Zakhar Timoshenko 2 years ago
parent 9436b36697
commit e2b860c4da
Signed by: Xtimms
SSH Key Fingerprint: SHA256:wH6spYepK/A5erBh7ZyAnr1ru9H4eaMVBEuiw6DSpxI

@ -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
)
}
}

@ -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
)
}

@ -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),
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,

@ -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()
),

Loading…
Cancel
Save