DockPanel usability fixes

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