From c4db7b2a72c7050a4925d324e87a6546cabfa8f8 Mon Sep 17 00:00:00 2001 From: Thomas Andres Gomez Date: Fri, 17 Oct 2025 19:47:26 +0200 Subject: [PATCH] Refactor the Main Layout. --- .../lwa/ui/screen/campaign/CampaignScreen.kt | 80 +++++++++---------- .../detail/header/CharacterDetailHeader.kt | 2 +- .../detail/sheet/CharacterDetailSheet.kt | 2 +- .../campaign/player/ribbon/CharacterRibbon.kt | 56 ++++++++----- .../player/ribbon/CharacterRibbonFactory.kt | 4 +- .../common/CharacterRibbonAlteration.kt | 77 +++++++++--------- .../ribbon/common/CharacterRibbonPortrait.kt | 15 +--- .../ribbon/common/CharacterRibbonRoll.kt | 2 +- .../ribbon/common/CharacterRibbonUio.kt | 1 + .../ui/screen/campaign/text/CampaignChat.kt | 19 +++-- .../lwa/ui/screen/levelup/LevelScreen.kt | 2 +- .../levelup/items/LevelUpSubCharacteristic.kt | 4 +- .../desktop/lwa/ui/theme/LwaTheme.kt | 12 +-- .../desktop/lwa/ui/theme/dimen/LwaDimen.kt | 65 +++++++++++++++ .../desktop/lwa/ui/theme/shapes/LwaShapes.kt | 15 ++-- .../desktop/lwa/ui/theme/size/LwaSize.kt | 42 ---------- .../utils/extention/LayoutDirection+Invert.kt | 9 +++ 17 files changed, 225 insertions(+), 182 deletions(-) create mode 100644 composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/dimen/LwaDimen.kt delete mode 100644 composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/size/LwaSize.kt create mode 100644 composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/utils/extention/LayoutDirection+Invert.kt diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/CampaignScreen.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/CampaignScreen.kt index bd773ae..98e8f95 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/CampaignScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/CampaignScreen.kt @@ -2,6 +2,7 @@ package com.pixelized.desktop.lwa.ui.screen.campaign import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding @@ -106,7 +107,7 @@ fun CampaignScreen( }, chat = { CampaignChat( - modifier = Modifier.padding(all = 8.dp), + modifier = Modifier.padding(vertical = MaterialTheme.lwa.dimen.paddingValue), chatViewModel = campaignChatViewModel, ) }, @@ -116,7 +117,7 @@ fun CampaignScreen( contentAlignment = Alignment.Center, ) { PortraitOverlay( - modifier = Modifier.padding(all = 8.dp), + modifier = Modifier.padding(paddingValues = MaterialTheme.lwa.dimen.paddingValues), ) } }, @@ -175,9 +176,9 @@ fun CampaignScreen( leftOverlay = { CharacterDetailPanel( modifier = Modifier - .padding(all = 8.dp) - .padding(start = MaterialTheme.lwa.size.portrait.minimized.width + 8.dp) - .width(width = 128.dp * 4) + .padding(paddingValues = MaterialTheme.lwa.dimen.paddingValues) + .padding(start = MaterialTheme.lwa.dimen.portrait.minimized.width + MaterialTheme.lwa.dimen.paddingValue) + .width(width = MaterialTheme.lwa.dimen.layout.detailWidth) .fillMaxHeight(), transitionSpec = rememberTransitionAnimation(direction = LayoutDirection.Ltr), detailPanelViewModel = playerDetailViewModel, @@ -192,9 +193,9 @@ fun CampaignScreen( rightOverlay = { CharacterDetailPanel( modifier = Modifier - .padding(all = 8.dp) - .padding(end = MaterialTheme.lwa.size.portrait.minimized.width + 8.dp) - .width(width = 128.dp * 4) + .padding(paddingValues = MaterialTheme.lwa.dimen.paddingValues) + .padding(end = MaterialTheme.lwa.dimen.portrait.minimized.width + MaterialTheme.lwa.dimen.paddingValue) + .width(width = MaterialTheme.lwa.dimen.layout.detailWidth) .fillMaxHeight(), transitionSpec = rememberTransitionAnimation(direction = LayoutDirection.Rtl), detailPanelViewModel = npcDetailViewModel, @@ -342,40 +343,39 @@ private fun CampaignLayout( modifier = modifier, ) { top() + Box( - modifier = Modifier.weight(weight = 1f, fill = true), + modifier = Modifier + .weight(weight = 1f, fill = true) + .onSizeChanged { mainState.value = it.toDp(density) }, ) { - Box( - modifier = Modifier - .onSizeChanged { mainState.value = it.toDp(density) } - .matchParentSize(), - ) { - main() - } - Box( - modifier = Modifier - .align(alignment = Alignment.BottomStart) - .padding( - start = MaterialTheme.lwa.size.portrait.minimized.width * 2 + 20.dp, - end = MaterialTheme.lwa.size.portrait.minimized.width * 2 + 20.dp + 56.dp, - ) - .onSizeChanged { chatOverlayState.value = it.toDp(density) }, - ) { - chat() - } - Box( - modifier = Modifier - .align(alignment = Alignment.CenterStart) - .onSizeChanged { leftPanelState.value = it.toDp(density) }, - ) { - leftPanel() - } - Box( - modifier = Modifier - .align(alignment = Alignment.CenterEnd) - .onSizeChanged { rightPanelState.value = it.toDp(density) }, - ) { - rightPanel() + main() + + Row { + Box( + modifier = Modifier + .width(width = MaterialTheme.lwa.dimen.layout.panelWidth) + .fillMaxHeight() + .onSizeChanged { leftPanelState.value = it.toDp(density) }, + ) { + leftPanel() + } + Box( + modifier = Modifier + .align(alignment = Alignment.Bottom) + .weight(weight = 1f, fill = true) + .onSizeChanged { chatOverlayState.value = it.toDp(density) }, + ) { + chat() + } + Box( + modifier = Modifier + .width(width = MaterialTheme.lwa.dimen.layout.panelWidth) + .fillMaxHeight() + .onSizeChanged { rightPanelState.value = it.toDp(density) }, + ) { + rightPanel() + } } Box( modifier = Modifier diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/header/CharacterDetailHeader.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/header/CharacterDetailHeader.kt index a9dd6cb..90a606b 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/header/CharacterDetailHeader.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/header/CharacterDetailHeader.kt @@ -108,7 +108,7 @@ object CharacterDetailHeaderDefault { fun CharacterDetailHeader( modifier: Modifier = Modifier, paddings: PaddingValues = CharacterDetailHeaderDefault.paddings, - iconSize: Dp = MaterialTheme.lwa.size.sheet.subCategory, + iconSize: Dp = MaterialTheme.lwa.dimen.sheet.subCategory, header: State, onDismissRequest: () -> Unit, onLevelUp: () -> Unit, diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/sheet/CharacterDetailSheet.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/sheet/CharacterDetailSheet.kt index d289e6c..5a3e307 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/sheet/CharacterDetailSheet.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/sheet/CharacterDetailSheet.kt @@ -70,7 +70,7 @@ fun CharacterDetailSheet( ) { sheet.value?.characteristics?.forEach { CharacterDetailSheetCharacteristic( - modifier = Modifier.size(size = MaterialTheme.lwa.size.sheet.characteristic), + modifier = Modifier.size(size = MaterialTheme.lwa.dimen.sheet.characteristic), characteristic = it, onClick = { onCharacteristic(it) }, ) diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/CharacterRibbon.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/CharacterRibbon.kt index c67da46..f2185e0 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/CharacterRibbon.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/CharacterRibbon.kt @@ -1,29 +1,35 @@ package com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon +import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.PointerMatcher import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.Row import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.onClick +import androidx.compose.material.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.collectAsState import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.graphicsLayer +import androidx.compose.ui.input.pointer.PointerButton import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.unit.LayoutDirection -import androidx.compose.ui.unit.dp +import com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon.common.CharacterRibbonAlteration import com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon.common.CharacterRibbonPortrait import com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon.common.CharacterRibbonRoll -import com.pixelized.desktop.lwa.ui.screen.campaign.player.ribbon.common.CharacterRibbonAlteration +import com.pixelized.desktop.lwa.ui.theme.lwa +import com.pixelized.desktop.lwa.utils.extention.invert +@OptIn(ExperimentalFoundationApi::class) @Composable fun CharacterRibbon( modifier: Modifier = Modifier, layoutDirection: LayoutDirection, viewModel: CharacterRibbonViewModel, - padding: PaddingValues = PaddingValues(all = 8.dp), + padding: PaddingValues = MaterialTheme.lwa.dimen.paddingValues, onCharacterLeftClick: (characterSheetId: String) -> Unit, onCharacterRightClick: (characterSheetId: String) -> Unit, onLevelUp: (characterSheetId: String) -> Unit, @@ -36,32 +42,42 @@ fun CharacterRibbon( LazyColumn( modifier = modifier, contentPadding = padding, - verticalArrangement = Arrangement.spacedBy(space = 8.dp) + verticalArrangement = Arrangement.spacedBy( + space = MaterialTheme.lwa.dimen.paddingValue, + ), ) { items( items = characters.value, key = { it.characterSheetId }, ) { - Row( + Box( modifier = Modifier .animateItem() - .graphicsLayer { if (it.hideOverruled) this.alpha = 0.3f }, - horizontalArrangement = Arrangement.spacedBy(space = 4.dp), - ) { - Box { - CharacterRibbonPortrait( - character = it.portrait, - onCharacterLeftClick = { onCharacterLeftClick(it.characterSheetId) }, - onCharacterRightClick = { onCharacterRightClick(it.characterSheetId) }, - onLevelUp = { onLevelUp(it.characterSheetId) }, + .graphicsLayer { if (it.hideOverruled) this.alpha = 0.3f } + .onClick( + matcher = PointerMatcher.mouse(PointerButton.Primary), + enabled = it.enableDetail, + onClick = { onCharacterLeftClick(it.characterSheetId) }, ) - CharacterRibbonRoll( - value = viewModel.roll(characterSheetId = it.characterSheetId).value, + .onClick( + matcher = PointerMatcher.mouse(PointerButton.Secondary), + enabled = it.enableDetail, + onClick = { onCharacterRightClick(it.characterSheetId) }, + ), + ) { + CharacterRibbonPortrait( + character = it.portrait, + onLevelUp = { onLevelUp(it.characterSheetId) }, + ) + CompositionLocalProvider( + LocalLayoutDirection provides layoutDirection.invert + ) { + CharacterRibbonAlteration( + status = it.status, ) } - CharacterRibbonAlteration( - status = it.status, - direction = LayoutDirection.Ltr, + CharacterRibbonRoll( + value = viewModel.roll(characterSheetId = it.characterSheetId).value, ) } } diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/CharacterRibbonFactory.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/CharacterRibbonFactory.kt index 4cb9c87..4512881 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/CharacterRibbonFactory.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/CharacterRibbonFactory.kt @@ -34,11 +34,11 @@ class CharacterRibbonFactory( return CharacterRibbonUio( characterSheetId = characterSheet.id, hideOverruled = hideOverruled, + enableDetail = enableCharacterSheet, portrait = CharacterRibbonPortraitUio( portrait = alteredCharacterSheet.thumbnail, name = alteredCharacterSheet.name, levelUp = alteredCharacterSheet.shouldLevelUp, - enableDetail = enableCharacterSheet, stats = takeIf { enableCharacterStats }?.let { CharacterRibbonPortraitUio.StatsDetail( hp = alteredCharacterSheet.maxHp - alteredCharacterSheet.damage, @@ -58,7 +58,7 @@ class CharacterRibbonFactory( ), ) }.foldInto( - size = 5, + size = 4, ) } ?: emptyList(), ) diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonAlteration.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonAlteration.kt index bdb8729..5da895b 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonAlteration.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonAlteration.kt @@ -11,15 +11,16 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width import androidx.compose.material.MaterialTheme import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.Stable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.FilterQuality import androidx.compose.ui.platform.LocalLayoutDirection +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.DpSize import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp @@ -41,16 +42,14 @@ data class CharacterRibbonAlterationUio( @Composable fun CharacterRibbonAlteration( modifier: Modifier = Modifier, - size: DpSize = MaterialTheme.lwa.size.portrait.minimized, - direction: LayoutDirection, + width: Dp = MaterialTheme.lwa.dimen.portrait.minimized.width, status: List>, ) { - val currentDirection = LocalLayoutDirection.current - + val direction = LocalLayoutDirection.current Row( modifier = Modifier .animateContentSize() - .size(size = size) + .width(width = width) .then(other = modifier), horizontalArrangement = Arrangement.spacedBy(space = 4.dp), ) { @@ -59,43 +58,39 @@ fun CharacterRibbonAlteration( modifier = Modifier.animateContentSize(), verticalArrangement = Arrangement.spacedBy(space = 2.dp), ) { - CompositionLocalProvider( - LocalLayoutDirection provides LayoutDirection.Ltr - ) { - columns.forEach { - BasicTooltipLayout( - delayMillis = 0, - tooltip = it.tooltips, - tooltipPlacement = remember(currentDirection) { - TooltipPlacement.ComponentRect( - anchor = when (direction) { - LayoutDirection.Ltr -> Alignment.CenterEnd - LayoutDirection.Rtl -> Alignment.CenterStart - }, - alignment = when (direction) { - LayoutDirection.Ltr -> Alignment.CenterEnd - LayoutDirection.Rtl -> Alignment.CenterStart - }, + columns.forEach { + BasicTooltipLayout( + delayMillis = 0, + tooltip = it.tooltips, + tooltipPlacement = remember(direction) { + TooltipPlacement.ComponentRect( + anchor = when (direction) { + LayoutDirection.Ltr -> Alignment.CenterEnd + LayoutDirection.Rtl -> Alignment.CenterStart + }, + alignment = when (direction) { + LayoutDirection.Ltr -> Alignment.CenterEnd + LayoutDirection.Rtl -> Alignment.CenterStart + }, + ) + }, + content = { + AnimatedContent( + targetState = it.icon, + transitionSpec = { fadeIn() togetherWith fadeOut() }, + ) { icon -> + AsyncImage( + modifier = Modifier.size(24.dp), + model = ImageRequest.Builder(context = PlatformContext.INSTANCE) + .data(data = icon) + .size(size = 48) + .build(), + filterQuality = FilterQuality.High, + contentDescription = null, ) - }, - content = { - AnimatedContent( - targetState = it.icon, - transitionSpec = { fadeIn() togetherWith fadeOut() }, - ) { icon -> - AsyncImage( - modifier = Modifier.size(24.dp), - model = ImageRequest.Builder(context = PlatformContext.INSTANCE) - .data(data = icon) - .size(size = 48) - .build(), - filterQuality = FilterQuality.High, - contentDescription = null, - ) - } } - ) - } + } + ) } } } diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonPortrait.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonPortrait.kt index 7e2607a..983ceb0 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonPortrait.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonPortrait.kt @@ -48,7 +48,6 @@ data class CharacterRibbonPortraitUio( val portrait: String?, val name: String, val levelUp: Boolean, - val enableDetail: Boolean, val stats: StatsDetail?, ) { @Stable @@ -64,11 +63,9 @@ data class CharacterRibbonPortraitUio( @Composable fun CharacterRibbonPortrait( modifier: Modifier = Modifier, - size: DpSize = MaterialTheme.lwa.size.portrait.minimized, + size: DpSize = MaterialTheme.lwa.dimen.portrait.minimized, levelUpOffset: Dp = 9.dp, character: CharacterRibbonPortraitUio, - onCharacterLeftClick: () -> Unit, - onCharacterRightClick: () -> Unit, onLevelUp: () -> Unit, ) { val colorScheme = MaterialTheme.lwa.colorScheme @@ -78,16 +75,6 @@ fun CharacterRibbonPortrait( .size(size = size) .clip(shape = MaterialTheme.lwa.shapes.portrait) .background(color = colorScheme.elevated.base1dp) - .onClick( - matcher = PointerMatcher.mouse(PointerButton.Primary), - enabled = character.enableDetail, - onClick = onCharacterLeftClick, - ) - .onClick( - matcher = PointerMatcher.mouse(PointerButton.Secondary), - enabled = character.enableDetail, - onClick = onCharacterRightClick, - ), ) { AnimatedContent( targetState = character.portrait, diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonRoll.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonRoll.kt index 20af6b8..24753b8 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonRoll.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonRoll.kt @@ -86,7 +86,7 @@ class CharacterRibbonRollAnimation( @Composable fun CharacterRibbonRoll( modifier: Modifier = Modifier, - size: DpSize = MaterialTheme.lwa.size.portrait.minimized, + size: DpSize = MaterialTheme.lwa.dimen.portrait.minimized, value: CharacterRibbonRollUio?, ) { AnimatedContent( diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonUio.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonUio.kt index 17096ff..71467e0 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonUio.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonUio.kt @@ -6,6 +6,7 @@ import androidx.compose.runtime.Stable class CharacterRibbonUio( val characterSheetId: String, val hideOverruled: Boolean, + val enableDetail: Boolean, val portrait: CharacterRibbonPortraitUio, val status: List>, ) \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/CampaignChat.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/CampaignChat.kt index 9af413a..f83298d 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/CampaignChat.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/CampaignChat.kt @@ -20,7 +20,6 @@ import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyListState import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.rememberLazyListState -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Icon import androidx.compose.material.IconButton import androidx.compose.material.MaterialTheme @@ -80,7 +79,6 @@ fun CampaignChat( modifier: Modifier = Modifier, chatViewModel: CampaignChatViewModel = koinViewModel(), ) { - val lazyState = rememberLazyListState() val campaignLayoutScope = LocalCampaignLayoutScope.current val colorScheme = MaterialTheme.lwa.colorScheme @@ -95,8 +93,8 @@ fun CampaignChat( Row( modifier = modifier.background( - shape = remember { RoundedCornerShape(8.dp) }, - color = remember { colorScheme.elevated.base1dp.copy(alpha = 0.5f) }, + shape = MaterialTheme.lwa.shapes.chat, + color = remember { colorScheme.elevated.base4dp.copy(alpha = 0.5f) }, ), ) { AnimatedVisibility( @@ -106,8 +104,17 @@ fun CampaignChat( ) { LazyColumn( modifier = Modifier - .width(width = campaignLayoutScope.chatOverlay.value.width - (32.dp + 8.dp)) - .heightIn(min = MaterialTheme.lwa.size.portrait.minimized.height * 2 + 8.dp), + .width( + // 32.dp + 8.dp for the button and the space + width = min( + campaignLayoutScope.chatOverlay.value.width - 40.dp, + MaterialTheme.lwa.dimen.layout.chatMaxWidth + ), + ) + .heightIn( + min = MaterialTheme.lwa.dimen.portrait.minimized.height, + max = MaterialTheme.lwa.dimen.portrait.minimized.height * 2 + MaterialTheme.lwa.dimen.paddingValue, + ), state = lazyState, verticalArrangement = Arrangement.spacedBy( space = 4.dp, diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/levelup/LevelScreen.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/levelup/LevelScreen.kt index 11f1710..799d8d4 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/levelup/LevelScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/levelup/LevelScreen.kt @@ -292,7 +292,7 @@ private fun LevelUpContent( key = { it.characteristicId } ) { LevelUpCharacteristic( - modifier = Modifier.size(size = MaterialTheme.lwa.size.sheet.characteristic), + modifier = Modifier.size(size = MaterialTheme.lwa.dimen.sheet.characteristic), characteristic = it, onClick = { onCharacteristic(it) }, ) diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/levelup/items/LevelUpSubCharacteristic.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/levelup/items/LevelUpSubCharacteristic.kt index 034f108..3c7299b 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/levelup/items/LevelUpSubCharacteristic.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/levelup/items/LevelUpSubCharacteristic.kt @@ -56,7 +56,7 @@ fun LevelUpSubCharacteristic( Icon( modifier = Modifier .padding(bottom = 4.dp, end = 2.dp) - .size(size = MaterialTheme.lwa.size.sheet.subCategory), + .size(size = MaterialTheme.lwa.dimen.sheet.subCategory), painter = painterResource(characteristic.icon), contentDescription = null ) @@ -64,7 +64,7 @@ fun LevelUpSubCharacteristic( Box( modifier = Modifier .padding(bottom = 4.dp, end = 2.dp) - .size(size = MaterialTheme.lwa.size.sheet.subCategory), + .size(size = MaterialTheme.lwa.dimen.sheet.subCategory), ) } Text( diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/LwaTheme.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/LwaTheme.kt index d7fead2..3640118 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/LwaTheme.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/LwaTheme.kt @@ -9,10 +9,10 @@ import androidx.compose.runtime.compositionLocalOf import androidx.compose.runtime.remember import com.pixelized.desktop.lwa.ui.theme.color.LwaColors import com.pixelized.desktop.lwa.ui.theme.color.darkLwaColorTheme +import com.pixelized.desktop.lwa.ui.theme.dimen.LwaDimen +import com.pixelized.desktop.lwa.ui.theme.dimen.lwaDimen import com.pixelized.desktop.lwa.ui.theme.shapes.LwaShapes import com.pixelized.desktop.lwa.ui.theme.shapes.lwaShapes -import com.pixelized.desktop.lwa.ui.theme.size.LwaSize -import com.pixelized.desktop.lwa.ui.theme.size.lwaSize import com.pixelized.desktop.lwa.ui.theme.typography.LwaTypography import com.pixelized.desktop.lwa.ui.theme.typography.lwaTypography @@ -31,7 +31,7 @@ data class LwaTheme( val colorScheme: LwaColors, val typography: LwaTypography, val shapes: LwaShapes, - val size: LwaSize, + val dimen: LwaDimen, ) @Composable @@ -41,14 +41,14 @@ fun LwaTheme( val lwaColors = darkLwaColorTheme() val lwaTypography = lwaTypography(colors = lwaColors) val lwaShapes = lwaShapes() - val lwaSize = lwaSize() + val lwaDimen = lwaDimen() - val theme = remember { + val theme = remember(lwaColors, lwaTypography, lwaShapes, lwaDimen) { LwaTheme( colorScheme = lwaColors, typography = lwaTypography, shapes = lwaShapes, - size = lwaSize, + dimen = lwaDimen, ) } diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/dimen/LwaDimen.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/dimen/LwaDimen.kt new file mode 100644 index 0000000..6c7aaa1 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/dimen/LwaDimen.kt @@ -0,0 +1,65 @@ +package com.pixelized.desktop.lwa.ui.theme.dimen + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Stable +import androidx.compose.runtime.remember +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.DpSize +import androidx.compose.ui.unit.dp + +@Stable +data class LwaDimen( + val paddingValue: Dp, + val paddingValues: PaddingValues, + val layout: Layout, + val portrait: Portrait, + val sheet: Sheet, +) { + @Stable + data class Layout( + val panelWidth: Dp, + val detailWidth: Dp, + val chatMaxWidth: Dp, + ) + + @Stable + data class Portrait( + val minimized: DpSize, + ) + + @Stable + data class Sheet( + val subCategory: Dp, + val characteristic: DpSize, + ) +} + +@Composable +@Stable +fun lwaDimen( + paddingValue: Dp = 8.dp, + paddingValues: PaddingValues = PaddingValues(all = paddingValue), + portrait: LwaDimen.Portrait = LwaDimen.Portrait( + minimized = DpSize(width = 96.dp, height = 128.dp) * 1.14f, + ), + sheet: LwaDimen.Sheet = LwaDimen.Sheet( + subCategory = 14.dp, + characteristic = DpSize(width = 96.dp, height = 128.dp), + ), + layout: LwaDimen.Layout = LwaDimen.Layout( + panelWidth = portrait.minimized.width + paddingValue * 2, + detailWidth = 128.dp * 4, + chatMaxWidth = 600.dp, + ), +): LwaDimen { + return remember { + LwaDimen( + paddingValue = paddingValue, + paddingValues = paddingValues, + portrait = portrait, + sheet = sheet, + layout = layout, + ) + } +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/shapes/LwaShapes.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/shapes/LwaShapes.kt index 95f8ce7..44e379b 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/shapes/LwaShapes.kt +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/shapes/LwaShapes.kt @@ -12,6 +12,7 @@ import androidx.compose.ui.unit.dp data class LwaShapes( val base: Shapes, val portrait: Shape, + val chat: Shape, val item: Shape, val panel: Shape, val settings: Shape, @@ -23,16 +24,20 @@ data class LwaShapes( fun lwaShapes( base: Shapes = Shapes( small = RoundedCornerShape(4.dp), + medium = RoundedCornerShape(8.dp), + large = RoundedCornerShape(16.dp), ), - portrait: Shape = RoundedCornerShape(8.dp), - item: Shape = RoundedCornerShape(8.dp), - panel: Shape = RoundedCornerShape(8.dp), - settings: Shape = RoundedCornerShape(8.dp), - gameMaster: Shape = RoundedCornerShape(8.dp), + portrait: Shape = base.medium, + chat: Shape = base.medium, + item: Shape = base.medium, + panel: Shape = base.medium, + settings: Shape = base.medium, + gameMaster: Shape = base.medium, ): LwaShapes = remember { LwaShapes( base = base, portrait = portrait, + chat = chat, item = item, panel = panel, settings = settings, diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/size/LwaSize.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/size/LwaSize.kt deleted file mode 100644 index 57dd396..0000000 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/size/LwaSize.kt +++ /dev/null @@ -1,42 +0,0 @@ -package com.pixelized.desktop.lwa.ui.theme.size - -import androidx.compose.runtime.Composable -import androidx.compose.runtime.Stable -import androidx.compose.runtime.remember -import androidx.compose.ui.unit.Dp -import androidx.compose.ui.unit.DpSize -import androidx.compose.ui.unit.dp - -@Stable -data class LwaSize( - val portrait: Portrait, - val sheet: Sheet, -) { - @Stable - data class Portrait( - val minimized: DpSize, - ) - - @Stable - data class Sheet( - val subCategory: Dp, - val characteristic: DpSize, - ) -} - -@Composable -@Stable -fun lwaSize( - portrait: LwaSize.Portrait = LwaSize.Portrait( - minimized = DpSize(width = 96.dp, height = 128.dp), - ), - sheet: LwaSize.Sheet = LwaSize.Sheet( - subCategory = 14.dp, - characteristic = DpSize(width = 96.dp, height = 128.dp), - ), -) = remember { - LwaSize( - portrait = portrait, - sheet = sheet, - ) -} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/utils/extention/LayoutDirection+Invert.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/utils/extention/LayoutDirection+Invert.kt new file mode 100644 index 0000000..35ca892 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/utils/extention/LayoutDirection+Invert.kt @@ -0,0 +1,9 @@ +package com.pixelized.desktop.lwa.utils.extention + +import androidx.compose.ui.unit.LayoutDirection + +val LayoutDirection.invert: LayoutDirection + get() = when (this) { + LayoutDirection.Ltr -> LayoutDirection.Rtl + LayoutDirection.Rtl -> LayoutDirection.Ltr + } \ No newline at end of file