From 2e0b4c143f0547a6932f5384e3b269fbe61bb9e5 Mon Sep 17 00:00:00 2001 From: Abdelilah El Aissaoui Date: Sat, 20 Jul 2024 16:45:28 +0200 Subject: [PATCH] Added width limit to side panes --- .../jetpackduba/gitnuro/ui/RepositoryOpen.kt | 12 +++- .../ui/components/TripleVerticalSplitPanel.kt | 65 +++++++++++++++---- 2 files changed, 63 insertions(+), 14 deletions(-) diff --git a/src/main/kotlin/com/jetpackduba/gitnuro/ui/RepositoryOpen.kt b/src/main/kotlin/com/jetpackduba/gitnuro/ui/RepositoryOpen.kt index 604c81d..c1d3627 100644 --- a/src/main/kotlin/com/jetpackduba/gitnuro/ui/RepositoryOpen.kt +++ b/src/main/kotlin/com/jetpackduba/gitnuro/ui/RepositoryOpen.kt @@ -398,7 +398,11 @@ fun MainContentView( } } }, - onFirstSizeDrag = { + onFirstSizeDragStarted = { currentWidth -> + firstWidth = currentWidth + tabViewModel.setFirstPaneWidth(currentWidth) + }, + onFirstSizeChange = { val newWidth = firstWidth + it / density if (newWidth > 150 && rebaseInteractiveState !is RebaseInteractiveState.AwaitingInteraction) { @@ -411,7 +415,7 @@ fun MainContentView( tabViewModel.persistFirstPaneWidth() } }, - onThirdSizeDrag = { + onThirdSizeChange = { val newWidth = thirdWidth - it / density if (newWidth > 150) { @@ -419,6 +423,10 @@ fun MainContentView( tabViewModel.setThirdPaneWidth(newWidth) } }, + onThirdSizeDragStarted = { currentWidth -> + thirdWidth = currentWidth + tabViewModel.setThirdPaneWidth(currentWidth) + }, onThirdSizeDragStopped = { scope.launch { tabViewModel.persistThirdPaneWidth() diff --git a/src/main/kotlin/com/jetpackduba/gitnuro/ui/components/TripleVerticalSplitPanel.kt b/src/main/kotlin/com/jetpackduba/gitnuro/ui/components/TripleVerticalSplitPanel.kt index 727505f..2dcd046 100644 --- a/src/main/kotlin/com/jetpackduba/gitnuro/ui/components/TripleVerticalSplitPanel.kt +++ b/src/main/kotlin/com/jetpackduba/gitnuro/ui/components/TripleVerticalSplitPanel.kt @@ -3,13 +3,23 @@ package com.jetpackduba.gitnuro.ui.components import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.gestures.draggable import androidx.compose.foundation.gestures.rememberDraggableState -import androidx.compose.foundation.layout.* -import androidx.compose.runtime.Composable +import androidx.compose.foundation.hoverable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsHoveredAsState +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.width +import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.input.pointer.pointerHoverIcon +import androidx.compose.ui.layout.onSizeChanged +import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.unit.dp import com.jetpackduba.gitnuro.ui.resizePointerIconEast +const val MAX_SIDE_PANE_PROPORTION = 0.4f + @Composable fun TripleVerticalSplitPanel( modifier: Modifier = Modifier, @@ -18,18 +28,35 @@ fun TripleVerticalSplitPanel( third: @Composable () -> Unit, firstWidth: Float, thirdWidth: Float, - onFirstSizeDrag: (Float) -> Unit, - onFirstSizeDragStopped: (Float) -> Unit, - onThirdSizeDrag: (Float) -> Unit, - onThirdSizeDragStopped: (Float) -> Unit, + onFirstSizeDragStarted: (Float) -> Unit, + onFirstSizeChange: (Float) -> Unit, + onFirstSizeDragStopped: () -> Unit, + onThirdSizeDragStarted: (Float) -> Unit, + onThirdSizeChange: (Float) -> Unit, + onThirdSizeDragStopped: () -> Unit, ) { + val density = LocalDensity.current.density + var screenWidth by remember { mutableStateOf(0) } + val screenWidthInDp = remember(screenWidth) { (screenWidth / density) } + + val firstWidthLimited = remember(firstWidth, screenWidthInDp) { + calcLimitedWidth(screenWidthInDp, firstWidth) + } + + val thirdWidthLimited = remember(thirdWidth, screenWidthInDp) { + calcLimitedWidth(screenWidthInDp, thirdWidth) + } + Row( modifier = modifier + .onSizeChanged { + screenWidth = it.width + } ) { if (firstWidth > 0) { Box( modifier = Modifier - .width(firstWidth.dp) + .width(firstWidthLimited.dp) ) { first() } @@ -39,11 +66,14 @@ fun TripleVerticalSplitPanel( .width(8.dp) .draggable( state = rememberDraggableState { - onFirstSizeDrag(it) + onFirstSizeChange(it) }, orientation = Orientation.Horizontal, + onDragStarted = { + onFirstSizeDragStarted(firstWidthLimited) + }, onDragStopped = { - onFirstSizeDragStopped(it) + onFirstSizeDragStopped() }, ) .pointerHoverIcon(resizePointerIconEast) @@ -63,11 +93,14 @@ fun TripleVerticalSplitPanel( .width(8.dp) .draggable( state = rememberDraggableState { - onThirdSizeDrag(it) + onThirdSizeChange(it) }, orientation = Orientation.Horizontal, + onDragStarted = { + onThirdSizeDragStarted(thirdWidthLimited) + }, onDragStopped = { - onThirdSizeDragStopped(it) + onThirdSizeDragStopped() }, ) .pointerHoverIcon(resizePointerIconEast) @@ -75,9 +108,17 @@ fun TripleVerticalSplitPanel( Box( modifier = Modifier - .width(thirdWidth.dp) + .width(thirdWidthLimited.dp) ) { third() } } +} + +private fun calcLimitedWidth(maxSize: Float, currentSize: Float): Float { + return if (currentSize > maxSize * MAX_SIDE_PANE_PROPORTION) { + maxSize * MAX_SIDE_PANE_PROPORTION + } else { + currentSize + } } \ No newline at end of file