yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1007 from umbraco/feature/user-filters-styling

Browse Source 
Feature/user filters styling
This commit is contained in:
Mads Rasmussen
2023-11-21 13:11:13 +01:00
committed by GitHub
parent 3db5a86e81 fa0a7c1f54
commit fecfdd65ac
5 changed files with 136 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts
View File

@@ -12,9 +12,6 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
@state()
_currentView?: ManifestCollectionView;
@state()
private _isOpen = false;
@state()
private _collectionRootPathname = '';
@@ -33,56 +30,65 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
}
#observeCurrentView() {
this.observe(this.#collectionContext!.currentView, (view) => {
this._currentView = view;
}, 'umbCurrentCollectionViewObserver');
this.observe(
this.#collectionContext!.currentView,
(view) => {
//TODO: This is not called when the view is changed
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` <umb-dropdown .open="${this._isOpen}" @close=${this.#closeDropdown}>
<uui-button slot="trigger" label="status" @click=${this.#toggleDropdown}
>${this.#renderItemDisplay(this._currentView)}</uui-button
>
<div slot="dropdown" class="filter-dropdown">${this._views.map((view) => this.#renderItem(view))}</div>
</umb-dropdown>`;
return html`
<uui-button compact popovertarget="collection-view-bundle-popover" label="status">
${this.#renderItemDisplay(this._currentView)}
</uui-button>
<uui-popover-container id="collection-view-bundle-popover" popover placement="bottom">
<umb-popover-layout>
<div class="filter-dropdown">${this._views.map((view) => this.#renderItem(view))}</div>
</umb-popover-layout>
</uui-popover-container>
`;
}
#renderItem(view: ManifestCollectionView) {
return html`<a href="${this._collectionRootPathname}/${view.meta.pathName}">${this.#renderItemDisplay(view)}</a>`;
return html`
<uui-button compact href="${this._collectionRootPathname}/${view.meta.pathName}">
${this.#renderItemDisplay(view)} <span class="label">${view.meta.label}</span>
</uui-button>
`;
}
#renderItemDisplay(view: ManifestCollectionView) {
return html`<span class="item"><uui-icon name=${view.meta.icon}></uui-icon> ${view.meta.label}</span>`;
return html`<uui-icon name=${view.meta.icon}></uui-icon>`;
}
static styles = [
UmbTextStyles,
css`
.item {
:host {
--uui-button-content-align: left;
}
a {
display: block;
.label {
margin-left: var(--uui-size-space-1);
}
.filter-dropdown {
display: flex;
gap: var(--uui-size-space-3);
flex-direction: column;
}
`,
];

1
src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
View File

@@ -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';

3
src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import './popover-layout.element.js';
export * from './popover-layout.element.js';

33
src/Umbraco.Web.UI.Client/src/packages/core/components/popover-layout/popover-layout.element.ts Normal file
View File

@@ -0,0 +1,33 @@
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.
// TODO: add overwrites for customization.
@customElement('umb-popover-layout')
export class UmbPopoverLayoutElement extends UmbLitElement {
render() {
return html`<slot></slot>`;
}
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;
}
}

107
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts
View File

@@ -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 || '';
@@ -118,8 +109,9 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
render() {
return html`
${this.#renderCollectionActions()} ${this.#renderSearch()} ${this.#renderFilters()}
${this.#renderCollectionViews()}
<div style="display: flex; gap: var(--uui-size-space-4)">${this.#renderCollectionActions()}</div>
${this.#renderSearch()}
<div>${this.#renderFilters()} ${this.#renderCollectionViews()}</div>
`;
}
@@ -162,9 +154,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() {
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
.slice(0, max)
.map((state) => this.localize.term('user_state' + state))
.join(', ') + (length > max ? ' + ' + (length - max) : '');
}
#renderFilters() {
@@ -173,45 +183,47 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
#renderStatusFilter() {
return html`
<umb-dropdown class="filter">
<uui-button @click=${this.#onDropdownClick} slot="trigger" label="status">
<umb-localize key="general_status"></umb-localize>:
<umb-localize key=${'user_state' + this._stateFilterSelection}></umb-localize>
</uui-button>
<div slot="dropdown" class="filter-dropdown">
${this._stateFilterOptions.map(
(option) =>
html`<uui-checkbox
label=${this.localize.term('user_state' + option)}
@change=${this.#onStateFilterChange}
name="state"
value=${option}></uui-checkbox>`,
)}
</div>
</umb-dropdown>
<uui-button popovertarget="popover-user-status-filter" label="status">
<umb-localize key="general_status"></umb-localize>: <b>${this.#getStatusFilterLabel()}</b>
</uui-button>
<uui-popover-container id="popover-user-status-filter" popover placement="bottom">
<umb-popover-layout>
<div class="filter-dropdown">
${this._stateFilterOptions.map(
(option) =>
html`<uui-checkbox
label=${this.localize.term('user_state' + option)}
@change=${this.#onStateFilterChange}
name="state"
value=${option}></uui-checkbox>`,
)}
</div>
</umb-popover-layout>
</uui-popover-container>
`;
}
#renderUserGroupFilter() {
return html`
<umb-dropdown class="filter">
<uui-button @click=${this.#onDropdownClick} slot="trigger" label=${this.localize.term('general_groups')}>
<umb-localize key="general_groups"></umb-localize>: ${this.#getUserGroupFilterLabel()}
</uui-button>
<div slot="dropdown" class="filter-dropdown">
${repeat(
this._userGroups,
(group) => group.id,
(group) => html`
<uui-checkbox
label=${ifDefined(group.name)}
value=${ifDefined(group.id)}
@change=${this.#onUserGroupFilterChange}></uui-checkbox>
`,
)}
</div>
</umb-dropdown>
<uui-button popovertarget="popover-user-group-filter" label=${this.localize.term('general_groups')}>
<umb-localize key="general_groups"></umb-localize>: <b>${this.#getUserGroupFilterLabel()}</b>
</uui-button>
<uui-popover-container id="popover-user-group-filter" popover placement="bottom">
<umb-popover-layout>
<div class="filter-dropdown">
${repeat(
this._userGroups,
(group) => group.id,
(group) => html`
<uui-checkbox
label=${ifDefined(group.name)}
value=${ifDefined(group.id)}
@change=${this.#onUserGroupFilterChange}></uui-checkbox>
`,
)}
</div>
</umb-popover-layout>
</uui-popover-container>
`;
}
@@ -243,7 +255,6 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
display: flex;
gap: var(--uui-size-space-3);
flex-direction: column;
width: fit-content;
}
`,
];