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

remove icon/name slots from layout, for just one header slot + styling adjustments

Browse Source
This commit is contained in:
Niels Lyngsø
2022-12-12 14:49:43 +01:00
parent 883f460690
commit f45cf51880
11 changed files with 100 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts
View File

@@ -28,8 +28,10 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin(
height: 100%;
}
#name {
width: 100%;
#header {
/* TODO: can this be applied from layout slot CSS? */
margin: 0 var(--uui-size-layout-1);
flex:1 1 auto;
}
`,
];
@@ -141,7 +143,7 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin(
render() {
return html`
<umb-editor-entity-layout alias="Umb.Editor.DataType">
<uui-input id="name" slot="name" .value=${this._dataTypeName} @input="${this._handleInput}"></uui-input>
<uui-input id="header" slot="header" .value=${this._dataTypeName} @input="${this._handleInput}"></uui-input>
</umb-editor-entity-layout>
`;
}

5
src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts
View File

@@ -122,9 +122,8 @@ export class UmbEditorDocumentTypeElement extends UmbContextProviderMixin(
render() {
return html`
<umb-editor-entity-layout alias="Umb.Editor.DocumentType">
<div slot="icon">Icon</div>
<div slot="name">
<div slot="header">
<div>Icon</div>
<uui-input id="name" .value=${this._documentType?.name} @input="${this._handleInput}">
<div id="alias" slot="append">${this._documentType?.alias}</div>
</uui-input>

1
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-action-extension/editor-action-extension.element.ts
View File

@@ -4,6 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
import type { ManifestEditorAction } from '@umbraco-cms/models';
// Niels, thoughts, TODO: Consider naming this just actions, not extension as everything is an extension.
@customElement('umb-editor-action-extension')
export class UmbEditorActionExtensionElement extends LitElement {
static styles: CSSResultGroup = [UUITextStyles];

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

@@ -31,11 +31,22 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
height: 100%;
}
#popover {
display: block;
#header {
margin: 0 var(--uui-size-layout-1);
flex:1 1 auto;
}
#name-input {
width: 100%;
height: 100%;/** I really don't know why this fixes the border colliding with variant-selector-toggle, but lets this solution for now */
}
#dropdown {
#variant-selector-toggle {
white-space: nowrap;
}
#variant-selector-popover {
display: block;
}
#variant-selector-dropdown {
overflow: hidden;
z-index: -1;
background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
@@ -47,8 +58,9 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
box-shadow: var(--uui-shadow-depth-3);
}
uui-input {
width: 100%;
#footer {
margin: 0 var(--uui-size-layout-1);
flex:1 1 auto;
}
`,
];
@@ -90,6 +102,7 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
}
};
// TODO: How do we ensure this is a change of this document and not nested documents? Should the event be stopped at this spot at avoid such.
private _setPropertyValue(alias: string, value: unknown) {
this._node?.data.forEach((data) => {
if (data.alias === alias) {
@@ -160,13 +173,13 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
render() {
return html`
<umb-editor-entity-layout alias=${this.alias}>
<div slot="name">
<uui-input .value=${this._node?.name} @input="${this._handleInput}">
<div id="header" slot="header">
<uui-input id="name-input" .value=${this._node?.name} @input="${this._handleInput}">
<!-- Implement Variant Selector -->
${this._node && this._node.variants.length > 0
? html`
<div slot="append">
<uui-button id="trigger" @click=${this._toggleVariantSelector}>
<uui-button id="variant-selector-toggle" @click=${this._toggleVariantSelector}>
English (United States)
<uui-caret></uui-caret>
</uui-button>
@@ -176,11 +189,12 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
</uui-input>
<!-- Implement Variant Selector -->
<!-- TODO: Refactor Variant Selector into its own component -->
${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">
<uui-popover id="variant-selector-popover" .open=${this._variantSelectorIsOpen} @close=${this._close}>
<div id="variant-selector-dropdown" slot="popover">
<uui-scroll-container>
<ul>
<li>Implement variants</li>
</ul>
@@ -191,17 +205,16 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
: nothing}
</div>
<div slot="footer">Breadcrumbs</div>
<div slot="actions">
<uui-button @click=${this._onSaveAndPreview} label="Save and preview"></uui-button>
<uui-button @click=${this._onSave} look="secondary" label="Save"></uui-button>
<uui-button
@click=${this._onSaveAndPublish}
look="primary"
color="positive"
label="Save and publish"></uui-button>
</div>
<div id="footer" slot="footer">Breadcrumbs</div>
<!-- TODO: convert document editor actions to extensions: -->
<uui-button slot="actions" @click=${this._onSaveAndPreview} label="Save and preview"></uui-button>
<uui-button slot="actions" @click=${this._onSave} look="secondary" label="Save"></uui-button>
<uui-button
slot="actions"
@click=${this._onSaveAndPublish}
look="primary"
color="positive"
label="Save and publish"></uui-button>
</umb-editor-entity-layout>
`;
}

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

@@ -1,4 +1,4 @@
import { html, LitElement } from 'lit';
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { distinctUntilChanged } from 'rxjs';
@@ -11,7 +11,15 @@ import { UmbObserverMixin } from '@umbraco-cms/observable-api';
@customElement('umb-editor-view-content-edit')
export class UmbEditorViewContentEditElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [UUITextStyles];
static styles = [
UUITextStyles,
css`
:host {
display:block;
margin: var(--uui-size-layout-1);
}
`
];
@state()
_properties: NodeProperty[] = [];

10
src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/views/info/editor-view-content-info.element.ts
View File

@@ -9,7 +9,15 @@ import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
@customElement('umb-editor-view-content-info')
export class UmbEditorViewContentInfoElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
static styles = [UUITextStyles, css``];
static styles = [
UUITextStyles,
css`
:host {
display:block;
margin: var(--uui-size-layout-1);
}
`
];
private _nodeContext?: UmbNodeContext;

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

@@ -38,27 +38,32 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
#header {
display: flex;
gap: 16px;
align-items: center;
min-height: 60px;
}
#name {
#headline {
display: block;
flex: 1 1 auto;
margin: 0 var(--uui-size-layout-1);
}
#tabs {
margin-left: auto;
}
#footer {
display: flex;
height: 100%;
align-items: center;
gap: 16px;
flex: 1 1 auto;
}
#actions {
display: block;
display: flex;
margin-left: auto;
gap: 6px;
margin: 0 var(--uui-size-layout-1);
}
uui-input {
@@ -167,11 +172,11 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
}
}
private _renderViews() {
private _renderTabs() {
return html`
${this._editorViews?.length > 0
? html`
<uui-tab-group slot="views">
<uui-tab-group id="tabs">
${this._editorViews.map(
(view: ManifestEditorView) => html`
<uui-tab
@@ -193,12 +198,12 @@ export class UmbEditorEntityLayout extends UmbContextConsumerMixin(UmbObserverMi
return html`
<umb-body-layout>
<div id="header" slot="header">
<slot id="icon" name="icon"></slot>
<div id="name">
${this.headline ? html`<h3>${this.headline}</h3>` : nothing}
<slot id="name" name="name"></slot>
</div>
${this._renderViews()}
${this.headline ? html`<h3 id="headline">${this.headline}</h3>` : nothing}
<slot name="header"></slot>
${this._renderTabs()}
</div>
<router-slot .routes="${this._routes}"></router-slot>

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

@@ -36,45 +36,47 @@ export class UmbEditorEntityElement extends UmbContextConsumerMixin(UmbObserverM
}
@state()
private _element?: any;
private _element?: HTMLElement;
private _currentEditorAlias = '';
private _currentEditorAlias:string | null = null;
connectedCallback(): void {
super.connectedCallback();
this._observeEditors();
}
/**
TODO: use future system of extension-slot, extension slots must use a condition-system which will be used to determine the filtering happening below.
This will first be possible to make when ContextApi is available, as conditions will use this system.
*/
private _observeEditors() {
this.observe<ManifestEditor>(
this.observe<ManifestEditor | undefined>(
umbExtensionsRegistry
.extensionsOfType('editor')
.pipe(map((editors) => editors.find((editor) => editor.meta.entityType === this.entityType))),
(editor) => {
// don't rerender editor if it's the same
if (this._currentEditorAlias === editor.alias) return;
this._currentEditorAlias = editor.alias;
const newEditorAlias = editor?.alias || '';
if (this._currentEditorAlias === newEditorAlias) return;
this._currentEditorAlias = newEditorAlias;
this._createElement(editor);
}
);
}
private async _createElement(editor?: ManifestEditor) {
// TODO: implement fallback editor
const fallbackEditor = document.createElement('div');
fallbackEditor.innerHTML = '<p>No editor found</p>';
if (!editor) {
this._element = fallbackEditor;
this._element = editor ? (await createExtensionElement(editor)) : undefined;
if (this._element) {
// TODO: use contextApi for this.
(this._element as any).entityKey = this.entityKey;
return;
}
try {
this._element = (await createExtensionElement(editor)) as any;
this._element.entityKey = this.entityKey;
} catch (error) {
this._element = fallbackEditor;
}
// TODO: implement fallback editor
// Note for extension-slot, we must enable giving the extension-slot a fallback element.
const fallbackEditor = document.createElement('div');
fallbackEditor.innerHTML = '<p>No editor found</p>';
this._element = fallbackEditor;
}
render() {

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

@@ -16,7 +16,7 @@ export class UmbEditorPropertyLayoutElement extends LitElement {
:host {
display: grid;
grid-template-columns: 200px 600px;
gap: 32px;
gap: var(--uui-size-layout-2);
}
`,
];

2
src/Umbraco.Web.UI.Client/src/backoffice/editors/user-group/editor-user-group.element.ts
View File

@@ -264,7 +264,7 @@ export class UmbEditorUserGroupElement extends LitElement {
render() {
return html`
<umb-editor-entity-layout alias="Umb.Editor.UserGroup">
<uui-input id="name" slot="name" .value=${this._userName} @input="${this._handleInput}"></uui-input>
<uui-input id="name" slot="header" .value=${this._userName} @input="${this._handleInput}"></uui-input>
<div id="main">
<div id="left-column">${this.renderLeftColumn()}</div>
<div id="right-column">${this.renderRightColumn()}</div>

12
src/Umbraco.Web.UI.Client/src/backoffice/sections/shared/section.element.ts
View File

@@ -24,18 +24,6 @@ export class UmbSectionElement extends UmbContextConsumerMixin(UmbObserverMixin(
display: flex;
}
#header {
display: flex;
gap: 16px;
align-items: center;
min-height: 60px;
}
uui-tab-group {
--uui-tab-divider: var(--uui-color-border);
border-left: 1px solid var(--uui-color-border);
border-right: 1px solid var(--uui-color-border);
}
#router-slot {
overflow: auto;
height: 100%;