Improve DiplomacyScreen left side UX (nation icons) on really cramped screens (#11227)

This commit is contained in:
SomeTroglodyte 2024-03-03 19:03:27 +01:00 committed by GitHub
parent d99bd03277
commit 3869f8e4a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -62,7 +62,7 @@ class DiplomacyScreen(
private val leftSideTable = Table().apply { private val leftSideTable = Table().apply {
background = skinStrings.getUiBackground("DiplomacyScreen/LeftSide", tintColor = clearColor) background = skinStrings.getUiBackground("DiplomacyScreen/LeftSide", tintColor = clearColor)
} }
private val leftSideScroll = ScrollPane(leftSideTable) private val leftSideScroll = ScrollPaneWithMinSize()
private var highlightedCivButton: Table? = null private var highlightedCivButton: Table? = null
private val highlightBackground = skinStrings.getUiBackground("DiplomacyScreen/SelectedCiv", tintColor = highlightColor) private val highlightBackground = skinStrings.getUiBackground("DiplomacyScreen/SelectedCiv", tintColor = highlightColor)
@ -76,8 +76,10 @@ class DiplomacyScreen(
internal fun isNotPlayersTurn() = !GUI.isAllowedChangeState() internal fun isNotPlayersTurn() = !GUI.isAllowedChangeState()
init { init {
val splitPane = SplitPane(leftSideScroll, rightSideTable, false, skin) val splitPane = SplitPaneCenteringLeftSide()
splitPane.splitAmount = 0.2f // In cramped conditions, start the left side with enough width for nation icon and padding, but allow it to get squeezed until just the icon fits.
// (and SplitPane will squeeze even beyond the minWidth our left side supplies - when the right side has a conflicting minWidth, then both get squeezed).
splitPane.splitAmount = 0.2f.coerceAtLeast(leftSideScroll.prefWidth / stage.width)
updateLeftSideTable(selectCiv) updateLeftSideTable(selectCiv)
@ -98,6 +100,27 @@ class DiplomacyScreen(
} }
} }
private inner class ScrollPaneWithMinSize : ScrollPane(leftSideTable) {
// On cramped screens 20% default splitAmount can make the left side smaller than a nation icon.
// Also, content changes of the right side may claim too much space, pushing the split further to the left.
// This reduces some ugliness - but remember Portrait lies, its size parameter means the *inner* circle.
override fun getMinWidth() = nationIconSize * 1.1f // See PortraitNation's borderSize = size*0.1f parameter and how it's used
override fun getPrefWidth() = minWidth + 2 * nationIconPad
}
private inner class SplitPaneCenteringLeftSide : SplitPane(leftSideScroll, rightSideTable, false, skin) {
// A lot of effort for little effect, but noticeable on really cramped width.
// SplitPane supports no events at all, but this centers the nation icons whenever splitAmount changes,
// whether from touchDragged or clampSplitAmount (yes both actual methods in SplitPane).
var lastSplitAmount = splitAmount
override fun validate() {
super.validate()
if (splitAmount == lastSplitAmount) return
lastSplitAmount = splitAmount
leftSideScroll.scrollPercentX = 0.5f
}
}
private fun positionCloseButton() { private fun positionCloseButton() {
closeButton.setPosition(stage.width - closeButtonPad, stage.height - closeButtonPad, Align.topRight) closeButton.setPosition(stage.width - closeButtonPad, stage.height - closeButtonPad, Align.topRight)
} }