diff --git a/src/dialogs/domain-toggler/dialog-domain-toggler.ts b/src/dialogs/domain-toggler/dialog-domain-toggler.ts new file mode 100644 index 0000000000..8a8d7ddd67 --- /dev/null +++ b/src/dialogs/domain-toggler/dialog-domain-toggler.ts @@ -0,0 +1,97 @@ +import { + customElement, + LitElement, + property, + CSSResultArray, + css, + TemplateResult, + html, +} from "lit-element"; +import "../../components/dialog/ha-paper-dialog"; +import { HomeAssistant } from "../../types"; +import { HaDomainTogglerDialogParams } from "./show-dialog-domain-toggler"; +import { PolymerChangedEvent } from "../../polymer-types"; +import { haStyleDialog } from "../../resources/styles"; + +@customElement("dialog-domain-toggler") +class DomainTogglerDialog extends LitElement { + public hass!: HomeAssistant; + @property() private _params?: HaDomainTogglerDialogParams; + + public async showDialog(params: HaDomainTogglerDialogParams): Promise { + this._params = params; + } + + protected render(): TemplateResult | void { + if (!this._params) { + return html``; + } + + const domains = this._params.domains + .map((domain) => [this.hass.localize(`domain.${domain}`), domain]) + .sort(); + + return html` + +

Toggle Domains

+
+ ${domains.map( + (domain) => + html` +
${domain[0]}
+ + ${this.hass.localize("state.default.off")} + + + ${this.hass.localize("state.default.on")} + + ` + )} +
+ + `; + } + + private _openedChanged(ev: PolymerChangedEvent): void { + // Closed dialog by clicking on the overlay + if (!ev.detail.value) { + this._params = undefined; + } + } + + private _handleOff(ev) { + this._params!.toggleDomain(ev.currentTarget.domain, false); + ev.currentTarget.blur(); + } + + private _handleOn(ev) { + this._params!.toggleDomain(ev.currentTarget.domain, true); + ev.currentTarget.blur(); + } + + static get styles(): CSSResultArray { + return [ + haStyleDialog, + css` + ha-paper-dialog { + max-width: 500px; + } + div { + display: grid; + grid-template-columns: auto auto auto; + align-items: center; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "dialog-domain-toggler": DomainTogglerDialog; + } +} diff --git a/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts b/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts new file mode 100644 index 0000000000..e97c54354e --- /dev/null +++ b/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts @@ -0,0 +1,20 @@ +import { fireEvent } from "../../common/dom/fire_event"; + +export interface HaDomainTogglerDialogParams { + domains: string[]; + toggleDomain: (domain: string, turnOn: boolean) => void; +} + +export const loadDomainTogglerDialog = () => + import(/* webpackChunkName: "dialog-domain-toggler" */ "./dialog-domain-toggler"); + +export const showDomainTogglerDialog = ( + element: HTMLElement, + dialogParams: HaDomainTogglerDialogParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "dialog-domain-toggler", + dialogImport: loadDomainTogglerDialog, + dialogParams, + }); +}; diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts index bdba99a0c6..65c4841e59 100644 --- a/src/onboarding/onboarding-core-config.ts +++ b/src/onboarding/onboarding-core-config.ts @@ -142,7 +142,11 @@ class OnboardingCoreConfig extends LitElement { "ui.panel.config.core.section.core.core_config.unit_system" )} - + ${this.hass.localize( "ui.panel.config.core.section.core.core_config.unit_system_metric" @@ -238,6 +242,12 @@ class OnboardingCoreConfig extends LitElement { this[`_${target.name}`] = target.value; } + private _unitSystemChanged( + ev: PolymerChangedEvent + ) { + this._unitSystem = ev.detail.value; + } + private async _detect() { this._working = true; try { diff --git a/src/panels/config/cloud/cloud-google-pref.ts b/src/panels/config/cloud/cloud-google-pref.ts index 628d524704..03ed8031ed 100644 --- a/src/panels/config/cloud/cloud-google-pref.ts +++ b/src/panels/config/cloud/cloud-google-pref.ts @@ -99,6 +99,7 @@ export class CloudGooglePref extends LitElement { > Sync entities to Google +
Manage Entities @@ -151,11 +152,14 @@ export class CloudGooglePref extends LitElement { paper-input { width: 200px; } + .card-actions { + display: flex; + } .card-actions a { text-decoration: none; } - .card-actions mwc-button { - float: right; + .spacer { + flex-grow: 1; } `; } diff --git a/src/panels/config/cloud/cloud-remote-pref.ts b/src/panels/config/cloud/cloud-remote-pref.ts index 140be2c388..46ccd45290 100644 --- a/src/panels/config/cloud/cloud-remote-pref.ts +++ b/src/panels/config/cloud/cloud-remote-pref.ts @@ -127,6 +127,9 @@ export class CloudRemotePref extends LitElement { .card-actions { display: flex; } + .card-actions a { + text-decoration: none; + } .spacer { flex-grow: 1; } diff --git a/src/panels/config/cloud/ha-config-cloud-google-assistant.ts b/src/panels/config/cloud/ha-config-cloud-google-assistant.ts index 9856be59f1..cc0f799a19 100644 --- a/src/panels/config/cloud/ha-config-cloud-google-assistant.ts +++ b/src/panels/config/cloud/ha-config-cloud-google-assistant.ts @@ -8,6 +8,7 @@ import { property, } from "lit-element"; import "@polymer/paper-toggle-button"; +import "@polymer/paper-icon-button"; import "../../../layouts/hass-subpage"; import "../../../layouts/hass-loading-screen"; import "../../../components/ha-card"; @@ -33,12 +34,21 @@ import computeStateName from "../../../common/entity/compute_state_name"; import { fireEvent } from "../../../common/dom/fire_event"; import { showToast } from "../../../util/toast"; import { PolymerChangedEvent } from "../../../polymer-types"; +import { showDomainTogglerDialog } from "../../../dialogs/domain-toggler/show-dialog-domain-toggler"; +import computeDomain from "../../../common/entity/compute_domain"; + +const DEFAULT_CONFIG_EXPOSE = true; + +const configIsExposed = (config: GoogleEntityConfig) => + config.should_expose === undefined + ? DEFAULT_CONFIG_EXPOSE + : config.should_expose; @customElement("ha-config-cloud-google-assistant") class CloudGoogleAssistant extends LitElement { @property() public hass!: HomeAssistant; @property() public cloudStatus!: CloudStatusLoggedIn; - @property() public isWide!: boolean; + @property() public narrow!: boolean; @property() private _entities?: GoogleEntity[]; @property() private _entityConfigs: CloudPreferences["google_entity_configs"] = {}; @@ -69,7 +79,7 @@ class CloudGoogleAssistant extends LitElement { const stateObj = this.hass.states[entity.entity_id]; const config = this._entityConfigs[entity.entity_id] || {}; const isExposed = emptyFilter - ? Boolean(config.should_expose) + ? configIsExposed(config) : filterFunc(entity.entity_id); if (isExposed) { selected++; @@ -114,7 +124,18 @@ class CloudGoogleAssistant extends LitElement { return html` - ${selected} selected + + ${selected}${!this.narrow + ? html` + selected + ` + : ""} + + ${!emptyFilter ? html` - + ${this.hass.localize( "ui.panel.config.core.section.core.core_config.unit_system_metric" @@ -209,6 +213,12 @@ class ConfigCoreForm extends LitElement { this[`_${target.name}`] = target.value; } + private _unitSystemChanged( + ev: PolymerChangedEvent + ) { + this._unitSystem = ev.detail.value; + } + private async _save() { this._working = true; try { diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index 052c12aea3..3feabe3b9c 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -9,6 +9,7 @@ import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page"; @customElement("ha-panel-config") class HaPanelConfig extends HassRouterPage { @property() public hass!: HomeAssistant; + @property() public narrow!: boolean; @property() public _wideSidebar: boolean = false; @property() public _wide: boolean = false; @@ -124,6 +125,7 @@ class HaPanelConfig extends HassRouterPage { el.route = this.routeTail; el.hass = this.hass; el.isWide = this.hass.dockedSidebar ? this._wideSidebar : this._wide; + el.narrow = this.narrow; el.cloudStatus = this._cloudStatus; }