From 1a57a4cd9379b7e4e69e58014589ee1bcbf5bea9 Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 24 Jun 2024 19:36:34 +0200 Subject: [PATCH 01/10] use css var for text color --- .../modals/current-user/current-user-modal.element.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user/current-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user/current-user-modal.element.ts index b3c0617e28..66ca80cdb4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user/current-user-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user/current-user-modal.element.ts @@ -84,6 +84,9 @@ export class UmbCurrentUserModalElement extends UmbLitElement { static override styles: CSSResultGroup = [ UmbTextStyles, css` + :host { + color: var(--uui-color-text); + } #main { display: flex; flex-direction: column; From 05cdd34cebac40ebb1d06853536bbd2d6ac04c0d Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 24 Jun 2024 19:37:00 +0200 Subject: [PATCH 02/10] replace uui select as you can't change the background color --- ...ent-user-theme-user-profile-app.element.ts | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts index b513831863..5f89e07171 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts @@ -1,4 +1,4 @@ -import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes'; @@ -50,15 +50,28 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement { return html` Experimental - + `; } static override styles = [ css` - uui-select { + select { width: 100%; + font: inherit; + color: var(--uui-color-text); + background-color: var(--uui-color-surface); + padding: var(--uui-size-1) var(--uui-size-space-3); + border: 1px solid var(--uui-color-border); + height: var(--uui-size-11); + box-sizing: border-box; } `, ]; From 4113d734e2dd4b07b5314cba20c9cd6563e22358 Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 25 Jun 2024 10:52:19 +0200 Subject: [PATCH 03/10] revert uui-select change --- ...ent-user-theme-user-profile-app.element.ts | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts index 5f89e07171..b513831863 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/theme/current-user-theme-user-profile-app.element.ts @@ -1,4 +1,4 @@ -import { css, html, customElement, state, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UMB_THEME_CONTEXT } from '@umbraco-cms/backoffice/themes'; @@ -50,28 +50,15 @@ export class UmbCurrentUserThemeUserProfileAppElement extends UmbLitElement { return html` Experimental - + `; } static override styles = [ css` - select { + uui-select { width: 100%; - font: inherit; - color: var(--uui-color-text); - background-color: var(--uui-color-surface); - padding: var(--uui-size-1) var(--uui-size-space-3); - border: 1px solid var(--uui-color-border); - height: var(--uui-size-11); - box-sizing: border-box; } `, ]; From e46da116253804559f708c6f621e8f9033ce1929 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 1 Jul 2024 11:28:52 +0200 Subject: [PATCH 04/10] make mutable array before sorting --- .../src/libs/observable-api/states/array-state.ts | 4 ++-- .../property-editors/block-list-editor/manifests.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts b/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts index c31a4d98a7..9c1e5d8d89 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts @@ -35,7 +35,7 @@ export class UmbArrayState extends UmbDeepState { */ sortBy(sortMethod?: (a: T, b: T) => number) { this.#sortMethod = sortMethod; - super.setValue(this.getValue().sort(this.#sortMethod)); + super.setValue([...this.getValue()].sort(this.#sortMethod)); return this; } @@ -51,7 +51,7 @@ export class UmbArrayState extends UmbDeepState { */ override setValue(value: T[]) { if (this.#sortMethod) { - super.setValue(value.sort(this.#sortMethod)); + super.setValue([...value].sort(this.#sortMethod)); } else { super.setValue(value); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts index c3d07105cc..bbb50aafbc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts @@ -1,5 +1,5 @@ -import { manifest as blockListSchemaManifest } from './Umbraco.BlockList.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; +import { manifest as blockListSchemaManifest } from './Umbraco.BlockList.js'; export const UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS = 'Umbraco.BlockList'; From 7a5e459b883fdcb3c12dde3cc00308a76ec6ea95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 1 Jul 2024 11:29:27 +0200 Subject: [PATCH 05/10] only sort if it has a value --- .../src/libs/observable-api/states/array-state.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts b/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts index 9c1e5d8d89..57adf7f0a1 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts @@ -35,7 +35,10 @@ export class UmbArrayState extends UmbDeepState { */ sortBy(sortMethod?: (a: T, b: T) => number) { this.#sortMethod = sortMethod; - super.setValue([...this.getValue()].sort(this.#sortMethod)); + const value = this.getValue(); + if(value) { + super.setValue([...value].sort(this.#sortMethod)); + } return this; } From 333f6afb3bccbd0192cd39c5c62e6629c5cbfe4c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 1 Jul 2024 15:10:43 +0200 Subject: [PATCH 06/10] render collection icon for document tree items --- .../tree-item/document-tree-item.element.ts | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts index f5fe1ad165..34ac931c72 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts @@ -1,9 +1,9 @@ -import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js'; import { css, html, nothing, customElement, state, classMap } from '@umbraco-cms/backoffice/external/lit'; import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language'; import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbTreeItemElementBase } from '@umbraco-cms/backoffice/tree'; +import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js'; @customElement('umb-document-tree-item') export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase { @@ -74,11 +74,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase - ${this.item.isProtected ? this.#renderIsProtectedIcon() : nothing} - + ${this.#renderStateIcon()} ` : nothing} @@ -91,8 +87,24 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase `; } + #renderStateIcon() { + if (this.item?.isProtected) { + return this.#renderIsProtectedIcon(); + } + + if (this.item?.documentType.collection) { + return this.#renderIsCollectionIcon(); + } + + return nothing; + } + + #renderIsCollectionIcon() { + return html``; + } + #renderIsProtectedIcon() { - return html``; + return html``; } static override styles = [ @@ -106,19 +118,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase Date: Mon, 1 Jul 2024 15:15:37 +0200 Subject: [PATCH 07/10] render collection icon for media tree item --- .../tree/tree-item/media-tree-item.element.ts | 56 ++++++++++++++++++- 1 file changed, 55 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts index 4c1e2e6cea..2245ca14ce 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts @@ -10,7 +10,10 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase ${this.item?.mediaType.icon - ? html` ` + ? html` + + ${this.#renderStateIcon()} + ` : nothing} `; @@ -20,6 +23,18 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase${this._item?.variants[0].name} `; } + #renderStateIcon() { + if (this.item?.mediaType.collection) { + return this.#renderIsCollectionIcon(); + } + + return nothing; + } + + #renderIsCollectionIcon() { + return html``; + } + static override styles = [ UmbTextStyles, css` @@ -36,6 +51,45 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase Date: Mon, 1 Jul 2024 15:15:44 +0200 Subject: [PATCH 08/10] clean up --- .../tree/tree-item/document-tree-item.element.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts index 34ac931c72..3fae384c2f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts @@ -118,6 +118,12 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase Date: Sun, 30 Jun 2024 21:00:50 +0100 Subject: [PATCH 09/10] [FIX] Scroll Bar / Panel Width Adjustment cursor --- .../packages/core/components/split-panel/split-panel.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts index 3cfd61b9f0..b24ae93638 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts @@ -294,7 +294,7 @@ export class UmbSplitPanelElement extends LitElement { #divider-touch-area { position: absolute; top: 0; - left: 0; + left: 5px; height: 100%; width: var(--umb-split-panel-divider-touch-area-width); transform: translateX(-50%); From d52e66f4351b5b3233540506268324e20b7c600c Mon Sep 17 00:00:00 2001 From: leekelleher Date: Tue, 2 Jul 2024 11:39:08 +0100 Subject: [PATCH 10/10] Adds background-color to umb-table header Fixes #16467 --- .../core/components/table/table.element.ts | 107 ++++++++++-------- 1 file changed, 59 insertions(+), 48 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts index d400a230f9..279c064ffe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts @@ -1,5 +1,3 @@ -import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, customElement, @@ -11,6 +9,8 @@ import { when, LitElement, } from '@umbraco-cms/backoffice/external/lit'; +import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; // TODO: move to UI Library - entity actions should NOT be moved to UI Library but stay in an UmbTable element export interface UmbTableItem { @@ -163,17 +163,19 @@ export class UmbTableElement extends LitElement { } override render() { - return html` - 'width: 60px', - )}> - - ${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))} - - ${repeat(this.items, (item) => item.id, this._renderRow)} - `; + return html` + + 'width: 60px', + )}> + + ${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))} + + ${repeat(this.items, (item) => item.id, this._renderRow)} + + `; } private _renderHeaderCell(column: UmbTableColumn) { @@ -201,48 +203,54 @@ export class UmbTableElement extends LitElement { private _renderHeaderCheckboxCell() { if (this.config.hideIcon && !this.config.allowSelection) return; - return html` - ${when( - this.config.allowSelection, - () => - html` - `, - )} - `; + return html` + + ${when( + this.config.allowSelection, + () => + html` + `, + )} + + `; } private _renderRow = (item: UmbTableItem) => { - return html` this._selectRow(item.id)} - @deselected=${() => this._deselectRow(item.id)}> - ${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))} - `; + return html` + this._selectRow(item.id)} + @deselected=${() => this._deselectRow(item.id)}> + ${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))} + + `; }; private _renderRowCheckboxCell(item: UmbTableItem) { if (this.config.hideIcon && !this.config.allowSelection) return; - return html` - ${when(!this.config.hideIcon, () => html``)} - ${when( - this.config.allowSelection, - () => html` - e.stopPropagation()} - @change=${(event: Event) => this._handleRowCheckboxChange(event, item)} - ?checked="${this._isSelected(item.id)}"> - - `, - )} - `; + return html` + + ${when(!this.config.hideIcon, () => html``)} + ${when( + this.config.allowSelection, + () => html` + e.stopPropagation()} + @change=${(event: Event) => this._handleRowCheckboxChange(event, item)} + ?checked="${this._isSelected(item.id)}"> + + `, + )} + + `; } private _renderRowCell(column: UmbTableColumn, item: UmbTableItem) { @@ -251,7 +259,8 @@ export class UmbTableElement extends LitElement { style="--uui-table-cell-padding: 0 var(--uui-size-5); text-align:${column.align ?? 'left'}; width: ${column.width || 'auto'};"> ${this._renderCellContent(column, item)} - `; + + `; } private _renderCellContent(column: UmbTableColumn, item: UmbTableItem) { @@ -292,6 +301,7 @@ export class UmbTableElement extends LitElement { position: sticky; top: 0; z-index: 1; + background-color: var(--uui-color-surface, #fff); } uui-table-row uui-checkbox { @@ -331,6 +341,7 @@ export class UmbTableElement extends LitElement { justify-content: space-between; width: 100%; } + uui-table-head-cell button > span { flex: 1 0 auto; }