jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI Design Update (#2207)

Browse Source
This commit is contained in:
Zack Arnett 2018-12-07 01:02:17 -05:00 committed by Paulus Schoutsen
parent 6aca1d0d54
commit 0fd3c03764
3 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/panels/lovelace/components/hui-card-options.ts
View File

@ -50,14 +50,15 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
</style>
<slot></slot>
<div>
<paper-button @click="${this._editCard}"
>${
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-button @click="${this._editCard}"
>${
this.localize("ui.panel.lovelace.editor.edit_card.edit")
}</paper-button
>
</div>
`;

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

@ -10,6 +10,10 @@ import "@polymer/paper-spinner/paper-spinner";
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";
@ -28,6 +32,8 @@ import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
import { EntitiesEditorEvent, ViewEditEvent } from "./types";
import { processEditorEntities } from "./process-editor-entities";
import { EntityConfig } from "../entity-rows/types";
import { confDeleteView } from "./delete-view";
import { navigate } from "../../../common/navigate";
export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
static get properties(): PropertyDeclarations {
@ -146,6 +152,15 @@ 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>
`;
@ -189,6 +204,20 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
this._updateConfigInBackend();
}
private _delete() {
if (this._config!.cards && this._config!.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!, () => {
this._closeDialog();
this.reloadLovelace!();
navigate(this, `/lovelace/0`);
});
}
private async _resizeDialog(): Promise<void> {
await this.updateComplete;
fireEvent(this._dialog, "iron-resize");

41
src/panels/lovelace/hui-root.js
View File

@ -34,7 +34,6 @@ import debounce from "../../common/util/debounce";
import createCardElement from "./common/create-card-element";
import { showSaveDialog } from "./editor/hui-dialog-save-config";
import { showEditViewDialog } from "./editor/show-edit-view-dialog";
import { confDeleteView } from "./editor/delete-view";
// CSS and JS should only be imported once. Modules and HTML are safe.
const CSS_CACHE = {};
@ -61,7 +60,6 @@ class HUIRoot extends NavigateMixin(
text-transform: uppercase;
}
#add-view {
background: var(--paper-fab-background, var(--accent-color));
position: absolute;
height: 44px;
}
@ -71,12 +69,9 @@ class HUIRoot extends NavigateMixin(
paper-button.warning:not([disabled]) {
color: var(--google-red-500);
}
app-toolbar.secondary {
background-color: var(--light-primary-color);
color: var(--primary-text-color, #333);
font-size: 14px;
font-weight: 500;
height: auto;
#add-view ha-icon {
background-color: var(--accent-color);
border-radius: 5px;
}
#view {
min-height: calc(100vh - 112px);
@ -95,6 +90,9 @@ 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
@ -150,6 +148,9 @@ class HUIRoot extends NavigateMixin(
<template is="dom-if" if="[[!item.icon]]">
[[_computeTabTitle(item.title)]]
</template>
<template is='dom-if' if="[[_computeEditVisible(_editMode, config.views)]]">
<ha-icon class="edit-view-icon" on-click="_editView" icon="hass:pencil"></ha-icon>
</template>
</paper-tab>
</template>
<template is='dom-if' if="[[_editMode]]">
@ -160,12 +161,6 @@ class HUIRoot extends NavigateMixin(
</paper-tabs>
</div>
</app-header>
<template is='dom-if' if="[[_computeEditVisible(_editMode, config.views)]]">
<app-toolbar class="secondary">
<paper-button on-click="_editView">[[localize("ui.panel.lovelace.editor.edit_view.edit")]]</paper-button>
<paper-button class="warning" on-click="_deleteView">[[localize("ui.panel.lovelace.editor.edit_view.delete")]]</paper-button>
</app-toolbar>
</template>
<div id='view' on-rebuild-view='_debouncedConfigChanged'></div>
</app-header-layout>
`;
@ -357,24 +352,6 @@ class HUIRoot extends NavigateMixin(
});
}
_deleteView() {
const viewConfig = this.config.views[this._curView];
if (viewConfig.cards && viewConfig.cards.length > 0) {
alert(
"You can't delete a view that has card in them. Remove the cards first."
);
return;
}
if (!viewConfig.id) {
this._editView();
return;
}
confDeleteView(this.hass, viewConfig.id, () => {
this.fire("config-refresh");
this._navigateView(0);
});
}
_handleViewSelected(ev) {
const index = ev.detail.selected;
this._navigateView(index);