display [NATIVE] as badge

Author: mvladic

packages/eez-studio-ui/_stylesheets/project-editor.less

@@ -506,13 +506,20 @@
         white-space: nowrap;
         text-overflow: ellipsis;
 
+        display: flex;
+        align-items: center;
+
         & > img,
         & > svg {
             flex-shrink: 0;
             height: 20px;
             object-fit: contain;
             margin-right: 4px;
         }
+
+        & > i.material-icons {
+            margin-right: 4px;
+        }
     }
 
     .EezStudio_PropertiesPanel_Body {
@@ -3803,3 +3810,17 @@
         }
     }
 }
+
+.EezStudio_ListLabel_Badge {
+    margin-left: 8px;
+    transform: translateY(-1px);
+
+    display: inline-block;
+    padding: 0px 5px;
+    font-size: 80%;
+    font-weight: bold;
+    color: rgb(238, 238, 238);
+    background-color: var(--bs-secondary);
+    white-space: nowrap;
+    border-radius: var(--bs-border-radius);
+}

packages/project-editor/core/object.ts

@@ -3,24 +3,19 @@ import { observable, makeObservable } from "mobx";
 
 import { humanize } from "eez-studio-shared/string";
 import { Rect } from "eez-studio-shared/geometry";
+import { isArray, objectClone } from "eez-studio-shared/util";
 
 import type { IDashboardComponentContext } from "eez-studio-types";
 
-import {
+import type { IResizeHandler } from "project-editor/flow/flow-interfaces";
+import type { ValueType } from "project-editor/features/variable/value-type";
+import type { Project } from "project-editor/project/project";
+import type {
     ProjectStore,
     IContextMenuContext,
-    getClassInfo,
     EezValueObject
 } from "project-editor/store";
 
-import type { IResizeHandler } from "project-editor/flow/flow-interfaces";
-
-import type { ValueType } from "project-editor/features/variable/value-type";
-import type { Project } from "project-editor/project/project";
-
-import { isArray, objectClone } from "eez-studio-shared/util";
-import { LVGLParts } from "project-editor/lvgl/lvgl-constants";
-
 ////////////////////////////////////////////////////////////////////////////////
 
 export const enum PropertyType {
@@ -323,6 +318,8 @@ export interface SerializedData {
     objectsParentPath?: string[];
 }
 
+export type LVGLParts = string;
+
 interface LVGLClassInfoProperties {
     parts: LVGLParts[] | ((object: IEezObject) => LVGLParts[]);
     defaultFlags: string;
@@ -643,6 +640,18 @@ export function isEezObject(object: any): object is IEezObject {
 
 ////////////////////////////////////////////////////////////////////////////////
 
+export function getClass(object: IEezObject) {
+    if (isArray(object)) {
+        return getPropertyInfo(object).typeClass!;
+    } else {
+        return object.constructor as EezClass;
+    }
+}
+
+export function getClassInfo(object: IEezObject): ClassInfo {
+    return getClass(object).classInfo;
+}
+
 export function findClass(className: string) {
     return classNameToEezClassMap.get(className);
 }

packages/project-editor/features/action/action.tsx

@@ -273,15 +273,22 @@ export class Action extends Flow {
             );
         },
         label: (action: Action) => {
-            const projectStore = getProjectStore(action);
-            if (
-                projectStore.projectTypeTraits.hasFlowSupport &&
-                action.implementationType == "native"
-            ) {
-                return "[NATIVE] " + action.name;
-            }
             return action.name;
         },
+        listLabel: (action: Action) => {
+            const projectStore = getProjectStore(action);
+            return (
+                <>
+                    <span>{action.name}</span>
+                    {projectStore.projectTypeTraits.hasFlowSupport &&
+                        action.implementationType == "native" && (
+                            <span className="EezStudio_ListLabel_Badge">
+                                NATIVE
+                            </span>
+                        )}
+                </>
+            );
+        },
         beforeLoadHook: (action: Action, jsObject: any) => {
             if (jsObject.page) {
                 jsObject.components = jsObject.page.components;
@@ -351,6 +358,7 @@ export class Action extends Flow {
 
             return action;
         },
+
         icon: "material:code"
     });
 

packages/project-editor/features/variable/variable.tsx

@@ -423,7 +423,8 @@ export class Variable extends EezObject {
                         variable
                     ).projectTypeTraits.isVariableTypeSupportedAsNative(
                         variable.type
-                    )
+                    ),
+                checkboxStyleSwitch: true
             },
             {
                 name: "nativeImplementationInfo",
@@ -490,13 +491,24 @@ export class Variable extends EezObject {
 
             return (
                 <>
-                    {projectStore.projectTypeTraits.hasFlowSupport &&
-                        variable.native && <span>[NATIVE] </span>}
-                    {variable.persistent && <span>[PERSISTENT] </span>}
-                    <span>{variable.name} </span>
-                    <em className="font-monospace" style={{ opacity: 0.5 }}>
+                    <span>{variable.name}</span>
+                    <em
+                        className="font-monospace"
+                        style={{ opacity: 0.5, marginLeft: 8 }}
+                    >
                         {variable.type}
                     </em>
+                    {projectStore.projectTypeTraits.hasFlowSupport &&
+                        variable.native && (
+                            <span className="EezStudio_ListLabel_Badge">
+                                NATIVE
+                            </span>
+                        )}
+                    {variable.persistent && (
+                        <span className="EezStudio_ListLabel_Badge">
+                            PERSISTENT
+                        </span>
+                    )}
                 </>
             );
         },

packages/project-editor/lvgl/LVGLStylesDefinitionProperty.tsx

@@ -8,7 +8,8 @@ import {
     getClassInfoLvglParts,
     IEezObject,
     PropertyInfo,
-    PropertyProps
+    PropertyProps,
+    LVGLParts
 } from "project-editor/core/object";
 import type { Page } from "project-editor/features/page/page";
 import { ProjectEditor } from "project-editor/project-editor-interface";
@@ -31,10 +32,7 @@ import {
 } from "project-editor/lvgl/page-runtime";
 import { ITreeNode, Tree } from "eez-studio-ui/tree";
 import { Checkbox } from "project-editor/ui-components/PropertyGrid/Checkbox";
-import {
-    LVGL_STYLE_STATES,
-    LVGLParts
-} from "project-editor/lvgl/lvgl-constants";
+import { LVGL_STYLE_STATES } from "project-editor/lvgl/lvgl-constants";
 
 type TreeNodeData =
     | {

packages/project-editor/lvgl/lvgl-constants.ts

@@ -403,8 +403,6 @@ export const LVGL_PARTS_9: { [key: string]: number } = {
     ANY: 0x0f0000 // LV_PART_ANY          Special value can be used in some functions to target all parts
 };
 
-export type LVGLParts = string;
-
 ////////////////////////////////////////////////////////////////////////////////
 
 export const LV_EVENT_CHECKED = 0x7e;

packages/project-editor/lvgl/style-helper.ts

@@ -1,4 +1,8 @@
-import { IEezObject, PropertyType } from "project-editor/core/object";
+import {
+    IEezObject,
+    LVGLParts,
+    PropertyType
+} from "project-editor/core/object";
 
 import {
     BUILT_IN_FONTS,
@@ -7,7 +11,7 @@ import {
     text_font_property_info
 } from "project-editor/lvgl/style-catalog";
 import type { LVGLPageRuntime } from "project-editor/lvgl/page-runtime";
-import { LVGLParts, lvglStates } from "project-editor/lvgl/lvgl-constants";
+import { lvglStates } from "project-editor/lvgl/lvgl-constants";
 import { getLvglParts } from "project-editor/lvgl/lvgl-versions";
 
 ////////////////////////////////////////////////////////////////////////////////

packages/project-editor/lvgl/widgets/Container.tsx

@@ -4,14 +4,14 @@ import { makeObservable } from "mobx";
 import {
     IMessage,
     MessageType,
-    makeDerivedClassInfo
+    makeDerivedClassInfo,
+    LVGLParts
 } from "project-editor/core/object";
 
 import { ProjectType } from "project-editor/project/project";
 
 import { LVGLPageRuntime } from "project-editor/lvgl/page-runtime";
 import type { LVGLBuild } from "project-editor/lvgl/build";
-import { LVGLParts } from "project-editor/lvgl/lvgl-constants";
 
 import { LVGLTabviewWidget, LVGLTabWidget, LVGLWidget } from "./internal";
 import { getDropdown, getTabview } from "../widget-common";

packages/project-editor/project/ui/PropertiesPanel.tsx

@@ -3,12 +3,13 @@ import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 
 import { ProjectContext } from "project-editor/project/context";
-import { getParent } from "project-editor/core/object";
+import { getParent, IEezObject } from "project-editor/core/object";
 import {
     EezValueObject,
     getAncestorOfType,
+    getClassInfo,
+    getLabel,
     getObjectIcon,
-    getPropertiesPanelLabel,
     isObjectExists
 } from "project-editor/store";
 import { PropertyGrid } from "project-editor/ui-components/PropertyGrid";
@@ -95,3 +96,11 @@ export const PropertiesPanel = observer(
         }
     }
 );
+
+function getPropertiesPanelLabel(object: IEezObject) {
+    const classInfo = getClassInfo(object);
+    if (classInfo.propertiesPanelLabel) {
+        return classInfo.propertiesPanelLabel(object);
+    }
+    return getLabel(object);
+}

packages/project-editor/store/helper.ts

@@ -9,7 +9,6 @@ import {
     isPropertyEnumerable,
     getParent,
     getKey,
-    EezClass,
     isSubclassOf,
     ClassInfo,
     PropertyProps,
@@ -45,6 +44,9 @@ import type { Flow } from "project-editor/flow/flow";
 
 import { isArray } from "eez-studio-shared/util";
 
+import { getClass, getClassInfo } from "project-editor/core/object";
+export { getClass, getClassInfo } from "project-editor/core/object";
+
 ////////////////////////////////////////////////////////////////////////////////
 
 export class EezValueObject extends EezObject {
@@ -308,18 +310,6 @@ export function getChildren(parent: IEezObject): IEezObject[] {
     }
 }
 
-export function getClass(object: IEezObject) {
-    if (isArray(object)) {
-        return getPropertyInfo(object).typeClass!;
-    } else {
-        return object.constructor as EezClass;
-    }
-}
-
-export function getClassInfo(object: IEezObject): ClassInfo {
-    return getClass(object).classInfo;
-}
-
 export function getObjectIcon(object: IEezObject) {
     const classInfo = getClassInfo(object);
 
@@ -369,14 +359,6 @@ export function getLabel(object: IEezObject): string {
     return getClass(object).name;
 }
 
-export function getPropertiesPanelLabel(object: IEezObject) {
-    const classInfo = getClassInfo(object);
-    if (classInfo.propertiesPanelLabel) {
-        return classInfo.propertiesPanelLabel(object);
-    }
-    return getLabel(object);
-}
-
 export function getListLabel(object: IEezObject, collapsed: boolean) {
     const listLabel = getClassInfo(object).listLabel;
     if (listLabel) {

packages/project-editor/store/output-sections.tsx

@@ -12,7 +12,8 @@ import {
     PropertyInfo,
     getParent,
     getKey,
-    EezObject
+    EezObject,
+    LVGLParts
 } from "project-editor/core/object";
 
 import {
@@ -27,7 +28,6 @@ import { ProjectStore, getLabel } from "project-editor/store";
 import { ProjectEditor } from "project-editor/project-editor-interface";
 
 import type { LVGLStylesDefinition } from "project-editor/lvgl/style-definition";
-import type { LVGLParts } from "project-editor/lvgl/lvgl-constants";
 
 import { isArray } from "eez-studio-shared/util";
 import {

packages/project-editor/store/ui-state.ts

@@ -4,12 +4,11 @@ import { observable, extendObservable, action, toJS, runInAction } from "mobx";
 import { each } from "lodash";
 
 import * as notification from "eez-studio-ui/notification";
-import { IEezObject } from "project-editor/core/object";
+import { IEezObject, LVGLParts } from "project-editor/core/object";
 import type { Component } from "project-editor/flow/component";
 import { getObjectPathAsString } from "project-editor/store/helper";
 import type { ProjectStore } from "project-editor/store";
 import { Section } from "project-editor/store/output-sections";
-import type { LVGLParts } from "project-editor/lvgl/lvgl-constants";
 import { isScrapbookItemFilePath } from "project-editor/store/scrapbook";
 
 ////////////////////////////////////////////////////////////////////////////////

packages/project-editor/ui-components/Tree.tsx

@@ -133,7 +133,7 @@ const TreeRow = observer(
                     style={{
                         paddingLeft:
                             treeAdapter.maxLevel === 0
-                                ? 0
+                                ? 4
                                 : (triangle ? 0 : 18) + level * 18
                     }}
                     onMouseUp={this.props.onMouseUp}