From 96a966c3e26208dabc5f98638e048fd1620aed36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 21 Nov 2023 16:30:40 +1300 Subject: [PATCH 01/10] add popover layout --- .../src/packages/core/components/index.ts | 1 + .../core/components/popover-layout/index.ts | 3 ++ .../popover-layout/popover-layout.element.ts | 32 +++++++++++++++++++ 3 files changed, 36 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index d212570fa6..99fe0873ce 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts @@ -33,3 +33,4 @@ export * from './ref-property-editor-ui/index.js'; export * from './table/index.js'; export * from './tooltip-menu/index.js'; export * from './variant-selector/index.js'; +export * from './popover-layout/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts new file mode 100644 index 0000000000..8bea3415c4 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts @@ -0,0 +1,3 @@ +import './popover-layout.element.js'; + +export * from './popover-layout.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts new file mode 100644 index 0000000000..4f60d3e1b0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts @@ -0,0 +1,32 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; + +// TODO: maybe move this to UI Library. +@customElement('umb-popover-layout') +export class UmbPopoverLayoutElement extends UmbLitElement { + render() { + return html``; + } + + static styles = [ + UmbTextStyles, + css` + :host { + background-color: var(--uui-color-surface); + display: block; + border: 1px solid var(--uui-color-border); + border-radius: var(--uui-border-radius); + box-shadow: var(--uui-shadow-depth-3); + padding: var(--uui-size-space-3); + overflow: clip; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-popover-layout': UmbPopoverLayoutElement; + } +} From 7eb94846670b5978e0644dfa19f44bcc39f83b7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 21 Nov 2023 16:30:54 +1300 Subject: [PATCH 02/10] use popover layout --- .../user-collection-header.element.ts | 72 ++++++++++--------- 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts index 29c7bcb878..499073f763 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts @@ -173,45 +173,48 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement { #renderStatusFilter() { return html` - - - : - - - -
- ${this._stateFilterOptions.map( - (option) => - html``, - )} -
- + + : + + + + +
+ ${this._stateFilterOptions.map( + (option) => + html``, + )} +
+ + `; } #renderUserGroupFilter() { return html` - - - : ${this.#getUserGroupFilterLabel()} - -
- ${repeat( - this._userGroups, - (group) => group.id, - (group) => html` - - `, - )} -
- + + : ${this.#getUserGroupFilterLabel()} + + + +
+ ${repeat( + this._userGroups, + (group) => group.id, + (group) => html` + + `, + )} +
+ + `; } @@ -243,7 +246,6 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement { display: flex; gap: var(--uui-size-space-3); flex-direction: column; - width: fit-content; } `, ]; From c3af008364ca43665d036a6c6381c92bac3799a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 21 Nov 2023 16:31:41 +1300 Subject: [PATCH 03/10] comment --- .../core/components/popover-layout/popover-layout.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts index 4f60d3e1b0..7b0994bbf4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts @@ -3,6 +3,7 @@ import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; // TODO: maybe move this to UI Library. +// TODO: add overwrites for customization. @customElement('umb-popover-layout') export class UmbPopoverLayoutElement extends UmbLitElement { render() { From 6bb85fbf703abae51a5680be70a5afa28302dc80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 21 Nov 2023 16:44:10 +1300 Subject: [PATCH 04/10] collection view bundle --- .../collection-view-bundle.element.ts | 69 +++++++++---------- 1 file changed, 34 insertions(+), 35 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts index 54ad3b675a..f7e767c302 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts @@ -12,9 +12,6 @@ export class UmbCollectionViewBundleElement extends UmbLitElement { @state() _currentView?: ManifestCollectionView; - @state() - private _isOpen = false; - @state() private _collectionRootPathname = ''; @@ -33,56 +30,58 @@ export class UmbCollectionViewBundleElement extends UmbLitElement { } #observeCurrentView() { - this.observe(this.#collectionContext!.currentView, (view) => { - this._currentView = view; - }, 'umbCurrentCollectionViewObserver'); + this.observe( + this.#collectionContext!.currentView, + (view) => { + this._currentView = view; + }, + 'umbCurrentCollectionViewObserver', + ); } #observeViews() { - this.observe(this.#collectionContext!.views, (views) => { - this._views = views; - }, 'umbCollectionViewsObserver'); + this.observe( + this.#collectionContext!.views, + (views) => { + this._views = views; + }, + 'umbCollectionViewsObserver', + ); } - - #toggleDropdown() { - this._isOpen = !this._isOpen; - } - - #closeDropdown() { - this._isOpen = false; - } - render() { - return html`${this.#renderLayoutButton()}`; - } - - #renderLayoutButton() { if (!this._currentView) return nothing; - return html` - ${this.#renderItemDisplay(this._currentView)} -
${this._views.map((view) => this.#renderItem(view))}
- `; + return html` + + ${this.#renderItemDisplay(this._currentView)} + + + +
${this._views.map((view) => this.#renderItem(view))}
+ + + `; } #renderItem(view: ManifestCollectionView) { - return html`${this.#renderItemDisplay(view)}`; + return html` + + ${this.#renderItemDisplay(view)} + + `; } #renderItemDisplay(view: ManifestCollectionView) { - return html` ${view.meta.label}`; + return html``; } static styles = [ UmbTextStyles, css` - .item { - } - - a { - display: block; + .filter-dropdown { + display: flex; + gap: var(--uui-size-space-3); + flex-direction: column; } `, ]; From e6ee6acad50d35128296b56d36b474d6de14f614 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 21 Nov 2023 16:47:50 +1300 Subject: [PATCH 05/10] status label --- .../user/collection/user-collection-header.element.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts index 499073f763..7c5ea6423a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts @@ -167,6 +167,12 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement { : this._userGroupFilterSelection.map((group) => group.name).join(', '); } + #getStatusFilterLabel() { + return this._stateFilterSelection.length === 0 + ? this.localize.term('general_all') + : this._stateFilterSelection.map((state) => this.localize.term('user_state' + state)).join(', '); + } + #renderFilters() { return html` ${this.#renderStatusFilter()} ${this.#renderUserGroupFilter()} `; } @@ -174,8 +180,7 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement { #renderStatusFilter() { return html` - : - + : ${this.#getStatusFilterLabel()} From a3238290b683c290c6a411abd146d0c1fe1d78f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 21 Nov 2023 16:54:45 +1300 Subject: [PATCH 06/10] comment --- .../core/collection/components/collection-view-bundle.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts index f7e767c302..ca67b70a05 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts @@ -33,6 +33,7 @@ export class UmbCollectionViewBundleElement extends UmbLitElement { this.observe( this.#collectionContext!.currentView, (view) => { + //TODO: This is not called when the view is changed this._currentView = view; }, 'umbCurrentCollectionViewObserver', From 4a7edf31af840f476d4ac1a4b8506fa4812429e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 21 Nov 2023 16:57:47 +1300 Subject: [PATCH 07/10] cleanup --- .../user/collection/user-collection-header.element.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts index 7c5ea6423a..1ab280ee47 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts @@ -69,15 +69,6 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement { } } - #onDropdownClick(event: PointerEvent) { - const composedPath = event.composedPath(); - - const dropdown = composedPath.find((el) => el instanceof UmbDropdownElement) as UmbDropdownElement; - if (dropdown) { - dropdown.open = !dropdown.open; - } - } - private _updateSearch(event: InputEvent) { const target = event.target as HTMLInputElement; const filter = target.value || ''; From 33de3db78614912b7d6b90d6c09773b709e1acc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 21 Nov 2023 18:04:15 +1300 Subject: [PATCH 08/10] limit items on filter buttons --- .../user-collection-header.element.ts | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts index 1ab280ee47..7299da3b78 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts @@ -153,15 +153,27 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement { } #getUserGroupFilterLabel() { - return this._userGroupFilterSelection.length === 0 + const length = this._userGroupFilterSelection.length; + const max = 2; + //TODO: Temp solution to limit the amount of states shown + return length === 0 ? this.localize.term('general_all') - : this._userGroupFilterSelection.map((group) => group.name).join(', '); + : this._userGroupFilterSelection + .slice(0, max) + .map((group) => group.name) + .join(', ') + (length > max ? ' + ' + (length - max) : ''); } #getStatusFilterLabel() { - return this._stateFilterSelection.length === 0 + const length = this._stateFilterSelection.length; + const max = 2; + //TODO: Temp solution to limit the amount of states shown + return length === 0 ? this.localize.term('general_all') - : this._stateFilterSelection.map((state) => this.localize.term('user_state' + state)).join(', '); + : this._stateFilterSelection + .slice(0, max) + .map((state) => this.localize.term('user_state' + state)) + .join(', ') + (length > max ? ' + ' + (length - max) : ''); } #renderFilters() { @@ -171,7 +183,7 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement { #renderStatusFilter() { return html` - : ${this.#getStatusFilterLabel()} + : ${this.#getStatusFilterLabel()} @@ -193,7 +205,7 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement { #renderUserGroupFilter() { return html` - : ${this.#getUserGroupFilterLabel()} + : ${this.#getUserGroupFilterLabel()} From 6771f75df3cfd37cde6969a821778ceeef9532f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 21 Nov 2023 18:08:36 +1300 Subject: [PATCH 09/10] header styling --- .../user/user/collection/user-collection-header.element.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts index 7299da3b78..0dc081232f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts @@ -109,8 +109,9 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement { render() { return html` - ${this.#renderCollectionActions()} ${this.#renderSearch()} ${this.#renderFilters()} - ${this.#renderCollectionViews()} +
${this.#renderCollectionActions()}
+ ${this.#renderSearch()} +
${this.#renderFilters()} ${this.#renderCollectionViews()}
`; } From fa0a7c1f548e8df79aaf2744b6b2c5c28aef315f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 21 Nov 2023 22:22:55 +1300 Subject: [PATCH 10/10] add labels to view bundle dropdown --- .../components/collection-view-bundle.element.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts index ca67b70a05..8283848981 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts @@ -67,7 +67,7 @@ export class UmbCollectionViewBundleElement extends UmbLitElement { #renderItem(view: ManifestCollectionView) { return html` - ${this.#renderItemDisplay(view)} + ${this.#renderItemDisplay(view)} ${view.meta.label} `; } @@ -79,6 +79,12 @@ export class UmbCollectionViewBundleElement extends UmbLitElement { static styles = [ UmbTextStyles, css` + :host { + --uui-button-content-align: left; + } + .label { + margin-left: var(--uui-size-space-1); + } .filter-dropdown { display: flex; gap: var(--uui-size-space-3);