Multi-theme fix

lightningkite · Mar 12, 2024 · 0b23cdf · 0b23cdf
1 parent f53ccc7
commit 0b23cdf
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 50 deletions.
diff --git a/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/ControlsScreen.kt b/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/ControlsScreen.kt
@@ -35,6 +35,11 @@ object ControlsScreen : RockScreen {
                 h2 { content = "Buttons" }
                 row {
                     expanding - space {}
+                    centered - important - compact - compact - button {
+                        icon {
+                             source = Icon.star
+                        }
+                    }
                     button { onClick { delay(1000L) }; text { content = "Sample" }; ::enabled { booleanContent.await() } }
                     card - button { onClick { delay(1000L) }; text { content = "Card" }; ::enabled { booleanContent.await() } }
                     important - button { onClick { delay(1000L) }; text { content = "Important" }; ::enabled { booleanContent.await() } }
@@ -240,13 +245,27 @@ object ControlsScreen : RockScreen {
             col {
                 h2 { content = "Images" }
                 row {
-                    repeat(5) {
-                        image { source = ImageRemote("https://picsum.photos/seed/${it}/200/300") } in sizedBox(
+                    image { source = ImageRemote("https://picsum.photos/seed/0/200/300") } in sizedBox(
+                        SizeConstraints(
+                            width = 5.rem
+                        )
+                    )
+                    stack {
+                        image { source = ImageRemote("https://picsum.photos/seed/1/200/300") } in sizedBox(
+                            SizeConstraints(
+                                width = 5.rem
+                            )
+                        )
+                    }
+                    padded - stack {
+                        spacing = 0.px
+                        image { source = ImageRemote("https://picsum.photos/seed/2/200/300") } in sizedBox(
                             SizeConstraints(
                                 width = 5.rem
                             )
                         )
                     }
+
                 } in scrollsHorizontally
             } in card
         } in scrolls

diff --git a/example-app/src/jsMain/kotlin/com/lightningkite/mppexampleapp/PlatformSpecificScreen.js.kt b/example-app/src/jsMain/kotlin/com/lightningkite/mppexampleapp/PlatformSpecificScreen.js.kt
@@ -1,8 +1,7 @@
 package com.lightningkite.mppexampleapp
 
 import com.lightningkite.rock.dom.CSSStyleDeclaration
-import com.lightningkite.rock.models.Align
-import com.lightningkite.rock.models.dp
+import com.lightningkite.rock.models.*
 import com.lightningkite.rock.reactive.*
 import com.lightningkite.rock.views.*
 import com.lightningkite.rock.views.direct.*
@@ -53,53 +52,65 @@ actual fun ViewWriter.platformSpecific() {
 //            text("Animation Test 4")
 //            reactiveScope { exists = current.await() != 4 }
 //        }
+//    }
+
+//    col {
+//        button {
+//            text("Alter Data")
+//            var version = 2
+//            onClick {
+//                val v = version++
+//                when (v % 4) {
+//                    0 -> data.value = (0..50).map { "Item $it (v$v)" }.toList()
+//                    1 -> data.value = (0..20).map { "Item $it (v$v)" }.toList()
+//                    2 -> data.value = listOf()
+//                    3 -> data.value = (0..3).map { "Item $it (v$v)" }.toList()
+//                }
+//            }
+//        }
+//        var rv: RecyclerView? = null
+//        expanding - recyclerView {
+//            rv = this
+//            columns = 1
+//            children(data) { obs ->
+//                card - sizeConstraints(minWidth = 100.dp, minHeight = 100.dp) - stack {
+//                    text {
+//                        ::content { obs.await() }
+//                    }
+//                }
+//            }
+//        }
+//        row {
+//            button {
+//                text("Jump S")
+//                onClick {
+//                    rv!!.scrollToIndex(100, Align.Start)
+//                }
+//            }
+//            button {
+//                text("Jump C")
+//                onClick {
+//                    rv!!.scrollToIndex(100, Align.Center)
+//                }
+//            }
+//            button {
+//                text("Jump E")
+//                onClick {
+//                    rv!!.scrollToIndex(100, Align.End)
+//                }
+//            }
+//        }
 //    }
 
     col {
-        button {
-            text("Alter Data")
-            var version = 2
-            onClick {
-                val v = version++
-                when (v % 4) {
-                    0 -> data.value = (0..50).map { "Item $it (v$v)" }.toList()
-                    1 -> data.value = (0..20).map { "Item $it (v$v)" }.toList()
-                    2 -> data.value = listOf()
-                    3 -> data.value = (0..3).map { "Item $it (v$v)" }.toList()
-                }
-            }
+        important - compact - compact - button {
+            icon { source = Icon.add }
         }
-        var rv: RecyclerView? = null
-        expanding - recyclerView {
-            rv = this
-            columns = 1
-            children(data) { obs ->
-                card - sizeConstraints(minWidth = 100.dp, minHeight = 100.dp) - stack {
-                    text {
-                        ::content { obs.await() }
-                    }
-                }
-            }
+        important - compact - button {
+            icon { source = Icon.add }
         }
-        row {
-            button {
-                text("Jump S")
-                onClick {
-                    rv!!.scrollToIndex(100, Align.Start)
-                }
-            }
-            button {
-                text("Jump C")
-                onClick {
-                    rv!!.scrollToIndex(100, Align.Center)
-                }
-            }
-            button {
-                text("Jump E")
-                onClick {
-                    rv!!.scrollToIndex(100, Align.End)
-                }
-            }
+        important - button {
+            icon { source = Icon.add }
         }
     }
 }
diff --git a/library/src/commonMain/kotlin/com/lightningkite/rock/views/ViewWriter.kt b/library/src/commonMain/kotlin/com/lightningkite/rock/views/ViewWriter.kt
@@ -165,7 +165,7 @@ class ViewWriter(
             setup(element)
             afterNextElementPopList.add {
                 CalculationContextStack.useIn(element.calculationContext) {
-                    afterCopy.forEach { it(element) }
+                    afterCopy.asReversed().forEach { it(element) }
                 }
             }
             popCount = oldPop
@@ -190,7 +190,7 @@ class ViewWriter(
             stackUse(this) {
                 beforeCopy.forEach { it(this) }
                 setup()
-                afterCopy.forEach { it(this) }
+                afterCopy.asReversed().forEach { it(this) }
             }
             while (toPop > 0) {
                 val item = stack.removeLast()

diff --git a/library/src/jsMain/kotlin/com/lightningkite/rock/views/DynamicCSS.kt b/library/src/jsMain/kotlin/com/lightningkite/rock/views/DynamicCSS.kt
@@ -36,7 +36,6 @@ object DynamicCSS {
             "box-sizing" to "border-box",
             "line-height" to "unset",
             "overflow-x" to "visible",
-            "--parentSpacing" to "var(--spacing)",
         ))
         style("h1", mapOf("font-size" to "2rem"))
         style("h2", mapOf("font-size" to "1.6rem"))
@@ -399,6 +398,7 @@ object DynamicCSS {
                 "animation" to "spin 2s infinite linear !important",
             )
         )
+        style("button", mapOf("position" to "relative"))
         style(
             "button.loading > *", mapOf(
                 "opacity" to "0.15",
@@ -1084,6 +1084,11 @@ object DynamicCSS {
                 "--usePadding" to "1",
             )
         )
+        style(
+            sel(".mightTransition:not(.isRoot):not(.swapImage) > *", ".forcePadding:not(.cancelForcePadding):not(.swapImage) > *"), mapOf(
+                "--parentSpacing" to theme.spacing.value,
+            )
+        )
         style(
             if (includeMaybeTransition) sel(".mightTransition") else sel(".transition"),
             when (val it = theme.background) {

diff --git a/library/src/jsMain/kotlin/com/lightningkite/rock/views/NView.js.kt b/library/src/jsMain/kotlin/com/lightningkite/rock/views/NView.js.kt
@@ -79,7 +79,7 @@ actual var NView.spacing: Dimension
     set(value) {
         style.setProperty("--spacing", value.value)
         val cn = "spacingOf${value.value.replace(".", "_").filter { it.isLetterOrDigit() || it == '_' }}"
-        DynamicCSS.styleIfMissing(".$cn > *, .$cn > .hidingContainer > *", mapOf(
+        DynamicCSS.styleIfMissing(".$cn.$cn.$cn.$cn.$cn > *, .$cn.$cn.$cn.$cn.$cn > .hidingContainer > *", mapOf(
             "--parentSpacing" to value.value
         ))
         className = className.split(' ').filter { !it.startsWith("spacingOf") }.plus(cn).joinToString(" ")