diff --git a/build-scripts/webpack.js b/build-scripts/webpack.js index 7ff8a260dd..062f6ddae7 100644 --- a/build-scripts/webpack.js +++ b/build-scripts/webpack.js @@ -82,6 +82,7 @@ const optimization = (latestBuild) => ({ parallel: true, extractComments: true, terserOptions: { + safari10: true, ecma: latestBuild ? undefined : 5, }, }), diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js index 08af976940..395b3a8fcb 100644 --- a/gallery/src/ha-gallery.js +++ b/gallery/src/ha-gallery.js @@ -2,7 +2,6 @@ import "@polymer/app-layout/app-header-layout/app-header-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/iron-icon/iron-icon"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-icon-button/paper-icon-button"; @@ -10,6 +9,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../src/managers/notification-manager"; +import "../../src/components/ha-card"; const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im); @@ -38,13 +38,13 @@ class HaGallery extends PolymerElement { align-items: start; } - .pickers paper-card { + .pickers ha-card { width: 400px; display: block; margin: 16px 8px; } - .pickers paper-card:last-child { + .pickers ha-card:last-child { margin-bottom: 16px; } @@ -79,7 +79,7 @@ class HaGallery extends PolymerElement {
- + - +

More info screens show up when an entity is clicked. @@ -117,9 +117,9 @@ class HaGallery extends PolymerElement { - + - +

Test pages for our utility functions. @@ -133,7 +133,7 @@ class HaGallery extends PolymerElement { - +

diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index dd5a56ea46..5427ae8fe1 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -7,6 +7,7 @@ import { CSSResultArray, } from "lit-element"; import "@polymer/paper-card/paper-card"; +import memoizeOne from "memoize-one"; import "../components/hassio-card-content"; import { hassioStyle } from "../resources/hassio-style"; @@ -16,14 +17,40 @@ import { HassioAddonRepository, } from "../../../src/data/hassio"; import { navigate } from "../../../src/common/navigate"; +import { filterAndSort } from "../components/hassio-filter-addons"; class HassioAddonRepositoryEl extends LitElement { @property() public hass!: HomeAssistant; @property() public repo!: HassioAddonRepository; @property() public addons!: HassioAddonInfo[]; + @property() public filter!: string; + + private _getAddons = memoizeOne( + (addons: HassioAddonInfo[], filter?: string) => { + if (filter) { + return filterAndSort(addons, filter); + } + return addons.sort((a, b) => + a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1 + ); + } + ); protected render(): TemplateResult | void { const repo = this.repo; + const addons = this._getAddons(this.addons, this.filter); + + if (this.filter && addons.length < 1) { + return html` +
+
+
+ No results found in "${repo.name}" +
+
+
+ `; + } return html`
@@ -34,31 +61,27 @@ class HassioAddonRepositoryEl extends LitElement {
- ${this.addons - .sort((a, b) => - a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1 - ) - .map( - (addon) => html` - -
- -
- - ` - )} + ${addons.map( + (addon) => html` + +
+ +
+ + ` + )} `; } diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index 35440bb58e..2035a5b16f 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -16,6 +16,7 @@ import { reloadHassioAddons, } from "../../../src/data/hassio"; import "../../../src/layouts/loading-screen"; +import "../components/hassio-search-input"; const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => { if (a.slug === "local") { @@ -37,10 +38,12 @@ class HassioAddonStore extends LitElement { @property() public hass!: HomeAssistant; @property() private _addons?: HassioAddonInfo[]; @property() private _repos?: HassioAddonRepository[]; + @property() private _filter?: string; public async refreshData() { this._repos = undefined; this._addons = undefined; + this._filter = undefined; await reloadHassioAddons(this.hass); await this._loadData(); } @@ -67,6 +70,7 @@ class HassioAddonStore extends LitElement { .hass=${this.hass} .repo=${repo} .addons=${addons} + .filter=${this._filter} > `); } @@ -77,6 +81,11 @@ class HassioAddonStore extends LitElement { .repos=${this._repos} > + + ${repos} `; } @@ -104,6 +113,10 @@ class HassioAddonStore extends LitElement { } } + private async _filterChanged(e) { + this._filter = e.detail.value; + } + static get styles(): CSSResult { return css` hassio-addon-repository { diff --git a/hassio/src/addon-store/hassio-repositories-editor.ts b/hassio/src/addon-store/hassio-repositories-editor.ts index f901ed5a35..55832c00ef 100644 --- a/hassio/src/addon-store/hassio-repositories-editor.ts +++ b/hassio/src/addon-store/hassio-repositories-editor.ts @@ -135,6 +135,7 @@ class HassioRepositoriesEditor extends LitElement { paper-input { width: calc(100% - 49px); display: inline-block; + margin-top: -4px; } `, ]; diff --git a/hassio/src/components/hassio-filter-addons.ts b/hassio/src/components/hassio-filter-addons.ts new file mode 100644 index 0000000000..67bd0d4093 --- /dev/null +++ b/hassio/src/components/hassio-filter-addons.ts @@ -0,0 +1,13 @@ +import { HassioAddonInfo } from "../../../src/data/hassio"; +import * as Fuse from "fuse.js"; + +export function filterAndSort(addons: HassioAddonInfo[], filter: string) { + const options: Fuse.FuseOptions = { + keys: ["name", "description", "slug"], + caseSensitive: false, + minMatchCharLength: 2, + threshold: 0.2, + }; + const fuse = new Fuse(addons, options); + return fuse.search(filter); +} diff --git a/hassio/src/components/hassio-search-input.ts b/hassio/src/components/hassio-search-input.ts new file mode 100644 index 0000000000..11a43eb4d1 --- /dev/null +++ b/hassio/src/components/hassio-search-input.ts @@ -0,0 +1,82 @@ +import { TemplateResult, html } from "lit-html"; +import { + css, + CSSResult, + customElement, + LitElement, + property, +} from "lit-element"; +import { fireEvent } from "../../../src/common/dom/fire_event"; +import "@polymer/iron-icon/iron-icon"; +import "@polymer/paper-input/paper-input"; +import "@polymer/paper-icon-button/paper-icon-button"; +import "@material/mwc-button"; + +@customElement("hassio-search-input") +class HassioSearchInput extends LitElement { + @property() private filter?: string; + + protected render(): TemplateResult | void { + return html` +
+ + + ${this.filter && + html` + + `} + +
+ `; + } + + private async _filterChanged(value: string) { + fireEvent(this, "value-changed", { value: String(value) }); + } + + private async _filterInputChanged(e) { + this._filterChanged(e.target.value); + } + + private async _clearSearch() { + this._filterChanged(""); + } + + static get styles(): CSSResult { + return css` + paper-input { + flex: 1 1 auto; + margin: 0 16px; + } + .search-container { + display: inline-flex; + width: 100%; + align-items: center; + } + .prefix { + margin: 8px; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-search-input": HassioSearchInput; + } +} diff --git a/package.json b/package.json index edaa0308dc..22c68baa9b 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "deep-clone-simple": "^1.1.1", "es6-object-assign": "^1.1.0", "fecha": "^3.0.2", + "fuse.js": "^3.4.4", "hls.js": "^0.12.4", "home-assistant-js-websocket": "^4.1.2", "intl-messageformat": "^2.2.0", diff --git a/setup.py b/setup.py index bb2dc9862d..2ff7821551 100644 --- a/setup.py +++ b/setup.py @@ -2,7 +2,7 @@ from setuptools import setup, find_packages setup( name="home-assistant-frontend", - version="20190510.0", + version="20190514.0", description="The Home Assistant frontend", url="https://github.com/home-assistant/home-assistant-polymer", author="The Home Assistant Authors", diff --git a/src/data/automation.ts b/src/data/automation.ts index 02032b06c4..ab1cb44cbb 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -6,6 +6,7 @@ import { export interface AutomationEntity extends HassEntityBase { attributes: HassEntityAttributeBase & { id?: string; + last_triggered: string; }; } diff --git a/src/data/script.ts b/src/data/script.ts index 0c50a3f6e6..f6820be973 100644 --- a/src/data/script.ts +++ b/src/data/script.ts @@ -1,5 +1,14 @@ +import { HomeAssistant } from "../types"; +import computeObjectId from "../common/entity/compute_object_id"; + export interface EventAction { event: string; event_data?: { [key: string]: any }; event_data_template?: { [key: string]: any }; } + +export const triggerScript = ( + hass: HomeAssistant, + entityId: string, + variables?: {} +) => hass.callService("script", computeObjectId(entityId), variables); diff --git a/src/dialogs/config-flow/styles.ts b/src/dialogs/config-flow/styles.ts index 86bb0872bb..0e8b6e2609 100644 --- a/src/dialogs/config-flow/styles.ts +++ b/src/dialogs/config-flow/styles.ts @@ -21,7 +21,7 @@ export const configFlowContentStyles = css` } ha-markdown { - word-break: break-word; + overflow-wrap: break-word; } ha-markdown a { color: var(--primary-color); diff --git a/src/managers/notification-manager.js b/src/managers/notification-manager.js deleted file mode 100644 index df05ae11fe..0000000000 --- a/src/managers/notification-manager.js +++ /dev/null @@ -1,54 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import LocalizeMixin from "../mixins/localize-mixin"; -import { computeRTL } from "../common/util/compute_rtl"; - -class NotificationManager extends LocalizeMixin(PolymerElement) { - static get template() { - return html` - - - - `; - } - - static get properties() { - return { - hass: Object, - - _cancelOnOutsideClick: { - type: Boolean, - value: false, - }, - - _rtl: { - type: String, - computed: "_computeRTLDirection(hass)", - }, - }; - } - - ready() { - super.ready(); - import(/* webpackChunkName: "ha-toast" */ "../components/ha-toast"); - } - - showDialog({ message }) { - this.$.toast.show(message); - } - - _computeRTLDirection(hass) { - return computeRTL(hass) ? "rtl" : "ltr"; - } -} - -customElements.define("notification-manager", NotificationManager); diff --git a/src/managers/notification-manager.ts b/src/managers/notification-manager.ts new file mode 100644 index 0000000000..8ff0afb521 --- /dev/null +++ b/src/managers/notification-manager.ts @@ -0,0 +1,30 @@ +import { computeRTL } from "../common/util/compute_rtl"; +import "../components/ha-toast"; +import { LitElement, query, property, TemplateResult, html } from "lit-element"; +import { HomeAssistant } from "../types"; +// Typing +// tslint:disable-next-line: no-duplicate-imports +import { HaToast } from "../components/ha-toast"; + +export interface ShowToastParams { + message: string; +} + +class NotificationManager extends LitElement { + @property() public hass!: HomeAssistant; + @query("ha-toast") private _toast!: HaToast; + + public showDialog({ message }: ShowToastParams) { + const toast = this._toast; + toast.setAttribute("dir", computeRTL(this.hass) ? "rtl" : "ltr"); + toast.show(message); + } + + protected render(): TemplateResult | void { + return html` + + `; + } +} + +customElements.define("notification-manager", NotificationManager); diff --git a/src/panels/calendar/ha-panel-calendar.js b/src/panels/calendar/ha-panel-calendar.js index 244cf8a9df..682162b732 100644 --- a/src/panels/calendar/ha-panel-calendar.js +++ b/src/panels/calendar/ha-panel-calendar.js @@ -2,7 +2,6 @@ import "@polymer/app-layout/app-header-layout/app-header-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/paper-listbox/paper-listbox"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-checkbox/paper-checkbox"; import "@polymer/paper-item/paper-item"; import { html } from "@polymer/polymer/lib/utils/html-tag"; @@ -11,6 +10,7 @@ import moment from "moment"; import dates from "react-big-calendar/lib/utils/dates"; import "../../components/ha-menu-button"; +import "../../components/ha-card"; import "../../resources/ha-style"; import "./ha-big-calendar"; @@ -74,7 +74,7 @@ class HaPanelCalendar extends LocalizeMixin(PolymerElement) {
- + - +
- :host { - display: block; - } - - ha-card { - overflow: hidden; - } - - paper-item { - cursor: pointer; - } - - paper-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - - paper-fab[is-wide] { - bottom: 24px; - right: 24px; - } - - paper-fab[rtl] { - right: auto; - left: 16px; - } - - paper-fab[rtl][is-wide] { - bottom: 24px; - right: auto; - left: 24px; - } - - a { - color: var(--primary-color); - } - - - - - - - -
- [[localize('ui.panel.config.automation.caption')]] -
- - - - -
- [[localize('ui.panel.config.automation.picker.header')]] -
-
- [[localize('ui.panel.config.automation.picker.introduction')]] -

- - [[localize('ui.panel.config.automation.picker.learn_more')]] - -

-
- - - - - - - - - - `; - } - - static get properties() { - return { - hass: { - type: Object, - }, - - automations: { - type: Array, - }, - - isWide: { - type: Boolean, - }, - - rtl: { - type: Boolean, - reflectToAttribute: true, - computed: "_computeRTL(hass)", - }, - }; - } - - automationTapped(ev) { - this.navigate( - "/config/automation/edit/" + - this.automations[ev.model.index].attributes.id - ); - } - - addAutomation() { - this.navigate("/config/automation/new"); - } - - computeName(automation) { - return computeStateName(automation); - } - - // Still thinking of something to add here. - // eslint-disable-next-line - computeDescription(automation) { - return ""; - } - - _backTapped() { - history.back(); - } - - _computeRTL(hass) { - return computeRTL(hass); - } -} - -customElements.define("ha-automation-picker", HaAutomationPicker); diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts new file mode 100644 index 0000000000..d8c6259bfb --- /dev/null +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -0,0 +1,224 @@ +import { + LitElement, + TemplateResult, + html, + CSSResultArray, + css, + property, + customElement, +} from "lit-element"; +import { ifDefined } from "lit-html/directives/if-defined"; +import "@polymer/paper-fab/paper-fab"; +import "@polymer/paper-icon-button/paper-icon-button"; +import "@polymer/paper-item/paper-item-body"; +import "@polymer/paper-tooltip/paper-tooltip"; +import "../../../layouts/hass-subpage"; + +import "../../../components/ha-card"; +import "../../../components/entity/ha-entity-toggle"; + +import "../ha-config-section"; + +import computeStateName from "../../../common/entity/compute_state_name"; +import { computeRTL } from "../../../common/util/compute_rtl"; +import { haStyle } from "../../../resources/styles"; +import { HomeAssistant } from "../../../types"; +import { AutomationEntity } from "../../../data/automation"; +import format_date_time from "../../../common/datetime/format_date_time"; +import { fireEvent } from "../../../common/dom/fire_event"; + +@customElement("ha-automation-picker") +class HaAutomationPicker extends LitElement { + @property() public hass!: HomeAssistant; + @property() public isWide!: boolean; + @property() public automations!: AutomationEntity[]; + + protected render(): TemplateResult | void { + return html` + + +
+ ${this.hass.localize("ui.panel.config.automation.picker.header")} +
+
+ ${this.hass.localize( + "ui.panel.config.automation.picker.introduction" + )} +

+ + ${this.hass.localize( + "ui.panel.config.automation.picker.learn_more" + )} + +

+
+ + + ${this.automations.length === 0 + ? html` +
+

+ ${this.hass.localize( + "ui.panel.config.automation.picker.no_automations" + )} +

+
+ ` + : this.automations.map( + (automation) => html` + +
+ + + +
${computeStateName(automation)}
+
+ Last triggered: ${ + automation.attributes.last_triggered + ? format_date_time( + new Date( + automation.attributes.last_triggered + ), + this.hass.language + ) + : "never" + } +
+ +
+ + + + ${ + !automation.attributes.id + ? html` + + Only automations defined in + automations.yaml are editable. + + ` + : "" + } + +
+
+ + ` + )} + + + + + + + `; + } + + private _showInfo(ev) { + const entityId = ev.currentTarget.automation.entity_id; + fireEvent(this, "hass-more-info", { entityId }); + } + + static get styles(): CSSResultArray { + return [ + haStyle, + css` + :host { + display: block; + } + + ha-card { + margin-bottom: 56px; + } + + .automation { + display: flex; + flex-direction: horizontal; + align-items: center; + padding: 0 8px 0 16px; + } + + .automation a[href] { + color: var(--primary-text-color); + } + + ha-entity-toggle { + margin-right: 16px; + } + + .actions { + display: flex; + } + + paper-fab { + position: fixed; + bottom: 16px; + right: 16px; + z-index: 1; + } + + paper-fab[is-wide] { + bottom: 24px; + right: 24px; + } + + paper-fab[rtl] { + right: auto; + left: 16px; + } + + paper-fab[rtl][is-wide] { + bottom: 24px; + right: auto; + left: 24px; + } + + a { + color: var(--primary-color); + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-automation-picker": HaAutomationPicker; + } +} diff --git a/src/panels/config/automation/ha-config-automation.js b/src/panels/config/automation/ha-config-automation.js index f0f4defdeb..418d954562 100644 --- a/src/panels/config/automation/ha-config-automation.js +++ b/src/panels/config/automation/ha-config-automation.js @@ -93,10 +93,7 @@ class HaConfigAutomation extends PolymerElement { Object.keys(hass.states).forEach(function(key) { var entity = hass.states[key]; - if ( - computeStateDomain(entity) === "automation" && - "id" in entity.attributes - ) { + if (computeStateDomain(entity) === "automation") { automations.push(entity); } }); diff --git a/src/panels/config/script/ha-script-picker.js b/src/panels/config/script/ha-script-picker.js deleted file mode 100644 index 71d3b09358..0000000000 --- a/src/panels/config/script/ha-script-picker.js +++ /dev/null @@ -1,176 +0,0 @@ -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "@polymer/paper-fab/paper-fab"; -import "@polymer/paper-icon-button/paper-icon-button"; -import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-item/paper-item"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import { computeRTL } from "../../../common/util/compute_rtl"; - -import "../../../layouts/ha-app-layout"; -import "../../../components/ha-card"; -import "../../../components/ha-icon-next"; -import "../../../components/ha-paper-icon-button-arrow-prev"; - -import "../ha-config-section"; - -import computeStateName from "../../../common/entity/compute_state_name"; -import NavigateMixin from "../../../mixins/navigate-mixin"; -import LocalizeMixin from "../../../mixins/localize-mixin"; - -/* - * @appliesMixin LocalizeMixin - * @appliesMixin NavigateMixin - */ -class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) { - static get template() { - return html` - - - - - - -
- [[localize('ui.panel.config.script.caption')]] -
- - - - -
Script Editor
-
- The script editor allows you to create and edit scripts. Please read - the instructions - to make sure that you have configured Home Assistant correctly. -
- - - - - - - - - - `; - } - - static get properties() { - return { - hass: { - type: Object, - }, - - scripts: { - type: Array, - }, - - isWide: { - type: Boolean, - }, - - rtl: { - type: Boolean, - reflectToAttribute: true, - computed: "_computeRTL(hass)", - }, - }; - } - - scriptTapped(ev) { - this.navigate( - "/config/script/edit/" + this.scripts[ev.model.index].entity_id - ); - } - - addScript() { - this.navigate("/config/script/new"); - } - - computeName(script) { - return computeStateName(script); - } - - // Still thinking of something to add here. - // eslint-disable-next-line - computeDescription(script) { - return ""; - } - - _backTapped() { - history.back(); - } - - _computeRTL(hass) { - return computeRTL(hass); - } -} - -customElements.define("ha-script-picker", HaScriptPicker); diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts new file mode 100644 index 0000000000..bdba5f7621 --- /dev/null +++ b/src/panels/config/script/ha-script-picker.ts @@ -0,0 +1,173 @@ +import { + LitElement, + html, + CSSResultArray, + css, + TemplateResult, + property, + customElement, +} from "lit-element"; +import "@polymer/paper-fab/paper-fab"; +import "@polymer/paper-icon-button/paper-icon-button"; +import "@polymer/paper-item/paper-item-body"; +import { HassEntity } from "home-assistant-js-websocket"; + +import "../../../layouts/hass-subpage"; + +import { computeRTL } from "../../../common/util/compute_rtl"; + +import "../../../components/ha-card"; + +import "../ha-config-section"; + +import computeStateName from "../../../common/entity/compute_state_name"; +import { haStyle } from "../../../resources/styles"; +import { HomeAssistant } from "../../../types"; +import { triggerScript } from "../../../data/script"; +import { showToast } from "../../../util/toast"; + +@customElement("ha-script-picker") +class HaScriptPicker extends LitElement { + @property() public hass!: HomeAssistant; + @property() public scripts!: HassEntity[]; + @property() public isWide!: boolean; + + protected render(): TemplateResult | void { + return html` + + +
Script Editor
+
+ The script editor allows you to create and edit scripts. Please read + the instructions + to make sure that you have configured Home Assistant correctly. +
+ + + ${this.scripts.length === 0 + ? html` +
+

We couldn't find any scripts.

+
+ ` + : this.scripts.map( + (script) => html` +
+ + +
${computeStateName(script)}
+ +
+ + + +
+
+ ` + )} + + + + + + + + `; + } + + private async _runScript(ev) { + const script = ev.currentTarget.script as HassEntity; + await triggerScript(this.hass, script.entity_id); + showToast(this, { + message: `Triggered ${computeStateName(script)}`, + }); + } + + static get styles(): CSSResultArray { + return [ + haStyle, + css` + :host { + display: block; + } + + ha-card { + padding-bottom: 8px; + margin-bottom: 56px; + } + + .script { + display: flex; + flex-direction: horizontal; + align-items: center; + padding: 0 8px; + margin: 4px 0; + } + + .script > *:first-child { + margin-right: 8px; + } + + .script a[href], + paper-icon-button { + color: var(--primary-text-color); + } + + .actions { + display: flex; + } + + paper-fab { + position: fixed; + bottom: 16px; + right: 16px; + z-index: 1; + } + + paper-fab[is-wide] { + bottom: 24px; + right: 24px; + } + + paper-fab[rtl] { + right: auto; + left: 16px; + } + + paper-fab[rtl][is-wide] { + bottom: 24px; + right: auto; + left: 24px; + } + + a { + color: var(--primary-color); + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-script-picker": HaScriptPicker; + } +} diff --git a/src/panels/config/zha/zha-binding.ts b/src/panels/config/zha/zha-binding.ts index d95e1ce6da..21c7ea7965 100644 --- a/src/panels/config/zha/zha-binding.ts +++ b/src/panels/config/zha/zha-binding.ts @@ -1,8 +1,8 @@ import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-service-description"; +import "../../../components/ha-card"; import "../ha-config-section"; import "@material/mwc-button/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-listbox/paper-listbox"; @@ -55,7 +55,7 @@ export class ZHABindingControl extends LitElement {
Bind and unbind devices. - +
- + `; } @@ -155,8 +155,7 @@ export class ZHABindingControl extends LitElement { margin-top: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } diff --git a/src/panels/config/zha/zha-cluster-attributes.ts b/src/panels/config/zha/zha-cluster-attributes.ts index 10f4a3677e..43372f14f3 100644 --- a/src/panels/config/zha/zha-cluster-attributes.ts +++ b/src/panels/config/zha/zha-cluster-attributes.ts @@ -1,8 +1,8 @@ import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-service-description"; +import "../../../components/ha-card"; import "../ha-config-section"; import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-input/paper-input"; @@ -95,7 +95,7 @@ export class ZHAClusterAttributes extends LitElement {
View and edit cluster attributes. - +
+ `; } @@ -280,8 +280,7 @@ export class ZHAClusterAttributes extends LitElement { margin-top: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } diff --git a/src/panels/config/zha/zha-cluster-commands.ts b/src/panels/config/zha/zha-cluster-commands.ts index d8bbcac2e4..6a0f982ce3 100644 --- a/src/panels/config/zha/zha-cluster-commands.ts +++ b/src/panels/config/zha/zha-cluster-commands.ts @@ -1,7 +1,7 @@ import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-service-description"; +import "../../../components/ha-card"; import "../ha-config-section"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-input/paper-input"; @@ -88,7 +88,7 @@ export class ZHAClusterCommands extends LitElement {
View and issue cluster commands. - +
` : ""} - + `; } @@ -215,8 +215,7 @@ export class ZHAClusterCommands extends LitElement { margin-top: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } diff --git a/src/panels/config/zha/zha-clusters.ts b/src/panels/config/zha/zha-clusters.ts index 512cc16d7d..a1bce7aef5 100644 --- a/src/panels/config/zha/zha-clusters.ts +++ b/src/panels/config/zha/zha-clusters.ts @@ -1,7 +1,7 @@ import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-service-description"; +import "../../../components/ha-card"; import "../ha-config-section"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; diff --git a/src/panels/config/zha/zha-device-card.ts b/src/panels/config/zha/zha-device-card.ts index 791234564e..ee5cfd4650 100644 --- a/src/panels/config/zha/zha-device-card.ts +++ b/src/panels/config/zha/zha-device-card.ts @@ -1,8 +1,8 @@ import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-service-description"; import "../../../components/entity/state-badge"; +import "../../../components/ha-card"; import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-icon-item"; @@ -108,7 +108,7 @@ class ZHADeviceCard extends LitElement { protected render(): TemplateResult | void { return html` - + ${ this.isJoinPage ? html` @@ -256,7 +256,7 @@ class ZHADeviceCard extends LitElement { : "" }
- + `; } @@ -326,7 +326,7 @@ class ZHADeviceCard extends LitElement { padding: 4px; justify-content: left; } - paper-card { + ha-card { flex: 1 0 100%; padding-bottom: 10px; min-width: 425px; diff --git a/src/panels/config/zha/zha-network.ts b/src/panels/config/zha/zha-network.ts index b6c92d694e..d6d4ef10c7 100644 --- a/src/panels/config/zha/zha-network.ts +++ b/src/panels/config/zha/zha-network.ts @@ -1,8 +1,8 @@ import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-service-description"; +import "../../../components/ha-card"; import "../ha-config-section"; import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-icon-button/paper-icon-button"; import { @@ -50,7 +50,7 @@ export class ZHANetwork extends LitElement {
Commands that affect entire network - +
Add Devices @@ -66,7 +66,7 @@ export class ZHANetwork extends LitElement { ` : ""}
- + `; } @@ -87,8 +87,7 @@ export class ZHANetwork extends LitElement { margin-top: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } diff --git a/src/panels/config/zha/zha-node.ts b/src/panels/config/zha/zha-node.ts index 70fcf5f41d..e665a79ddd 100644 --- a/src/panels/config/zha/zha-node.ts +++ b/src/panels/config/zha/zha-node.ts @@ -1,10 +1,10 @@ import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-service-description"; +import "../../../components/ha-card"; import "../ha-config-section"; import "./zha-clusters"; import "./zha-device-card"; import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; @@ -70,7 +70,7 @@ export class ZHANode extends LitElement { press at ~5 second intervals that keep devices awake while you interact with them. - +
+ `; } @@ -183,8 +183,7 @@ export class ZHANode extends LitElement { padding-bottom: 16px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } diff --git a/src/panels/config/zwave/ha-config-zwave.js b/src/panels/config/zwave/ha-config-zwave.js index ed2a6c41fa..440a2c901b 100644 --- a/src/panels/config/zwave/ha-config-zwave.js +++ b/src/panels/config/zwave/ha-config-zwave.js @@ -1,6 +1,5 @@ import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-input/paper-input"; @@ -15,6 +14,7 @@ import "../../../components/ha-service-description"; import "../../../components/ha-paper-icon-button-arrow-prev"; import "../../../layouts/ha-app-layout"; import "../../../resources/ha-style"; +import "../../../components/ha-card"; import "../ha-config-section"; import "../ha-form-style"; @@ -53,8 +53,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) { padding-right: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } @@ -116,7 +115,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) { list of available commands. - +
- +
- + `; } diff --git a/src/panels/config/zwave/zwave-log.js b/src/panels/config/zwave/zwave-log.js index 0eb0cb54b8..f14dd09493 100644 --- a/src/panels/config/zwave/zwave-log.js +++ b/src/panels/config/zwave/zwave-log.js @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-checkbox/paper-checkbox"; import "@polymer/paper-input/paper-input"; import { html } from "@polymer/polymer/lib/utils/html-tag"; @@ -8,6 +7,7 @@ import { EventsMixin } from "../../../mixins/events-mixin"; import isPwa from "../../../common/config/is_pwa"; import "../ha-config-section"; +import "../../../components/ha-card"; let registeredDialog = false; @@ -19,8 +19,7 @@ class OzwLog extends EventsMixin(PolymerElement) { margin-top: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } @@ -34,7 +33,7 @@ class OzwLog extends EventsMixin(PolymerElement) { OZW Log - +
@@ -42,7 +41,7 @@ class OzwLog extends EventsMixin(PolymerElement) {
Load Tail - + `; } diff --git a/src/panels/config/zwave/zwave-network.js b/src/panels/config/zwave/zwave-network.js index a77c7f287e..65c0b076ad 100644 --- a/src/panels/config/zwave/zwave-network.js +++ b/src/panels/config/zwave/zwave-network.js @@ -1,4 +1,3 @@ -import "@polymer/paper-card/paper-card"; import "@polymer/paper-icon-button/paper-icon-button"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; @@ -6,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../components/buttons/ha-call-api-button"; import "../../../components/buttons/ha-call-service-button"; import "../../../components/ha-service-description"; +import "../../../components/ha-card"; import "../ha-config-section"; class ZwaveNetwork extends PolymerElement { @@ -16,8 +16,7 @@ class ZwaveNetwork extends PolymerElement { margin-top: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } @@ -57,7 +56,7 @@ class ZwaveNetwork extends PolymerElement { to figure out. - +
- + `; } diff --git a/src/panels/config/zwave/zwave-node-config.js b/src/panels/config/zwave/zwave-node-config.js index 296ec3e8f4..054cbf0b91 100644 --- a/src/panels/config/zwave/zwave-node-config.js +++ b/src/panels/config/zwave/zwave-node-config.js @@ -1,4 +1,3 @@ -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; @@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../components/buttons/ha-call-service-button"; +import "../../../components/ha-card"; class ZwaveNodeConfig extends PolymerElement { static get template() { @@ -16,8 +16,7 @@ class ZwaveNodeConfig extends PolymerElement { margin-top: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } @@ -36,7 +35,7 @@ class ZwaveNodeConfig extends PolymerElement { }
- + - +
`; } diff --git a/src/panels/config/zwave/zwave-node-protection.js b/src/panels/config/zwave/zwave-node-protection.js index c25be2a348..4bc5eb452d 100644 --- a/src/panels/config/zwave/zwave-node-protection.js +++ b/src/panels/config/zwave/zwave-node-protection.js @@ -1,4 +1,3 @@ -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; @@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../components/buttons/ha-call-api-button"; +import "../../../components/ha-card"; class ZwaveNodeProtection extends PolymerElement { static get template() { @@ -19,8 +19,7 @@ class ZwaveNodeProtection extends PolymerElement { margin-top: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } @@ -33,7 +32,7 @@ class ZwaveNodeProtection extends PolymerElement {
- +
@@ -51,7 +50,8 @@ class ZwaveNodeProtection extends PolymerElement { Set Protection
-
+ +
`; } diff --git a/src/panels/config/zwave/zwave-usercodes.js b/src/panels/config/zwave/zwave-usercodes.js index ca5f396b91..accda0f215 100644 --- a/src/panels/config/zwave/zwave-usercodes.js +++ b/src/panels/config/zwave/zwave-usercodes.js @@ -1,4 +1,3 @@ -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; @@ -7,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../components/buttons/ha-call-service-button"; +import "../../../components/ha-card"; class ZwaveUsercodes extends PolymerElement { static get template() { @@ -16,8 +16,7 @@ class ZwaveUsercodes extends PolymerElement { margin-top: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } @@ -31,7 +30,7 @@ class ZwaveUsercodes extends PolymerElement { }
- +
- +
`; } diff --git a/src/panels/config/zwave/zwave-values.js b/src/panels/config/zwave/zwave-values.js index 0d4ae929bf..f3fcea767d 100644 --- a/src/panels/config/zwave/zwave-values.js +++ b/src/panels/config/zwave/zwave-values.js @@ -1,4 +1,3 @@ -import "@polymer/paper-card/paper-card"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; @@ -6,6 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../../components/buttons/ha-call-service-button"; +import "../../../components/ha-card"; class ZwaveValues extends PolymerElement { static get template() { @@ -15,8 +15,7 @@ class ZwaveValues extends PolymerElement { margin-top: 24px; } - paper-card { - display: block; + ha-card { margin: 0 auto; max-width: 600px; } @@ -35,7 +34,7 @@ class ZwaveValues extends PolymerElement { }
- +
- +
`; } diff --git a/src/panels/dev-info/system-health-card.ts b/src/panels/dev-info/system-health-card.ts index d6b6e4e7ef..82159ed847 100644 --- a/src/panels/dev-info/system-health-card.ts +++ b/src/panels/dev-info/system-health-card.ts @@ -6,8 +6,8 @@ import { PropertyDeclarations, TemplateResult, } from "lit-element"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-spinner/paper-spinner"; +import "../../components/ha-card"; import { HomeAssistant } from "../../types"; import { @@ -85,9 +85,9 @@ class SystemHealthCard extends LitElement { } return html` - +
${sections}
- + `; } @@ -114,10 +114,6 @@ class SystemHealthCard extends LitElement { static get styles(): CSSResult { return css` - paper-card { - display: block; - } - table { width: 100%; } diff --git a/src/panels/dev-info/system-log-card.ts b/src/panels/dev-info/system-log-card.ts index 8f4c17c15b..0d1391c1ee 100644 --- a/src/panels/dev-info/system-log-card.ts +++ b/src/panels/dev-info/system-log-card.ts @@ -6,11 +6,11 @@ import { PropertyDeclarations, TemplateResult, } from "lit-element"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-spinner/paper-spinner"; +import "../../components/ha-card"; import "../../components/buttons/ha-call-service-button"; import "../../components/buttons/ha-progress-button"; import { HomeAssistant } from "../../types"; @@ -43,7 +43,7 @@ class SystemLogCard extends LitElement { protected render(): TemplateResult | void { return html`
- + ${this._items === undefined ? html`
@@ -96,7 +96,7 @@ class SystemLogCard extends LitElement { >
`} - +
`; } @@ -131,8 +131,7 @@ class SystemLogCard extends LitElement { static get styles(): CSSResult { return css` - paper-card { - display: block; + ha-card { padding-top: 16px; } diff --git a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js b/src/panels/dev-mqtt/ha-panel-dev-mqtt.js index ae76851474..98bca44d17 100644 --- a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js +++ b/src/panels/dev-mqtt/ha-panel-dev-mqtt.js @@ -2,12 +2,12 @@ import "@polymer/app-layout/app-header-layout/app-header-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-textarea"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../components/ha-card"; import "../../components/ha-menu-button"; import "../../resources/ha-style"; import "../../util/app-localstorage-document"; @@ -29,10 +29,6 @@ class HaPanelDevMqtt extends PolymerElement { direction: ltr; } - paper-card { - display: block; - } - mwc-button { background-color: white; } @@ -55,7 +51,7 @@ class HaPanelDevMqtt extends PolymerElement {
- +
@@ -68,7 +64,7 @@ class HaPanelDevMqtt extends PolymerElement {
Publish
- +
`; diff --git a/src/panels/lovelace/cards/hui-empty-state-card.ts b/src/panels/lovelace/cards/hui-empty-state-card.ts index 4090fdffd8..da38872bbd 100644 --- a/src/panels/lovelace/cards/hui-empty-state-card.ts +++ b/src/panels/lovelace/cards/hui-empty-state-card.ts @@ -8,7 +8,7 @@ import { property, } from "lit-element"; -import "@polymer/paper-card/paper-card"; +import "../../../components/ha-card"; import { LovelaceCard } from "../types"; import { HomeAssistant } from "../../../types"; @@ -32,8 +32,8 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard { } return html` - @@ -51,7 +51,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
- + `; } diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts index 5f3926b4fd..92b2177c39 100644 --- a/src/panels/lovelace/cards/hui-entity-button-card.ts +++ b/src/panels/lovelace/cards/hui-entity-button-card.ts @@ -131,6 +131,9 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard { style="${styleMap({ filter: this._computeBrightness(stateObj), color: this._computeColor(stateObj), + height: this._config.icon_height + ? this._config.icon_height + : "auto", })}" > ` diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts index 126f2aef0a..f153988b27 100644 --- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts +++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts @@ -12,5 +12,8 @@ export const configElementStyle = html` flex: 1; padding-right: 4px; } + .suffix { + margin: 0 8px; + } `; diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts index 7ac9ffca2a..6deeaa92ab 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts @@ -31,6 +31,7 @@ const cardConfigStruct = struct({ show_name: "boolean?", icon: "string?", show_icon: "boolean?", + icon_height: "string?", tap_action: struct.optional(actionConfigStruct), hold_action: struct.optional(actionConfigStruct), theme: "string?", @@ -68,6 +69,12 @@ export class HuiEntityButtonCardEditor extends LitElement return this._config!.show_icon || true; } + get _icon_height(): string { + return this._config!.icon_height && this._config!.icon_height.includes("px") + ? String(parseFloat(this._config!.icon_height)) + : ""; + } + get _tap_action(): ActionConfig { return this._config!.tap_action || { action: "more-info" }; } @@ -125,12 +132,24 @@ export class HuiEntityButtonCardEditor extends LitElement >Show Icon?
- +
+
px
+ + + + +
- + - +
`; diff --git a/src/panels/profile/ha-change-password-card.js b/src/panels/profile/ha-change-password-card.js index 8164f93fa5..818b256707 100644 --- a/src/panels/profile/ha-change-password-card.js +++ b/src/panels/profile/ha-change-password-card.js @@ -1,9 +1,9 @@ import "@material/mwc-button"; import "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-spinner/paper-spinner"; -import "@polymer/paper-card/paper-card"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../components/ha-card"; import LocalizeMixin from "../../mixins/localize-mixin"; @@ -27,16 +27,13 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) { position: absolute; top: -4px; } - paper-card { - display: block; - } .currentPassword { margin-top: -4px; }
-
- +
`; } diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.js b/src/panels/profile/ha-long-lived-access-tokens-card.js index 4a1a7215c0..fb41469405 100644 --- a/src/panels/profile/ha-long-lived-access-tokens-card.js +++ b/src/panels/profile/ha-long-lived-access-tokens-card.js @@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element"; import { EventsMixin } from "../../mixins/events-mixin"; import LocalizeMixin from "../../mixins/localize-mixin"; import formatDateTime from "../../common/datetime/format_date_time"; +import "../../components/ha-card"; import "../../resources/ha-style"; @@ -18,9 +19,6 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) { static get template() { return html` -

@@ -65,7 +63,7 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) { [[localize('ui.panel.profile.long_lived_access_tokens.create')]]

- + `; } diff --git a/src/panels/profile/ha-mfa-modules-card.js b/src/panels/profile/ha-mfa-modules-card.js index 8527e19d54..825d8aa2f9 100644 --- a/src/panels/profile/ha-mfa-modules-card.js +++ b/src/panels/profile/ha-mfa-modules-card.js @@ -1,9 +1,9 @@ import "@material/mwc-button"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-item/paper-item-body"; 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-card"; import "../../resources/ha-style"; @@ -31,16 +31,11 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) { position: absolute; top: -4px; } - paper-card { - display: block; - max-width: 600px; - margin: 16px auto; - } mwc-button { margin-right: -0.57em; } - + - + `; } diff --git a/src/panels/profile/ha-panel-profile.js b/src/panels/profile/ha-panel-profile.js index 1157b9346b..5e60d5ed6f 100644 --- a/src/panels/profile/ha-panel-profile.js +++ b/src/panels/profile/ha-panel-profile.js @@ -1,6 +1,5 @@ import "@polymer/app-layout/app-header-layout/app-header-layout"; import "@polymer/app-layout/app-header/app-header"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-item/paper-item"; import "@material/mwc-button"; @@ -8,6 +7,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../components/ha-card"; import "../../components/ha-menu-button"; import "../../resources/ha-style"; @@ -58,7 +58,7 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
- +
[[localize('ui.panel.profile.current_user', 'fullName', hass.user.name)]] @@ -87,7 +87,7 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) { >[[localize('ui.panel.profile.logout')]]
- + - + `; } diff --git a/src/panels/shopping-list/ha-panel-shopping-list.js b/src/panels/shopping-list/ha-panel-shopping-list.js index 6900d21de9..174a7e6caf 100644 --- a/src/panels/shopping-list/ha-panel-shopping-list.js +++ b/src/panels/shopping-list/ha-panel-shopping-list.js @@ -1,7 +1,6 @@ import "@polymer/app-layout/app-header-layout/app-header-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "@polymer/paper-card/paper-card"; import "@polymer/paper-checkbox/paper-checkbox"; import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-input/paper-input"; @@ -15,6 +14,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../../components/ha-menu-button"; import "../../components/ha-start-voice-button"; +import "../../components/ha-card"; import LocalizeMixin from "../../mixins/localize-mixin"; /* @@ -38,9 +38,6 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) { max-width: 600px; margin: 0 auto; } - paper-card { - display: block; - } paper-icon-item { border-top: 1px solid var(--divider-color); } @@ -95,7 +92,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
- + - +
[[localize('ui.panel.shopping-list.microphone_tip')]]
diff --git a/src/state/notification-mixin.js b/src/state/notification-mixin.ts similarity index 89% rename from src/state/notification-mixin.js rename to src/state/notification-mixin.ts index bf722741d2..726f335052 100644 --- a/src/state/notification-mixin.js +++ b/src/state/notification-mixin.ts @@ -1,6 +1,6 @@ export default (superClass) => class extends superClass { - firstUpdated(changedProps) { + protected firstUpdated(changedProps) { super.firstUpdated(changedProps); this.registerDialog({ dialogShowEvent: "hass-notification", diff --git a/src/util/toast.ts b/src/util/toast.ts new file mode 100644 index 0000000000..169d09044c --- /dev/null +++ b/src/util/toast.ts @@ -0,0 +1,6 @@ +import { ShowToastParams } from "../managers/notification-manager"; + +import { fireEvent } from "../common/dom/fire_event"; + +export const showToast = (el: HTMLElement, params: ShowToastParams) => + fireEvent(el, "hass-notification", params); diff --git a/translations/fr.json b/translations/fr.json index b360d47d96..30bd95f16f 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -603,6 +603,12 @@ "device_unavailable": "appareil indisponible", "entity_unavailable": "entité indisponible", "no_area": "Pas de pièce" + }, + "config_flow": { + "external_step": { + "description": "Cette étape nécessite la visite d'un site Web externe pour être complétée.", + "open_site": "Ouvrir le site" + } } }, "zha": { @@ -873,6 +879,14 @@ "title": "Bienvenue à la maison", "no_devices": "Cette page vous permet de contrôler vos périphériques. Toutefois, il semble que vous n’ayez pas encore configuré de périphériques. Rendez-vous sur la page des intégrations pour commencer.", "go_to_integrations_page": "Aller à la page des intégrations." + }, + "picture-elements": { + "hold": "Maintenir:", + "tap": "Appuyez sur:", + "navigate_to": "Accédez à {location}", + "toggle": "Activer\/désactiver {name}", + "call_service": "Appeler le service {name}", + "more_info": "Afficher plus d'informations: {name}" } }, "editor": { @@ -930,7 +944,8 @@ }, "sidebar": { "log_out": "Déconnexion", - "developer_tools": "Outils de développement" + "developer_tools": "Outils de développement", + "external_app_configuration": "Configuration de l'application" }, "common": { "loading": "Chargement", diff --git a/translations/hu.json b/translations/hu.json index 392f8361bc..bdd38aeee4 100644 --- a/translations/hu.json +++ b/translations/hu.json @@ -603,6 +603,12 @@ "device_unavailable": "eszköz nem érhető el", "entity_unavailable": "entitás nem érhető el", "no_area": "Nincs Terület" + }, + "config_flow": { + "external_step": { + "description": "Ehhez a lépéshez egy külső weboldal meglátogatása szükséges.", + "open_site": "Weboldal megnyitása" + } } }, "zha": { @@ -855,6 +861,11 @@ "required_fields": "Töltsd ki az összes szükséges mezőt", "password_not_match": "A jelszavak nem egyeznek" } + }, + "integration": { + "intro": "Az eszközöket és szolgáltatásokat a Home Assistant integrációként kezeli. Beállíthatod őket most, vagy később a konfigurációs képernyőn.", + "more_integrations": "Több", + "finish": "Befejezés" } }, "lovelace": { @@ -933,7 +944,8 @@ }, "sidebar": { "log_out": "Kijelentkezés", - "developer_tools": "Fejlesztői eszközök" + "developer_tools": "Fejlesztői eszközök", + "external_app_configuration": "App Konfiguráció" }, "common": { "loading": "Betöltés", diff --git a/translations/is.json b/translations/is.json index ad22fc29dc..17efd66525 100644 --- a/translations/is.json +++ b/translations/is.json @@ -268,7 +268,7 @@ }, "config": { "header": "Stilla af Home Assistant", - "introduction": "Hér er mögulegt að stilla af íhluti og Home Assistang. Því miður er ekki hægt að breyta öllu í gegnum viðmótið ennþá, en við erum að vinna í því.", + "introduction": "Hér er mögulegt að stilla af íhluti og Home Assistant. Því miður er ekki hægt að breyta öllu í gegnum viðmótið ennþá, en við erum að vinna í því.", "core": { "caption": "Almennt", "description": "Staðfesta að stillingarskráin þín sé rétt og stjórnun á miðlara", @@ -573,7 +573,7 @@ }, "person": { "caption": "Persónur", - "description": "Stjórna persónum sem Home assistand er að rekja.", + "description": "Stjórna persónum sem Home assistant er að rekja.", "detail": { "name": "Nafn", "device_tracker_intro": "Veldu tæki sem tilheyrir þessari persónu.", diff --git a/translations/ko.json b/translations/ko.json index 190f1bcbc7..a4b62ef519 100644 --- a/translations/ko.json +++ b/translations/ko.json @@ -603,6 +603,12 @@ "device_unavailable": "기기 사용불가", "entity_unavailable": "구성요소 사용불가", "no_area": "영역 없음" + }, + "config_flow": { + "external_step": { + "description": "이 단계는 외부 웹사이트 방문이 필요합니다.", + "open_site": "웹사이트 열기" + } } }, "zha": { diff --git a/translations/nb.json b/translations/nb.json index 8d34f34c0c..f89c069eb2 100644 --- a/translations/nb.json +++ b/translations/nb.json @@ -582,7 +582,7 @@ "caption": "Home Assistant Cloud", "description_login": "Logget inn som {email}", "description_not_login": "Ikke pålogget", - "description_features": "Kontroller bortefra hjemmet, integrere med Alexa og Google Assistant." + "description_features": "Kontroller borte fra hjemmet, integrere med Alexa og Google Assistant." }, "integrations": { "caption": "Integrasjoner", diff --git a/translations/pl.json b/translations/pl.json index 44c33733a9..7946c28697 100644 --- a/translations/pl.json +++ b/translations/pl.json @@ -603,6 +603,12 @@ "device_unavailable": "urządzenie niedostępne", "entity_unavailable": "encja niedostępna", "no_area": "brak" + }, + "config_flow": { + "external_step": { + "description": "Ten krok wymaga od Ciebie odwiedzenia zewnętrznej strony.", + "open_site": "Otwórz stronę" + } } }, "zha": { @@ -855,6 +861,11 @@ "required_fields": "Wypełnij wszystkie wymagane pola", "password_not_match": "Hasła nie są takie same" } + }, + "integration": { + "intro": "Urządzenia i usługi są reprezentowane w Home Assistant jako integracje. Możesz je teraz skonfigurować lub zrobić to później w konfiguracji.", + "more_integrations": "Więcej", + "finish": "Koniec" } }, "lovelace": { diff --git a/translations/ru.json b/translations/ru.json index 590b71840b..63fe536630 100644 --- a/translations/ru.json +++ b/translations/ru.json @@ -371,7 +371,7 @@ "caption": "Автоматизация", "description": "Создавайте и редактируйте правила автоматизации", "picker": { - "header": "Редактор автоматизации", + "header": "Редактор автоматизаций", "introduction": "Редактор автоматизаций позволяет создавать и редактировать автоматизации.\nПожалуйста, ознакомьтесь с инструкциями по указанной ниже ссылке и убедитесь, что правильно настроили Home Assistant.", "pick_automation": "Выберите автоматизацию для редактирования", "no_automations": "Мы не нашли редактируемые автоматизации", diff --git a/translations/sv.json b/translations/sv.json index a0d2dda7ae..7196d29ae9 100644 --- a/translations/sv.json +++ b/translations/sv.json @@ -603,6 +603,12 @@ "device_unavailable": "enhet otillgänglig", "entity_unavailable": "entitet otillgänglig", "no_area": "Inget område (\"area\")" + }, + "config_flow": { + "external_step": { + "description": "Det här steget kräver att du besöker en extern webbplats för att slutföra.", + "open_site": "Öppna webbplats" + } } }, "zha": { @@ -855,6 +861,11 @@ "required_fields": "Fyll i alla fält som krävs", "password_not_match": "Lösenorden överensstämmer inte" } + }, + "integration": { + "intro": "Enheter och tjänster representeras i Home Assistant som integrationer. Du kan ställa in dem nu eller göra det senare från konfigurations-skärmen.", + "more_integrations": "Mer", + "finish": "Avsluta" } }, "lovelace": { @@ -868,6 +879,14 @@ "title": "Välkommen hem", "no_devices": "På den här sidan kan du styra dina enheter, men det ser ut som om du inte har några enheter ännu. Gå till integrationssidan för att komma igång.", "go_to_integrations_page": "Gå till integrationssidan." + }, + "picture-elements": { + "hold": "Håll:", + "tap": "Tryck:", + "navigate_to": "Navigera till {location}", + "toggle": "Växla {name}", + "call_service": "Kör tjänst {name}", + "more_info": "Visa mer-info: {name}" } }, "editor": { @@ -925,7 +944,8 @@ }, "sidebar": { "log_out": "Logga ut", - "developer_tools": "Utvecklarverktyg" + "developer_tools": "Utvecklarverktyg", + "external_app_configuration": "Appkonfiguration" }, "common": { "loading": "Läser in", diff --git a/translations/zh-Hans.json b/translations/zh-Hans.json index 062ad6c6e7..4a972f923d 100644 --- a/translations/zh-Hans.json +++ b/translations/zh-Hans.json @@ -581,7 +581,8 @@ "cloud": { "caption": "Home Assistant Cloud", "description_login": "登录为 {email}", - "description_not_login": "未登录" + "description_not_login": "未登录", + "description_features": "整合 Alexa 及 Google 助理，远程控制智能家居。" }, "integrations": { "caption": "集成", @@ -602,6 +603,12 @@ "device_unavailable": "设备不可用", "entity_unavailable": "实体不可用", "no_area": "没有区域" + }, + "config_flow": { + "external_step": { + "description": "此步骤要求您访问要完成的外部网站。", + "open_site": "打开网站" + } } }, "zha": { @@ -613,7 +620,8 @@ "remove": "从 ZigBee 网络中删除设备。" }, "device_card": { - "device_name_placeholder": "用户指定的名称" + "device_name_placeholder": "用户指定的名称", + "update_name_button": "更新名称" }, "add_device_page": { "header": "Zigbee家庭自动化 - 添加设备", @@ -852,6 +860,10 @@ "required_fields": "请填写所有必填字段", "password_not_match": "密码不匹配" } + }, + "integration": { + "more_integrations": "更多", + "finish": "完成" } }, "lovelace": { @@ -865,6 +877,14 @@ "title": "欢迎回家", "no_devices": "此页面是用来控制设备的，不过您好像还没有配置好任何设备。请前往集成页面以开始。", "go_to_integrations_page": "前往集成页面。" + }, + "picture-elements": { + "hold": "按住：", + "tap": "点击：", + "navigate_to": "导航到{location}", + "toggle": "切换{name}", + "call_service": "调用服务{name}", + "more_info": "显示更多信息： {name}" } }, "editor": { @@ -922,7 +942,8 @@ }, "sidebar": { "log_out": "退出", - "developer_tools": "开发者工具" + "developer_tools": "开发者工具", + "external_app_configuration": "应用配置" }, "common": { "loading": "加载中", diff --git a/yarn.lock b/yarn.lock index 42d45f0325..f35c71ba6c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6489,6 +6489,11 @@ functional-red-black-tree@^1.0.1: resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327" integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc= +fuse.js@^3.4.4: + version "3.4.4" + resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.4.tgz#f98f55fcb3b595cf6a3e629c5ffaf10982103e95" + integrity sha512-pyLQo/1oR5Ywf+a/tY8z4JygnIglmRxVUOiyFAbd11o9keUDpUJSMGRWJngcnkURj30kDHPmhoKY8ChJiz3EpQ== + g-status@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/g-status/-/g-status-2.0.2.tgz#270fd32119e8fc9496f066fe5fe88e0a6bc78b97"