feat(topbar): create DefaultTopBarIconButton for reusable icon button implementation

This commit is contained in:
2026-05-02 21:04:58 +02:00
parent 0edac36ca8
commit efd7593646
4 changed files with 51 additions and 102 deletions

View File

@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Search
import androidx.compose.material3.Icon
@@ -23,6 +24,8 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
@@ -88,6 +91,34 @@ fun DefaultTopBar(
}
}
@Composable
fun DefaultTopBarIconButton(
imageVector: ImageVector,
contentDescription: String,
onClick: () -> Unit,
) {
val scheme = MaterialTheme.colorScheme
IconButton(
onClick = onClick,
colors = IconButtonColors(
containerColor = scheme.surface,
contentColor = scheme.onSurface,
disabledContainerColor = scheme.surface,
disabledContentColor = scheme.onSurface
),
modifier = Modifier
.size(50.dp)
.clip(CircleShape),
) {
Icon(
imageVector = imageVector,
contentDescription = contentDescription,
modifier = Modifier.size(30.dp),
)
}
}
@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun DefaultTopBarSearchButton(

View File

@@ -2,15 +2,10 @@ package hu.bbara.purefin.ui.screen.home.components
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.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
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.runtime.Composable
import androidx.compose.runtime.getValue
@@ -18,7 +13,6 @@ import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
@Composable
@@ -28,32 +22,17 @@ fun HomeTopBar(
onSettingsClick: () -> Unit,
onLogoutClick: () -> Unit,
) {
val scheme = MaterialTheme.colorScheme
var isProfileMenuExpanded by remember { mutableStateOf(false) }
DefaultTopBar(
rightActions = {
DefaultTopBarSearchButton(onClick = onSearchClick)
Spacer(modifier = Modifier.size(12.dp))
IconButton(
DefaultTopBarIconButton(
imageVector = Icons.Outlined.Person,
contentDescription = "Profile",
onClick = { isProfileMenuExpanded = true },
colors = IconButtonColors(
containerColor = scheme.surface,
contentColor = scheme.onSurface,
disabledContainerColor = scheme.surface,
disabledContentColor = scheme.onSurface
),
modifier = Modifier
.size(50.dp)
.clip(CircleShape),
) {
Icon(
imageVector = Icons.Outlined.Person,
contentDescription = "Profile",
modifier = Modifier.size(30.dp),
)
}
)
DropdownMenu(
expanded = isProfileMenuExpanded,
onDismissRequest = { isProfileMenuExpanded = false },

View File

@@ -35,6 +35,7 @@ import androidx.compose.material3.FilterChip
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
@@ -65,6 +66,7 @@ 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
import hu.bbara.purefin.ui.screen.home.components.DefaultTopBar
import hu.bbara.purefin.ui.theme.AppTheme
import java.util.UUID
@@ -133,7 +135,8 @@ private fun SearchFullScreenContent(
) {
val scheme = MaterialTheme.colorScheme
Column(
Scaffold(
topBar = { SearchHeader() },
modifier = modifier
.fillMaxSize()
.background(scheme.background)
@@ -141,9 +144,7 @@ private fun SearchFullScreenContent(
.verticalScroll(rememberScrollState())
.padding(horizontal = 20.dp)
.padding(bottom = 28.dp)
) {
SearchHeader(modifier = Modifier.padding(top = 12.dp))
Spacer(modifier = Modifier.height(24.dp))
) { innerPadding ->
SearchField(
query = query,
onQueryChange = onQueryChange,
@@ -205,51 +206,11 @@ private fun SearchHeader(
) {
val scheme = MaterialTheme.colorScheme
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = modifier.fillMaxWidth()
) {
IconButton(onClick = {}) {
Icon(
imageVector = Icons.Outlined.Menu,
contentDescription = "Menu",
tint = scheme.primary,
modifier = Modifier.size(30.dp)
)
DefaultTopBar(
leftActions = {
}
Spacer(modifier = Modifier.weight(1f))
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(10.dp)
) {
PurefinLogo(
modifier = Modifier.size(64.dp)
)
Text(
text = "PureFin",
color = scheme.primary,
fontSize = 30.sp,
fontWeight = FontWeight.Bold,
fontStyle = FontStyle.Italic
)
}
Spacer(modifier = Modifier.weight(1f))
Surface(
shape = CircleShape,
color = scheme.surfaceContainer,
border = BorderStroke(1.dp, scheme.outlineVariant.copy(alpha = 0.28f)),
modifier = Modifier.size(48.dp)
) {
Box(contentAlignment = Alignment.Center) {
Icon(
imageVector = Icons.Outlined.Person,
contentDescription = "Profile",
tint = scheme.onSurfaceVariant,
modifier = Modifier.size(26.dp)
)
}
}
}
)
}
@Composable

View File

@@ -1,44 +1,22 @@
package hu.bbara.purefin.ui.screen.library.components
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.automirrored.outlined.ArrowBack
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.ArrowBack
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.draw.clip
import androidx.compose.ui.unit.dp
import hu.bbara.purefin.ui.screen.home.components.DefaultTopBar
import hu.bbara.purefin.ui.screen.home.components.DefaultTopBarIconButton
@Composable
fun LibraryTopBar(
onBack: () -> Unit,
) {
val scheme = MaterialTheme.colorScheme
DefaultTopBar(
leftActions = {
IconButton(
DefaultTopBarIconButton(
imageVector = Icons.AutoMirrored.Outlined.ArrowBack,
contentDescription = "Back",
onClick = onBack,
colors = IconButtonColors(
containerColor = scheme.surface,
contentColor = scheme.onSurface,
disabledContainerColor = scheme.surface,
disabledContentColor = scheme.onSurface
),
modifier = Modifier
.size(50.dp)
.clip(CircleShape),
) {
Icon(
imageVector = Icons.Outlined.ArrowBack,
contentDescription = "Search",
modifier = Modifier.size(30.dp),
)
}
)
}
)
}
}