mirror of
https://github.com/bbara04/Purefin.git
synced 2026-07-23 19:26:50 +00:00
feat(app): integrate search button into top bars and refactor for reusability
This commit is contained in:
@@ -87,6 +87,7 @@ fun AppScreen(
|
||||
LibrariesScreen(
|
||||
items = libraries,
|
||||
onLibrarySelected = { item -> viewModel.onLibrarySelected(item.id, item.name) },
|
||||
onSearchClick = viewModel::openSearch,
|
||||
selectedTab = selectedTab,
|
||||
onTabSelected = onTabSelected,
|
||||
modifier = Modifier.fillMaxSize()
|
||||
|
||||
@@ -1,11 +1,20 @@
|
||||
package hu.bbara.purefin.ui.screen.home.components
|
||||
|
||||
import androidx.compose.animation.ExperimentalSharedTransitionApi
|
||||
import androidx.compose.animation.SharedTransitionScope
|
||||
import androidx.compose.animation.fadeIn
|
||||
import androidx.compose.animation.fadeOut
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.RowScope
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.outlined.Search
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.IconButtonColors
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TopAppBar
|
||||
@@ -18,6 +27,9 @@ import androidx.compose.ui.text.font.FontStyle
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import hu.bbara.purefin.navigation.HOME_SEARCH_SHARED_BOUNDS_KEY
|
||||
import hu.bbara.purefin.navigation.LocalNavSharedAnimatedVisibilityScope
|
||||
import hu.bbara.purefin.navigation.LocalSharedTransitionScope
|
||||
import hu.bbara.purefin.ui.common.image.PurefinLogo
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@@ -58,3 +70,51 @@ fun DefaultTopBar(
|
||||
modifier = Modifier.padding(end = 12.dp)
|
||||
)
|
||||
}
|
||||
|
||||
@OptIn(ExperimentalSharedTransitionApi::class)
|
||||
@Composable
|
||||
fun DefaultTopBarSearchButton(
|
||||
onClick: () -> Unit
|
||||
) {
|
||||
val scheme = MaterialTheme.colorScheme
|
||||
val sharedTransitionScope = LocalSharedTransitionScope.current
|
||||
val animatedVisibilityScope = LocalNavSharedAnimatedVisibilityScope.current
|
||||
|
||||
val searchButtonModifier = if (
|
||||
sharedTransitionScope != null &&
|
||||
animatedVisibilityScope != null
|
||||
) {
|
||||
with(sharedTransitionScope) {
|
||||
Modifier
|
||||
.sharedBounds(
|
||||
sharedContentState = rememberSharedContentState(
|
||||
key = HOME_SEARCH_SHARED_BOUNDS_KEY
|
||||
),
|
||||
animatedVisibilityScope = animatedVisibilityScope,
|
||||
enter = fadeIn(),
|
||||
exit = fadeOut(),
|
||||
resizeMode = SharedTransitionScope.ResizeMode.scaleToBounds()
|
||||
)
|
||||
.size(50.dp)
|
||||
}
|
||||
} else {
|
||||
Modifier.size(50.dp)
|
||||
}
|
||||
|
||||
IconButton(
|
||||
onClick = onClick,
|
||||
colors = IconButtonColors(
|
||||
containerColor = scheme.surface,
|
||||
contentColor = scheme.onSurface,
|
||||
disabledContainerColor = scheme.surface,
|
||||
disabledContentColor = scheme.onSurface
|
||||
),
|
||||
modifier = searchButtonModifier,
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Outlined.Search,
|
||||
contentDescription = "Search",
|
||||
modifier = Modifier.size(30.dp),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,10 @@
|
||||
package hu.bbara.purefin.ui.screen.home.components
|
||||
|
||||
import androidx.compose.animation.ExperimentalSharedTransitionApi
|
||||
import androidx.compose.animation.SharedTransitionScope
|
||||
import androidx.compose.animation.fadeIn
|
||||
import androidx.compose.animation.fadeOut
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.outlined.Person
|
||||
import androidx.compose.material.icons.outlined.Search
|
||||
import androidx.compose.material3.DropdownMenu
|
||||
import androidx.compose.material3.DropdownMenuItem
|
||||
import androidx.compose.material3.Icon
|
||||
@@ -25,11 +20,7 @@ import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.unit.dp
|
||||
import hu.bbara.purefin.navigation.HOME_SEARCH_SHARED_BOUNDS_KEY
|
||||
import hu.bbara.purefin.navigation.LocalNavSharedAnimatedVisibilityScope
|
||||
import hu.bbara.purefin.navigation.LocalSharedTransitionScope
|
||||
|
||||
@OptIn(ExperimentalSharedTransitionApi::class)
|
||||
@Composable
|
||||
fun HomeTopBar(
|
||||
onSearchClick: () -> Unit,
|
||||
@@ -38,50 +29,12 @@ fun HomeTopBar(
|
||||
onLogoutClick: () -> Unit,
|
||||
) {
|
||||
val scheme = MaterialTheme.colorScheme
|
||||
val sharedTransitionScope = LocalSharedTransitionScope.current
|
||||
val animatedVisibilityScope = LocalNavSharedAnimatedVisibilityScope.current
|
||||
|
||||
var isProfileMenuExpanded by remember { mutableStateOf(false) }
|
||||
|
||||
DefaultTopBar()
|
||||
{
|
||||
val searchButtonModifier = if (
|
||||
sharedTransitionScope != null &&
|
||||
animatedVisibilityScope != null
|
||||
) {
|
||||
with(sharedTransitionScope) {
|
||||
Modifier
|
||||
.sharedBounds(
|
||||
sharedContentState = rememberSharedContentState(
|
||||
key = HOME_SEARCH_SHARED_BOUNDS_KEY
|
||||
),
|
||||
animatedVisibilityScope = animatedVisibilityScope,
|
||||
enter = fadeIn(),
|
||||
exit = fadeOut(),
|
||||
resizeMode = SharedTransitionScope.ResizeMode.scaleToBounds()
|
||||
)
|
||||
.size(50.dp)
|
||||
}
|
||||
} else {
|
||||
Modifier.size(50.dp)
|
||||
}
|
||||
|
||||
IconButton(
|
||||
onClick = onSearchClick,
|
||||
colors = IconButtonColors(
|
||||
containerColor = scheme.surface,
|
||||
contentColor = scheme.onSurface,
|
||||
disabledContainerColor = scheme.surface,
|
||||
disabledContentColor = scheme.onSurface
|
||||
),
|
||||
modifier = searchButtonModifier,
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Outlined.Search,
|
||||
contentDescription = "Search",
|
||||
modifier = Modifier.size(30.dp),
|
||||
)
|
||||
}
|
||||
DefaultTopBarSearchButton(onClick = onSearchClick)
|
||||
Spacer(modifier = Modifier.size(12.dp))
|
||||
IconButton(
|
||||
onClick = { isProfileMenuExpanded = true },
|
||||
|
||||
@@ -15,6 +15,7 @@ import hu.bbara.purefin.ui.screen.library.components.LibraryTopBar
|
||||
fun LibrariesScreen(
|
||||
items: List<LibraryUiModel>,
|
||||
onLibrarySelected: (LibraryUiModel) -> Unit,
|
||||
onSearchClick: () -> Unit,
|
||||
selectedTab: Int,
|
||||
onTabSelected: (Int) -> Unit,
|
||||
modifier: Modifier = Modifier
|
||||
@@ -25,7 +26,7 @@ fun LibrariesScreen(
|
||||
contentColor = MaterialTheme.colorScheme.onBackground,
|
||||
topBar = {
|
||||
LibraryTopBar(
|
||||
onSearchClick = {},
|
||||
onSearchClick = onSearchClick,
|
||||
)
|
||||
},
|
||||
bottomBar = {
|
||||
|
||||
@@ -1,39 +1,14 @@
|
||||
package hu.bbara.purefin.ui.screen.library.components
|
||||
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.outlined.Search
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.IconButtonColors
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.unit.dp
|
||||
import hu.bbara.purefin.ui.screen.home.components.DefaultTopBar
|
||||
import hu.bbara.purefin.ui.screen.home.components.DefaultTopBarSearchButton
|
||||
|
||||
@Composable
|
||||
fun LibraryTopBar(
|
||||
onSearchClick: () -> Unit,
|
||||
) {
|
||||
val scheme = MaterialTheme.colorScheme
|
||||
|
||||
DefaultTopBar {
|
||||
IconButton(
|
||||
onClick = onSearchClick,
|
||||
colors = IconButtonColors(
|
||||
containerColor = scheme.surface,
|
||||
contentColor = scheme.onSurface,
|
||||
disabledContainerColor = scheme.surface,
|
||||
disabledContentColor = scheme.onSurface
|
||||
),
|
||||
modifier = Modifier.size(50.dp),
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Outlined.Search,
|
||||
contentDescription = "Search",
|
||||
modifier = Modifier.size(30.dp),
|
||||
)
|
||||
}
|
||||
DefaultTopBarSearchButton(onClick = onSearchClick)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user