diff options
| -rw-r--r-- | src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt | 26 | ||||
| -rw-r--r-- | src/test/kotlin/test/pl/treksoft/kvision/panel/DockPanelSpec.kt | 2 |
2 files changed, 17 insertions, 11 deletions
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt index 7f1226af..ee763271 100644 --- a/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt +++ b/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt @@ -23,6 +23,7 @@ package pl.treksoft.kvision.panel import pl.treksoft.kvision.core.Component import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.utils.perc /** * Dock layout directions. @@ -75,18 +76,23 @@ open class DockPanel(classes: Set<String> = setOf(), init: (DockPanel.() -> Unit * Internal property. */ protected val mainContainer = FlexPanel( - direction = FlexDir.COLUMN, justify = FlexJustify.SPACEBETWEEN, - alignItems = FlexAlignItems.STRETCH - ) + direction = FlexDir.COLUMN, justify = FlexJustify.SPACEBETWEEN, alignItems = FlexAlignItems.STRETCH + ) { + width = 100.perc + height = 100.perc + } /** * @suppress * Internal property. */ - protected val subContainer = FlexPanel(justify = FlexJustify.SPACEBETWEEN, alignItems = FlexAlignItems.CENTER) + protected val subContainer = FlexPanel(justify = FlexJustify.SPACEBETWEEN, alignItems = FlexAlignItems.STRETCH) { + width = 100.perc + height = 100.perc + } init { this.addInternal(mainContainer) - mainContainer.add(subContainer, 2) + mainContainer.add(subContainer, 2, grow = 1, basis = 0) @Suppress("LeakingThis") init?.invoke(this) } @@ -103,27 +109,27 @@ open class DockPanel(classes: Set<String> = setOf(), init: (DockPanel.() -> Unit Side.UP -> { upComponent?.let { mainContainer.remove(it) } upComponent = child - mainContainer.add(child, 1, alignSelf = FlexAlignItems.CENTER) + mainContainer.add(child, 1, basis = 0) } Side.CENTER -> { centerComponent?.let { subContainer.remove(it) } centerComponent = child - subContainer.add(child, 2) + subContainer.add(child, 2, grow = 1, basis = 0) } Side.LEFT -> { leftComponent?.let { subContainer.remove(it) } leftComponent = child - subContainer.add(child, 1) + subContainer.add(child, 1, basis = 0) } Side.RIGHT -> { rightComponent?.let { subContainer.remove(it) } rightComponent = child - subContainer.add(child, 3) + subContainer.add(child, 3, basis = 0) } Side.DOWN -> { downComponent?.let { mainContainer.remove(it) } downComponent = child - mainContainer.add(child, 3, alignSelf = FlexAlignItems.CENTER) + mainContainer.add(child, 3, basis = 0) } } return this diff --git a/src/test/kotlin/test/pl/treksoft/kvision/panel/DockPanelSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/panel/DockPanelSpec.kt index 8704353d..de4cf43d 100644 --- a/src/test/kotlin/test/pl/treksoft/kvision/panel/DockPanelSpec.kt +++ b/src/test/kotlin/test/pl/treksoft/kvision/panel/DockPanelSpec.kt @@ -44,7 +44,7 @@ class DockPanelSpec : DomSpec { dockPanel.add(Label("mno"), Side.CENTER) val element = document.getElementById("test") assertEqualsHtml( - "<div><div style=\"display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;\"><div style=\"order: 2;\"><div style=\"display: flex; justify-content: space-between; align-items: center;\"><div style=\"order: 3;\"><span>def</span></div><div style=\"order: 1;\"><span>jkl</span></div><div style=\"order: 2;\"><span>mno</span></div></div></div><div style=\"order: 1; align-self: center;\"><span>abc</span></div><div style=\"order: 3; align-self: center;\"><span>ghi</span></div></div></div>", + "<div><div style=\"width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;\"><div style=\"order: 2; flex-grow: 1; flex-basis: 0%;\"><div style=\"width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: stretch;\"><div style=\"order: 3; flex-basis: 0%;\"><span>def</span></div><div style=\"order: 1; flex-basis: 0%;\"><span>jkl</span></div><div style=\"order: 2; flex-grow: 1; flex-basis: 0%;\"><span>mno</span></div></div></div><div style=\"order: 1; flex-basis: 0%;\"><span>abc</span></div><div style=\"order: 3; flex-basis: 0%;\"><span>ghi</span></div></div></div>", element?.innerHTML, "Should render correct dock panel" ) |