${this.hass.localize("ui.panel.config.integrations.new")}
diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts index 97b908001f..c8e0f87f90 100644 --- a/src/layouts/home-assistant.ts +++ b/src/layouts/home-assistant.ts @@ -67,6 +67,12 @@ export class HomeAssistantAppEl extends HassElement { } } + protected hassConnected() { + super.hassConnected(); + // @ts-ignore + this._loadHassTranslations(this.hass!.language, "state"); + } + protected hassReconnected() { super.hassReconnected(); diff --git a/src/onboarding/action-badge.ts b/src/onboarding/action-badge.ts new file mode 100644 index 0000000000..1e70df14ce --- /dev/null +++ b/src/onboarding/action-badge.ts @@ -0,0 +1,89 @@ +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + TemplateResult, +} from "lit-element"; +import "../components/ha-icon"; + +@customElement("action-badge") +class ActionBadge extends LitElement { + @property() public icon!: string; + + @property() public title!: string; + + @property() public badgeIcon?: string; + + @property({ type: Boolean, reflect: true }) public clickable = false; + + protected render(): TemplateResult { + return html` +
+
+ ${this.title}
+ `;
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: inline-flex;
+ flex-direction: column;
+ text-align: center;
+ color: var(--primary-text-color);
+ }
+
+ :host([clickable]) {
+ color: var(--primary-text-color);
+ }
+
+ .icon {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0 auto 8px;
+ height: 40px;
+ width: 40px;
+ border-radius: 50%;
+ border: 1px solid var(--secondary-text-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ :host([clickable]) .icon {
+ border-color: var(--primary-color);
+ border-width: 2px;
+ }
+
+ .badge {
+ position: absolute;
+ color: var(--primary-color);
+ bottom: -5px;
+ right: -5px;
+ background-color: white;
+ border-radius: 50%;
+ width: 18px;
+ display: block;
+ height: 18px;
+ }
+
+ .title {
+ min-height: 2.3em;
+ word-break: break-word;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "action-badge": ActionBadge;
+ }
+}
diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts
index c11e3a26c7..1bb279b465 100644
--- a/src/onboarding/ha-onboarding.ts
+++ b/src/onboarding/ha-onboarding.ts
@@ -27,6 +27,7 @@ import { HassElement } from "../state/hass-element";
import { registerServiceWorker } from "../util/register-service-worker";
import "./onboarding-create-user";
import "./onboarding-loading";
+import { HomeAssistant } from "../types";
interface OnboardingEvent
- 
${this.badgeIcon
? html`
${this.badgeIcon
? html`
${content}