web: add ak-expand

This commit is contained in:
Jens Langhammer 2021-02-04 20:48:16 +01:00
parent de2d8b2d85
commit dd8c1eeb52
3 changed files with 48 additions and 4 deletions

View File

@ -169,6 +169,13 @@ select[multiple] {
.pf-c-table__toggle-icon {
color: var(--ak-dark-foreground);
}
/* expandable elements */
.pf-c-expandable-section__toggle-text {
color: var(--ak-dark-foreground);
}
.pf-c-expandable-section__toggle-icon {
color: var(--ak-dark-foreground);
}
/* inputs */
.pf-c-input-group {
--pf-c-input-group--BackgroundColor: transparent;

View File

@ -0,0 +1,36 @@
import { gettext } from "django";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../common/styles";
@customElement("ak-expand")
export class Expand extends LitElement {
@property({ type: Boolean })
expanded = false;
@property()
textOpen = "Show less";
@property()
textClosed = "Show more";
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
render(): TemplateResult {
console.log(this.expanded);
return html`<div class="pf-c-expandable-section ${this.expanded ? "pf-m-expanded" : ""}">
<button type="button" class="pf-c-expandable-section__toggle" aria-expanded="${this.expanded}" @click=${() => {
this.expanded = !this.expanded;
}}>
<span class="pf-c-expandable-section__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-expandable-section__toggle-text">${gettext(this.expanded ? this.textOpen : this.textClosed)}</span>
</button>
<slot ?hidden=${!this.expanded} class="pf-c-expandable-section__content"></slot>
</div>`;
}
}

View File

@ -76,10 +76,11 @@ export class EventInfo extends LitElement {
<div class="pf-l-flex__item">
<h3>${gettext("Using flow")}</h3>
<span>${until(Flow.list({
flow_uuid: this.event.context.flow as string,
}).then(resp => {
return html`<a href="#/flows/${resp.results[0].slug}">${resp.results[0].name}</a>`;
}), html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`)}</span>
flow_uuid: this.event.context.flow as string,
}).then(resp => {
return html`<a href="#/flows/${resp.results[0].slug}">${resp.results[0].name}</a>`;
}), html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`)}
</span>
</div>
</div>`;
case "login_failed":