aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt26
-rw-r--r--src/test/kotlin/test/pl/treksoft/kvision/panel/DockPanelSpec.kt2
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"
)