Small UI adjustment for inventory display

This commit is contained in:
Thomas Andres Gomez 2025-04-20 16:12:23 +02:00
parent 8ade16084d
commit c602a9ba9a
3 changed files with 54 additions and 23 deletions

View file

@ -22,11 +22,14 @@ import lwacharactersheet.composeapp.generated.resources.Res
import lwacharactersheet.composeapp.generated.resources.character__inventory__filter_inventory__label
import org.jetbrains.compose.resources.getString
import java.text.Collator
import java.text.DecimalFormat
class CharacterDetailInventoryFactory(
private val inventoryRepository: InventoryRepository,
private val itemRepository: ItemRepository,
) {
private val decimalFormat = DecimalFormat("#.##")
fun addItemActionFlow(): Flow<Boolean> {
return itemRepository.itemFlow().map { entry ->
entry.values.any { item ->
@ -98,7 +101,7 @@ class CharacterDetailInventoryFactory(
inventoryId = it.inventoryId,
itemId = it.itemId,
label = item.metadata.label,
count = it.count,
count = decimalFormat.format(it.count),
equipped = it.equipped,
consumable = item.options.consumable,
equipable = item.options.equipable,

View file

@ -57,7 +57,7 @@ data class InventoryItemUio(
val inventoryId: String,
val itemId: String,
val label: String,
val count: Float,
val count: String,
val equipped: Boolean,
val consumable: Boolean,
val equipable: Boolean,
@ -166,7 +166,7 @@ fun InventoryItem(
) {
Row(
modifier = Modifier.weight(weight = 1f),
horizontalArrangement = Arrangement.spacedBy(space = spacing),
horizontalArrangement = Arrangement.spacedBy(space = spacing / 2),
) {
Text(
modifier = Modifier.alignByBaseline().weight(weight = 1f, fill = false),
@ -176,22 +176,21 @@ fun InventoryItem(
maxLines = 1,
text = item.label,
)
AnimatedContent(
modifier = Modifier.alignByBaseline(),
targetState = item.count,
transitionSpec = {
val enter = fadeIn() + slideInHorizontally { 16 }
val exit = fadeOut() + slideOutHorizontally { -16 }
enter togetherWith exit using SizeTransform(clip = false)
},
) {
when (it) {
0f, 1f -> Unit
else -> Text(
if (item.consumable) {
AnimatedContent(
modifier = Modifier.alignByBaseline(),
targetState = item.count,
transitionSpec = {
val enter = fadeIn() + slideInHorizontally { 16 }
val exit = fadeOut() + slideOutHorizontally { -16 }
enter togetherWith exit using SizeTransform(clip = false)
},
) {
Text(
style = MaterialTheme.lwa.typography.base.caption,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
text = "x${it}",
text = it,
)
}
}

View file

@ -2,12 +2,18 @@ package com.pixelized.desktop.lwa.ui.screen.gamemaster.item.list
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.gestures.rememberDraggableState
import androidx.compose.foundation.gestures.scrollBy
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.Icon
@ -21,14 +27,18 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
import androidx.compose.runtime.mutableStateOf
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.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.min
import com.pixelized.desktop.lwa.ui.screen.gamemaster.common.tag.GMTag
import com.pixelized.desktop.lwa.ui.screen.gamemaster.common.tag.GMTagUio
import com.pixelized.desktop.lwa.ui.theme.lwa
import kotlinx.coroutines.launch
import lwacharactersheet.composeapp.generated.resources.Res
import lwacharactersheet.composeapp.generated.resources.game_master__item__delete
import lwacharactersheet.composeapp.generated.resources.ic_delete_forever_24dp
@ -46,17 +56,22 @@ data class GMItemUio(
object GMItemDefault {
@Stable
val padding = PaddingValues(start = 16.dp)
@Stable
val spacing = 4.dp
}
@Composable
fun GMItem(
modifier: Modifier = Modifier,
padding: PaddingValues = GMItemDefault.padding,
spacing: Dp = GMItemDefault.spacing,
item: GMItemUio,
onItem: () -> Unit,
onDelete: () -> Unit,
onTag: (String) -> Unit,
) {
val state = rememberLazyListState()
val scope = rememberCoroutineScope()
Row(
modifier = Modifier
.clip(shape = MaterialTheme.lwa.shapes.gameMaster)
@ -65,20 +80,34 @@ fun GMItem(
.minimumInteractiveComponentSize()
.padding(paddingValues = padding)
.then(other = modifier),
horizontalArrangement = Arrangement.spacedBy(space = 8.dp),
horizontalArrangement = Arrangement.spacedBy(space = spacing),
verticalAlignment = Alignment.CenterVertically,
) {
Text(
modifier = Modifier.weight(1f),
style = MaterialTheme.lwa.typography.base.body1,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
text = item.label,
)
Row(
modifier = Modifier.weight(1f).height(intrinsicSize = IntrinsicSize.Min),
horizontalArrangement = Arrangement.spacedBy(space = 2.dp, alignment = Alignment.End)
LazyRow(
modifier = Modifier
.draggable(
orientation = Orientation.Horizontal,
state = rememberDraggableState { delta ->
scope.launch {
state.scrollBy(-delta)
}
},
)
.weight(1f),
state = state,
horizontalArrangement = Arrangement.spacedBy(space = 2.dp, alignment = Alignment.End),
) {
item.tags.forEach { tag ->
items(
items = item.tags,
key = { it.id },
) { tag ->
GMTag(
elevation = 4.dp,
tag = tag,