fix dynamic CSS for some widget types

eez-open · Oct 14, 2024 · b070a9a · b070a9a
1 parent debb7fc
commit b070a9a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/packages/project-editor/features/style/style.tsx b/packages/project-editor/features/style/style.tsx
@@ -1071,7 +1071,8 @@ export class Style extends EezObject {
 
             cssDeclarations: computed,
             cssPreview: computed,
-            classNames: computed
+            classNames: computed,
+            dynamicCSS: observable
         });
     }
 

diff --git a/packages/project-editor/flow/components/widgets/dashboard/index.tsx b/packages/project-editor/flow/components/widgets/dashboard/index.tsx
@@ -226,7 +226,8 @@ export class TextDashboardWidget extends Widget {
                 <span
                     className={classNames(
                         this.style.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     onClick={this.onClick(flowContext)}
                     style={{ opacity: style.opacity }}
@@ -828,7 +829,8 @@ export class NumberInputDashboardWidget extends Widget {
                 <NumberInputDashboardWidgetElement
                     className={classNames(
                         this.style.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     component={this}
                     flowContext={flowContext}
@@ -975,7 +977,8 @@ export class CheckboxWidget extends Widget {
                     className={classNames(
                         "form-check",
                         this.style.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     style={{ opacity: style.opacity }}
                 >
@@ -1154,7 +1157,8 @@ export class RadioWidget extends Widget {
                     className={classNames(
                         "form-check",
                         this.style.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     style={{ opacity: style.opacity }}
                 >
@@ -1300,7 +1304,8 @@ export class SwitchDashboardWidget extends Widget {
                     className={classNames(
                         "form-check form-switch",
                         this.style.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     style={{ opacity: style.opacity }}
                 >
@@ -1993,7 +1998,8 @@ export class ButtonDashboardWidget extends Widget {
                 <button
                     className={classNames(
                         buttonStyle.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     style={{ opacity: style.opacity }}
                     disabled={!buttonEnabled}
@@ -2327,6 +2333,9 @@ const SliderDashboardWidgetElement = observer(
                         this.props.component.style.classNames,
                         this.props.component.style.getConditionalClassNames(
                             flowContext
+                        ),
+                        this.props.component.style.getDynamicCSSClassName(
+                            flowContext
                         )
                     )}
                     type="range"