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
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()

View File

@ -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
}
}