#582

Author: mvladic

packages/home/documentation-browser/model.tsx

@@ -397,8 +397,10 @@ class Model {
                 continue;
             }
 
-            let { label, icon, titleStyle } =
-                getComponentVisualData(componentClass);
+            let { label, icon, titleStyle } = getComponentVisualData(
+                componentClass,
+                undefined // projectStore is undefined here
+            );
 
             const componentInfoType = isProperSubclassOf(
                 componentClass.objectClass.classInfo,

packages/project-editor/core/object.ts

@@ -382,7 +382,13 @@ export interface ClassInfo {
     icon?: React.ReactNode;
     getIcon?: (object: IEezObject) => React.ReactNode;
 
-    componentHeaderColor?: string;
+    componentHeaderColor?:
+        | ((
+              object?: IEezObject,
+              componentClass?: IObjectClassInfo,
+              projectStore?: ProjectStore
+          ) => string)
+        | string;
     componentHeaderTextColor?: string;
 
     beforeLoadHook?: (

packages/project-editor/flow/component.tsx

@@ -4007,8 +4007,14 @@ function renderActionComponent(
 
     let titleStyle: React.CSSProperties | undefined;
     if (classInfo.componentHeaderColor) {
+        let backgroundColor;
+        if (typeof classInfo.componentHeaderColor == "string") {
+            backgroundColor = classInfo.componentHeaderColor;
+        } else {
+            backgroundColor = classInfo.componentHeaderColor(actionNode);
+        }
         titleStyle = {
-            backgroundColor: classInfo.componentHeaderColor
+            backgroundColor
         };
     }
 

packages/project-editor/flow/components/actions/index.tsx

@@ -21,7 +21,8 @@ import {
     getParent,
     MessageType,
     getId,
-    IMessage
+    IMessage,
+    IObjectClassInfo
 } from "project-editor/core/object";
 import {
     getAncestorOfType,
@@ -30,6 +31,7 @@ import {
     getListLabel,
     getProjectStore,
     Message,
+    ProjectStore,
     propertyNotFoundMessage,
     propertyNotSetMessage,
     Section
@@ -2106,7 +2108,28 @@ export class CallActionActionComponent extends ActionComponent {
                 <path d="M17 4a12.25 12.25 0 0 1 0 16"></path>
             </svg>
         ),
-        componentHeaderColor: "#C7E9C0",
+        componentHeaderColor: (
+            object?: CallActionActionComponent,
+            componentClass?: IObjectClassInfo,
+            projectStore?: ProjectStore
+        ) => {
+            let actionName;
+            if (object) {
+                actionName = object.action;
+                projectStore = ProjectEditor.getProjectStore(object);
+            } else if (componentClass) {
+                actionName = componentClass.props?.action;
+            }
+
+            if (projectStore && actionName) {
+                const action = findAction(projectStore.project, actionName);
+                if (action && action.implementationType == "native") {
+                    return "#9CBA93";
+                }
+            }
+
+            return "#C7E9C0";
+        },
         open: (object: CallActionActionComponent) => {
             object.open();
         },
@@ -4404,8 +4427,15 @@ export class LabelOutActionComponent extends ActionComponent {
 
         let titleStyle: React.CSSProperties | undefined;
         if (classInfo.componentHeaderColor) {
+            let backgroundColor;
+            if (typeof classInfo.componentHeaderColor == "string") {
+                backgroundColor = classInfo.componentHeaderColor;
+            } else {
+                backgroundColor = classInfo.componentHeaderColor(this);
+            }
+
             titleStyle = {
-                backgroundColor: classInfo.componentHeaderColor
+                backgroundColor
             };
         }
 
@@ -4542,8 +4572,15 @@ export class LabelInActionComponent extends ActionComponent {
 
         let titleStyle: React.CSSProperties | undefined;
         if (classInfo.componentHeaderColor) {
+            let backgroundColor;
+            if (typeof classInfo.componentHeaderColor == "string") {
+                backgroundColor = classInfo.componentHeaderColor;
+            } else {
+                backgroundColor = classInfo.componentHeaderColor(this);
+            }
+
             titleStyle = {
-                backgroundColor: classInfo.componentHeaderColor
+                backgroundColor
             };
         }
 

packages/project-editor/flow/components/components-registry.ts

@@ -222,7 +222,10 @@ export function getComponentName(componentClassName: string) {
     return name;
 }
 
-export function getComponentVisualData(componentClass: IObjectClassInfo) {
+export function getComponentVisualData(
+    componentClass: IObjectClassInfo,
+    projectStore: ProjectStore | undefined
+) {
     const classInfo = componentClass.objectClass.classInfo;
     let icon = classInfo.icon as any;
     let label = componentClass.displayName
@@ -232,10 +235,21 @@ export function getComponentVisualData(componentClass: IObjectClassInfo) {
 
     let titleStyle: React.CSSProperties | undefined;
     if (classInfo.componentHeaderColor) {
+        let backgroundColor;
+        if (typeof classInfo.componentHeaderColor == "string") {
+            backgroundColor = classInfo.componentHeaderColor;
+        } else {
+            backgroundColor = classInfo.componentHeaderColor(
+                undefined,
+                componentClass,
+                projectStore
+            );
+        }
+
         titleStyle = {
-            backgroundColor: classInfo.componentHeaderColor,
+            backgroundColor,
             color: tinycolor
-                .mostReadable(classInfo.componentHeaderColor, ["#fff", "0x333"])
+                .mostReadable(backgroundColor, ["#fff", "0x333"])
                 .toHexString()
         };
     }

packages/project-editor/flow/editor/ComponentsPalette.tsx

@@ -377,7 +377,8 @@ const PaletteItem = observer(
             });
 
             const { icon, label, titleStyle } = getComponentVisualData(
-                this.props.componentClass
+                this.props.componentClass,
+                this.context
             );
 
             return (