From 876553258967d91fb4ba35545f0e8fc5c3991067 Mon Sep 17 00:00:00 2001 From: DatLag Date: Fri, 15 Mar 2024 15:48:10 +0100 Subject: [PATCH] fix some sizing issues --- .../ui/custom/DefaultCollapsingToolbar.kt | 13 +++------- .../ui/screen/initial/InitialComponent.kt | 3 ++- .../shared/ui/screen/initial/InitialScreen.kt | 22 +++++++++++++---- .../screen/initial/InitialScreenComponent.kt | 19 ++++++++++----- .../screen/initial/favorite/FavoriteScreen.kt | 22 +++++++++++++---- .../ui/screen/initial/home/HomeScreen.kt | 24 ++++++++++++------- .../ui/screen/initial/series/SeriesScreen.kt | 3 +++ 7 files changed, 71 insertions(+), 35 deletions(-) diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/custom/DefaultCollapsingToolbar.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/custom/DefaultCollapsingToolbar.kt index 098a4847..117e0e10 100644 --- a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/custom/DefaultCollapsingToolbar.kt +++ b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/custom/DefaultCollapsingToolbar.kt @@ -22,6 +22,7 @@ import kotlin.math.abs @Composable fun DefaultCollapsingToolbar( state: CollapsingToolbarScaffoldState = rememberCollapsingToolbarScaffoldState(), + forceExpand: Boolean = false, expandedBody: @Composable CollapsingToolbarScope.(CollapsingToolbarScaffoldState) -> Unit, title: @Composable (CollapsingToolbarScaffoldState) -> Unit, navigationIcon: (@Composable (CollapsingToolbarScaffoldState) -> Unit)? = null, @@ -31,7 +32,6 @@ fun DefaultCollapsingToolbar( val reversedProgress by remember { derivedStateOf { (abs(1F - state.toolbarState.progress)) } } - var expanded by remember { mutableStateOf(false) } CollapsingToolbarScaffold( modifier = Modifier.fillMaxSize(), @@ -60,16 +60,9 @@ fun DefaultCollapsingToolbar( content() } - if (!expanded) { - rememberCoroutineScope().launchMain { + LaunchedEffect(forceExpand) { + if (forceExpand) { state.toolbarState.expand(0) - repeat(5) { - withIOContext { - delay(20) - } - state.toolbarState.expand(0) - } - expanded = true } } } \ No newline at end of file diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialComponent.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialComponent.kt index 5fa8fab8..5ff994b7 100644 --- a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialComponent.kt +++ b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialComponent.kt @@ -24,6 +24,7 @@ interface InitialComponent : Component { data class PagerItem( val label: StringResource, - val icon: ImageVector + val unselectedIcon: ImageVector, + val selectedIcon: ImageVector ) } \ No newline at end of file diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialScreen.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialScreen.kt index 7f9c6967..51722f14 100644 --- a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialScreen.kt +++ b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialScreen.kt @@ -55,7 +55,10 @@ private fun CompactScreen( NavigationBarItem( selected = selectedPage == index, icon = { - NavIcon(item) + NavIcon( + selected = selectedPage == index, + item = item + ) }, onClick = { component.selectPage(index) @@ -118,7 +121,10 @@ private fun MediumScreen( NavigationRailItem( selected = selectedPage == index, icon = { - NavIcon(item) + NavIcon( + selected = selectedPage == index, + item = item + ) }, onClick = { component.selectPage(index) @@ -165,7 +171,10 @@ private fun ExpandedScreen( NavigationDrawerItem( selected = selectedPage == index, icon = { - NavIcon(item) + NavIcon( + selected = selectedPage == index, + item = item + ) }, onClick = { component.selectPage(index) @@ -189,9 +198,12 @@ private fun ExpandedScreen( } @Composable -private fun NavIcon(item: InitialComponent.PagerItem) { +private fun NavIcon( + selected: Boolean, + item: InitialComponent.PagerItem +) { Icon( - imageVector = item.icon, + imageVector = if (selected) item.selectedIcon else item.unselectedIcon, contentDescription = stringResource(item.label), modifier = Modifier.size(24.dp) ) diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialScreenComponent.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialScreenComponent.kt index af250d40..4cbf8da4 100644 --- a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialScreenComponent.kt +++ b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/InitialScreenComponent.kt @@ -4,6 +4,10 @@ import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.material.icons.filled.Home import androidx.compose.material.icons.filled.Search +import androidx.compose.material.icons.outlined.Favorite +import androidx.compose.material.icons.outlined.FavoriteBorder +import androidx.compose.material.icons.outlined.Home +import androidx.compose.material.icons.outlined.Search import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import com.arkivanov.decompose.ComponentContext @@ -31,16 +35,19 @@ class InitialScreenComponent( override val pagerItems: List = listOf( InitialComponent.PagerItem( - SharedRes.strings.home, - Icons.Default.Home + label = SharedRes.strings.home, + unselectedIcon = Icons.Outlined.Home, + selectedIcon = Icons.Filled.Home ), InitialComponent.PagerItem( - SharedRes.strings.favorites, - Icons.Default.Favorite + label = SharedRes.strings.favorites, + unselectedIcon = Icons.Outlined.FavoriteBorder, + selectedIcon = Icons.Filled.Favorite ), InitialComponent.PagerItem( - SharedRes.strings.search, - Icons.Default.Search + label = SharedRes.strings.search, + unselectedIcon = Icons.Outlined.Search, + selectedIcon = Icons.Filled.Search ) ) diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/favorite/FavoriteScreen.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/favorite/FavoriteScreen.kt index c75917d0..dddabd25 100644 --- a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/favorite/FavoriteScreen.kt +++ b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/favorite/FavoriteScreen.kt @@ -19,8 +19,10 @@ import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.layout.onSizeChanged import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.min import com.arkivanov.decompose.extensions.compose.subscribeAsState import dev.datlag.burningseries.shared.SharedRes import dev.datlag.burningseries.shared.common.header @@ -58,20 +60,30 @@ private fun DefaultView(component: FavoriteComponent) { @Composable private fun ExpandedView(component: FavoriteComponent) { val childState by component.child.subscribeAsState() + var rowWidth by remember { mutableIntStateOf(-1) } Row( + modifier = Modifier.onSizeChanged { + rowWidth = it.width + }, horizontalArrangement = Arrangement.spacedBy(16.dp) ) { - val modifier = if (childState.child?.configuration != null) { - Modifier.weight(1F).widthIn(min = 100.dp, max = 700.dp) + val colOne = if (rowWidth > 600) { + val third = remember(rowWidth) { rowWidth.toFloat() / 3F } + if (third >= 200F) { + Modifier.widthIn(max = third.dp) + } else { + Modifier.weight(1F) + } } else { - Modifier.fillMaxWidth() + Modifier.weight(1F) } - MainView(component, modifier) + + MainView(component, colOne) childState.child?.also { (_, instance) -> Box( - modifier = Modifier.weight(2F) + modifier = Modifier.defaultMinSize(minWidth = 400.dp) ) { instance.render() } diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/home/HomeScreen.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/home/HomeScreen.kt index 35fd2505..1e0387a6 100644 --- a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/home/HomeScreen.kt +++ b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/home/HomeScreen.kt @@ -9,11 +9,10 @@ import androidx.compose.material3.* import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass -import androidx.compose.runtime.Composable -import androidx.compose.runtime.DisposableEffect -import androidx.compose.runtime.getValue +import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.onSizeChanged import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp @@ -91,20 +90,29 @@ private fun DefaultView(home: Home, component: HomeComponent) { @Composable private fun ExpandedView(home: Home, component: HomeComponent) { val childState by component.child.subscribeAsState() + var rowWidth by remember { mutableIntStateOf(-1) } Row( + modifier = Modifier.onSizeChanged { + rowWidth = it.width + }, horizontalArrangement = Arrangement.spacedBy(16.dp) ) { - val modifier = if (childState.child?.configuration != null) { - Modifier.weight(1F).widthIn(min = 100.dp, max = 700.dp) + val colOne = if (rowWidth > 600) { + val third = remember(rowWidth) { rowWidth.toFloat() / 3F } + if (third >= 200F) { + Modifier.widthIn(max = third.dp) + } else { + Modifier.weight(1F) + } } else { - Modifier.fillMaxWidth() + Modifier.weight(1F) } - MainView(home, component, modifier) + MainView(home, component, colOne) childState.child?.also { (_, instance) -> Box( - modifier = Modifier.weight(2F) + modifier = Modifier.defaultMinSize(minWidth = 400.dp) ) { instance.render() } diff --git a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/series/SeriesScreen.kt b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/series/SeriesScreen.kt index 14cd587a..47baa6a6 100644 --- a/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/series/SeriesScreen.kt +++ b/app/shared/src/commonMain/kotlin/dev/datlag/burningseries/shared/ui/screen/initial/series/SeriesScreen.kt @@ -132,8 +132,10 @@ private fun CompactScreen(component: SeriesComponent) { val title by component.title.collectAsStateWithLifecycle() val coverHref by component.coverHref.collectAsStateWithLifecycle() val commonHref by component.commonHref.collectAsStateWithLifecycle() + var expand by remember { mutableStateOf(false) } DefaultCollapsingToolbar( + forceExpand = expand, expandedBody = { state -> val scope = rememberCoroutineScope() @@ -149,6 +151,7 @@ private fun CompactScreen(component: SeriesComponent) { .parallax(0.5F) .diagonalShape(-10F, DiagonalShape.POSITION.BOTTOM), onSuccess = { success -> + expand = true SchemeTheme.update(commonHref, success.painter, scope) } )