diff --git a/src/Umbraco.Web.UI.Client/src/apps/installer/shared/layout/installer-layout.element.ts b/src/Umbraco.Web.UI.Client/src/apps/installer/shared/layout/installer-layout.element.ts index bb636f3a4d..ab8cba7730 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/installer/shared/layout/installer-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/installer/shared/layout/installer-layout.element.ts @@ -3,32 +3,44 @@ import { css, CSSResultGroup, html, LitElement, customElement } from '@umbraco-c @customElement('umb-installer-layout') export class UmbInstallerLayoutElement extends LitElement { render() { - return html`
- + return html` +
-
- +
+
+
+ +
-
`; + `; } static styles: CSSResultGroup = [ css` - #background { - position: fixed; - overflow: hidden; - background-position: 50%; - background-repeat: no-repeat; - background-size: cover; - background-image: url('/umbraco/backoffice/assets/installer.jpg'); - width: 100vw; - height: 100vh; + :host { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + height: 100%; + + background-color: var(--uui-color-default); + background-color: hsla(240, 68%, 11%, 1); + background-image: radial-gradient(at 99% 2%, hsla(212, 40%, 12%, 1) 0px, transparent 50%), + radial-gradient(at 98% 95%, hsla(255, 40%, 12%, 1) 0px, transparent 50%), + radial-gradient(at 1% 2%, hsla(249, 40%, 12%, 1) 0px, transparent 50%), + radial-gradient(at 2% 97%, hsla(228, 40%, 12%, 1) 0px, transparent 50%), + radial-gradient(at 74% 57%, hsla(216, 40%, 12%, 1) 0px, transparent 50%), + radial-gradient(at 37% 30%, hsla(205, 40%, 12%, 1) 0px, transparent 50%), + radial-gradient(at 26% 70%, hsla(235, 40%, 12%, 1) 0px, transparent 50%), + radial-gradient(at 98% 48%, hsla(355, 40%, 12%, 1) 0px, transparent 50%); } #logo { @@ -43,22 +55,69 @@ export class UmbInstallerLayoutElement extends LitElement { } #container { - position: relative; - display: flex; - justify-content: flex-end; + container: container / inline-size; width: 100%; - min-height: 100vh; + max-width: 1200px; + height: 100%; + max-height: 900px; + box-shadow: 0px 1.1px 3.7px rgba(0, 0, 0, 0.091), 0px 3.1px 10.1px rgba(0, 0, 0, 0.13), + 0px 7.5px 24.4px rgba(0, 0, 0, 0.169), 0px 25px 81px rgba(0, 0, 0, 0.26); + } + + #grid { + display: grid; + grid-template-columns: 1fr 1fr; + width: 100%; + height: 100%; + } + + @container container (max-width: 800px) { + #grid { + grid-template-columns: 1fr; + } + + #illustration { + display: none; + } } #box { - max-width: 500px; - width: 100%; + overflow: auto; /* temp fix. Scrolling should be handled by each slotted element */ + container: box / inline-size; box-sizing: border-box; - border-radius: 30px 0 0 30px; - background-color: var(--uui-color-surface); + width: 100%; + height: 100%; display: flex; + background-color: var(--uui-color-surface); flex-direction: column; + } + #slot { + display: block; padding: var(--uui-size-layout-4) var(--uui-size-layout-4) var(--uui-size-layout-2) var(--uui-size-layout-4); + height: 100%; + width: 100%; + max-width: 400px; + margin: 0 auto; + } + + @container box (max-width: 500px) { + #slot { + padding: var(--uui-size-layout-2) var(--uui-size-layout-2) var(--uui-size-layout-1) var(--uui-size-layout-2); + } + } + + #illustration { + background-image: url('/umbraco/backoffice/assets/installer-illustration.svg'); + background-repeat: no-repeat; + background-size: cover; + position: relative; + } + #illustration:after { + content: ''; + display: block; + background: #5b84ff17; + position: absolute; + inset: 0; } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/assets/installer-illustration.svg b/src/Umbraco.Web.UI.Client/src/assets/installer-illustration.svg new file mode 100644 index 0000000000..b7d84eab18 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/assets/installer-illustration.svg @@ -0,0 +1,722 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/collection-view.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/collection-view.model.ts index 8d602e4ea8..95aa0f4340 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/collection-view.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/collection-view.model.ts @@ -27,6 +27,14 @@ export interface MetaCollectionView { pathName: string; } +/** + * Condition for when this collection view should be available + */ export interface ConditionsCollectionView { + /** + * Type of entity this collection view should be available for + * + * @examples ["media"] + */ entityType: string; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/dashboard-collection.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/dashboard-collection.model.ts index f4cfe2a35a..be5ccb9562 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/dashboard-collection.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/dashboard-collection.model.ts @@ -6,13 +6,51 @@ export interface ManifestDashboardCollection extends ManifestBase { conditions: ConditionsDashboardCollection; } + export interface MetaDashboardCollection { + /** + * The URL path for the dashboard which is used for navigating or deep linking directly to the dashboard + * @examples [ + * "media-management-dashboard", + * "my-awesome-dashboard" + * ] + */ pathname: string; + + /** + * Optional string to display as the label for the dashboard collection + */ label?: string; + + /** + * The alias of the repository that the dashboard collection is for + * @examples [ + * "Umb.Repository.Media" + * ] + */ repositoryAlias: string; } +/** + * The conditions for when the dashboard should be available + */ export interface ConditionsDashboardCollection { + /** + * An array of section aliases that the dashboard collection should be available in + * + * @uniqueItems true + * @examples [ + * "Umb.Section.Content", + * "Umb.Section.Settings" + * ] + */ sections: string[]; + + /** + * The entity type that the dashboard collection should be available for + * @examples [ + * "media" + * ] + */ entityType: string; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts index a4c63d1e35..815b739524 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts @@ -34,7 +34,7 @@ export interface MetaEntityAction { /** * @TJS-ignore */ - api: any; // create interface + api: any; // TODO: create interface /** * The alias for the repsoitory of the entity type this action is for @@ -47,5 +47,24 @@ export interface MetaEntityAction { } export interface ConditionsEntityAction { + /** + * The entity types that this action can be performed on + * @examples [ + * "data-type", + * "data-type-folder", + * "document", + * "document-root", + * "document-type", + * "dictionary-item", + * "language", + * "language-root", + * "member", + * "member-group", + * "member-type", + * "template", + * "template-root", + * "partial-view" + * ] + */ entityTypes: Array; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-bulk-action.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-bulk-action.model.ts index 26f3f5fc5f..be36d37a8d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-bulk-action.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-bulk-action.model.ts @@ -32,5 +32,16 @@ export interface MetaEntityBulkAction { } export interface ConditionsEntityBulkAction { + + /** + * The entity type this action is for + * + * @examples [ + * "document", + * "media", + * "user", + * "user-group" + * ] + */ entityType: string; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/workspace-view-collection.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/workspace-view-collection.model.ts index 403411a211..f99fe25894 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/workspace-view-collection.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/workspace-view-collection.model.ts @@ -10,11 +10,52 @@ export interface ManifestWorkspaceViewCollection type: 'workspaceViewCollection'; meta: MetaEditorViewCollection; } + + export interface MetaEditorViewCollection extends MetaManifestWithView { + /** + * The entity type that this view collection should be available in + * + * @examples [ + * "media" + * ] + */ entityType: string; + + /** + * The repository alias that this view collection should be available in + * @examples [ + * "Umb.Repository.Media" + * ] + */ repositoryAlias: string; } + export interface ConditionsEditorViewCollection { + /** + * The workspaces that this view collection should be available in + * + * @examples [ + * "Umb.Workspace.DataType", + * "Umb.Workspace.Dictionary", + * "Umb.Workspace.Document", + * "Umb.Workspace.DocumentType", + * "Umb.Workspace.Language", + * "Umb.Workspace.LanguageRoot", + * "Umb.Workspace.LogviewerRoot", + * "Umb.Workspace.Media", + * "Umb.Workspace.MediaType", + * "Umb.Workspace.Member", + * "Umb.Workspace.MemberType", + * "Umb.Workspace.MemberGroup", + * "Umb.Workspace.Package", + * "Umb.Workspace.PackageBuilder", + * "Umb.Workspace.PartialView", + * "Umb.Workspace.RelationType", + * "Umb.Workspace.Stylesheet", + * "Umb.Workspace.Template" + * ] + */ workspaces: string[]; }