Skip to content

Fix edit view and layout #2213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 2 commits into from
Dec 7, 2018
Merged

Fix edit view and layout #2213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7097f39
Fix edit view and layout
bramkragten Dec 7, 2018
54525d3
Colors
bramkragten Dec 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions src/panels/lovelace/components/hui-card-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
import "@polymer/paper-button/paper-button";
import "@polymer/paper-icon-button/paper-icon-button";
import { fireEvent } from "../../../common/dom/fire_event";
import { showEditCardDialog } from "../editor/show-edit-card-dialog";

Expand Down Expand Up @@ -38,14 +39,14 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
rgba(0, 0, 0, 0.12) 0px 1px 5px 0px,
rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
text-align: right;
}
paper-button {
color: var(--primary-color);
font-weight: 500;
}
paper-button.warning:not([disabled]) {
color: var(--google-red-500);
paper-icon-button.delete {
color: var(--secondary-text-color);
float: right;
Copy link
Copy Markdown
Member

@balloob balloob Dec 7, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make sure this is the default text color?

}
</style>
<slot></slot>
Expand All @@ -55,11 +56,12 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
this.localize("ui.panel.lovelace.editor.edit_card.edit")
}</paper-button
>
<paper-button class="warning" @click="${this._deleteCard}"
>${
this.localize("ui.panel.lovelace.editor.edit_card.delete")
}</paper-button
>
<paper-icon-button
class="delete"
icon="hass:delete"
@click="${this._deleteCard}"
title="${this.localize("ui.panel.lovelace.editor.edit_card.delete")}"
></paper-icon-button>
</div>
`;
}
Expand Down
2 changes: 1 addition & 1 deletion src/panels/lovelace/editor/hui-dialog-edit-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export class HuiDialogEditCard extends LitElement {
if (
(!this._params.add &&
this._params.cardConfig &&
!this._params.cardConfig.id) ||
!("id" in this._params.cardConfig)) ||
(this._params.add && !this._params.viewId)
) {
return html`
Expand Down
37 changes: 23 additions & 14 deletions src/panels/lovelace/editor/hui-edit-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@ import "@polymer/paper-tabs/paper-tab";
import "@polymer/paper-tabs/paper-tabs";
import "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-icon-button/paper-icon-button.js";
import "@polymer/paper-item/paper-item.js";
import "@polymer/paper-listbox/paper-listbox.js";
import "@polymer/paper-menu-button/paper-menu-button.js";
// 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";
Expand All @@ -26,6 +23,7 @@ import {
addView,
updateViewConfig,
LovelaceViewConfig,
LovelaceCardConfig,
} from "../../../data/lovelace";
import { fireEvent } from "../../../common/dom/fire_event";
import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
Expand All @@ -43,6 +41,7 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
add: {},
_config: {},
_badges: {},
_cards: {},
_saving: {},
_curTab: {},
};
Expand All @@ -54,6 +53,7 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
protected hass?: HomeAssistant;
private _config?: LovelaceViewConfig;
private _badges?: EntityConfig[];
private _cards?: LovelaceCardConfig[];
private _saving: boolean;
private _curTabIndex: number;
private _curTab?: string;
Expand Down Expand Up @@ -86,9 +86,11 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
const { cards, badges, ...viewConfig } = this.viewConfig;
this._config = viewConfig;
this._badges = badges ? processEditorEntities(badges) : [];
this._cards = cards;
} else if (changedProperties.has("add")) {
this._config = {};
this._badges = [];
this._cards = [];
}
this._resizeDialog();
}
Expand Down Expand Up @@ -139,6 +141,18 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
</paper-tabs>
<paper-dialog-scrollable> ${content} </paper-dialog-scrollable>
<div class="paper-dialog-buttons">
${
!this.add
? html`
<paper-icon-button
class="delete"
title="Delete"
icon="hass:delete"
@click="${this._delete}"
></paper-icon-button>
`
: ""
}
<paper-button @click="${this._closeDialog}"
>${this.localize("ui.common.cancel")}</paper-button
>
Expand All @@ -152,15 +166,6 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
></paper-spinner>
${this.localize("ui.common.save")}</paper-button
>
<paper-menu-button no-animations>
<paper-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
></paper-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item @click="${this._delete}">Delete</paper-item>
</paper-listbox>
</paper-menu-button>
</div>
</paper-dialog>
`;
Expand All @@ -182,6 +187,10 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
height: 14px;
margin-right: 20px;
}
paper-icon-button.delete {
margin-right: auto;
color: var(--secondary-text-color);
}
paper-spinner {
display: none;
}
Expand All @@ -205,13 +214,13 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
}

private _delete() {
if (this._config!.cards && this._config!.cards!.length > 0) {
if (this._cards && this._cards.length > 0) {
alert(
"You can't delete a view that has card in them. Remove the cards first."
);
return;
}
confDeleteView(this.hass!, this._config!.id!, () => {
confDeleteView(this.hass!, String(this.viewConfig!.id!), () => {
this._closeDialog();
this.reloadLovelace!();
navigate(this, `/lovelace/0`);
Expand Down
25 changes: 13 additions & 12 deletions src/panels/lovelace/hui-root.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,20 +59,28 @@ class HUIRoot extends NavigateMixin(
--paper-tabs-selection-bar-color: var(--text-primary-color, #FFF);
text-transform: uppercase;
}
paper-tab.iron-selected .edit-view-icon{
display: inline-flex;
}
.edit-view-icon {
padding-left: 8px;
display: none;
}
#add-view {
position: absolute;
height: 44px;
}
#add-view ha-icon {
background-color: var(--accent-color);
border-radius: 5px;
margin-top: 4px;
}
app-toolbar a {
color: var(--text-primary-color, white);
}
paper-button.warning:not([disabled]) {
color: var(--google-red-500);
}
#add-view ha-icon {
background-color: var(--accent-color);
border-radius: 5px;
}
#view {
min-height: calc(100vh - 112px);
/**
Expand All @@ -90,9 +98,6 @@ class HUIRoot extends NavigateMixin(
paper-item {
cursor: pointer;
}
.edit-view-icon {
padding-left: 8px;
}
</style>
<app-route route="[[route]]" pattern="/:view" data="{{routeData}}"></app-route>
<hui-notification-drawer
Expand Down Expand Up @@ -148,7 +153,7 @@ class HUIRoot extends NavigateMixin(
<template is="dom-if" if="[[!item.icon]]">
[[_computeTabTitle(item.title)]]
</template>
<template is='dom-if' if="[[_computeEditVisible(_editMode, config.views)]]">
<template is='dom-if' if="[[_editMode]]">
<ha-icon class="edit-view-icon" on-click="_editView" icon="hass:pencil"></ha-icon>
</template>
</paper-tab>
Expand Down Expand Up @@ -299,10 +304,6 @@ class HUIRoot extends NavigateMixin(
window.open("https://www.home-assistant.io/lovelace/", "_blank");
}

_computeEditVisible(editMode, views) {
return editMode && views[this._curView];
}

_editModeEnable() {
if (this.config._frontendAuto) {
showSaveDialog(this, {
Expand Down