Added width limit to side panes

This commit is contained in:
Abdelilah El Aissaoui 2024-07-20 16:45:28 +02:00
parent 5c5a10262f
commit 2e0b4c143f
No known key found for this signature in database
GPG Key ID: 7587FC860F594869
2 changed files with 63 additions and 14 deletions

View File

@ -398,7 +398,11 @@ fun MainContentView(
} }
} }
}, },
onFirstSizeDrag = { onFirstSizeDragStarted = { currentWidth ->
firstWidth = currentWidth
tabViewModel.setFirstPaneWidth(currentWidth)
},
onFirstSizeChange = {
val newWidth = firstWidth + it / density val newWidth = firstWidth + it / density
if (newWidth > 150 && rebaseInteractiveState !is RebaseInteractiveState.AwaitingInteraction) { if (newWidth > 150 && rebaseInteractiveState !is RebaseInteractiveState.AwaitingInteraction) {
@ -411,7 +415,7 @@ fun MainContentView(
tabViewModel.persistFirstPaneWidth() tabViewModel.persistFirstPaneWidth()
} }
}, },
onThirdSizeDrag = { onThirdSizeChange = {
val newWidth = thirdWidth - it / density val newWidth = thirdWidth - it / density
if (newWidth > 150) { if (newWidth > 150) {
@ -419,6 +423,10 @@ fun MainContentView(
tabViewModel.setThirdPaneWidth(newWidth) tabViewModel.setThirdPaneWidth(newWidth)
} }
}, },
onThirdSizeDragStarted = { currentWidth ->
thirdWidth = currentWidth
tabViewModel.setThirdPaneWidth(currentWidth)
},
onThirdSizeDragStopped = { onThirdSizeDragStopped = {
scope.launch { scope.launch {
tabViewModel.persistThirdPaneWidth() tabViewModel.persistThirdPaneWidth()

View File

@ -3,13 +3,23 @@ package com.jetpackduba.gitnuro.ui.components
import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.draggable import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.gestures.rememberDraggableState import androidx.compose.foundation.gestures.rememberDraggableState
import androidx.compose.foundation.layout.* import androidx.compose.foundation.hoverable
import androidx.compose.runtime.Composable 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.Modifier
import androidx.compose.ui.input.pointer.pointerHoverIcon 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 androidx.compose.ui.unit.dp
import com.jetpackduba.gitnuro.ui.resizePointerIconEast import com.jetpackduba.gitnuro.ui.resizePointerIconEast
const val MAX_SIDE_PANE_PROPORTION = 0.4f
@Composable @Composable
fun TripleVerticalSplitPanel( fun TripleVerticalSplitPanel(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
@ -18,18 +28,35 @@ fun TripleVerticalSplitPanel(
third: @Composable () -> Unit, third: @Composable () -> Unit,
firstWidth: Float, firstWidth: Float,
thirdWidth: Float, thirdWidth: Float,
onFirstSizeDrag: (Float) -> Unit, onFirstSizeDragStarted: (Float) -> Unit,
onFirstSizeDragStopped: (Float) -> Unit, onFirstSizeChange: (Float) -> Unit,
onThirdSizeDrag: (Float) -> Unit, onFirstSizeDragStopped: () -> Unit,
onThirdSizeDragStopped: (Float) -> 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( Row(
modifier = modifier modifier = modifier
.onSizeChanged {
screenWidth = it.width
}
) { ) {
if (firstWidth > 0) { if (firstWidth > 0) {
Box( Box(
modifier = Modifier modifier = Modifier
.width(firstWidth.dp) .width(firstWidthLimited.dp)
) { ) {
first() first()
} }
@ -39,11 +66,14 @@ fun TripleVerticalSplitPanel(
.width(8.dp) .width(8.dp)
.draggable( .draggable(
state = rememberDraggableState { state = rememberDraggableState {
onFirstSizeDrag(it) onFirstSizeChange(it)
}, },
orientation = Orientation.Horizontal, orientation = Orientation.Horizontal,
onDragStarted = {
onFirstSizeDragStarted(firstWidthLimited)
},
onDragStopped = { onDragStopped = {
onFirstSizeDragStopped(it) onFirstSizeDragStopped()
}, },
) )
.pointerHoverIcon(resizePointerIconEast) .pointerHoverIcon(resizePointerIconEast)
@ -63,11 +93,14 @@ fun TripleVerticalSplitPanel(
.width(8.dp) .width(8.dp)
.draggable( .draggable(
state = rememberDraggableState { state = rememberDraggableState {
onThirdSizeDrag(it) onThirdSizeChange(it)
}, },
orientation = Orientation.Horizontal, orientation = Orientation.Horizontal,
onDragStarted = {
onThirdSizeDragStarted(thirdWidthLimited)
},
onDragStopped = { onDragStopped = {
onThirdSizeDragStopped(it) onThirdSizeDragStopped()
}, },
) )
.pointerHoverIcon(resizePointerIconEast) .pointerHoverIcon(resizePointerIconEast)
@ -75,9 +108,17 @@ fun TripleVerticalSplitPanel(
Box( Box(
modifier = Modifier modifier = Modifier
.width(thirdWidth.dp) .width(thirdWidthLimited.dp)
) { ) {
third() third()
} }
} }
} }
private fun calcLimitedWidth(maxSize: Float, currentSize: Float): Float {
return if (currentSize > maxSize * MAX_SIDE_PANE_PROPORTION) {
maxSize * MAX_SIDE_PANE_PROPORTION
} else {
currentSize
}
}