diff --git a/composeApp/src/commonMain/composeResources/drawable/ic_filter_list_24dp.xml b/composeApp/src/commonMain/composeResources/drawable/ic_filter_list_24dp.xml new file mode 100644 index 0000000..621e515 --- /dev/null +++ b/composeApp/src/commonMain/composeResources/drawable/ic_filter_list_24dp.xml @@ -0,0 +1,9 @@ + + + diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/CharacterDetailInventory.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/CharacterDetailInventory.kt index 96d89d3..714593f 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/CharacterDetailInventory.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/CharacterDetailInventory.kt @@ -1,16 +1,23 @@ package com.pixelized.desktop.lwa.ui.screen.campaign.player.detail.inventory +import androidx.compose.animation.AnimatedContent import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.calculateEndPadding import androidx.compose.foundation.layout.calculateStartPadding import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.CircleShape @@ -22,6 +29,7 @@ import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add +import androidx.compose.material.icons.filled.AddCircle import androidx.compose.runtime.Composable import androidx.compose.runtime.Stable import androidx.compose.runtime.State @@ -32,6 +40,7 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.platform.LocalFocusManager import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.unit.Dp @@ -53,11 +62,13 @@ import com.pixelized.desktop.lwa.ui.screen.campaign.player.detail.inventory.item import com.pixelized.desktop.lwa.ui.theme.color.component.LwaButtonColors import com.pixelized.desktop.lwa.ui.theme.color.component.LwaTextFieldColors import com.pixelized.desktop.lwa.ui.theme.lwa +import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.StateFlow import kotlinx.coroutines.launch import lwacharactersheet.composeapp.generated.resources.Res import lwacharactersheet.composeapp.generated.resources.character__inventory__add_to_inventory__action import lwacharactersheet.composeapp.generated.resources.ic_cancel_24dp +import lwacharactersheet.composeapp.generated.resources.ic_filter_list_24dp import org.jetbrains.compose.resources.painterResource import org.jetbrains.compose.resources.stringResource import org.koin.compose.viewmodel.koinViewModel @@ -66,6 +77,7 @@ import org.koin.compose.viewmodel.koinViewModel data class CharacterDetailInventoryUio( val characterSheetId: String, val addItemAction: StateFlow, + val showFilter: StateFlow, val filter: LwaTextFieldUio, val purse: PurseUio, val items: List, @@ -292,35 +304,56 @@ private fun CharacterDetailInventoryContent( horizontalArrangement = Arrangement.spacedBy(space = spacing), ) { InventoryPurse( - modifier = Modifier.weight(weight = 1f), purse = inventory.purse, onPurse = { onPurse(inventory.characterSheetId) }, ) - LwaTextField( - modifier = Modifier.weight(weight = 1f), - colors = LwaTextFieldColors( - backgroundColor = MaterialTheme.lwa.colorScheme.elevated.base2dp, - ), - field = inventory.filter, - trailingIcon = { - val value = inventory.filter.valueFlow.collectAsState() - AnimatedVisibility( - visible = value.value.isNotBlank(), - enter = fadeIn(), - exit = fadeOut(), - ) { - IconButton( - onClick = { inventory.filter.onValueChange.invoke("") }, - ) { - Icon( - painter = painterResource(Res.drawable.ic_cancel_24dp), - tint = MaterialTheme.lwa.colorScheme.base.primary, - contentDescription = null, - ) + Spacer( + modifier = Modifier.weight(weight = 1f) + ) + AnimatedContent( + targetState = inventory.showFilter.collectAsState().value, + ) { + when (it) { + true -> LwaTextField( + colors = LwaTextFieldColors( + backgroundColor = MaterialTheme.lwa.colorScheme.elevated.base2dp, + ), + field = inventory.filter, + trailingIcon = { + val value = inventory.filter.valueFlow.collectAsState() + androidx.compose.animation.AnimatedVisibility( + visible = value.value.isNotBlank(), + enter = fadeIn(), + exit = fadeOut(), + ) { + IconButton( + onClick = { inventory.filter.onValueChange.invoke("") }, + ) { + Icon( + painter = painterResource(Res.drawable.ic_cancel_24dp), + tint = MaterialTheme.lwa.colorScheme.base.primary, + contentDescription = null, + ) + } + } } + ) + + else -> Box( + modifier = Modifier + .clip(shape = MaterialTheme.lwa.shapes.base.small) + .clickable { (inventory.showFilter as? MutableStateFlow)?.value = true } + .size(size = 32.dp), + contentAlignment = Alignment.Center, + ) { + Icon( + painter = painterResource(Res.drawable.ic_filter_list_24dp), + tint = MaterialTheme.lwa.colorScheme.base.primary, + contentDescription = null + ) } } - ) + } } } items( diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/CharacterDetailInventoryFactory.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/CharacterDetailInventoryFactory.kt index cdf640a..8fe8beb 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/CharacterDetailInventoryFactory.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/CharacterDetailInventoryFactory.kt @@ -13,6 +13,7 @@ import com.pixelized.shared.lwa.model.inventory.Inventory import com.pixelized.shared.lwa.model.item.Item import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.flow.Flow +import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.SharingStarted import kotlinx.coroutines.flow.StateFlow import kotlinx.coroutines.flow.combine @@ -45,6 +46,7 @@ class CharacterDetailInventoryFactory( addItemAction: StateFlow, initialValue: () -> CharacterDetailInventoryUio?, ): StateFlow { + val showFilterFlow = MutableStateFlow(false) val filterFlow = createLwaTextFieldFlow( label = getString(Res.string.character__inventory__filter_inventory__label), value = "", @@ -56,6 +58,7 @@ class CharacterDetailInventoryFactory( ) { inventory, items, filter -> convertToCharacterInventoryUio( characterSheetId = characterSheetId, + showFilter = showFilterFlow, filter = filterFlow.createLwaTextField(), addItemAction = addItemAction, purse = inventory.purse, @@ -71,6 +74,7 @@ class CharacterDetailInventoryFactory( private fun convertToCharacterInventoryUio( characterSheetId: String?, + showFilter: StateFlow, filter: LwaTextFieldUio, addItemAction: StateFlow, purse: Inventory.Purse?, @@ -86,6 +90,7 @@ class CharacterDetailInventoryFactory( silver = purse?.silver ?: 0, copper = purse?.copper ?: 0, ), + showFilter = showFilter, filter = filter, addItemAction = addItemAction, items = inventory diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryPurse.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryPurse.kt index da0c79f..3cde458 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryPurse.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryPurse.kt @@ -10,13 +10,11 @@ import androidx.compose.animation.slideInHorizontally import androidx.compose.animation.slideOutHorizontally import androidx.compose.animation.togetherWith import androidx.compose.foundation.ExperimentalFoundationApi -import androidx.compose.foundation.Image import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.Composable @@ -29,11 +27,6 @@ import androidx.compose.ui.unit.dp import com.pixelized.desktop.lwa.ui.composable.currency.Currency import com.pixelized.desktop.lwa.ui.composable.currency.CurrencyUio import com.pixelized.desktop.lwa.ui.theme.lwa -import lwacharactersheet.composeapp.generated.resources.Res -import lwacharactersheet.composeapp.generated.resources.ic_copper_32px -import lwacharactersheet.composeapp.generated.resources.ic_gold_32px -import lwacharactersheet.composeapp.generated.resources.ic_silver_32px -import org.jetbrains.compose.resources.painterResource @Stable data class PurseUio( @@ -57,63 +50,58 @@ fun InventoryPurse( onPurse: () -> Unit, ) { Row( - modifier = modifier, - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.Start, + modifier = Modifier + .clip(shape = MaterialTheme.lwa.shapes.item) + .clickable { onPurse() } + .padding(paddingValues = paddings) + .then(other = modifier), + horizontalArrangement = Arrangement.spacedBy(space = 8.dp), ) { - Row( - modifier = Modifier - .clip(shape = MaterialTheme.lwa.shapes.item) - .clickable { onPurse() } - .padding(paddingValues = paddings), - horizontalArrangement = Arrangement.spacedBy(space = 8.dp), - ) { - Row(verticalAlignment = Alignment.Bottom) { - Currency( - currency = CurrencyUio.Gold, + Row(verticalAlignment = Alignment.Bottom) { + Currency( + currency = CurrencyUio.Gold, + ) + AnimatedContent( + targetState = purse.gold, + transitionSpec = coinTransitionSpec(), + ) { + Text( + style = MaterialTheme.lwa.typography.system.body1, + fontWeight = FontWeight.Bold, + text = "$it", ) - AnimatedContent( - targetState = purse.gold, - transitionSpec = coinTransitionSpec(), - ) { - Text( - style = MaterialTheme.lwa.typography.system.body1, - fontWeight = FontWeight.Bold, - text = "$it", - ) - } } + } - Row(verticalAlignment = Alignment.Bottom) { - Currency( - currency = CurrencyUio.Silver, + Row(verticalAlignment = Alignment.Bottom) { + Currency( + currency = CurrencyUio.Silver, + ) + AnimatedContent( + targetState = purse.silver, + transitionSpec = coinTransitionSpec(), + ) { + Text( + style = MaterialTheme.lwa.typography.system.body1, + fontWeight = FontWeight.Bold, + text = "$it", ) - AnimatedContent( - targetState = purse.silver, - transitionSpec = coinTransitionSpec(), - ) { - Text( - style = MaterialTheme.lwa.typography.system.body1, - fontWeight = FontWeight.Bold, - text = "$it", - ) - } } + } - Row(verticalAlignment = Alignment.Bottom) { - Currency( - currency = CurrencyUio.Copper, + Row(verticalAlignment = Alignment.Bottom) { + Currency( + currency = CurrencyUio.Copper, + ) + AnimatedContent( + targetState = purse.copper, + transitionSpec = coinTransitionSpec(), + ) { + Text( + style = MaterialTheme.lwa.typography.system.body1, + fontWeight = FontWeight.Bold, + text = "$it", ) - AnimatedContent( - targetState = purse.copper, - transitionSpec = coinTransitionSpec(), - ) { - Text( - style = MaterialTheme.lwa.typography.system.body1, - fontWeight = FontWeight.Bold, - text = "$it", - ) - } } } }