113 lines
2.9 KiB
TypeScript
113 lines
2.9 KiB
TypeScript
import {
|
|
css,
|
|
CSSResultGroup,
|
|
html,
|
|
LitElement,
|
|
nothing,
|
|
TemplateResult,
|
|
} from "lit";
|
|
import { customElement, property } from "lit/decorators";
|
|
import "../components/ha-circular-progress";
|
|
import "../components/ha-icon-button-arrow-prev";
|
|
import "../components/ha-menu-button";
|
|
import { haStyle } from "../resources/styles";
|
|
import { HomeAssistant } from "../types";
|
|
|
|
@customElement("hass-loading-screen")
|
|
class HassLoadingScreen extends LitElement {
|
|
@property({ attribute: false }) public hass?: HomeAssistant;
|
|
|
|
@property({ type: Boolean, attribute: "no-toolbar" })
|
|
public noToolbar = false;
|
|
|
|
@property({ type: Boolean }) public rootnav = false;
|
|
|
|
@property({ type: Boolean }) public narrow = false;
|
|
|
|
@property() public message?: string;
|
|
|
|
protected render(): TemplateResult {
|
|
return html`
|
|
${this.noToolbar
|
|
? ""
|
|
: html`<div class="toolbar">
|
|
${this.rootnav || history.state?.root
|
|
? html`
|
|
<ha-menu-button
|
|
.hass=${this.hass}
|
|
.narrow=${this.narrow}
|
|
></ha-menu-button>
|
|
`
|
|
: html`
|
|
<ha-icon-button-arrow-prev
|
|
.hass=${this.hass}
|
|
@click=${this._handleBack}
|
|
></ha-icon-button-arrow-prev>
|
|
`}
|
|
</div>`}
|
|
<div class="content">
|
|
<ha-circular-progress active></ha-circular-progress>
|
|
${this.message
|
|
? html`<div id="loading-text">${this.message}</div>`
|
|
: nothing}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private _handleBack() {
|
|
history.back();
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return [
|
|
haStyle,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
height: 100%;
|
|
background-color: var(--primary-background-color);
|
|
}
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 20px;
|
|
height: var(--header-height);
|
|
padding: 8px 12px;
|
|
pointer-events: none;
|
|
background-color: var(--app-header-background-color);
|
|
font-weight: 400;
|
|
color: var(--app-header-text-color, white);
|
|
border-bottom: var(--app-header-border-bottom, none);
|
|
box-sizing: border-box;
|
|
}
|
|
@media (max-width: 599px) {
|
|
.toolbar {
|
|
padding: 4px;
|
|
}
|
|
}
|
|
ha-menu-button,
|
|
ha-icon-button-arrow-prev {
|
|
pointer-events: auto;
|
|
}
|
|
.content {
|
|
height: calc(100% - var(--header-height));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
#loading-text {
|
|
max-width: 350px;
|
|
margin-top: 16px;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"hass-loading-screen": HassLoadingScreen;
|
|
}
|
|
}
|