Merge branch 'main' into feature/context-token

2023-01-18 08:48:38 +01:00
parent 880c6056d7 2a0bd68ebd
commit 7fc6de592e
6 changed files with 97 additions and 46 deletions
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -17,7 +17,7 @@
 				"@umbraco-ui/uui-modal-container": "file:umbraco-ui-uui-modal-container-0.0.0.tgz",
 				"@umbraco-ui/uui-modal-dialog": "file:umbraco-ui-uui-modal-dialog-0.0.0.tgz",
 				"@umbraco-ui/uui-modal-sidebar": "file:umbraco-ui-uui-modal-sidebar-0.0.0.tgz",
-				"element-internals-polyfill": "^1.1.18",
+				"element-internals-polyfill": "^1.1.19",
 				"lit": "^2.6.1",
 				"lodash": "^4.17.21",
 				"router-slot": "^1.5.5",
@@ -62,7 +62,7 @@
 				"openapi-typescript-codegen": "^0.23.0",
 				"playwright-msw": "^2.1.0",
 				"plop": "^3.1.1",
-				"prettier": "2.8.2",
+				"prettier": "2.8.3",
 				"tiny-glob": "^0.2.9",
 				"typescript": "^4.9.4",
 				"vite": "^4.0.4",
@@ -12887,9 +12887,9 @@
 			"dev": true
 		},
 		"node_modules/element-internals-polyfill": {
-			"version": "1.1.18",
-			"resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.18.tgz",
-			"integrity": "sha512-ULyzpzblTZfMPEt83NphWeREajgaKQBNSTXvNBcjTeriIy7GsuAHFUZ0CpHnlDIVdvPlWcewfu7n7vVfiifZlQ=="
+			"version": "1.1.19",
+			"resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.19.tgz",
+			"integrity": "sha512-deGDqTkxXtYAQl/VSH5xXWfCe4zEVCkWCYrVeNOPtg3F6W1i0JYRjqPU+MZO9mS1P2UxkkD2vPH+Mb6W/CDicA=="
 		},
 		"node_modules/element-resize-detector": {
 			"version": "1.2.4",
@@ -22455,9 +22455,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "2.8.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz",
-			"integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==",
+			"version": "2.8.3",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+			"integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
 			"dev": true,
 			"bin": {
 				"prettier": "bin-prettier.js"
@@ -39302,9 +39302,9 @@
 			"dev": true
 		},
 		"element-internals-polyfill": {
-			"version": "1.1.18",
-			"resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.18.tgz",
-			"integrity": "sha512-ULyzpzblTZfMPEt83NphWeREajgaKQBNSTXvNBcjTeriIy7GsuAHFUZ0CpHnlDIVdvPlWcewfu7n7vVfiifZlQ=="
+			"version": "1.1.19",
+			"resolved": "https://registry.npmjs.org/element-internals-polyfill/-/element-internals-polyfill-1.1.19.tgz",
+			"integrity": "sha512-deGDqTkxXtYAQl/VSH5xXWfCe4zEVCkWCYrVeNOPtg3F6W1i0JYRjqPU+MZO9mS1P2UxkkD2vPH+Mb6W/CDicA=="
 		},
 		"element-resize-detector": {
 			"version": "1.2.4",
@@ -46464,9 +46464,9 @@
 			"dev": true
 		},
 		"prettier": {
-			"version": "2.8.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz",
-			"integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==",
+			"version": "2.8.3",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+			"integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
 			"dev": true
 		},
 		"pretty-error": {
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -63,7 +63,7 @@
 		"@umbraco-ui/uui-modal-container": "file:umbraco-ui-uui-modal-container-0.0.0.tgz",
 		"@umbraco-ui/uui-modal-dialog": "file:umbraco-ui-uui-modal-dialog-0.0.0.tgz",
 		"@umbraco-ui/uui-modal-sidebar": "file:umbraco-ui-uui-modal-sidebar-0.0.0.tgz",
-		"element-internals-polyfill": "^1.1.18",
+		"element-internals-polyfill": "^1.1.19",
 		"lit": "^2.6.1",
 		"lodash": "^4.17.21",
 		"router-slot": "^1.5.5",
@@ -108,7 +108,7 @@
 		"openapi-typescript-codegen": "^0.23.0",
 		"playwright-msw": "^2.1.0",
 		"plop": "^3.1.1",
-		"prettier": "2.8.2",
+		"prettier": "2.8.3",
 		"tiny-glob": "^0.2.9",
 		"typescript": "^4.9.4",
 		"vite": "^4.0.4",
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts
@@ -1,10 +1,39 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';

@customElement('umb-packages-market-place-section-view')
 export class UmbPackagesMarketPlaceSectionViewElement extends LitElement {
+	static styles = [css`
+		#container {
+			height: 100%;
+			display: flex;
+			align-items: stretch;
+		}
+
+
+		iframe {
+			width: 100%;
+  			height: 100%;
+  			overflow: hidden;
+			border: none;
+		}
+	`];
+
+	// TODO: This URL comes from the server
+	// Was previously found in 'Umbraco.Sys.ServerVariables.umbracoUrls.marketplaceUrl'
+	@property()
+	marketplaceUrl = 'https://marketplace.umbraco.com/?umbversion=11.1.0&style=backoffice';
+
 	render() {
-		return html`<div>Render Marketplace</div> `;
+		return html`
+			<div id="container">
+				<iframe
+					src="${this.marketplaceUrl}"
+					title="Umbraco Marketplace"
+					allowfullscreen
+					allow="geolocation; autoplay; clipboard-write; encrypted-media">
+				</iframe>
+			</div>`;
 	}
 }

--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.element.ts
@@ -1,5 +1,7 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { when } from 'lit-html/directives/when.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';

@@ -22,6 +24,7 @@ export interface UmbTableColumn {

 export interface UmbTableConfig {
 	allowSelection: boolean;
+	hideIcon?: boolean;
 }

 export class UmbTableSelectedEvent extends Event {
@@ -77,16 +80,16 @@ export class UmbTableElement extends LitElement {
 				display: none;
 			}

-			uui-table-row:focus uui-icon,
-			uui-table-row:focus-within uui-icon,
-			uui-table-row:hover uui-icon,
+			uui-table-row[selectable]:focus uui-icon,
+			uui-table-row[selectable]:focus-within uui-icon,
+			uui-table-row[selectable]:hover uui-icon,
 			uui-table-row[select-only] uui-icon {
 				display: none;
 			}

-			uui-table-row:focus uui-checkbox,
-			uui-table-row:focus-within uui-checkbox,
-			uui-table-row:hover uui-checkbox,
+			uui-table-row[selectable]:focus uui-checkbox,
+			uui-table-row[selectable]:focus-within uui-checkbox,
+			uui-table-row[selectable]:hover uui-checkbox,
 			uui-table-row[select-only] uui-checkbox {
 				display: inline-block;
 			}
@@ -137,6 +140,7 @@ export class UmbTableElement extends LitElement {
 	@property({ type: Object, attribute: false })
 	public config: UmbTableConfig = {
 		allowSelection: false,
+		hideIcon: false,
 	};

 	/**
@@ -201,18 +205,10 @@ export class UmbTableElement extends LitElement {
 	}

 	render() {
-		return html` <uui-table class="uui-text">
+		return html`<uui-table class="uui-text">
 			<uui-table-column style="width: 60px;"></uui-table-column>
 			<uui-table-head>
-				<uui-table-head-cell style="--uui-table-cell-padding: 0">
-					<uui-checkbox
-						label="Select All"
-						style="padding: var(--uui-size-4) var(--uui-size-5);"
-						@change="${this._handleAllRowsCheckboxChange}"
-						?checked="${this.selection.length === this.items.length}">
-					</uui-checkbox>
-				</uui-table-head-cell>
-				${this.columns.map((column) => this._renderHeaderCell(column))}
+				${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
 			</uui-table-head>
 			${repeat(this.items, (item) => item.key, this._renderRow)}
 		</uui-table>`;
@@ -231,28 +227,52 @@ export class UmbTableElement extends LitElement {
 		`;
 	}

+	private _renderHeaderCheckboxCell() {
+		if (this.config.hideIcon && !this.config.allowSelection) return;
+
+		return html` <uui-table-head-cell style="--uui-table-cell-padding: 0">
+			${when(
+				this.config.allowSelection,
+				() => html` <uui-checkbox
+					label="Select All"
+					style="padding: var(--uui-size-4) var(--uui-size-5);"
+					@change="${this._handleAllRowsCheckboxChange}"
+					?checked="${this.selection.length === this.items.length}">
+				</uui-checkbox>`
+			)}
+		</uui-table-head-cell>`;
+	}
+
 	private _renderRow = (item: UmbTableItem) => {
 		return html`<uui-table-row
-			?selectable="${this.config.allowSelection && this._selectionMode}"
+			?selectable="${this.config.allowSelection}"
 			?select-only=${this._selectionMode}
 			?selected=${this._isSelected(item.key)}
 			@selected=${() => this._selectRow(item.key)}
 			@unselected=${() => this._deselectRow(item.key)}>
-			<uui-table-cell>
-				${item.icon ? html`<uui-icon name=${item.icon}></uui-icon>` : nothing}
-				<uui-checkbox
+			${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))}
+		</uui-table-row>`;
+	};
+
+	private _renderRowCheckboxCell(item: UmbTableItem) {
+		if (this.config.hideIcon && !this.config.allowSelection) return;
+
+		return html`<uui-table-cell>
+			${when(!this.config.hideIcon, () => html`<uui-icon name=${ifDefined(item.icon)}></uui-icon>`)}
+			${when(
+				this.config.allowSelection,
+				() => html` <uui-checkbox
 					label="Select Row"
 					@click=${(e: PointerEvent) => e.stopPropagation()}
 					@change=${(event: Event) => this._handleRowCheckboxChange(event, item)}
 					?checked="${this._isSelected(item.key)}">
-				</uui-checkbox>
-			</uui-table-cell>
-			${this.columns.map((column) => this._renderRowCell(column, item))}
-		</uui-table-row>`;
-	};
+				</uui-checkbox>`
+			)}
+		</uui-table-cell>`;
+	}

 	private _renderRowCell(column: UmbTableColumn, item: UmbTableItem) {
-		return html`<uui-table-cell style="--uui-table-cell-padding: 0"
+		return html`<uui-table-cell
 			>${this._renderCellContent(column, item)}</uui-table-cell
 			>
 		</uui-table-cell>`;
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.stories.ts
@@ -72,6 +72,7 @@ const items: Array<UmbTableItem> = [

 const config: UmbTableConfig = {
 	allowSelection: true,
+	hideIcon: false,
 };

 export const AAAOverview: Story<UmbTableElement> = () =>
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
@@ -46,6 +46,7 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 			}
 			router-slot {
 				height: 100%;
+				flex:0;
 			}

 			umb-extension-slot[slot='actions'] {