diff --git a/src/onboarding/action-badge.ts b/src/onboarding/action-badge.ts deleted file mode 100644 index c53f57ca52..0000000000 --- a/src/onboarding/action-badge.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators"; -import "../components/ha-svg-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.badgeIcon - ? html`` - : ""} -
-
${this.title}
- `; - } - - static get styles(): CSSResultGroup { - 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/integration-badge.ts b/src/onboarding/integration-badge.ts index fc440b1589..e888460046 100644 --- a/src/onboarding/integration-badge.ts +++ b/src/onboarding/integration-badge.ts @@ -9,8 +9,6 @@ class IntegrationBadge extends LitElement { @property() public title!: string; - @property() public badgeIcon?: string; - @property({ type: Boolean }) public darkOptimizedIcon?: boolean; @property({ type: Boolean, reflect: true }) public clickable = false; @@ -27,12 +25,6 @@ class IntegrationBadge extends LitElement { })} referrerpolicy="no-referrer" /> - ${this.badgeIcon - ? html`` - : ""}
${this.title}
`; @@ -47,10 +39,6 @@ class IntegrationBadge extends LitElement { color: var(--primary-text-color); } - :host([clickable]) { - color: var(--primary-text-color); - } - img { max-width: 100%; max-height: 100%; @@ -66,18 +54,6 @@ class IntegrationBadge extends LitElement { justify-content: center; } - .badge { - position: absolute; - color: white; - bottom: -7px; - right: -10px; - background-color: var(--label-badge-green); - border-radius: 50%; - display: block; - --mdc-icon-size: 18px; - border: 2px solid white; - } - .title { min-height: 2.3em; word-break: break-word; diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts index c2c145359a..6475ae6695 100644 --- a/src/onboarding/onboarding-integrations.ts +++ b/src/onboarding/onboarding-integrations.ts @@ -1,14 +1,12 @@ import "@material/mwc-button/mwc-button"; -import { mdiCheck, mdiDotsHorizontal } from "@mdi/js"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { - css, CSSResultGroup, - html, LitElement, - nothing, PropertyValues, - TemplateResult, + css, + html, + nothing, } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../common/config/is_component_loaded"; @@ -16,22 +14,12 @@ import { fireEvent } from "../common/dom/fire_event"; import { stringCompare } from "../common/string/compare"; import { LocalizeFunc } from "../common/translations/localize"; import { ConfigEntry, subscribeConfigEntries } from "../data/config_entries"; -import { - getConfigFlowInProgressCollection, - localizeConfigFlowTitle, - subscribeConfigFlowInProgress, -} from "../data/config_flow"; +import { subscribeConfigFlowInProgress } from "../data/config_flow"; import { DataEntryFlowProgress } from "../data/data_entry_flow"; import { domainToName } from "../data/integration"; import { scanUSBDevices } from "../data/usb"; -import { - loadConfigFlowDialog, - showConfigFlowDialog, -} from "../dialogs/config-flow/show-dialog-config-flow"; import { SubscribeMixin } from "../mixins/subscribe-mixin"; -import { showAddIntegrationDialog } from "../panels/config/integrations/show-add-integration-dialog"; import { HomeAssistant } from "../types"; -import "./action-badge"; import "./integration-badge"; const HIDDEN_DOMAINS = new Set([ @@ -63,7 +51,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { integrations.add(flow.handler); } } - this.hass.loadBackendTranslation("config", Array.from(integrations)); + this.hass.loadBackendTranslation("title", Array.from(integrations)); }), subscribeConfigEntries( this.hass, @@ -109,62 +97,65 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { return nothing; } // Render discovered and existing entries together sorted by localized title. - const entries: Array<[string, TemplateResult]> = this._entries.map( - (entry) => { - const title = - entry.title || - domainToName(this.hass.localize, entry.domain) || - entry.domain; - return [ - title, - html` - - `, - ]; - } + const entries: Array<[string, string]> = this._entries.map((entry) => [ + entry.domain, + domainToName(this.hass.localize, entry.domain), + ]); + const discovered: Array<[string, string]> = this._discovered.map((flow) => [ + flow.handler, + domainToName(this.hass.localize, flow.handler), + ]); + let domains = [...entries, ...discovered].sort((a, b) => + stringCompare(a[0], b[0], this.hass.locale.language) ); - const discovered: Array<[string, TemplateResult]> = this._discovered.map( - (flow) => { - const title = localizeConfigFlowTitle(this.hass.localize, flow); - return [ - title, - html` - - `, - ]; + + const foundDevices = domains.length; + + if (domains.length > 12) { + const uniqueDomains: Set = new Set(); + domains.forEach(([domain]) => { + uniqueDomains.add(domain); + }); + if (uniqueDomains.size < domains.length) { + domains = domains.filter(([domain]) => { + if (uniqueDomains.has(domain)) { + uniqueDomains.delete(domain); + return true; + } + return false; + }); } - ); - const content = [...entries, ...discovered] - .sort((a, b) => stringCompare(a[0], b[0], this.hass.locale.language)) - .map((item) => item[1]); + if (domains.length > 12) { + domains = domains.slice(0, 11); + } + } return html` +

+ ${this.onboardingLocalize( + "ui.panel.page-onboarding.integration.header" + )} +

${this.onboardingLocalize("ui.panel.page-onboarding.integration.intro")}

- ${content} - + ${domains.map( + ([domain, title]) => + html`` + )} + ${foundDevices > domains.length + ? html`
+ ${this.onboardingLocalize( + "ui.panel.page-onboarding.integration.more_integrations", + { count: foundDevices - domains.length } + )} +
` + : nothing}