From 1f0bb6a83eb91a766f87877f87ef50a50153e841 Mon Sep 17 00:00:00 2001 From: Joseph Ivie Date: Fri, 15 Mar 2024 10:20:27 -0600 Subject: [PATCH] Dropdown fix --- .../src/main/AndroidManifest.xml | 1 - .../mppexampleapp/RecyclerViewScreen.kt | 2 + .../docs/ViewPagerElementScreen.kt | 2 +- library/library.podspec | 2 +- .../rock/views/direct/Select.android.kt | 41 ++++--------------- .../lightningkite/rock/views/DynamicCSS.kt | 16 ++++---- .../com/lightningkite/rock/views/NView.js.kt | 2 + .../rock/views/direct/RadioToggleButton.js.kt | 2 +- .../rock/views/direct/RecyclerView.js.kt | 1 + .../rock/views/direct/ToggleButton.js.kt | 2 +- 10 files changed, 24 insertions(+), 47 deletions(-) diff --git a/example-app-android/src/main/AndroidManifest.xml b/example-app-android/src/main/AndroidManifest.xml index 590ab933..3111099f 100644 --- a/example-app-android/src/main/AndroidManifest.xml +++ b/example-app-android/src/main/AndroidManifest.xml @@ -15,7 +15,6 @@ android:exported="true"> - diff --git a/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/RecyclerViewScreen.kt b/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/RecyclerViewScreen.kt index c2ab1147..da4c7f3c 100644 --- a/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/RecyclerViewScreen.kt +++ b/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/RecyclerViewScreen.kt @@ -3,6 +3,7 @@ package com.lightningkite.mppexampleapp import com.lightningkite.rock.* import com.lightningkite.rock.models.Align import com.lightningkite.rock.models.SizeConstraints +import com.lightningkite.rock.models.px import com.lightningkite.rock.models.rem import com.lightningkite.rock.navigation.RockScreen import com.lightningkite.rock.reactive.* @@ -52,6 +53,7 @@ object RecyclerViewScreen : RockScreen { } recyclerView { recyclerView = this + spacing = 0.5.rem // columns = 2 children(items) { themeFromLast { theme -> diff --git a/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/docs/ViewPagerElementScreen.kt b/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/docs/ViewPagerElementScreen.kt index c8e4aafd..3339e154 100644 --- a/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/docs/ViewPagerElementScreen.kt +++ b/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/docs/ViewPagerElementScreen.kt @@ -15,7 +15,7 @@ object ViewPagerElementScreen: DocScreen { text("You can use a view pager to create an element that scrolls horizontally displaying pages.") text("This is frequently used for browsing photos or advertising features.") text("V2") - val currentPage = Property(0) + val currentPage = Property(9) val items = Constant((1..30).toList()) example(""" val currentPage = Property(0) diff --git a/library/library.podspec b/library/library.podspec index d53d258a..3d3b354a 100644 --- a/library/library.podspec +++ b/library/library.podspec @@ -39,7 +39,7 @@ Pod::Spec.new do |spec| fi set -ev REPO_ROOT="$PODS_TARGET_SRCROOT" - "$REPO_ROOT/../gradlew" -p "$REPO_ROOT" $KOTLIN_PROJECT_PATH:syncFramework \ + "$REPO_ROOT/../../picme-frontend/gradlew" -p "$REPO_ROOT" $KOTLIN_PROJECT_PATH:syncFramework \ -Pkotlin.native.cocoapods.platform=$PLATFORM_NAME \ -Pkotlin.native.cocoapods.archs="$ARCHS" \ -Pkotlin.native.cocoapods.configuration="$CONFIGURATION" diff --git a/library/src/androidMain/kotlin/com/lightningkite/rock/views/direct/Select.android.kt b/library/src/androidMain/kotlin/com/lightningkite/rock/views/direct/Select.android.kt index 7fb4de86..1bb1a2b8 100644 --- a/library/src/androidMain/kotlin/com/lightningkite/rock/views/direct/Select.android.kt +++ b/library/src/androidMain/kotlin/com/lightningkite/rock/views/direct/Select.android.kt @@ -1,6 +1,8 @@ package com.lightningkite.rock.views.direct import android.content.Context +import android.content.res.ColorStateList +import android.graphics.Color import android.graphics.PorterDuff import android.graphics.PorterDuffColorFilter import android.widget.TextView @@ -45,7 +47,7 @@ actual fun Select.bind( return convertView } else { with(native.viewWriter) { - padded - text { + text { content = render(list[position]) } } @@ -98,8 +100,10 @@ actual fun Select.bind( } @ViewDsl -actual inline fun ViewWriter.selectActual(crossinline setup: Select.() -> Unit) { +actual fun ViewWriter.selectActual(setup: Select.() -> Unit) { return viewElement(factory = ::NSelect, wrapper = ::Select, setup = { + native.viewWriter = newViews() + setup(this) handleThemeControl(native, viewLoads = true, customDrawable = { // LayerDrawable has poor interfaces for dynamically adding layers, so we have to do this to be able to // safely call setDrawable(1, ...) later @@ -113,7 +117,7 @@ actual inline fun ViewWriter.selectActual(crossinline setup: Select.() -> Unit) setDrawable(1, dropdown) setLayerGravity(1, Gravity.END or Gravity.CENTER_VERTICAL) setLayerInsetEnd(1, it.spacing.value.toInt()) - },background = { + }, foreground = { theme, nselect -> nselect.setPaddingAll(0) }, background = { native.setPopupBackgroundDrawable(it.backgroundDrawable(8.dp.value, true)) }) { native.viewWriter = newViews() @@ -121,34 +125,3 @@ actual inline fun ViewWriter.selectActual(crossinline setup: Select.() -> Unit) } }) } - - -data class SpinnerTextStyle( - val textColor: Int, - val textSize: Float, - val paddingLeft: Int, - val paddingTop: Int, - val paddingRight: Int, - val paddingBottom: Int, - val typeface: Typeface?, - val letterSpacing: Float?, - val lineSpacingMultiplier: Float?, - val gravity: Int, -) { - fun apply(to: TextView) { - to.gravity = gravity - to.setTextColor(textColor) - to.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize) - to.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom) - letterSpacing?.let { to.letterSpacing = it } - lineSpacingMultiplier?.let { to.setLineSpacing(0f, it) } - typeface?.let { to.typeface = it } - } -} - -var Spinner.spinnerTextStyle: SpinnerTextStyle? - get() = spinnerTextStyleMap[this] - set(value) { - spinnerTextStyleMap[this] = value - } -private val spinnerTextStyleMap = WeakHashMap() diff --git a/library/src/jsMain/kotlin/com/lightningkite/rock/views/DynamicCSS.kt b/library/src/jsMain/kotlin/com/lightningkite/rock/views/DynamicCSS.kt index a30c7684..e5476abf 100644 --- a/library/src/jsMain/kotlin/com/lightningkite/rock/views/DynamicCSS.kt +++ b/library/src/jsMain/kotlin/com/lightningkite/rock/views/DynamicCSS.kt @@ -165,7 +165,7 @@ object DynamicCSS { style( ".toggle-button", mapOf( "display" to "flex", - "align-items" to "center", + "align-items" to "stretch", ) ) @@ -788,7 +788,7 @@ object DynamicCSS { ) style( - ".notransition *", mapOf( + ".notransition, .notransition *", mapOf( "transition" to "none !important" ) ) @@ -835,17 +835,17 @@ object DynamicCSS { style(".contentScroll-V > *", mapOf( "position" to "absolute", "max-height" to "unset", - "width" to "calc(100% - var(--spacing, 0px) * var(--usePadding, 0) * 2)", - "margin-left" to "calc(var(--spacing, 0px) * var(--usePadding, 0))", - "margin-right" to "calc(var(--spacing, 0px) * var(--usePadding, 0))", + "width" to "calc(100% - var(--parentSpacing, 0px) * var(--usePadding, 0) * 2)", + "margin-left" to "calc(var(--parentSpacing, 0px) * var(--usePadding, 0))", + "margin-right" to "calc(var(--parentSpacing, 0px) * var(--usePadding, 0))", "overflow-anchor" to "revert", )) style(".contentScroll-H > *", mapOf( "max-width" to "unset", "position" to "absolute", - "height" to "calc(100% - var(--spacing, 0px) * var(--usePadding, 0) * 2)", - "margin-top" to "calc(var(--spacing, 0px) * var(--usePadding, 0))", - "margin-bottom" to "calc(var(--spacing, 0px) * var(--usePadding, 0))", + "height" to "calc(100% - var(--parentSpacing, 0px) * var(--usePadding, 0) * 2)", + "margin-top" to "calc(var(--parentSpacing, 0px) * var(--usePadding, 0))", + "margin-bottom" to "calc(var(--parentSpacing, 0px) * var(--usePadding, 0))", "overflow-anchor" to "revert", )) style(".contentScroll-V > .recyclerViewGridSub", mapOf( 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 index eea5273f..ad1f96ab 100644 --- a/library/src/jsMain/kotlin/com/lightningkite/rock/views/NView.js.kt +++ b/library/src/jsMain/kotlin/com/lightningkite/rock/views/NView.js.kt @@ -46,7 +46,9 @@ actual inline fun NView.withoutAnimation(action: () -> Unit) { } try { animationsEnabled = false + clientWidth classList.add("notransition") + clientWidth action() } finally { offsetHeight // force layout calculation diff --git a/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/RadioToggleButton.js.kt b/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/RadioToggleButton.js.kt index 416dc753..4e874a01 100644 --- a/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/RadioToggleButton.js.kt +++ b/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/RadioToggleButton.js.kt @@ -25,7 +25,7 @@ actual inline fun ViewWriter.radioToggleButtonActual(crossinline setup: RadioTog this.style.display = "none" } themedElementClickable("span") { - classList.add("checkResponsive") + classList.add("checkResponsive", "rock-stack") tabIndex = 0 setup(RadioToggleButton(this)) addEventListener("keydown", { ev -> diff --git a/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/RecyclerView.js.kt b/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/RecyclerView.js.kt index 3def4e58..9dcfa743 100644 --- a/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/RecyclerView.js.kt +++ b/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/RecyclerView.js.kt @@ -689,6 +689,7 @@ class RecyclerController2( fun ready() { lock("ready") { + spacing = window.getComputedStyle(root).columnGap.removeSuffix("px").toDouble().toInt() populate() forceCenteringHandler() } diff --git a/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/ToggleButton.js.kt b/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/ToggleButton.js.kt index fd4af984..ee1df8f3 100644 --- a/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/ToggleButton.js.kt +++ b/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/ToggleButton.js.kt @@ -24,7 +24,7 @@ actual inline fun ViewWriter.toggleButtonActual(crossinline setup: ToggleButton. this.style.display = "none" } themedElementClickable("span") { - classList.add("checkResponsive") + classList.add("checkResponsive", "rock-stack") tabIndex = 0 setup(ToggleButton(this)) addEventListener("keydown", { ev ->