diff --git a/packages/eez-studio-ui/_stylesheets/project-editor.less b/packages/eez-studio-ui/_stylesheets/project-editor.less
index 1e54672e..cd852b33 100644
--- a/packages/eez-studio-ui/_stylesheets/project-editor.less
+++ b/packages/eez-studio-ui/_stylesheets/project-editor.less
@@ -506,6 +506,9 @@
white-space: nowrap;
text-overflow: ellipsis;
+ display: flex;
+ align-items: center;
+
& > img,
& > svg {
flex-shrink: 0;
@@ -513,6 +516,10 @@
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);
+}
diff --git a/packages/project-editor/core/object.ts b/packages/project-editor/core/object.ts
index 3e3d551f..1a2c1b6c 100644
--- a/packages/project-editor/core/object.ts
+++ b/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);
}
diff --git a/packages/project-editor/features/action/action.tsx b/packages/project-editor/features/action/action.tsx
index c2f6a487..9d4f66ce 100644
--- a/packages/project-editor/features/action/action.tsx
+++ b/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 (
+ <>
+ {action.name}
+ {projectStore.projectTypeTraits.hasFlowSupport &&
+ action.implementationType == "native" && (
+
+ NATIVE
+
+ )}
+
+ );
+ },
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"
});
diff --git a/packages/project-editor/features/variable/variable.tsx b/packages/project-editor/features/variable/variable.tsx
index 40a9e4fe..c87ab022 100644
--- a/packages/project-editor/features/variable/variable.tsx
+++ b/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 && [NATIVE] }
- {variable.persistent && [PERSISTENT] }
- {variable.name}
-
+ {variable.name}
+
{variable.type}
+ {projectStore.projectTypeTraits.hasFlowSupport &&
+ variable.native && (
+
+ NATIVE
+
+ )}
+ {variable.persistent && (
+
+ PERSISTENT
+
+ )}
);
},
diff --git a/packages/project-editor/lvgl/LVGLStylesDefinitionProperty.tsx b/packages/project-editor/lvgl/LVGLStylesDefinitionProperty.tsx
index aa3eb30d..19b65de4 100644
--- a/packages/project-editor/lvgl/LVGLStylesDefinitionProperty.tsx
+++ b/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 =
| {
diff --git a/packages/project-editor/lvgl/lvgl-constants.ts b/packages/project-editor/lvgl/lvgl-constants.ts
index 71db22d9..17901140 100644
--- a/packages/project-editor/lvgl/lvgl-constants.ts
+++ b/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;
diff --git a/packages/project-editor/lvgl/style-helper.ts b/packages/project-editor/lvgl/style-helper.ts
index f0aa6dec..5114e21e 100644
--- a/packages/project-editor/lvgl/style-helper.ts
+++ b/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";
////////////////////////////////////////////////////////////////////////////////
diff --git a/packages/project-editor/lvgl/widgets/Container.tsx b/packages/project-editor/lvgl/widgets/Container.tsx
index 89e35af3..507a2963 100644
--- a/packages/project-editor/lvgl/widgets/Container.tsx
+++ b/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";
diff --git a/packages/project-editor/project/ui/PropertiesPanel.tsx b/packages/project-editor/project/ui/PropertiesPanel.tsx
index deb071d8..7f286ab0 100644
--- a/packages/project-editor/project/ui/PropertiesPanel.tsx
+++ b/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);
+}
diff --git a/packages/project-editor/store/helper.ts b/packages/project-editor/store/helper.ts
index 55f64173..3f60d747 100644
--- a/packages/project-editor/store/helper.ts
+++ b/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) {
diff --git a/packages/project-editor/store/output-sections.tsx b/packages/project-editor/store/output-sections.tsx
index ad2daebf..b35ad34a 100644
--- a/packages/project-editor/store/output-sections.tsx
+++ b/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 {
diff --git a/packages/project-editor/store/ui-state.ts b/packages/project-editor/store/ui-state.ts
index ba67bce0..5cca691c 100644
--- a/packages/project-editor/store/ui-state.ts
+++ b/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";
////////////////////////////////////////////////////////////////////////////////
diff --git a/packages/project-editor/ui-components/Tree.tsx b/packages/project-editor/ui-components/Tree.tsx
index 3d7a52fe..39293bc0 100644
--- a/packages/project-editor/ui-components/Tree.tsx
+++ b/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}