softui default layout supports sidebar resize

Signed-off-by: Tóth István Zoltán <[email protected]>
spxbhuhb · Sep 7, 2022 · 0d1f51a · 0d1f51a
1 parent 410c1dd
commit 0d1f51a
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 22 deletions.
diff --git a/core/core/src/jsMain/kotlin/zakadabar/core/browser/ZkElement.kt b/core/core/src/jsMain/kotlin/zakadabar/core/browser/ZkElement.kt
@@ -680,9 +680,10 @@ open class ZkElement(
         childElements -= child
         child.element.remove()
 
-        child.onPause()
-
-        child.lifeCycleState = ZkElementState.Created
+        if (child.lifeCycleState != ZkElementState.Initialized) {
+            child.onPause()
+            child.lifeCycleState = ZkElementState.Created
+        }
     }
 
     /**

diff --git a/lib/softui/src/jsMain/kotlin/zakadabar/softui/browser/layout/SuiDefaultLayout.kt b/lib/softui/src/jsMain/kotlin/zakadabar/softui/browser/layout/SuiDefaultLayout.kt
@@ -44,6 +44,7 @@ open class SuiDefaultLayout(
     open var sidebarWidth = application.loadState(SUI_SIDEBAR_WIDTH)?.toDoubleOrNull() ?: Double.NaN
         set(value) {
             field = value
+            application.saveState(SUI_SIDEBAR_WIDTH, value.toString())
             setGridColumns()
         }
 
@@ -110,6 +111,7 @@ open class SuiDefaultLayout(
             this -= separatorContainer
             this -= sideBarContainer
             this -= pageTitleContainer
+            this -= slider
             this -= contentContainer
             this -= popupSidebarContainer
             popupSidebarContainer -= sideBarContainer
@@ -130,6 +132,8 @@ open class SuiDefaultLayout(
         classList += suiLayoutStyles.defaultLayoutSmall
         contentContainer.classList += suiLayoutStyles.contentContainerSmall
 
+        setGridColumns()
+
         + headerContainer gridRow 1
         + separatorContainer gridRow 2
         + pageTitleContainer gridRow 3
@@ -148,12 +152,12 @@ open class SuiDefaultLayout(
 
         setGridColumns()
 
-        + headerContainer gridRow 1 gridColumn "1 / span 4"
-        + separatorContainer gridRow 2 gridColumn "1 / span 4"
-        + sideBarContainer gridRow "2 / span 4" gridColumn 1
-        + slider gridRow "2 / span 4" gridColumn 2
-        + pageTitleContainer gridRow 3 gridColumn 3
-        + contentContainer gridRow 4 gridColumn 3
+        + headerContainer gridRow 1 gridColumn "1 / span 5"
+        + separatorContainer gridRow 2 gridColumn "1 / span 5"
+        + sideBarContainer gridRow "2 / span 4" gridColumn 2
+        + slider gridRow "2 / span 4" gridColumn 3
+        + pageTitleContainer gridRow 3 gridColumn 4
+        + contentContainer gridRow 4 gridColumn 4
 
         sideBarContainer.show()
     }
@@ -166,20 +170,45 @@ open class SuiDefaultLayout(
     open fun onToggleSideBar() {
         if (activeMediaSize == MediaSize.Large) {
             sideBarContainer.toggle()
+            slider.toggle()
+            setGridColumns()
         } else {
             popupSidebarContainer.toggle()
         }
     }
 
     open fun setGridColumns() {
+        when (activeMediaSize) {
+            MediaSize.Large -> setGridColumnsLarge()
+            MediaSize.Small -> setGridColumnsSmall()
+            else -> return
+        }
+    }
+
+    open fun setGridColumnsLarge() {
+        val leftMargin = when {
+            ! resizeSidebar -> styles.sideBarLeftMargin
+            sideBarContainer.isShown() -> styles.sideBarLeftMargin
+            else -> 0
+        }
+
         val sidebar = when {
-            !resizeSidebar -> "max-content"
-            sidebarWidth.isNaN() ->  240.px
-            else -> sidebarWidth.px
+            ! resizeSidebar -> "max-content"
+            sidebarWidth.isNaN() -> if (sideBarContainer.isShown()) 240.px else 0.px
+            else -> if (sideBarContainer.isShown()) sidebarWidth.px else 0.px
+        }
+
+        val sliderOrSerparator = when {
+            ! resizeSidebar -> styles.gridMiddleWidth
+            sideBarContainer.isShown() -> styles.gridSliderWidth
+            else -> 0
         }
 
-        val middle = if (resizeSidebar) styles.gridSliderWidth else styles.gridMiddleWidth
+        gridTemplateColumns = "${leftMargin}px $sidebar ${sliderOrSerparator}px 1fr ${styles.contentRightMargin.px}"
+    }
 
-        gridTemplateColumns = "$sidebar ${middle}px 1fr ${styles.contentRightMargin.px}"
+    open fun setGridColumnsSmall() {
+        gridTemplateColumns = "1fr"
     }
+
 }
diff --git a/lib/softui/src/jsMain/kotlin/zakadabar/softui/browser/layout/SuiLayoutSlider.kt b/lib/softui/src/jsMain/kotlin/zakadabar/softui/browser/layout/SuiLayoutSlider.kt
@@ -14,7 +14,7 @@ import kotlin.math.min
 
 open class SuiLayoutSlider(
     val layout: SuiDefaultLayout,
-    var minSize: Double = Double.NaN,
+    var minSize: Double = layout.styles.sidebarMinWidth,
     val maxSize: Double = Double.POSITIVE_INFINITY,
 ) : ZkElement() {
 
@@ -58,10 +58,6 @@ open class SuiLayoutSlider(
     }
 
     protected fun onSliderMove(delta: Double) {
-        if (minSize.isNaN()) {
-            minSize = layout.sideBar.element.getBoundingClientRect().width
-        }
-
         val current = if (layout.sidebarWidth.isNaN()) {
             layout.sideBar.element.getBoundingClientRect().width
         } else {

diff --git a/lib/softui/src/jsMain/kotlin/zakadabar/softui/browser/theme/styles/SuiLayoutStyles.kt b/lib/softui/src/jsMain/kotlin/zakadabar/softui/browser/theme/styles/SuiLayoutStyles.kt
@@ -20,6 +20,8 @@ open class SuiLayoutStyles : ZkCssStyleSheet() {
     open var headerSeparator by cssParameter { true }
     open var separatorImage by cssParameter { "linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0))" }
 
+    var sidebarMinWidth by cssParameter { 240.0 }
+
     open fun ZkCssStyleRule.common() {
         + Display.grid
         + BoxSizing.borderBox
@@ -59,8 +61,7 @@ open class SuiLayoutStyles : ZkCssStyleSheet() {
     }
 
     open val sideBarContainer by cssClass {
-        marginLeft = sideBarLeftMargin.px
-        minWidth = 220.px
+        minWidth = sidebarMinWidth.px
         maxHeight = 100.percent
         + OverflowY.auto
         borderRight = theme.border
@@ -115,6 +116,7 @@ open class SuiLayoutStyles : ZkCssStyleSheet() {
         height = 100.percent
         maxHeight = 100.percent
         + OverflowY.hidden
+        gridTemplateRows = "${mediumHeaderHeight}px min-content min-content 1fr"
     }
 
     open val sliderContainer by cssClass {
@@ -124,13 +126,15 @@ open class SuiLayoutStyles : ZkCssStyleSheet() {
         height = 100.percent
         width = "calc(100% - 3px)"
         marginLeft = 3.px
+        borderRight = "1px solid " + theme.borderColor
 
         on(":hover") {
             backgroundColor = theme.infoColor
         }
     }
 
     open val noSelect by cssClass {
+        styles["cursor"] = "col-resize !important"
         styles["-webkit-user-select"] = "none"
         styles["-moz-user-select"] = "none"
         styles["-ms-user-select"] = "none"

diff --git a/lib/softui/src/jsMain/kotlin/zakadabar/softui/browser/theme/styles/SuiSideBarStyles.kt b/lib/softui/src/jsMain/kotlin/zakadabar/softui/browser/theme/styles/SuiSideBarStyles.kt
@@ -29,13 +29,15 @@ open class SuiSideBarStyles : SideBarStyleSpec, ZkCssStyleSheet() {
     override var sectionTextColor by cssParameter { suiTheme.textColor }
     override var sectionBorderColor by cssParameter { theme.borderColor }
 
+    var sidebarMinWidth by cssParameter { 240 }
+
     override val sidebar by cssClass {
         + Position.relative
         + BoxSizing.borderBox
         + OverflowY.auto
 
         height = 100.percent
-        minWidth = 240.px
+        minWidth = sidebarMinWidth.px
 
         fontSize = this@SuiSideBarStyles.fontSize
 
@@ -70,6 +72,7 @@ open class SuiSideBarStyles : SideBarStyleSpec, ZkCssStyleSheet() {
 
         + Cursor.pointer
 
+        maxWidth = 100.percent
         minHeight = itemMinHeight.px
         paddingRight = 8.px
         paddingLeft = 26.px
@@ -85,6 +88,8 @@ open class SuiSideBarStyles : SideBarStyleSpec, ZkCssStyleSheet() {
         flexGrow = 1.0
         color = "inherit"
         fontSize = 14.px
+
+        + Overflow.hidden
         + WhiteSpace.nowrap
         + TextOverflow.ellipsis
     }
@@ -114,6 +119,7 @@ open class SuiSideBarStyles : SideBarStyleSpec, ZkCssStyleSheet() {
 
         + Cursor.pointer
 
+        maxWidth = 100.percent
         minHeight = itemMinHeight.px
 
         hover {