web/elements: add TableModal for selecting objects in a modal

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-04-10 20:13:35 +02:00
parent c133f16371
commit c44aa2a204
2 changed files with 98 additions and 18 deletions

View File

@ -13,6 +13,23 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../../authentik.css";
import { PFSize } from "../Spinner";
export const MODAL_BUTTON_STYLES = css`
:host {
text-align: left;
font-size: var(--pf-global--FontSize--md);
}
.pf-c-modal-box.pf-m-lg {
overflow-y: auto;
}
.pf-c-modal-box > .pf-c-button + * {
margin-right: 0;
}
/* fix multiple selects height */
select[multiple] {
height: 15em;
}
`;
@customElement("ak-modal-button")
export class ModalButton extends LitElement {
@property()
@ -22,24 +39,7 @@ export class ModalButton extends LitElement {
open = false;
static get styles(): CSSResult[] {
return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal].concat(
css`
:host {
text-align: left;
font-size: var(--pf-global--FontSize--md);
}
.pf-c-modal-box.pf-m-lg {
overflow-y: auto;
}
.pf-c-modal-box > .pf-c-button + * {
margin-right: 0;
}
/* fix multiple selects height */
select[multiple] {
height: 15em;
}
`
);
return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal, MODAL_BUTTON_STYLES];
}
constructor() {