web/elements: add TableModal for selecting objects in a modal
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
		@ -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() {
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user