diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.element.ts new file mode 100644 index 0000000000..e33d98d274 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.element.ts @@ -0,0 +1,66 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; + +@customElement('umb-empty-state') +export class UmbEmptyStateElement extends LitElement { + static styles = [ + UUITextStyles, + css` + :host { + display: block; + text-align: center; + padding: var(--uui-size-space-4); + } + + :host([position='center']) { + position: absolute; + top: 50%; + left: 50%; + max-width: 400px; + width: 80%; + transform: translate(-50%, -50%); + } + + :host(:not([position='center'])) { + margin: auto; + } + + :host(:not([size='small'])) { + font-size: var(--uui-size-6); + } + + :host([size='small']) { + font-size: var(--uui-size-5); + } + + slot { + margin: auto; + } + `, + ]; + + /** + * Set the text size + */ + @property({ type: String }) + size: 'small' | 'large' = 'large'; + + /** + * Set the element position + * 'center' => element is absolutely centered + * undefined => element has auto margin, to center in parent + */ + @property({ type: String }) + position: 'center' | undefined; + + render() { + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-empty-state': UmbEmptyStateElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts index d4aaf7fac5..725afefa2b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts @@ -14,3 +14,4 @@ import './section/section-sidebar/section-sidebar.element'; import './section/section.element'; import './tree/tree.element'; import './workspace/workspace-content/workspace-content.element'; +import './empty-state/empty-state.element'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts index 3f6ae8fc09..c7bcbab140 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts @@ -31,6 +31,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement { #scroll-container { flex:1; + position:relative; } #router-slot {