jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 16:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Edit dialogs for mobile (#2513)

Browse Source 
* Edit dialogs for mobile

* unused
This commit is contained in:
Bram Kragten 2019-01-21 01:18:00 +01:00 committed by Paulus Schoutsen
parent e9c5011a6d
commit 755a3d5cf1
6 changed files with 224 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/panels/lovelace/editor/card-editor/hui-card-picker.ts
View File

@ -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()}
<h3>${this.localize("ui.panel.lovelace.editor.edit_card.pick_card")}</h3>
<div class="cards-container">
${
@ -59,9 +58,9 @@ export class HuiCardPicker extends hassLocalizeLitMixin(LitElement) {
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
static get styles(): CSSResult[] {
return [
css`
.cards-container {
display: flex;
flex-wrap: wrap;
@ -70,8 +69,13 @@ export class HuiCardPicker extends hassLocalizeLitMixin(LitElement) {
.cards-container paper-button {
flex: 1 0 25%;
}
</style>
`;
@media all and (max-width: 450px), all and (max-height: 500px) {
.cards-container paper-button {
flex: 1 0 33%;
}
}
`,
];
}
private _cardPicked(ev: Event): void {

29
src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
View File

@ -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 {

142
src/panels/lovelace/editor/card-editor/hui-edit-card.ts
View File

@ -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 {

60
src/panels/lovelace/editor/hui-dialog-save-config.ts
View File

@ -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()}
<paper-dialog with-backdrop>
<h2>${this.localize("ui.panel.lovelace.editor.save_config.header")}</h2>
<paper-dialog-scrollable>
@ -79,27 +82,6 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
paper-dialog {
width: 650px;
}
paper-spinner {
display: none;
}
paper-spinner[active] {
display: block;
}
paper-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
}
</style>
`;
}
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 {

31
src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
View File

@ -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()}
<paper-dialog with-backdrop>
<h2>Edit Lovelace</h2>
<paper-dialog-scrollable>
@ -125,11 +129,24 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
return JSON.stringify(this._config) !== JSON.stringify(lovelaceConfig);
}
private renderStyle(): TemplateResult {
return html`
<style>
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 {
width: 650px;
max-width: 650px;
}
paper-button paper-spinner {
width: 14px;
@ -142,8 +159,8 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
paper-spinner[active] {
display: block;
}
</style>
`;
`,
];
}
}

94
src/panels/lovelace/editor/view-editor/hui-edit-view.ts
View File

@ -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()}
<paper-dialog with-backdrop>
<h2>${this.localize("ui.panel.lovelace.editor.edit_view.header")}</h2>
<paper-tabs
@ -159,43 +163,6 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
`;
}
private renderStyle(): TemplateResult {
return html`
<style>
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;
}
</style>
`;
}
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;
}
</style>
`,
];
}
}
declare global {