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

set icons

Browse Source
This commit is contained in:
Lone Iversen
2024-03-21 15:02:07 +01:00
parent 9936e5754c
commit 9e4fb4c4ec
7 changed files with 49 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Umbraco.Web.UI.Client/src/packages/data-type/collection/repository/data-type-collection.server.data-source.ts
View File

@@ -5,6 +5,7 @@ import { DataTypeResource } from '@umbraco-cms/backoffice/external/backend-api';
import type { UmbCollectionDataSource } from '@umbraco-cms/backoffice/collection';
import type { DataTypeItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { type ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
/**
* A data source that fetches the data-type collection data from the server.
@@ -14,6 +15,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
*/
export class UmbDataTypeCollectionServerDataSource implements UmbCollectionDataSource<UmbDataTypeItemModel> {
#host: UmbControllerHost;
#manifestPropertyEditorUis: Array<ManifestPropertyEditorUi> = [];
/**
* Creates an instance of UmbDataTypeCollectionServerDataSource.
@@ -22,6 +24,12 @@ export class UmbDataTypeCollectionServerDataSource implements UmbCollectionDataS
*/
constructor(host: UmbControllerHost) {
this.#host = host;
umbExtensionsRegistry
.byType('propertyEditorUi')
.subscribe((manifestPropertyEditorUIs) => {
this.#manifestPropertyEditorUis = manifestPropertyEditorUIs;
})
.unsubscribe();
}
/**
@@ -48,6 +56,7 @@ export class UmbDataTypeCollectionServerDataSource implements UmbCollectionDataS
unique: item.id,
name: item.name,
propertyEditorUiAlias: item.editorUiAlias!,
icon: this.#manifestPropertyEditorUis.find((ui) => ui.alias === item.editorUiAlias!)?.meta.icon,
};
return dataTypeDetail;

2
src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
View File

@@ -78,8 +78,6 @@ export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) {
this.#editDataTypeModal?.open({}, 'edit/' + this._ids![0]);
}}
standalone>
<!-- TODO: Get the icon from property editor UI -->
<uui-icon name="${'document'}" slot="icon"></uui-icon>
<uui-action-bar slot="actions">
<uui-button label="Change" .href=${this._createRoute}></uui-button>
</uui-action-bar>

26
src/Umbraco.Web.UI.Client/src/packages/data-type/components/ref-data-type/ref-data-type.element.ts
View File

@@ -2,6 +2,8 @@ import { UmbDataTypeDetailRepository } from '../../repository/detail/data-type-d
import { UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';
import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UmbIconRegistry } from '@umbraco-cms/backoffice/icon';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
/**
* @element umb-ref-data-type
@@ -10,8 +12,27 @@ import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
*/
@customElement('umb-ref-data-type')
export class UmbRefDataTypeElement extends UmbElementMixin(UUIRefNodeElement) {
protected fallbackIcon =
'<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M142.212 397.267l106.052-48.024L398.479 199.03l-26.405-26.442-90.519 90.517-15.843-15.891 90.484-90.486-16.204-16.217-150.246 150.243-47.534 106.513zm74.904-100.739l23.285-23.283 3.353 22.221 22.008 3.124-23.283 23.313-46.176 20.991 20.813-46.366zm257.6-173.71L416.188 64.3l-49.755 49.785 58.504 58.503 49.779-49.77zM357.357 300.227h82.826v116.445H68.929V300.227h88.719v-30.648H38.288v177.733h432.537V269.578H357.357v30.649z"></path></svg>';
#iconRegistry = new UmbIconRegistry(); // TODO Can we access the icon registry from UmbAppElement?
//icon-circle-dotted.svg
#svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M255.981 440.734c-4.422 0-8.895-.159-13.293-.471l1.682-23.62c15.395 1.095 31.076-.014 46.053-3.277l5.039 23.137a185.943 185.943 0 0 1-39.481 4.231zm-43.253-5.094a183.61 183.61 0 0 1-49.174-19.657l11.864-20.49a159.927 159.927 0 0 0 42.833 17.123l-5.523 23.024zm111.734-8.02l-8.781-21.991a160.553 160.553 0 0 0 39.949-23.097l14.666 18.593a184.376 184.376 0 0 1-45.834 26.495zm-185.815-28.926a185.575 185.575 0 0 1-35.652-39.114l19.596-13.293a161.956 161.956 0 0 0 31.105 34.125l-15.049 18.282zm253.834-18.216l-17.492-15.96a161.321 161.321 0 0 0 25.924-38.192l21.297 10.353a184.986 184.986 0 0 1-29.729 43.799zM88.097 333.183a183.381 183.381 0 0 1-14.977-50.791l23.438-3.355a159.869 159.869 0 0 0 13.047 44.243l-21.508 9.903zm345.082-24.798l-22.711-6.705c4.355-14.761 6.566-30.131 6.566-45.679h23.678c0 17.818-2.533 35.444-7.533 52.384zM94.96 252.634l-23.672-.483c.365-17.809 3.266-35.378 8.625-52.224l22.566 7.181c-4.671 14.677-7.203 29.996-7.519 45.526zm320.881-16.346a159.854 159.854 0 0 0-12.115-44.503l21.713-9.45a183.696 183.696 0 0 1 13.908 51.088l-23.506 2.865zM112.546 182.67l-21.072-10.798a184.915 184.915 0 0 1 30.633-43.168l17.154 16.319a161.599 161.599 0 0 0-26.715 37.647zm278.68-14.155a161.801 161.801 0 0 0-30.389-34.763l15.426-17.966a185.512 185.512 0 0 1 34.832 39.846l-19.869 12.883zm-232.239-41.101l-14.273-18.894a184.318 184.318 0 0 1 46.375-25.533l8.322 22.169a160.705 160.705 0 0 0-40.424 22.258zm180.444-9.19a160.053 160.053 0 0 0-42.466-18.02l6.009-22.903a183.633 183.633 0 0 1 48.748 20.684l-12.291 20.239zM224.825 97.956l-4.553-23.239a186.147 186.147 0 0 1 35.705-3.45h.004c5.711 0 11.473.266 17.129.786l-2.174 23.58c-15.306-1.414-31.072-.624-46.111 2.323z"/></svg>`;
@state()
protected fallbackIcon = this.#svg;
async #getIconFromRegistry() {
this.observe(
umbExtensionsRegistry.byTypeAndAlias('propertyEditorUi', this.propertyEditorUiAlias),
async (manifestPropertyEditorUi) => {
const icon = await this.#iconRegistry.getIcon(manifestPropertyEditorUi?.meta.icon ?? '');
if (icon) {
this.fallbackIcon = icon;
} else {
this.fallbackIcon = this.#svg;
}
},
),
'_observeIcon';
}
@property({ type: String, attribute: 'data-type-id' })
public get dataTypeId(): string | undefined {
@@ -30,6 +51,7 @@ export class UmbRefDataTypeElement extends UmbElementMixin(UUIRefNodeElement) {
this.name = dataType.name ?? '';
this.propertyEditorUiAlias = dataType.editorUiAlias ?? '';
this.propertyEditorSchemaAlias = dataType.editorAlias ?? '';
this.#getIconFromRegistry();
}
},
'dataType',

15
src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
View File

@@ -7,7 +7,6 @@ import { css, html, customElement, state, repeat, when } from '@umbraco-cms/back
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
import type { UmbDataTypeItemModel } from '@umbraco-cms/backoffice/data-type';
import { type ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
@customElement('umb-data-type-picker-flow-data-type-picker-modal')
export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBaseElement<
@@ -19,8 +18,6 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
private _propertyEditorUiAlias!: string;
#propertyEditorUIs: Array<ManifestPropertyEditorUi> = [];
connectedCallback(): void {
super.connectedCallback();
@@ -29,13 +26,6 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
this._propertyEditorUiAlias = this.data.propertyEditorUiAlias;
this._observeDataTypesOf(this._propertyEditorUiAlias);
this.observe(umbExtensionsRegistry.byType('propertyEditorUi'), (propertyEditorUIs) => {
// Only include Property Editor UIs which has Property Editor Schema Alias
this.#propertyEditorUIs = propertyEditorUIs.filter(
(propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias,
);
});
}
private async _observeDataTypesOf(propertyEditorUiAlias: string) {
@@ -96,10 +86,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
? html` <li class="item">
<uui-button label="dataType.name" type="button" @click="${() => this._handleClick(dataType)}">
<div class="item-content">
<uui-icon
name=${this.#propertyEditorUIs.find((ui) => ui.alias === dataType.propertyEditorUiAlias)?.meta
.icon ?? 'icon-bug'}
class="icon"></uui-icon>
<uui-icon name=${dataType.icon ?? 'icon-bug'} class="icon"></uui-icon>
${dataType.name}
</div>
</uui-button>

8
src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
View File

@@ -1,4 +1,3 @@
import { UmbDataTypeTreeRepository } from '../../tree/data-type-tree.repository.js';
import { UMB_DATATYPE_WORKSPACE_MODAL } from '../../workspace/data-type-workspace.modal-token.js';
import { UMB_DATA_TYPE_ENTITY_TYPE } from '../../entity.js';
import { UmbDataTypeCollectionRepository } from '../../collection/index.js';
@@ -275,13 +274,10 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
dataTypes,
(dataType) => dataType.unique,
(dataType) =>
html`<li class="item" ?selected=${this.value.selection.includes(dataType.unique)}>
html` <li class="item" ?selected=${this.value.selection.includes(dataType.unique)}>
<uui-button .label=${dataType.name} type="button" @click="${() => this._handleDataTypeClick(dataType)}">
<div class="item-content">
<uui-icon
name="${this.#propertyEditorUIs.find((ui) => ui.alias === dataType.propertyEditorUiAlias)?.meta
.icon ?? 'icon-bug'}"
class="icon"></uui-icon>
<umb-icon name=${dataType.icon ?? 'icon-bug'} class="icon"></umb-icon>
${dataType.name}
</div>
</uui-button>

12
src/Umbraco.Web.UI.Client/src/packages/data-type/repository/item/data-type-item.server.data-source.ts
View File

@@ -3,6 +3,9 @@ import { UmbItemServerDataSourceBase } from '@umbraco-cms/backoffice/repository'
import type { DataTypeItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
import { DataTypeResource } from '@umbraco-cms/backoffice/external/backend-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { type ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
let manifestPropertyEditorUis: Array<ManifestPropertyEditorUi> = [];
/**
* A server data source for Data Type items
@@ -19,11 +22,19 @@ export class UmbDataTypeItemServerDataSource extends UmbItemServerDataSourceBase
* @param {UmbControllerHost} host
* @memberof UmbDataTypeItemServerDataSource
*/
constructor(host: UmbControllerHost) {
super(host, {
getItems,
mapper,
});
umbExtensionsRegistry
.byType('propertyEditorUi')
.subscribe((manifestPropertyEditorUIs) => {
manifestPropertyEditorUis = manifestPropertyEditorUIs;
})
.unsubscribe();
}
}
@@ -35,5 +46,6 @@ const mapper = (item: DataTypeItemResponseModel): UmbDataTypeItemModel => {
unique: item.id,
name: item.name,
propertyEditorUiAlias: item.editorUiAlias || '', // TODO: why can this be undefined or null on the server?
icon: manifestPropertyEditorUis.find((ui) => ui.alias === item.editorUiAlias)?.meta.icon,
};
};

1
src/Umbraco.Web.UI.Client/src/packages/data-type/repository/item/types.ts
View File

@@ -2,4 +2,5 @@ export interface UmbDataTypeItemModel {
unique: string;
name: string;
propertyEditorUiAlias: string;
icon?: string;
}