diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts index 06a4912dbb..1a0b15f944 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts @@ -1,10 +1,83 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import { Language } from '@umbraco-cms/backend-api'; +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; @customElement('umb-language-workspace') export class UmbLanguageWorkspaceElement extends LitElement { + static styles = [ + UUITextStyles, + css` + #header { + display: flex; + padding: 0 var(--uui-size-space-6); + gap: var(--uui-size-space-4); + width: 100%; + } + #main { + padding: var(--uui-size-space-6); + } + uui-input { + width: 100%; + } + hr { + border: none; + border-bottom: 1px solid var(--uui-color-divider); + } + `, + ]; + + @property() + language: Language = { + id: 1, + name: 'English', + isoCode: 'en', + isDefault: true, + isMandatory: true, + }; + render() { - return html`
Language Workspace
`; + return html` + +
+ + + + + + + + +
+ +
+ Default language +
An Umbraco site can only have one default language set.
+
+
+
+ +
+ Mandatory language +
Properties on this language have to be filled out before the node can be published.
+
+
+
+
+ + + + No fall back language + + + +
+
+
`; } }