From 7c76168643db8db459d4ab4e628b395c5faf8cf3 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 4 Dec 2018 16:54:55 +0100 Subject: [PATCH 1/3] Badges --- src/panels/lovelace/editor/hui-edit-view.ts | 93 ++++++++++++++++++--- src/panels/lovelace/hui-root.js | 3 +- src/panels/lovelace/hui-view.js | 2 +- 3 files changed, 85 insertions(+), 13 deletions(-) diff --git a/src/panels/lovelace/editor/hui-edit-view.ts b/src/panels/lovelace/editor/hui-edit-view.ts index cf9a75a40b17..96fb86820a19 100644 --- a/src/panels/lovelace/editor/hui-edit-view.ts +++ b/src/panels/lovelace/editor/hui-edit-view.ts @@ -8,12 +8,16 @@ import { TemplateResult } from "lit-html"; import "@polymer/paper-spinner/paper-spinner"; import "@polymer/paper-dialog/paper-dialog"; +import "@polymer/paper-tabs/paper-tab"; +import "@polymer/paper-tabs/paper-tabs"; + // This is not a duplicate import, one is for types, one is for element. // tslint:disable-next-line import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-button/paper-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "../components/hui-theme-select-editor"; +import "../components/hui-entity-editor"; import { HomeAssistant } from "../../../types"; import { addView, @@ -22,7 +26,9 @@ import { } from "../../../data/lovelace"; import { fireEvent } from "../../../common/dom/fire_event"; import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; -import { EditorTarget } from "./types"; +import { EditorTarget, EntitiesEditorEvent } from "./types"; +import { processEditorEntities } from "./process-editor-entities"; +import { EntityConfig } from "../entity-rows/types"; export class HuiEditView extends hassLocalizeLitMixin(LitElement) { static get properties(): PropertyDeclarations { @@ -32,6 +38,7 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { add: {}, _config: {}, _saving: {}, + _curTab: {}, }; } @@ -40,11 +47,15 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { public reloadLovelace?: () => {}; protected hass?: HomeAssistant; private _config?: LovelaceViewConfig; + private _badges?: EntityConfig[]; private _saving: boolean; + private _curTabIndex: number; + private _curTab?: string; protected constructor() { super(); this._saving = false; + this._curTabIndex = 0; } public async showDialog(): Promise { @@ -66,9 +77,12 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { this.viewConfig.id !== (changedProperties.get("viewConfig") as LovelaceViewConfig).id) ) { - this._config = this.viewConfig; + const { cards, badges, ...viewConfig } = this.viewConfig; + this._badges = processEditorEntities(badges); + this._config = viewConfig; } else if (changedProperties.has("add")) { this._config = { cards: [] }; + this._badges = []; } this._resizeDialog(); } @@ -106,11 +120,10 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { } protected render(): TemplateResult { - return html` - ${this.renderStyle()} - -

${this.localize("ui.panel.lovelace.editor.edit_view.header")}

- + let content; + switch (this._curTab) { + case "tab-settings": + content = html`
- + `; + break; + case "tab-badges": + content = html` + + `; + break; + case "tab-cards": + content = html` + Cards + `; + break; + } + return html` + ${this.renderStyle()} + +

${this.localize("ui.panel.lovelace.editor.edit_view.header")}

+ + Settings + Badges + + ${content}
${this.localize("ui.common.cancel")} { + if (!this._config) { + return; + } if (!this._isConfigChanged()) { this._closeDialog(); this._saving = false; return; } + if (this._badges) { + this._config.badges = this._badges.map((entityConf) => { + return entityConf.entity; + }); + } + try { if (this.add) { - await addView(this.hass!, this._config!, "json"); + await addView(this.hass!, this._config, "json"); } else { await updateViewConfig( this.hass!, this.viewConfig!.id!, - this._config!, + this._config, "json" ); } @@ -247,6 +313,13 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { } } + private _badgesChanged(ev: EntitiesEditorEvent): void { + if (!this._badges || !this.hass || !ev.detail || !ev.detail.entities) { + return; + } + this._badges = ev.detail.entities; + } + private _isConfigChanged(): boolean { if (!this.add) { return true; diff --git a/src/panels/lovelace/hui-root.js b/src/panels/lovelace/hui-root.js index a20864fb2790..33ffb3177b7d 100644 --- a/src/panels/lovelace/hui-root.js +++ b/src/panels/lovelace/hui-root.js @@ -327,9 +327,8 @@ class HUIRoot extends NavigateMixin( } _editView() { - const { cards, badges, ...viewConfig } = this.config.views[this._curView]; showEditViewDialog(this, { - viewConfig, + viewConfig: this.config.views[this._curView], add: false, reloadLovelace: () => { this.fire("config-refresh"); diff --git a/src/panels/lovelace/hui-view.js b/src/panels/lovelace/hui-view.js index d78dca3bcf1a..b462c787d894 100644 --- a/src/panels/lovelace/hui-view.js +++ b/src/panels/lovelace/hui-view.js @@ -49,7 +49,7 @@ class HUIView extends localizeMixin(EventsMixin(PolymerElement)) { } paper-fab { - position: sticky; + position: fixed; float: right; bottom: 16px; right: 16px; From 91cd6002283c1e6f72269ec3bb4ed8fb1657a889 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 4 Dec 2018 17:19:30 +0100 Subject: [PATCH 2/3] Fix entity picker --- src/panels/lovelace/editor/hui-edit-view.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/editor/hui-edit-view.ts b/src/panels/lovelace/editor/hui-edit-view.ts index 96fb86820a19..8e62e2122caa 100644 --- a/src/panels/lovelace/editor/hui-edit-view.ts +++ b/src/panels/lovelace/editor/hui-edit-view.ts @@ -7,10 +7,9 @@ import { import { TemplateResult } from "lit-html"; import "@polymer/paper-spinner/paper-spinner"; -import "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tabs"; - +import "@polymer/paper-dialog/paper-dialog"; // This is not a duplicate import, one is for types, one is for element. // tslint:disable-next-line import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog"; @@ -37,6 +36,7 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { viewConfig: {}, add: {}, _config: {}, + _badges: {}, _saving: {}, _curTab: {}, }; From b6f5adc9aba125a08412d4bb3bc6660dbfe0dbb6 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 4 Dec 2018 22:13:09 +0100 Subject: [PATCH 3/3] Make editor own element --- .../editor/config-elements/hui-view-editor.ts | 128 ++++++++++++++++++ src/panels/lovelace/editor/hui-edit-view.ts | 88 ++---------- src/panels/lovelace/editor/types.ts | 8 +- src/panels/lovelace/hui-view.js | 3 +- 4 files changed, 150 insertions(+), 77 deletions(-) create mode 100644 src/panels/lovelace/editor/config-elements/hui-view-editor.ts diff --git a/src/panels/lovelace/editor/config-elements/hui-view-editor.ts b/src/panels/lovelace/editor/config-elements/hui-view-editor.ts new file mode 100644 index 000000000000..872c7766635e --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-view-editor.ts @@ -0,0 +1,128 @@ +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; +import { TemplateResult } from "lit-html"; +import "@polymer/paper-input/paper-input"; + +import { EditorTarget } from "../types"; +import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin"; +import { HomeAssistant } from "../../../../types"; +import { fireEvent } from "../../../../common/dom/fire_event"; +import { configElementStyle } from "./config-elements-style"; + +import "../../components/hui-theme-select-editor"; +import { LovelaceViewConfig } from "../../../../data/lovelace"; + +declare global { + interface HASSDomEvents { + "view-config-changed": { + config: LovelaceViewConfig; + }; + } +} + +export class HuiViewEditor extends hassLocalizeLitMixin(LitElement) { + static get properties(): PropertyDeclarations { + return { hass: {}, _config: {} }; + } + + get _id(): string { + if (!this._config) { + return ""; + } + return this._config.id || ""; + } + + get _title(): string { + if (!this._config) { + return ""; + } + return this._config.title || ""; + } + + get _icon(): string { + if (!this._config) { + return ""; + } + return this._config.icon || ""; + } + + get _theme(): string { + if (!this._config) { + return ""; + } + return this._config.theme || "Backend-selected"; + } + + public hass?: HomeAssistant; + private _config?: LovelaceViewConfig; + + set config(config: LovelaceViewConfig) { + this._config = config; + } + + protected render(): TemplateResult { + if (!this.hass) { + return html``; + } + + return html` + ${configElementStyle} +
+ + + + +
+ `; + } + + private _valueChanged(ev: Event): void { + if (!this._config || !this.hass) { + return; + } + + const target = ev.currentTarget! as EditorTarget; + + if (this[`_${target.configValue}`] === target.value) { + return; + } + + let newConfig; + + if (target.configValue) { + newConfig = { + ...this._config, + [target.configValue]: target.value, + }; + } + + fireEvent(this, "view-config-changed", { config: newConfig }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-view-editor": HuiViewEditor; + } +} + +customElements.define("hui-view-editor", HuiViewEditor); diff --git a/src/panels/lovelace/editor/hui-edit-view.ts b/src/panels/lovelace/editor/hui-edit-view.ts index 8e62e2122caa..85502fe22cb6 100644 --- a/src/panels/lovelace/editor/hui-edit-view.ts +++ b/src/panels/lovelace/editor/hui-edit-view.ts @@ -15,8 +15,8 @@ import "@polymer/paper-dialog/paper-dialog"; import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-button/paper-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import "../components/hui-theme-select-editor"; import "../components/hui-entity-editor"; +import "./config-elements/hui-view-editor"; import { HomeAssistant } from "../../../types"; import { addView, @@ -25,7 +25,7 @@ import { } from "../../../data/lovelace"; import { fireEvent } from "../../../common/dom/fire_event"; import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; -import { EditorTarget, EntitiesEditorEvent } from "./types"; +import { EntitiesEditorEvent, ViewEditEvent } from "./types"; import { processEditorEntities } from "./process-editor-entities"; import { EntityConfig } from "../entity-rows/types"; @@ -81,7 +81,7 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { this._badges = processEditorEntities(badges); this._config = viewConfig; } else if (changedProperties.has("add")) { - this._config = { cards: [] }; + this._config = {}; this._badges = []; } this._resizeDialog(); @@ -91,65 +91,16 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { return this.shadowRoot!.querySelector("paper-dialog")!; } - get _id(): string { - if (!this._config) { - return ""; - } - return this._config.id || ""; - } - - get _title(): string { - if (!this._config) { - return ""; - } - return this._config.title || ""; - } - - get _icon(): string { - if (!this._config) { - return ""; - } - return this._config.icon || ""; - } - - get _theme(): string { - if (!this._config) { - return ""; - } - return this._config.theme || "Backend-selected"; - } - protected render(): TemplateResult { let content; switch (this._curTab) { case "tab-settings": content = html` -
- - - - -
+ `; break; case "tab-badges": @@ -244,13 +195,13 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { private _closeDialog(): void { this._curTabIndex = 0; - this._config = { cards: [] }; + this._config = {}; this._badges = []; this.viewConfig = undefined; this._dialog.close(); } - private _handleTabSelected(ev): void { + private _handleTabSelected(ev: CustomEvent): void { if (!ev.detail.value) { return; } @@ -294,22 +245,9 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { } } - private _valueChanged(ev: Event): void { - if (!this._config || !this.hass) { - return; - } - - const target = ev.currentTarget! as EditorTarget; - - if (this[`_${target.configValue}`] === target.value) { - return; - } - - if (target.configValue) { - this._config = { - ...this._config, - [target.configValue]: target.value, - }; + private _viewConfigChanged(ev: ViewEditEvent): void { + if (ev.detail && ev.detail.config) { + this._config = ev.detail.config; } } diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts index c814cc8dedd0..fe76d20ecec6 100644 --- a/src/panels/lovelace/editor/types.ts +++ b/src/panels/lovelace/editor/types.ts @@ -1,4 +1,4 @@ -import { LovelaceCardConfig } from "../../../data/lovelace"; +import { LovelaceCardConfig, LovelaceViewConfig } from "../../../data/lovelace"; import { EntityConfig } from "../entity-rows/types"; export interface YamlChangedEvent extends Event { @@ -13,6 +13,12 @@ export interface CardPickedEvent extends Event { }; } +export interface ViewEditEvent extends Event { + detail: { + config: LovelaceViewConfig; + }; +} + export interface ConfigValue { format: "json" | "yaml"; value?: string | LovelaceCardConfig; diff --git a/src/panels/lovelace/hui-view.js b/src/panels/lovelace/hui-view.js index b462c787d894..0f75b0d75c89 100644 --- a/src/panels/lovelace/hui-view.js +++ b/src/panels/lovelace/hui-view.js @@ -22,6 +22,7 @@ class HUIView extends localizeMixin(EventsMixin(PolymerElement)) { padding: 4px 4px 0; transform: translateZ(0); position: relative; + min-height: calc(100vh - 155px); } #badges { @@ -49,7 +50,7 @@ class HUIView extends localizeMixin(EventsMixin(PolymerElement)) { } paper-fab { - position: fixed; + position: sticky; float: right; bottom: 16px; right: 16px;