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

use popover layout

Browse Source
This commit is contained in:
Jesper Møller Jensen
2023-11-21 16:30:54 +13:00
parent 96a966c3e2
commit 7eb9484667
1 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -173,45 +173,48 @@ 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>:
<umb-localize key=${'user_state' + this._stateFilterSelection}></umb-localize>
</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>: ${this.#getUserGroupFilterLabel()}
</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 +246,6 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
display: flex;
gap: var(--uui-size-space-3);
flex-direction: column;
width: fit-content;
}
`,
];