trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/elements: render ak-seach-select dropdown correctly in modals

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-12-28 20:38:57 +01:00
parent ff13b4bb46
commit b1020fde64
No known key found for this signature in database
4 changed files with 94 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
authentik/core/templates/base/skeleton.html
View file

@ -13,6 +13,7 @@
<link rel="stylesheet" type="text/css" href="{% static 'dist/page.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'dist/empty-state.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'dist/spinner.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'dist/dropdown.css' %}">
{% block head_before %}
{% endblock %}
<link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}">

4
web/rollup.config.js
View file

@ -24,6 +24,10 @@ export const resources = [
src: "node_modules/@patternfly/patternfly/patternfly-base.css",
dest: "dist/",
},
{
src: "node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css",
dest: "dist/",
},
{
src: "node_modules/@patternfly/patternfly/components/Page/page.css",
dest: "dist/",

12
web/src/common/styles/authentik.css
View file

@ -310,6 +310,18 @@ html > form > input {
.pf-c-dropdown__toggle::before {
border-color: transparent;
}
.pf-c-dropdown__menu {
--pf-c-dropdown__menu--BackgroundColor: var(--ak-dark-background);
}
.pf-c-dropdown__menu-item {
--pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background);
--pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
}
.pf-c-dropdown__menu-item:hover,
.pf-c-dropdown__menu-item:focus {
--pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background-light-ish);
--pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
}
.pf-c-toggle-group__button {
color: var(--ak-dark-foreground) !important;
}

113
web/src/elements/SearchSelect.ts
View file

@ -2,7 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base";
import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, html } from "lit";
import { CSSResult, TemplateResult, html, render } from "lit";
import { customElement, property } from "lit/decorators.js";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
@ -61,7 +61,81 @@ export class SearchSelect<T> extends AKElement {
});
}
menuId: string;
constructor() {
super();
this.menuId = btoa(Math.random().toString()).substring(10, 15);
}
disconnectedCallback(): void {
super.disconnectedCallback();
document.querySelectorAll(`#${this.menuId}`).forEach((e) => e.remove());
}
/*
* This is a little bit hacky. Because we mainly want to use this field in modal-based forms,
* rendering this menu inline makes the menu not overlay over top of the modal, and cause
* the modal to scroll.
* Hence, we render the menu into the document root, hide it when this menu isn't open
* and remove it on disconnect
* Also to move it to the correct position we're getting this elements's position and use that
* to position the menu
* The other downside this has is that, since we're rendering outside of a shadow root,
* the pf-c-dropdown CSS needs to be loaded on the body.
*/
renderMenu(): void {
const pos = this.getBoundingClientRect();
render(
html`<div
class="pf-c-dropdown pf-m-expanded"
?hidden=${!this.open}
id="${this.menuId}"
style="position: fixed; inset: 0px auto auto 0px; z-index: 9999; transform: translate(${pos.x}px, ${pos.y +
this.offsetHeight}px); width: ${pos.width}px;"
>
<ul class="pf-c-dropdown__menu pf-m-static" role="listbox">
${this.blankable
? html`
<li role="presentation">
<button
class="pf-c-dropdown__menu-item"
role="option"
@click=${() => {
this.selectedObject = undefined;
this.open = false;
}}
>
---------
</button>
</li>
`
: html``}
${this.objects.map((obj) => {
return html`
<li role="presentation">
<button
class="pf-c-dropdown__menu-item"
role="option"
@click=${() => {
this.selectedObject = obj;
this.open = false;
}}
>
${this.renderElement(obj)}
</button>
</li>
`;
})}
</ul>
</div>`,
document.body,
{ host: this },
);
}
render(): TemplateResult {
this.renderMenu();
return html`<div class="pf-c-select">
<div class="pf-c-select__toggle pf-m-typeahead">
<div class="pf-c-select__toggle-wrapper">
@ -75,51 +149,18 @@ export class SearchSelect<T> extends AKElement {
}}
@focus=${() => {
this.open = true;
this.renderMenu();
}}
@blur=${() => {
setTimeout(() => {
this.open = false;
this.renderMenu();
}, 200);
}}
.value=${this.selectedObject ? this.renderElement(this.selectedObject) : ""}
/>
</div>
</div>
<ul class="pf-c-select__menu" role="listbox" ?hidden="${!this.open}">
${this.blankable
? html`
<li role="presentation">
<button
class="pf-c-select__menu-item"
role="option"
@click=${() => {
this.selectedObject = undefined;
this.open = false;
}}
>
---------
</button>
</li>
`
: html``}
${this.objects.map((obj) => {
return html`
<li role="presentation">
<button
class="pf-c-select__menu-item"
role="option"
@click=${() => {
this.selectedObject = obj;
this.open = false;
}}
>
${this.renderElement(obj)}
</button>
</li>
`;
})}
</ul>
</div>`;
}
}