From 755a3d5cf1904bce8536c4ac99fc4de7ee3fa638 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 21 Jan 2019 01:18:00 +0100 Subject: [PATCH] Edit dialogs for mobile (#2513) * Edit dialogs for mobile * unused --- .../editor/card-editor/hui-card-picker.ts | 18 ++- .../card-editor/hui-dialog-pick-card.ts | 29 ++++ .../editor/card-editor/hui-edit-card.ts | 142 ++++++++---------- .../lovelace/editor/hui-dialog-save-config.ts | 60 +++++--- .../hui-dialog-edit-lovelace.ts | 31 +++- .../editor/view-editor/hui-edit-view.ts | 94 +++++++----- 6 files changed, 224 insertions(+), 150 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index 3ee078070f..057f144ee1 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -1,4 +1,4 @@ -import { html, LitElement, TemplateResult } from "lit-element"; +import { html, css, LitElement, TemplateResult, CSSResult } from "lit-element"; import "@polymer/paper-button/paper-button"; import { HomeAssistant } from "../../../../types"; @@ -40,7 +40,6 @@ export class HuiCardPicker extends hassLocalizeLitMixin(LitElement) { protected render(): TemplateResult | void { return html` - ${this.renderStyle()}

${this.localize("ui.panel.lovelace.editor.edit_card.pick_card")}

${ @@ -59,9 +58,9 @@ export class HuiCardPicker extends hassLocalizeLitMixin(LitElement) { `; } - private renderStyle(): TemplateResult { - return html` - - `; + @media all and (max-width: 450px), all and (max-height: 500px) { + .cards-container paper-button { + flex: 1 0 33%; + } + } + `, + ]; } private _cardPicked(ev: Event): void { diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts index 292b4c9026..7949e66c06 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts @@ -1,12 +1,16 @@ import { html, + css, LitElement, PropertyDeclarations, TemplateResult, + CSSResult, } from "lit-element"; import "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; +import { haStyleDialog } from "../../../../resources/ha-style"; + import "./hui-card-picker"; import { HomeAssistant } from "../../../../types"; import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin"; @@ -51,6 +55,31 @@ export class HuiDialogPickCard extends hassLocalizeLitMixin(LitElement) { private _skipPick() { this.cardPicked!({ type: "" }); } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + @media all and (max-width: 450px), all and (max-height: 500px) { + /* overrule the ha-style-dialog max-height on small screens */ + paper-dialog { + max-height: 100%; + height: 100%; + } + } + + @media all and (min-width: 660px) { + paper-dialog { + width: 650px; + } + } + + paper-dialog { + max-width: 650px; + } + `, + ]; + } } declare global { diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts index 45954811df..519784a0f1 100644 --- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts @@ -81,82 +81,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) { }; } - static get styles(): CSSResult[] { - return [ - haStyleDialog, - css` - @media all and (max-width: 450px), all and (max-height: 500px) { - :host::before { - content: ""; - position: fixed; - z-index: -1; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background-color: inherit; - } - /* overrule the ha-style-dialog max-height on small screens */ - paper-dialog { - max-height: 100%; - height: 100%; - } - } - - @media all and (min-width: 660px) { - paper-dialog { - width: 650px; - } - } - - paper-dialog { - max-width: 650px; - } - - .center { - margin-left: auto; - margin-right: auto; - } - .margin-bot { - margin-bottom: 24px; - } - paper-button paper-spinner { - width: 14px; - height: 14px; - margin-right: 20px; - } - paper-spinner { - display: none; - } - paper-spinner[active] { - display: block; - } - .hidden { - display: none; - } - .element-editor { - margin-bottom: 8px; - } - .error { - color: #ef5350; - border-bottom: 1px solid #ef5350; - } - hr { - color: #000; - opacity: 0.12; - } - hui-card-preview { - padding-top: 8px; - margin-bottom: 4px; - display: block; - } - .toggle-button { - margin-right: auto; - } - `, - ]; - } - private get _dialog(): PaperDialogElement { return this.shadowRoot!.querySelector("paper-dialog")!; } @@ -479,6 +403,72 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) { this.closeDialog!(); } } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + @media all and (max-width: 450px), all and (max-height: 500px) { + /* overrule the ha-style-dialog max-height on small screens */ + paper-dialog { + max-height: 100%; + height: 100%; + } + } + + @media all and (min-width: 660px) { + paper-dialog { + width: 650px; + } + } + + paper-dialog { + max-width: 650px; + } + + .center { + margin-left: auto; + margin-right: auto; + } + .margin-bot { + margin-bottom: 24px; + } + paper-button paper-spinner { + width: 14px; + height: 14px; + margin-right: 20px; + } + paper-spinner { + display: none; + } + paper-spinner[active] { + display: block; + } + .hidden { + display: none; + } + .element-editor { + margin-bottom: 8px; + } + .error { + color: #ef5350; + border-bottom: 1px solid #ef5350; + } + hr { + color: #000; + opacity: 0.12; + } + hui-card-preview { + padding-top: 8px; + margin-bottom: 4px; + display: block; + } + .toggle-button { + margin-right: auto; + } + `, + ]; + } } declare global { diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts index b13b52cbd0..2499bf2b4d 100644 --- a/src/panels/lovelace/editor/hui-dialog-save-config.ts +++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts @@ -1,8 +1,10 @@ import { html, + css, LitElement, PropertyDeclarations, TemplateResult, + CSSResult, } from "lit-element"; import "@polymer/paper-spinner/paper-spinner"; @@ -12,6 +14,8 @@ import "@polymer/paper-dialog/paper-dialog"; import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-button/paper-button"; +import { haStyleDialog } from "../../../resources/ha-style"; + import { HomeAssistant } from "../../../types"; import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; @@ -47,7 +51,6 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) { protected render(): TemplateResult | void { return html` - ${this.renderStyle()}

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

@@ -79,27 +82,6 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) { `; } - private renderStyle(): TemplateResult { - return html` - - `; - } - private _closeDialog(): void { this._dialog.close(); } @@ -120,6 +102,40 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) { this._saving = false; } } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + @media all and (max-width: 450px), all and (max-height: 500px) { + /* overrule the ha-style-dialog max-height on small screens */ + paper-dialog { + max-height: 100%; + height: 100%; + } + } + @media all and (min-width: 660px) { + paper-dialog { + width: 650px; + } + } + paper-dialog { + max-width: 650px; + } + paper-spinner { + display: none; + } + paper-spinner[active] { + display: block; + } + paper-button paper-spinner { + width: 14px; + height: 14px; + margin-right: 20px; + } + `, + ]; + } } declare global { diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts index 3f15f505a6..247e7a3f79 100644 --- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts +++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts @@ -1,8 +1,10 @@ import { html, + css, LitElement, PropertyDeclarations, TemplateResult, + CSSResult, } from "lit-element"; import "@polymer/paper-spinner/paper-spinner"; import "@polymer/paper-dialog/paper-dialog"; @@ -11,6 +13,9 @@ 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 { haStyleDialog } from "../../../../resources/ha-style"; + import "./hui-lovelace-editor"; import { HomeAssistant } from "../../../../types"; import { LovelaceConfig } from "../../../../data/lovelace"; @@ -53,7 +58,6 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) { protected render(): TemplateResult | void { return html` - ${this.renderStyle()}

Edit Lovelace

@@ -125,11 +129,24 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) { return JSON.stringify(this._config) !== JSON.stringify(lovelaceConfig); } - private renderStyle(): TemplateResult { - return html` - - `; + `, + ]; } } diff --git a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts index 537a1ed379..f03ad127e4 100644 --- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts @@ -1,8 +1,10 @@ import { html, + css, LitElement, PropertyDeclarations, TemplateResult, + CSSResult, } from "lit-element"; import "@polymer/paper-spinner/paper-spinner"; @@ -15,6 +17,9 @@ import "@polymer/paper-icon-button/paper-icon-button.js"; import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-button/paper-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; + +import { haStyleDialog } from "../../../../resources/ha-style"; + import "../../components/hui-entity-editor"; import "./hui-view-editor"; import { HomeAssistant } from "../../../../types"; @@ -115,7 +120,6 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { break; } return html` - ${this.renderStyle()}

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

- paper-dialog { - width: 650px; - } - paper-tabs { - --paper-tabs-selection-bar-color: var(--primary-color); - text-transform: uppercase; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - } - paper-button paper-spinner { - width: 14px; - height: 14px; - margin-right: 20px; - } - paper-icon-button.delete { - margin-right: auto; - color: var(--secondary-text-color); - } - paper-spinner { - display: none; - } - paper-spinner[active] { - display: block; - } - .hidden { - display: none; - } - .error { - color: #ef5350; - border-bottom: 1px solid #ef5350; - } - - `; - } - private async _delete() { if (this._cards && this._cards.length > 0) { alert( @@ -297,6 +264,57 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) { private get _creatingView(): boolean { return this.viewIndex === undefined; } + + static get styles(): CSSResult[] { + return [ + haStyleDialog, + css` + @media all and (max-width: 450px), all and (max-height: 500px) { + /* overrule the ha-style-dialog max-height on small screens */ + paper-dialog { + max-height: 100%; + height: 100%; + } + } + @media all and (min-width: 660px) { + paper-dialog { + width: 650px; + } + } + paper-dialog { + max-width: 650px; + } + paper-tabs { + --paper-tabs-selection-bar-color: var(--primary-color); + text-transform: uppercase; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } + paper-button paper-spinner { + width: 14px; + height: 14px; + margin-right: 20px; + } + paper-icon-button.delete { + margin-right: auto; + color: var(--secondary-text-color); + } + paper-spinner { + display: none; + } + paper-spinner[active] { + display: block; + } + .hidden { + display: none; + } + .error { + color: #ef5350; + border-bottom: 1px solid #ef5350; + } + + `, + ]; + } } declare global {