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

move label and description styling to layout element for easier reuse

Browse Source
This commit is contained in:
Mads Rasmussen
2022-09-27 10:33:46 +02:00
parent 2a690f6c5d
commit cb52acb030
2 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/Umbraco.Web.UI.Client/src/backoffice/components/entity-property/entity-property.element.ts
View File

@@ -149,28 +149,25 @@ export class UmbEntityPropertyElement extends UmbContextConsumerMixin(LitElement
this._propertyEditorUISubscription?.unsubscribe();
}
private _renderPropertyActionMenu() {
return html`${this.propertyEditorUIAlias
? html`<umb-property-action-menu
id="property-action-menu"
.propertyEditorUIAlias="${this.propertyEditorUIAlias}"
.value="${this.value}"></umb-property-action-menu>`
: ''}`;
}
render() {
return html`
<umb-editor-property-layout id="layout">
<div slot="header">
<uui-label>${this.label}</uui-label>
${this._renderPropertyActionMenu()}
<p>${this.description}</p>
</div>
<umb-editor-property-layout id="layout" label="${this.label}" description="${this.description}">
${this._renderPropertyActionMenu()}
<div slot="editor">${this._element}</div>
</umb-editor-property-layout>
<hr />
`;
}
private _renderPropertyActionMenu() {
return html`${this.propertyEditorUIAlias
? html`<umb-property-action-menu
slot="property-action-menu"
id="property-action-menu"
.propertyEditorUIAlias="${this.propertyEditorUIAlias}"
.value="${this.value}"></umb-property-action-menu>`
: ''}`;
}
}
declare global {

19
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-property-layout/editor-property-layout.element.ts
View File

@@ -1,6 +1,6 @@
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement } from 'lit/decorators.js';
import { customElement, property } from 'lit/decorators.js';
@customElement('umb-editor-property-layout')
export class UmbEditorPropertyLayoutElement extends LitElement {
@@ -15,10 +15,23 @@ export class UmbEditorPropertyLayoutElement extends LitElement {
`,
];
@property({ type: String })
public label = '';
@property({ type: String })
public description = '';
render() {
return html`
<slot name="header" class="header"></slot>
<slot name="editor" class="editor"></slot>
<div>
<uui-label>${this.label}</uui-label>
<slot name="property-action-menu"></slot>
<p>${this.description}</p>
<slot name="header"></slot>
</div>
<div>
<slot name="editor"></slot>
</div>
`;
}
}