diff --git a/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.css b/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.css index e19d530ed..3adbc84c6 100644 --- a/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.css +++ b/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.css @@ -6,23 +6,30 @@ border-bottom: 1px solid var(--border-gray); display: flex; - flex-direction: row; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} + +.EntityHeader .Title { + flex: auto; + display: flex; align-items: center; gap: 4px; } -.EntityHeader .title { +.EntityHeader .TitleWrapper { display: flex; - align-items: center; + flex-direction: row; width: 100%; } -.EntityHeader .title > svg { +.EntityHeader .Title > svg { margin-left: 5px; cursor: pointer; } -.EntityHeader > .RightContent { +.EntityHeader .RightContent { display: flex; flex-grow: 1; justify-content: flex-end; @@ -30,7 +37,7 @@ font-size: 14px; } -.EntityHeader > .RightContent > .Dropdown.Trigger > .DropdownContainer.AddComponent > .OptionList { +.EntityHeader .RightContent > .Dropdown.Trigger > .DropdownContainer.AddComponent > .OptionList { min-width: 155px; white-space: nowrap; right: 0; @@ -38,12 +45,12 @@ max-height: max-content; } -.EntityHeader > .RightContent > .Dropdown.Trigger > .DropdownContainer.AddComponent { +.EntityHeader .RightContent > .Dropdown.Trigger > .DropdownContainer.AddComponent { background-color: transparent; border-color: transparent; } -.EntityHeader > .RightContent > .MoreOptionsMenu > .MoreOptionsContent { +.EntityHeader .RightContent > .MoreOptionsMenu > .MoreOptionsContent { min-width: 190px; } @@ -121,3 +128,36 @@ .EntityHeader.ModalOverlay .ToggleBasicViewModal .ModalBody .ModalActions .Button.primary { background-color: var(--accent-blue-07); } + +.EntityHeader .subtitle { + font-size: 12px; + color: #999; + margin-top: 2px; +} + +.EntityHeader .InstanceOf { + width: 100%; + font-size: 11px; + font-weight: 400; + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; +} + +.EntityHeader .InstanceOf .content { + display: flex; + align-items: center; + gap: 8px; +} + +.EntityHeader .InstanceOf .Chip { + font-weight: 500; + background-color: var(--base-14); + padding: 4px 8px; + border-radius: 4px; + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; +} diff --git a/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.tsx b/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.tsx index 58ef574d1..368c1e9d7 100644 --- a/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.tsx +++ b/packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.tsx @@ -26,6 +26,10 @@ import MoreOptionsMenu from '../MoreOptionsMenu' import { RemoveButton } from '../RemoveButton' import './EntityHeader.css' +import { useAppSelector } from '../../../redux/hooks' +import { selectCustomAssets } from '../../../redux/app' +import CustomAssetIcon from '../../Icons/CustomAsset' +import { Container } from '../../Container' interface ModalState { isOpen: boolean @@ -60,11 +64,19 @@ export default React.memo( const [label, setLabel] = useState() const [modal, setModal] = useState({ isOpen: false }) const [editMode, setEditMode] = useState(false) + const [instanceOf, setInstanceOf] = useState(null) + const customAssets = useAppSelector(selectCustomAssets) useEffect(() => { setLabel(getLabel(sdk, entity)) }, [sdk, entity]) + useEffect(() => { + const customAssetId = sdk.components.CustomAsset.getOrNull(entity)?.assetId || null + const customAsset = customAssets.find((asset) => asset.id === customAssetId) + setInstanceOf(customAsset?.name || null) + }, [customAssets, sdk, entity]) + const handleUpdate = (event: SdkContextEvents['change']) => { if (event.entity === entity && event.component === sdk.components.Name) { setLabel(getLabel(sdk, entity)) @@ -419,29 +431,41 @@ export default React.memo( return (
-
- {!editMode ? ( - <> - {label} - {!editMode && !isRoot(entity) ? : null} - - ) : typeof label === 'string' ? ( - - ) : null} -
-
- {componentOptions.some((option) => !option.header) ? ( - } /> - ) : null} - {!isRoot(entity) ? ( - - {hasConfigComponent ? renderToggleAdvanceMode() : <>} - - Delete Entity - - - ) : null} +
+
+ {instanceOf && } + {!editMode ? ( + <> + {label} + {!editMode && !isRoot(entity) ? : null} + + ) : typeof label === 'string' ? ( + + ) : null} +
+
+ {componentOptions.some((option) => !option.header) ? ( + } /> + ) : null} + {!isRoot(entity) ? ( + + {hasConfigComponent ? renderToggleAdvanceMode() : <>} + + Delete Entity + + + ) : null} +
+ {instanceOf && ( + + Instance of: + + + {instanceOf} + + + )} (({ sdk, value }) => { + const customAssets = useAppSelector(selectCustomAssets) const isSmart = useMemo( () => sdk.components.Actions.has(value) || @@ -21,7 +24,14 @@ const HierarchyIcon = withSdk<{ value: Entity }>(({ sdk, value }) => { [sdk, value] ) - const isCustom = useMemo(() => sdk.components.CustomAsset.has(value), [sdk, value]) + const isCustom = useMemo(() => { + if (sdk.components.CustomAsset.has(value)) { + const { assetId } = sdk.components.CustomAsset.get(value) + const customAsset = customAssets.find((asset) => asset.id === assetId) + return !!customAsset + } + return false + }, [sdk, value, customAssets]) const isTile = useMemo(() => sdk.components.Tile.has(value), [sdk, value]) @@ -39,12 +49,12 @@ const HierarchyIcon = withSdk<{ value: Entity }>(({ sdk, value }) => { return } else if (isCustom) { return + } else if (isGroup) { + return } else if (isSmart) { return } else if (isTile) { return - } else if (isGroup) { - return } else { return } diff --git a/packages/@dcl/inspector/src/lib/sdk/operations/add-child.ts b/packages/@dcl/inspector/src/lib/sdk/operations/add-child.ts index d59c7db9e..8729b27ca 100644 --- a/packages/@dcl/inspector/src/lib/sdk/operations/add-child.ts +++ b/packages/@dcl/inspector/src/lib/sdk/operations/add-child.ts @@ -25,7 +25,7 @@ export function generateUniqueName(engine: IEngine, Name: NameComponent, value: const nodes = getNodes(engine) let isFirst = true - let max = 0 + let max = 1 for (const $ of nodes) { const name = (Name.getOrNull($.entity)?.value || '').toLowerCase() if (pattern.test(name)) {