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

only render variant selector on nodes with variants

Browse Source
This commit is contained in:
Mads Rasmussen
2022-08-09 11:35:02 +02:00
parent 5e8dfadd53
commit b535514dab
4 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/editor-node.element.ts
View File

@@ -1,5 +1,5 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../../../core/context';
@@ -175,23 +175,33 @@ export class UmbEditorNodeElement extends UmbContextProviderMixin(UmbContextCons
<umb-editor-entity alias=${this.alias}>
<div slot="name">
<uui-input .value=${this._node?.name} @input="${this._handleInput}">
<div slot="append">
<uui-button id="trigger" @click=${this._toggleVariantSelector}>
English (United States)
<uui-caret></uui-caret>
</uui-button>
</div>
<!-- Implement Variant Selector -->
${this._node && this._node.variants.length > 0
? html`
<div slot="append">
<uui-button id="trigger" @click=${this._toggleVariantSelector}>
English (United States)
<uui-caret></uui-caret>
</uui-button>
</div>
`
: nothing}
</uui-input>
<!-- Implement Variant Selector -->
<uui-popover id="popover" .open=${this._variantSelectorIsOpen} @close=${this._close}>
<div id="dropdown" slot="popover">
<uui-scroll-container id="scroll-container">
<ul>
<li>Implement variants</li>
</ul>
</uui-scroll-container>
</div>
</uui-popover>
${this._node && this._node.variants.length > 0
? html`
<uui-popover id="popover" .open=${this._variantSelectorIsOpen} @close=${this._close}>
<div id="dropdown" slot="popover">
<uui-scroll-container id="scroll-container">
<ul>
<li>Implement variants</li>
</ul>
</uui-scroll-container>
</div>
</uui-popover>
`
: nothing}
</div>
<div slot="footer">Breadcrumbs</div>

5
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/node.context.ts
View File

@@ -23,6 +23,11 @@ export class UmbNodeContext {
value: '',
},
],
variants: [
{
name: '',
},
],
});
public readonly data: Observable<NodeEntity> = this._data.asObservable();

1
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/node/views/edit/editor-view-node-edit.element.ts
View File

@@ -34,7 +34,6 @@ export class UmbEditorViewNodeEditElement extends UmbContextConsumerMixin(LitEle
this.consumeContext('umbNodeContext', (nodeContext) => {
this._nodeContext = nodeContext;
console.log('GOT CONTEXT', nodeContext);
this._useNode();
});
}

6
src/Umbraco.Web.UI.Client/src/mocks/data/node.data.ts
View File

@@ -8,6 +8,7 @@ export interface NodeEntity {
type: string;
properties: Array<NodeProperty>;
data: Array<NodePropertyData>;
variants: Array<any>; // TODO: define variant data
//layout?: any; // TODO: define layout type - make it non-optional
}
@@ -61,6 +62,7 @@ export const data: Array<NodeEntity> = [
value: 'Every day, a rabbit in a military costume greets me at the front door',
},
],
variants: [{ name: 'fake data' }],
/*
// Concept for node layout, separation of design from config and data.
layout: [
@@ -131,6 +133,7 @@ export const data: Array<NodeEntity> = [
value: '',
},
],
variants: [{ name: 'Variant 1' }],
},
{
id: 3,
@@ -152,6 +155,7 @@ export const data: Array<NodeEntity> = [
value: 'Every day, a rabbit in a military costume greets me at the front door',
},
],
variants: [{ name: 'Variant 1' }],
},
{
id: 2001,
@@ -173,6 +177,7 @@ export const data: Array<NodeEntity> = [
value: 'The daily life at Umbraco HQ',
},
],
variants: [],
},
{
id: 2002,
@@ -194,6 +199,7 @@ export const data: Array<NodeEntity> = [
value: 'Every day, a rabbit in a military costume greets me at the front door',
},
],
variants: [],
},
];