diff --git a/demo/src/custom-cards/ha-demo-card.ts b/demo/src/custom-cards/ha-demo-card.ts index 85a8bd9ced..fe3f7afe65 100644 --- a/demo/src/custom-cards/ha-demo-card.ts +++ b/demo/src/custom-cards/ha-demo-card.ts @@ -10,6 +10,8 @@ import "@polymer/paper-icon-button"; import "@material/mwc-button"; import "@polymer/paper-spinner/paper-spinner-lite"; import "../../../src/components/ha-card"; +import "../../../src/components/ha-paper-icon-button-next"; +import "../../../src/components/ha-paper-icon-button-prev"; import { LovelaceCard, Lovelace } from "../../../src/panels/lovelace/types"; import { LovelaceCardConfig } from "../../../src/data/lovelace"; import { MockHomeAssistant } from "../../../src/fake_data/provide_hass"; @@ -47,12 +49,10 @@ export class HADemoCard extends LitElement implements LovelaceCard { return html`
- + >
${this._switching ? html` @@ -73,11 +73,10 @@ export class HADemoCard extends LitElement implements LovelaceCard { "" )}
- + >
Welcome home! You've reached the Home Assistant demo where we showcase diff --git a/src/auth/ha-pick-auth-provider.js b/src/auth/ha-pick-auth-provider.js index 6e63f3a1d5..e7469b0637 100644 --- a/src/auth/ha-pick-auth-provider.js +++ b/src/auth/ha-pick-auth-provider.js @@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element"; import EventsMixin from "../mixins/events-mixin"; import { localizeLiteMixin } from "../mixins/localize-lite-mixin"; +import "../components/ha-icon-next"; /* * @appliesMixin EventsMixin @@ -26,7 +27,7 @@ class HaPickAuthProvider extends EventsMixin( `; diff --git a/src/components/ha-icon-next.ts b/src/components/ha-icon-next.ts new file mode 100644 index 0000000000..d6a16bc7bb --- /dev/null +++ b/src/components/ha-icon-next.ts @@ -0,0 +1,24 @@ +import "@polymer/iron-icon/iron-icon"; +// Not duplicate, this is for typing. +// tslint:disable-next-line +import { HaIcon } from "./ha-icon"; + +export class HaIconNext extends HaIcon { + public connectedCallback() { + this.icon = + window.getComputedStyle(this).direction === "ltr" + ? "hass:chevron-right" + : "hass:chevron-left"; + + // calling super after setting icon to have it consistently show the icon (otherwise not always shown) + super.connectedCallback(); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-icon-next": HaIconNext; + } +} + +customElements.define("ha-icon-next", HaIconNext); diff --git a/src/components/ha-icon-prev.ts b/src/components/ha-icon-prev.ts new file mode 100644 index 0000000000..8fa3c030e8 --- /dev/null +++ b/src/components/ha-icon-prev.ts @@ -0,0 +1,24 @@ +import "@polymer/iron-icon/iron-icon"; +// Not duplicate, this is for typing. +// tslint:disable-next-line +import { HaIcon } from "./ha-icon"; + +export class HaIconPrev extends HaIcon { + public connectedCallback() { + this.icon = + window.getComputedStyle(this).direction === "ltr" + ? "hass:chevron-left" + : "hass:chevron-right"; + + // calling super after setting icon to have it consistently show the icon (otherwise not always shown) + super.connectedCallback(); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-icon-prev": HaIconPrev; + } +} + +customElements.define("ha-icon-prev", HaIconPrev); diff --git a/src/components/ha-paper-icon-button-arrow-next.ts b/src/components/ha-paper-icon-button-arrow-next.ts new file mode 100644 index 0000000000..8d0914a0cb --- /dev/null +++ b/src/components/ha-paper-icon-button-arrow-next.ts @@ -0,0 +1,32 @@ +import { Constructor } from "lit-element"; +import "@polymer/paper-icon-button/paper-icon-button"; +// Not duplicate, this is for typing. +// tslint:disable-next-line +import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button"; + +const paperIconButtonClass = customElements.get( + "paper-icon-button" +) as Constructor; + +export class HaPaperIconButtonArrowNext extends paperIconButtonClass { + public connectedCallback() { + this.icon = + window.getComputedStyle(this).direction === "ltr" + ? "hass:arrow-right" + : "hass:arrow-left"; + + // calling super after setting icon to have it consistently show the icon (otherwise not always shown) + super.connectedCallback(); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-paper-icon-button-arrow-next": HaPaperIconButtonArrowNext; + } +} + +customElements.define( + "ha-paper-icon-button-arrow-next", + HaPaperIconButtonArrowNext +); diff --git a/src/components/ha-paper-icon-button-arrow-prev.ts b/src/components/ha-paper-icon-button-arrow-prev.ts new file mode 100644 index 0000000000..acac478b8f --- /dev/null +++ b/src/components/ha-paper-icon-button-arrow-prev.ts @@ -0,0 +1,32 @@ +import { Constructor } from "lit-element"; +import "@polymer/paper-icon-button/paper-icon-button"; +// Not duplicate, this is for typing. +// tslint:disable-next-line +import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button"; + +const paperIconButtonClass = customElements.get( + "paper-icon-button" +) as Constructor; + +export class HaPaperIconButtonArrowPrev extends paperIconButtonClass { + public connectedCallback() { + this.icon = + window.getComputedStyle(this).direction === "ltr" + ? "hass:arrow-left" + : "hass:arrow-right"; + + // calling super after setting icon to have it consistently show the icon (otherwise not always shown) + super.connectedCallback(); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-paper-icon-button-arrow-prev": HaPaperIconButtonArrowPrev; + } +} + +customElements.define( + "ha-paper-icon-button-arrow-prev", + HaPaperIconButtonArrowPrev +); diff --git a/src/components/ha-paper-icon-button-next.ts b/src/components/ha-paper-icon-button-next.ts new file mode 100644 index 0000000000..5a137fc2d3 --- /dev/null +++ b/src/components/ha-paper-icon-button-next.ts @@ -0,0 +1,29 @@ +import { Constructor } from "lit-element"; +import "@polymer/paper-icon-button/paper-icon-button"; +// Not duplicate, this is for typing. +// tslint:disable-next-line +import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button"; + +const paperIconButtonClass = customElements.get( + "paper-icon-button" +) as Constructor; + +export class HaPaperIconButtonNext extends paperIconButtonClass { + public connectedCallback() { + this.icon = + window.getComputedStyle(this).direction === "ltr" + ? "hass:chevron-right" + : "hass:chevron-left"; + + // calling super after setting icon to have it consistently show the icon (otherwise not always shown) + super.connectedCallback(); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-paper-icon-button-next": HaPaperIconButtonNext; + } +} + +customElements.define("ha-paper-icon-button-next", HaPaperIconButtonNext); diff --git a/src/components/ha-paper-icon-button-prev.ts b/src/components/ha-paper-icon-button-prev.ts new file mode 100644 index 0000000000..06479fcd1f --- /dev/null +++ b/src/components/ha-paper-icon-button-prev.ts @@ -0,0 +1,29 @@ +import { Constructor } from "lit-element"; +import "@polymer/paper-icon-button/paper-icon-button"; +// Not duplicate, this is for typing. +// tslint:disable-next-line +import { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button"; + +const paperIconButtonClass = customElements.get( + "paper-icon-button" +) as Constructor; + +export class HaPaperIconButtonPrev extends paperIconButtonClass { + public connectedCallback() { + this.icon = + window.getComputedStyle(this).direction === "ltr" + ? "hass:chevron-left" + : "hass:chevron-right"; + + // calling super after setting icon to have it consistently show the icon (otherwise not always shown) + super.connectedCallback(); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-paper-icon-button-prev": HaPaperIconButtonPrev; + } +} + +customElements.define("ha-paper-icon-button-prev", HaPaperIconButtonPrev); diff --git a/src/dialogs/more-info/more-info-settings.js b/src/dialogs/more-info/more-info-settings.js index cac25ab0d7..f30cd1de4f 100644 --- a/src/dialogs/more-info/more-info-settings.js +++ b/src/dialogs/more-info/more-info-settings.js @@ -13,6 +13,7 @@ import computeDomain from "../../common/entity/compute_domain"; import isComponentLoaded from "../../common/config/is_component_loaded"; import { updateEntityRegistryEntry } from "../../data/entity_registry"; +import "../../components/ha-paper-icon-button-arrow-prev"; /* * @appliesMixin EventsMixin * @appliesMixin LocalizeMixin @@ -44,10 +45,9 @@ class MoreInfoSettings extends LocalizeMixin(EventsMixin(PolymerElement)) { - + >
[[_computeStateName(stateObj)]]
[[localize('ui.dialogs.more_info_settings.save')]] + + + + +
[[header]]
+ + + + + + + `; + } + + static get properties() { + return { + header: String, + }; + } + + _backTapped() { + history.back(); + } +} + +customElements.define("hass-subpage", HassSubpage); diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 93d1ab71ce..06003edcb2 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -15,6 +15,7 @@ import { classMap } from "lit-html/directives/class-map"; import { h, render } from "preact"; +import "../../../components/ha-paper-icon-button-arrow-prev"; import "../../../layouts/ha-app-layout"; import Automation from "../js/automation"; @@ -74,10 +75,9 @@ class HaAutomationEditor extends LitElement { - + >
${this.automation ? computeStateName(this.automation) diff --git a/src/panels/config/automation/ha-automation-picker.js b/src/panels/config/automation/ha-automation-picker.js index f7cb80df7f..348e7d4fef 100644 --- a/src/panels/config/automation/ha-automation-picker.js +++ b/src/panels/config/automation/ha-automation-picker.js @@ -8,10 +8,13 @@ import "@polymer/paper-item/paper-item"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../../components/ha-paper-icon-button-arrow-prev"; import "../../../layouts/ha-app-layout"; import "../ha-config-section"; +import "../../../components/ha-icon-next"; + import NavigateMixin from "../../../mixins/navigate-mixin"; import LocalizeMixin from "../../../mixins/localize-mixin"; import computeStateName from "../../../common/entity/compute_state_name"; @@ -64,10 +67,8 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) { - + +
[[localize('ui.panel.config.automation.caption')]]
@@ -101,7 +102,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
[[computeName(automation)]]
[[computeDescription(automation)]]
- + diff --git a/src/panels/config/cloud/ha-config-cloud-login.js b/src/panels/config/cloud/ha-config-cloud-login.js index ae607aabd1..170fe4d63c 100644 --- a/src/panels/config/cloud/ha-config-cloud-login.js +++ b/src/panels/config/cloud/ha-config-cloud-login.js @@ -15,7 +15,7 @@ import "../../../resources/ha-style"; import "../ha-config-section"; import EventsMixin from "../../../mixins/events-mixin"; import NavigateMixin from "../../../mixins/navigate-mixin"; - +import "../../../components/ha-icon-next"; /* * @appliesMixin NavigateMixin * @appliesMixin EventsMixin @@ -148,7 +148,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) { Start your free 1 month trial
No payment information necessary
- + diff --git a/src/panels/config/config-entries/ha-config-entries-dashboard.js b/src/panels/config/config-entries/ha-config-entries-dashboard.js index 276e8eb74e..386656f918 100644 --- a/src/panels/config/config-entries/ha-config-entries-dashboard.js +++ b/src/panels/config/config-entries/ha-config-entries-dashboard.js @@ -11,6 +11,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../components/entity/ha-state-icon"; import "../../../layouts/hass-subpage"; import "../../../resources/ha-style"; +import "../../../components/ha-icon-next"; import "../ha-config-section"; import EventsMixin from "../../../mixins/events-mixin"; @@ -109,7 +110,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
- + diff --git a/src/panels/config/customize/ha-config-customize.js b/src/panels/config/customize/ha-config-customize.js index 0be8d54886..8eee9254f0 100644 --- a/src/panels/config/customize/ha-config-customize.js +++ b/src/panels/config/customize/ha-config-customize.js @@ -6,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../resources/ha-style"; +import "../../../components/ha-paper-icon-button-arrow-prev"; import "../ha-config-section"; import "../ha-entity-config"; @@ -27,10 +28,9 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) { - + >
[[localize('ui.panel.config.customize.caption')]]
diff --git a/src/panels/config/dashboard/ha-config-dashboard.js b/src/panels/config/dashboard/ha-config-dashboard.js index f6338ba5f9..e931f4d54e 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.js +++ b/src/panels/config/dashboard/ha-config-dashboard.js @@ -9,6 +9,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../components/ha-menu-button"; +import "../../../components/ha-icon-next"; import "../ha-config-section"; import "./ha-config-navigation"; @@ -66,7 +67,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
- + @@ -81,7 +82,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) { [[localize('ui.panel.config.integrations.description')]] - + @@ -93,7 +94,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) { [[localize('ui.panel.config.users.description')]] - + diff --git a/src/panels/config/dashboard/ha-config-navigation.js b/src/panels/config/dashboard/ha-config-navigation.js index eb74814757..083e4e0487 100644 --- a/src/panels/config/dashboard/ha-config-navigation.js +++ b/src/panels/config/dashboard/ha-config-navigation.js @@ -10,6 +10,8 @@ import LocalizeMixin from "../../../mixins/localize-mixin"; import isComponentLoaded from "../../../common/config/is_component_loaded"; +import "../../../components/ha-icon-next"; + const CORE_PAGES = ["core", "customize", "entity_registry", "area_registry"]; /* * @appliesMixin LocalizeMixin @@ -34,7 +36,7 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) { [[_computeCaption(item, localize)]]
[[_computeDescription(item, localize)]]
- + diff --git a/src/panels/config/script/ha-script-editor.js b/src/panels/config/script/ha-script-editor.js index 9f6847634a..756de22e45 100644 --- a/src/panels/config/script/ha-script-editor.js +++ b/src/panels/config/script/ha-script-editor.js @@ -7,6 +7,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element"; import { h, render } from "preact"; import "../../../layouts/ha-app-layout"; +import "../../../components/ha-paper-icon-button-arrow-prev"; import Script from "../js/script"; import unmountPreact from "../../../common/preact/unmount"; @@ -98,10 +99,9 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) { - + >
Script [[computeName(script)]]
 diff --git a/src/panels/config/script/ha-script-picker.js b/src/panels/config/script/ha-script-picker.js index 4af0f9fe20..9d68400551 100644 --- a/src/panels/config/script/ha-script-picker.js +++ b/src/panels/config/script/ha-script-picker.js @@ -11,6 +11,8 @@ import { PolymerElement } from "@polymer/polymer/polymer-element"; import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../layouts/ha-app-layout"; +import "../../../components/ha-icon-next"; +import "../../../components/ha-paper-icon-button-arrow-prev"; import "../ha-config-section"; @@ -65,10 +67,9 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) { - + >
[[localize('ui.panel.config.script.caption')]]
@@ -99,7 +100,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
[[computeName(script)]]
[[computeDescription(script)]]
- + diff --git a/src/panels/config/users/ha-config-user-picker.js b/src/panels/config/users/ha-config-user-picker.js index 611dbd2f30..aa028cf4c3 100644 --- a/src/panels/config/users/ha-config-user-picker.js +++ b/src/panels/config/users/ha-config-user-picker.js @@ -6,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../layouts/hass-subpage"; +import "../../../components/ha-icon-next"; import LocalizeMixin from "../../../mixins/localize-mixin"; import NavigateMixin from "../../../mixins/navigate-mixin"; @@ -71,7 +72,7 @@ class HaUserPicker extends EventsMixin( - + diff --git a/src/panels/config/zha/ha-config-zha.ts b/src/panels/config/zha/ha-config-zha.ts old mode 100644 new mode 100755 index 40cf67620f..ef9c06b59e --- a/src/panels/config/zha/ha-config-zha.ts +++ b/src/panels/config/zha/ha-config-zha.ts @@ -12,6 +12,7 @@ import { HassEntity } from "home-assistant-js-websocket"; import { HASSDomEvent } from "../../../common/dom/fire_event"; import { Cluster } from "../../../data/zha"; import "../../../layouts/ha-app-layout"; +import "../../../components/ha-paper-icon-button-arrow-prev"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; import { ZHAClusterSelectedParams, ZHANodeSelectedParams } from "./types"; @@ -40,10 +41,9 @@ export class HaConfigZha extends LitElement { - + >
Zigbee Home Automation
 diff --git a/src/panels/config/zwave/ha-config-zwave.js b/src/panels/config/zwave/ha-config-zwave.js index da3a8f1c12..81f536dfb4 100644 --- a/src/panels/config/zwave/ha-config-zwave.js +++ b/src/panels/config/zwave/ha-config-zwave.js @@ -12,6 +12,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-menu-button"; import "../../../components/ha-service-description"; +import "../../../components/ha-paper-icon-button-arrow-prev"; import "../../../layouts/ha-app-layout"; import "../../../resources/ha-style"; @@ -85,10 +86,9 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) { - + >
[[localize('ui.panel.config.zwave.caption')]]
diff --git a/src/panels/lovelace/components/notifications/hui-notification-drawer.js b/src/panels/lovelace/components/notifications/hui-notification-drawer.js index 5b3aa7037b..4cb33646f4 100644 --- a/src/panels/lovelace/components/notifications/hui-notification-drawer.js +++ b/src/panels/lovelace/components/notifications/hui-notification-drawer.js @@ -6,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "./hui-notification-item"; +import "../../../../components/ha-paper-icon-button-next"; import EventsMixin from "../../../../mixins/events-mixin"; import LocalizeMixin from "../../../../mixins/localize-mixin"; @@ -121,7 +122,7 @@ export class HuiNotificationDrawer extends EventsMixin(
[[localize('ui.notification_drawer.title')]]
- +