yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Block Grid: Add icon to allowed block types in area (#20364)

Browse Source 
* Add icon to allowed block types in area

* Adjust type with icon property

* Use umb-icon instead

* Add styling for combo list option
This commit is contained in:
Bjarne Fyrstenborg
2025-10-03 11:23:47 +02:00
committed by GitHub
parent 28fa373b0c
commit e5c942b459
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts
View File

@@ -33,7 +33,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
private _blockTypes?: Array<UmbBlockTypeWithGroupKey>;
@state()
private _blockTypesWithElementName: Array<{ type: UmbBlockTypeWithGroupKey; name: string }> = [];
private _blockTypesWithElementName: Array<{ type: UmbBlockTypeWithGroupKey; name: string; icon: string | null | undefined }> = [];
@state()
private _blockGroups: Array<UmbBlockGridTypeGroupType> = [];
@@ -51,11 +51,11 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
.map((item) => {
const blockType = this._blockTypes?.find((block) => block.contentElementTypeKey === item.unique);
if (blockType) {
return { type: blockType, name: item.name };
return { type: blockType, name: item.name, icon: item.icon };
}
return undefined;
})
.filter((x) => x !== undefined) as Array<{ type: UmbBlockTypeWithGroupKey; name: string }>;
.filter((x) => x !== undefined) as Array<{ type: UmbBlockTypeWithGroupKey; name: string; icon: string | null | undefined }>;
});
this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
@@ -193,7 +193,10 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
this._blockGroups,
(group) => group.key,
(group) =>
html`<uui-combobox-list-option .value=${group.key} ?selected=${area.groupKey === group.key}>
html`<uui-combobox-list-option
.value=${group.key}
?selected=${area.groupKey === group.key}>
<umb-icon name="icon-folder"></umb-icon>
${group.name}
</uui-combobox-list-option>`,
);
@@ -207,6 +210,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
html`<uui-combobox-list-option
.value=${block.type.contentElementTypeKey}
?selected=${area.elementTypeKey === block.type.contentElementTypeKey}>
<umb-icon name=${block.icon}></umb-icon>
${block.name}
</uui-combobox-list-option>`,
);
@@ -245,6 +249,13 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
uui-combobox strong {
padding: 0 var(--uui-size-space-1);
}
uui-combobox-list-option {
display: flex;
align-items: center;
gap: var(--uui-size-space-2);
padding: var(--uui-size-2);
}
`,
];
}