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

render property editor picker with property-layout element

Browse Source
This commit is contained in:
Mads Rasmussen
2022-09-27 10:39:54 +02:00
parent cb52acb030
commit 60e345bb0e
1 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts
View File

@@ -153,36 +153,38 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li
render() {
return html`
<uui-box headline="Property Editor" style="margin-bottom: 20px;"> ${this._renderPropertyEditorUI()} </uui-box>
<uui-box style="margin-bottom: 20px;"> ${this._renderPropertyEditorUI()} </uui-box>
${this._renderConfig()} </uui-box>
`;
}
private _renderPropertyEditorUI() {
return html`
<h4>Property Editor UI</h4>
${this._dataType?.propertyEditorUIAlias
? html`
<!-- TODO: border is a bit weird attribute name. Maybe single or standalone would be better? -->
<umb-ref-property-editor-ui
name=${this._propertyEditorUIName}
alias=${this._propertyEditorUIAlias}
property-editor-alias=${this._propertyEditorAlias}
border>
<uui-icon name="${this._propertyEditorUIIcon}" slot="icon"></uui-icon>
<uui-action-bar slot="actions">
<uui-button label="Change" @click=${this._openPropertyEditorUIPicker}></uui-button>
</uui-action-bar>
</umb-ref-property-editor-ui>
`
: html`
<uui-button
label="Select Property Editor UI"
look="placeholder"
color="default"
@click=${this._openPropertyEditorUIPicker}></uui-button>
`}
<umb-editor-property-layout label="Property Editor" description="Select a property editor">
${this._dataType?.propertyEditorUIAlias
? html`
<!-- TODO: border is a bit weird attribute name. Maybe single or standalone would be better? -->
<umb-ref-property-editor-ui
slot="editor"
name=${this._propertyEditorUIName}
alias=${this._propertyEditorUIAlias}
property-editor-alias=${this._propertyEditorAlias}
border>
<uui-icon name="${this._propertyEditorUIIcon}" slot="icon"></uui-icon>
<uui-action-bar slot="actions">
<uui-button label="Change" @click=${this._openPropertyEditorUIPicker}></uui-button>
</uui-action-bar>
</umb-ref-property-editor-ui>
`
: html`
<uui-button
slot="editor"
label="Select Property Editor"
look="placeholder"
color="default"
@click=${this._openPropertyEditorUIPicker}></uui-button>
`}
</umb-editor-property-layout>
`;
}