mirror of
https://github.com/bbara04/Purefin.git
synced 2026-07-23 19:26:50 +00:00
feat(topbar): create DefaultTopBarIconButton for reusable icon button implementation
This commit is contained in:
@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.height
|
|||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.layout.size
|
import androidx.compose.foundation.layout.size
|
||||||
import androidx.compose.foundation.layout.statusBarsPadding
|
import androidx.compose.foundation.layout.statusBarsPadding
|
||||||
|
import androidx.compose.foundation.shape.CircleShape
|
||||||
import androidx.compose.material.icons.Icons
|
import androidx.compose.material.icons.Icons
|
||||||
import androidx.compose.material.icons.outlined.Search
|
import androidx.compose.material.icons.outlined.Search
|
||||||
import androidx.compose.material3.Icon
|
import androidx.compose.material3.Icon
|
||||||
@@ -23,6 +24,8 @@ import androidx.compose.material3.Text
|
|||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.ui.Alignment
|
import androidx.compose.ui.Alignment
|
||||||
import androidx.compose.ui.Modifier
|
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.FontStyle
|
||||||
import androidx.compose.ui.text.font.FontWeight
|
import androidx.compose.ui.text.font.FontWeight
|
||||||
import androidx.compose.ui.unit.dp
|
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)
|
@OptIn(ExperimentalSharedTransitionApi::class)
|
||||||
@Composable
|
@Composable
|
||||||
fun DefaultTopBarSearchButton(
|
fun DefaultTopBarSearchButton(
|
||||||
|
|||||||
@@ -2,15 +2,10 @@ package hu.bbara.purefin.ui.screen.home.components
|
|||||||
|
|
||||||
import androidx.compose.foundation.layout.Spacer
|
import androidx.compose.foundation.layout.Spacer
|
||||||
import androidx.compose.foundation.layout.size
|
import androidx.compose.foundation.layout.size
|
||||||
import androidx.compose.foundation.shape.CircleShape
|
|
||||||
import androidx.compose.material.icons.Icons
|
import androidx.compose.material.icons.Icons
|
||||||
import androidx.compose.material.icons.outlined.Person
|
import androidx.compose.material.icons.outlined.Person
|
||||||
import androidx.compose.material3.DropdownMenu
|
import androidx.compose.material3.DropdownMenu
|
||||||
import androidx.compose.material3.DropdownMenuItem
|
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.material3.Text
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.runtime.getValue
|
import androidx.compose.runtime.getValue
|
||||||
@@ -18,7 +13,6 @@ import androidx.compose.runtime.mutableStateOf
|
|||||||
import androidx.compose.runtime.remember
|
import androidx.compose.runtime.remember
|
||||||
import androidx.compose.runtime.setValue
|
import androidx.compose.runtime.setValue
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.draw.clip
|
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
@@ -28,32 +22,17 @@ fun HomeTopBar(
|
|||||||
onSettingsClick: () -> Unit,
|
onSettingsClick: () -> Unit,
|
||||||
onLogoutClick: () -> Unit,
|
onLogoutClick: () -> Unit,
|
||||||
) {
|
) {
|
||||||
val scheme = MaterialTheme.colorScheme
|
|
||||||
|
|
||||||
var isProfileMenuExpanded by remember { mutableStateOf(false) }
|
var isProfileMenuExpanded by remember { mutableStateOf(false) }
|
||||||
|
|
||||||
DefaultTopBar(
|
DefaultTopBar(
|
||||||
rightActions = {
|
rightActions = {
|
||||||
DefaultTopBarSearchButton(onClick = onSearchClick)
|
DefaultTopBarSearchButton(onClick = onSearchClick)
|
||||||
Spacer(modifier = Modifier.size(12.dp))
|
Spacer(modifier = Modifier.size(12.dp))
|
||||||
IconButton(
|
DefaultTopBarIconButton(
|
||||||
|
imageVector = Icons.Outlined.Person,
|
||||||
|
contentDescription = "Profile",
|
||||||
onClick = { isProfileMenuExpanded = true },
|
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(
|
DropdownMenu(
|
||||||
expanded = isProfileMenuExpanded,
|
expanded = isProfileMenuExpanded,
|
||||||
onDismissRequest = { isProfileMenuExpanded = false },
|
onDismissRequest = { isProfileMenuExpanded = false },
|
||||||
|
|||||||
@@ -35,6 +35,7 @@ import androidx.compose.material3.FilterChip
|
|||||||
import androidx.compose.material3.Icon
|
import androidx.compose.material3.Icon
|
||||||
import androidx.compose.material3.IconButton
|
import androidx.compose.material3.IconButton
|
||||||
import androidx.compose.material3.MaterialTheme
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.material3.Scaffold
|
||||||
import androidx.compose.material3.Surface
|
import androidx.compose.material3.Surface
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
import androidx.compose.material3.TextField
|
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.LocalNavSharedAnimatedVisibilityScope
|
||||||
import hu.bbara.purefin.navigation.LocalSharedTransitionScope
|
import hu.bbara.purefin.navigation.LocalSharedTransitionScope
|
||||||
import hu.bbara.purefin.ui.common.image.PurefinLogo
|
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 hu.bbara.purefin.ui.theme.AppTheme
|
||||||
import java.util.UUID
|
import java.util.UUID
|
||||||
|
|
||||||
@@ -133,7 +135,8 @@ private fun SearchFullScreenContent(
|
|||||||
) {
|
) {
|
||||||
val scheme = MaterialTheme.colorScheme
|
val scheme = MaterialTheme.colorScheme
|
||||||
|
|
||||||
Column(
|
Scaffold(
|
||||||
|
topBar = { SearchHeader() },
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
.fillMaxSize()
|
.fillMaxSize()
|
||||||
.background(scheme.background)
|
.background(scheme.background)
|
||||||
@@ -141,9 +144,7 @@ private fun SearchFullScreenContent(
|
|||||||
.verticalScroll(rememberScrollState())
|
.verticalScroll(rememberScrollState())
|
||||||
.padding(horizontal = 20.dp)
|
.padding(horizontal = 20.dp)
|
||||||
.padding(bottom = 28.dp)
|
.padding(bottom = 28.dp)
|
||||||
) {
|
) { innerPadding ->
|
||||||
SearchHeader(modifier = Modifier.padding(top = 12.dp))
|
|
||||||
Spacer(modifier = Modifier.height(24.dp))
|
|
||||||
SearchField(
|
SearchField(
|
||||||
query = query,
|
query = query,
|
||||||
onQueryChange = onQueryChange,
|
onQueryChange = onQueryChange,
|
||||||
@@ -205,51 +206,11 @@ private fun SearchHeader(
|
|||||||
) {
|
) {
|
||||||
val scheme = MaterialTheme.colorScheme
|
val scheme = MaterialTheme.colorScheme
|
||||||
|
|
||||||
Row(
|
DefaultTopBar(
|
||||||
verticalAlignment = Alignment.CenterVertically,
|
leftActions = {
|
||||||
modifier = modifier.fillMaxWidth()
|
|
||||||
) {
|
|
||||||
IconButton(onClick = {}) {
|
|
||||||
Icon(
|
|
||||||
imageVector = Icons.Outlined.Menu,
|
|
||||||
contentDescription = "Menu",
|
|
||||||
tint = scheme.primary,
|
|
||||||
modifier = Modifier.size(30.dp)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
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
|
@Composable
|
||||||
|
|||||||
@@ -1,44 +1,22 @@
|
|||||||
package hu.bbara.purefin.ui.screen.library.components
|
package hu.bbara.purefin.ui.screen.library.components
|
||||||
|
|
||||||
import androidx.compose.foundation.layout.size
|
import androidx.compose.material.icons.automirrored.outlined.ArrowBack
|
||||||
import androidx.compose.foundation.shape.CircleShape
|
|
||||||
import androidx.compose.material.icons.Icons
|
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.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.DefaultTopBar
|
||||||
|
import hu.bbara.purefin.ui.screen.home.components.DefaultTopBarIconButton
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
fun LibraryTopBar(
|
fun LibraryTopBar(
|
||||||
onBack: () -> Unit,
|
onBack: () -> Unit,
|
||||||
) {
|
) {
|
||||||
val scheme = MaterialTheme.colorScheme
|
|
||||||
DefaultTopBar(
|
DefaultTopBar(
|
||||||
leftActions = {
|
leftActions = {
|
||||||
IconButton(
|
DefaultTopBarIconButton(
|
||||||
|
imageVector = Icons.AutoMirrored.Outlined.ArrowBack,
|
||||||
|
contentDescription = "Back",
|
||||||
onClick = onBack,
|
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),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user