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

add ref component for property editor ui

Browse Source
This commit is contained in:
Mads Rasmussen
2022-09-14 13:47:57 +02:00
parent 62060df5c5
commit 7d7988713c
3 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
View File

@@ -1,3 +1,5 @@
//TODO: we need to figure out what components should be available for extensions and load them upfront
import './components/ref-property-editor-ui/ref-property-editor-ui.element';
import './components/backoffice-header.element';
import './components/backoffice-main.element';
import './components/backoffice-modal-container.element';

32
src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts Normal file
View File

@@ -0,0 +1,32 @@
import { UUIRefNodeElement } from '@umbraco-ui/uui';
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('umb-ref-property-editor-ui')
export class UmbRefPropertyEditorUI extends UUIRefNodeElement {
static styles = [...UUIRefNodeElement.styles];
protected fallbackIcon =
'<svg xmlns="http://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>';
@property({ type: String })
alias = '';
protected renderDetail() {
const details: string[] = [];
if (this.alias !== '') {
details.push(this.alias);
}
if (this.detail !== '') {
details.push(this.detail);
}
return html`<small id="detail">${details.join(' | ')}<slot name="detail"></slot></small>`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-ref-property-editor-ui': UmbRefPropertyEditorUI;
}
}

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

@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { Subscription, distinctUntilChanged } from 'rxjs';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { UmbModalService } from '../../../../core/services/modal';
import { UmbContextConsumerMixin } from '../../../../core/context';
@@ -73,10 +74,13 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li
render() {
return html`
<uui-box>
<!-- TODO: temp property editor ui selector. Change when we have dialogs -->
<h3>Property Editor UI</h3>
${this._dataType?.propertyEditorUIAlias}
<uui-button label="Change" @click=${this._openPropertyEditorUIPicker}></uui-button>
<!-- TODO: border is a bit weird attribute name. Maybe single or standalone would be better? -->
<umb-ref-property-editor-ui alias="${ifDefined(this._dataType?.propertyEditorUIAlias)}" border>
<uui-action-bar slot="actions">
<uui-button label="Change" @click=${this._openPropertyEditorUIPicker}></uui-button>
</uui-action-bar>
</umb-ref-property-editor-ui>
</uui-box>
`;
}