mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-09 18:36:35 +00:00
Replace paper-menu-button (#6132)
This commit is contained in:
parent
168cc607aa
commit
25cc76e022
@ -1,4 +1,3 @@
|
||||
import "@polymer/paper-menu-button/paper-menu-button";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
|
@ -40,7 +40,7 @@ export class HaButtonMenu extends LitElement {
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
`;
|
||||
|
@ -1,17 +1,37 @@
|
||||
import { HaIconButton } from "./ha-icon-button";
|
||||
import {
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
html,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
@customElement("ha-icon-button-arrow-next")
|
||||
export class HaIconButtonArrowNext extends LitElement {
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
@property() private _icon = mdiArrowRight;
|
||||
|
||||
export class HaIconButtonArrowNext extends HaIconButton {
|
||||
public connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
||||
setTimeout(() => {
|
||||
this.icon =
|
||||
this._icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:arrow-right"
|
||||
: "hass:arrow-left";
|
||||
? mdiArrowRight
|
||||
: mdiArrowLeft;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`<mwc-icon-button .disabled=${this.disabled}>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button> `;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
@ -19,5 +39,3 @@ declare global {
|
||||
"ha-icon-button-arrow-next": HaIconButtonArrowNext;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-icon-button-arrow-next", HaIconButtonArrowNext);
|
||||
|
@ -1,8 +1,15 @@
|
||||
import { LitElement, property, TemplateResult, html } from "lit-element";
|
||||
import {
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
html,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
@customElement("ha-icon-button-arrow-prev")
|
||||
export class HaIconButtonArrowPrev extends LitElement {
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
@ -32,5 +39,3 @@ declare global {
|
||||
"ha-icon-button-arrow-prev": HaIconButtonArrowPrev;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-icon-button-arrow-prev", HaIconButtonArrowPrev);
|
||||
|
@ -1,17 +1,37 @@
|
||||
import { HaIconButton } from "./ha-icon-button";
|
||||
import {
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
html,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
|
||||
import "@material/mwc-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
@customElement("ha-icon-button-next")
|
||||
export class HaIconButtonNext extends LitElement {
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
@property() private _icon = mdiChevronRight;
|
||||
|
||||
export class HaIconButtonNext extends HaIconButton {
|
||||
public connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
||||
setTimeout(() => {
|
||||
this.icon =
|
||||
this._icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:chevron-right"
|
||||
: "hass:chevron-left";
|
||||
? mdiChevronRight
|
||||
: mdiChevronLeft;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`<mwc-icon-button .disabled=${this.disabled}>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button> `;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
@ -19,5 +39,3 @@ declare global {
|
||||
"ha-icon-button-next": HaIconButtonNext;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-icon-button-next", HaIconButtonNext);
|
||||
|
@ -1,17 +1,37 @@
|
||||
import { HaIconButton } from "./ha-icon-button";
|
||||
import {
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
html,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
@customElement("ha-icon-button-prev")
|
||||
export class HaIconButtonPrev extends LitElement {
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
@property() private _icon = mdiChevronLeft;
|
||||
|
||||
export class HaIconButtonPrev extends HaIconButton {
|
||||
public connectedCallback() {
|
||||
super.connectedCallback();
|
||||
|
||||
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
||||
setTimeout(() => {
|
||||
this.icon =
|
||||
this._icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:chevron-left"
|
||||
: "hass:chevron-right";
|
||||
? mdiChevronLeft
|
||||
: mdiChevronRight;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`<mwc-icon-button .disabled=${this.disabled}>
|
||||
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||
</mwc-icon-button> `;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
@ -19,5 +39,3 @@ declare global {
|
||||
"ha-icon-button-prev": HaIconButtonPrev;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-icon-button-prev", HaIconButtonPrev);
|
||||
|
@ -1,3 +1,5 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import { mdiMenu } from "@mdi/js";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
@ -12,8 +14,7 @@ import { fireEvent } from "../common/dom/fire_event";
|
||||
import { computeDomain } from "../common/entity/compute_domain";
|
||||
import { subscribeNotifications } from "../data/persistent_notification";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-icon-button";
|
||||
import { mdiMenu } from "@mdi/js";
|
||||
import "./ha-svg-icon";
|
||||
|
||||
@customElement("ha-menu-button")
|
||||
class HaMenuButton extends LitElement {
|
||||
|
@ -1,6 +1,12 @@
|
||||
import { mdiBell, mdiCellphoneSettingsVariant } from "@mdi/js";
|
||||
import "@material/mwc-icon-button";
|
||||
import {
|
||||
mdiBell,
|
||||
mdiCellphoneSettingsVariant,
|
||||
mdiMenuOpen,
|
||||
mdiMenu,
|
||||
mdiViewDashboard,
|
||||
} from "@mdi/js";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import "./ha-icon-button";
|
||||
import "@polymer/paper-item/paper-icon-item";
|
||||
import type { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
@ -29,9 +35,9 @@ import {
|
||||
getExternalConfig,
|
||||
} from "../external_app/external_config";
|
||||
import type { HomeAssistant, PanelInfo } from "../types";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-icon";
|
||||
import "./ha-menu-button";
|
||||
import "./ha-svg-icon";
|
||||
import "./user/ha-user-badge";
|
||||
|
||||
const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"];
|
||||
@ -153,13 +159,16 @@ class HaSidebar extends LitElement {
|
||||
<div class="menu">
|
||||
${!this.narrow
|
||||
? html`
|
||||
<ha-icon-button
|
||||
aria-label=${hass.localize("ui.sidebar.sidebar_toggle")}
|
||||
.icon=${hass.dockedSidebar === "docked"
|
||||
? "hass:menu-open"
|
||||
: "hass:menu"}
|
||||
<mwc-icon-button
|
||||
.label=${hass.localize("ui.sidebar.sidebar_toggle")}
|
||||
@click=${this._toggleSidebar}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${hass.dockedSidebar === "docked"
|
||||
? mdiMenuOpen
|
||||
: mdiMenu}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`
|
||||
: ""}
|
||||
<span class="title">Home Assistant</span>
|
||||
@ -174,14 +183,16 @@ class HaSidebar extends LitElement {
|
||||
>
|
||||
${this._renderPanel(
|
||||
defaultPanel.url_path,
|
||||
defaultPanel.icon || "hass:view-dashboard",
|
||||
defaultPanel.title || hass.localize("panel.states")
|
||||
defaultPanel.title || hass.localize("panel.states"),
|
||||
defaultPanel.icon,
|
||||
!defaultPanel.icon ? mdiViewDashboard : undefined
|
||||
)}
|
||||
${beforeSpacer.map((panel) =>
|
||||
this._renderPanel(
|
||||
panel.url_path,
|
||||
hass.localize(`panel.${panel.title}`) || panel.title,
|
||||
panel.icon,
|
||||
hass.localize(`panel.${panel.title}`) || panel.title
|
||||
undefined
|
||||
)
|
||||
)}
|
||||
<div class="spacer" disabled></div>
|
||||
@ -189,8 +200,9 @@ class HaSidebar extends LitElement {
|
||||
${afterSpacer.map((panel) =>
|
||||
this._renderPanel(
|
||||
panel.url_path,
|
||||
hass.localize(`panel.${panel.title}`) || panel.title,
|
||||
panel.icon,
|
||||
hass.localize(`panel.${panel.title}`) || panel.title
|
||||
undefined
|
||||
)
|
||||
)}
|
||||
${this._externalConfig && this._externalConfig.hasSettingsScreen
|
||||
@ -443,7 +455,12 @@ class HaSidebar extends LitElement {
|
||||
fireEvent(this, "hass-toggle-menu");
|
||||
}
|
||||
|
||||
private _renderPanel(urlPath, icon, title) {
|
||||
private _renderPanel(
|
||||
urlPath: string,
|
||||
title: string | null,
|
||||
icon?: string | null,
|
||||
iconPath?: string | null
|
||||
) {
|
||||
return html`
|
||||
<a
|
||||
aria-role="option"
|
||||
@ -454,7 +471,12 @@ class HaSidebar extends LitElement {
|
||||
@mouseleave=${this._itemMouseLeave}
|
||||
>
|
||||
<paper-icon-item>
|
||||
<ha-icon slot="item-icon" .icon="${icon}"></ha-icon>
|
||||
${iconPath
|
||||
? html`<ha-svg-icon
|
||||
slot="item-icon"
|
||||
.path=${iconPath}
|
||||
></ha-svg-icon>`
|
||||
: html`<ha-icon slot="item-icon" .icon=${icon}></ha-icon>`}
|
||||
<span class="item-text">${title}</span>
|
||||
</paper-icon-item>
|
||||
</a>
|
||||
@ -496,13 +518,13 @@ class HaSidebar extends LitElement {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.menu ha-icon-button {
|
||||
.menu mwc-icon-button {
|
||||
color: var(--sidebar-icon-color);
|
||||
}
|
||||
:host([expanded]) .menu ha-icon-button {
|
||||
:host([expanded]) .menu mwc-icon-button {
|
||||
margin-right: 23px;
|
||||
}
|
||||
:host([expanded][_rtl]) .menu ha-icon-button {
|
||||
:host([expanded][_rtl]) .menu mwc-icon-button {
|
||||
margin-right: 0px;
|
||||
margin-left: 23px;
|
||||
}
|
||||
@ -714,7 +736,7 @@ class HaSidebar extends LitElement {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:host([_rtl]) .menu ha-icon-button {
|
||||
:host([_rtl]) .menu mwc-icon-button {
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
@ -1,9 +1,12 @@
|
||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import "@material/mwc-icon-button";
|
||||
import "../../../../components/ha-button-menu";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import { mdiDotsVertical, mdiArrowUp, mdiArrowDown } from "@mdi/js";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
|
||||
import "@polymer/paper-menu-button/paper-menu-button";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
@ -96,56 +99,64 @@ export default class HaAutomationActionRow extends LitElement {
|
||||
<div class="card-menu">
|
||||
${this.index !== 0
|
||||
? html`
|
||||
<ha-icon-button
|
||||
icon="hass:arrow-up"
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.move_up"
|
||||
)}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.move_up"
|
||||
)}
|
||||
@click=${this._moveUp}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon path=${mdiArrowUp}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`
|
||||
: ""}
|
||||
${this.index !== this.totalActions - 1
|
||||
? html`
|
||||
<ha-icon-button
|
||||
icon="hass:arrow-down"
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.move_down"
|
||||
)}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.move_down"
|
||||
)}
|
||||
@click=${this._moveDown}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon path=${mdiArrowDown}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`
|
||||
: ""}
|
||||
<paper-menu-button
|
||||
no-animations
|
||||
horizontal-align="right"
|
||||
horizontal-offset="-5"
|
||||
vertical-offset="-5"
|
||||
close-on-activate
|
||||
>
|
||||
<ha-icon-button
|
||||
icon="hass:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
></ha-icon-button>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
<paper-item
|
||||
@tap=${this._switchYamlMode}
|
||||
.disabled=${selected === -1}
|
||||
>
|
||||
${yamlMode
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_ui"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_yaml"
|
||||
)}
|
||||
</paper-item>
|
||||
<paper-item disabled>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.duplicate"
|
||||
)}
|
||||
</paper-item>
|
||||
<paper-item @tap=${this._onDelete}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.delete"
|
||||
)}
|
||||
</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
slot="trigger"
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-list-item
|
||||
@tap=${this._switchYamlMode}
|
||||
.disabled=${selected === -1}
|
||||
>
|
||||
${yamlMode
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_ui"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_yaml"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item disabled>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.duplicate"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item @tap=${this._onDelete}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.delete"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
</div>
|
||||
${yamlMode
|
||||
? html`
|
||||
@ -259,14 +270,17 @@ export default class HaAutomationActionRow extends LitElement {
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
color: var(--primary-text-color);
|
||||
--mdc-theme-text-primary-on-background: var(--primary-text-color);
|
||||
}
|
||||
.rtl .card-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.card-menu paper-item {
|
||||
cursor: pointer;
|
||||
ha-button-menu {
|
||||
margin: 8px;
|
||||
}
|
||||
mwc-list-item[disabled] {
|
||||
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -1,6 +1,8 @@
|
||||
import "../../../../components/ha-icon-button";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-menu-button/paper-menu-button";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import "../../../../components/ha-button-menu";
|
||||
import { mdiDotsVertical } from "@mdi/js";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
@ -61,39 +63,33 @@ export default class HaAutomationConditionRow extends LitElement {
|
||||
<ha-card>
|
||||
<div class="card-content">
|
||||
<div class="card-menu">
|
||||
<paper-menu-button
|
||||
no-animations
|
||||
horizontal-align="right"
|
||||
horizontal-offset="-5"
|
||||
vertical-offset="-5"
|
||||
close-on-activate
|
||||
>
|
||||
<ha-icon-button
|
||||
icon="hass:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
></ha-icon-button>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
<paper-item @tap=${this._switchYamlMode}>
|
||||
${this._yamlMode
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_ui"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_yaml"
|
||||
)}
|
||||
</paper-item>
|
||||
<paper-item disabled>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.conditions.duplicate"
|
||||
)}
|
||||
</paper-item>
|
||||
<paper-item @tap=${this._onDelete}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.conditions.delete"
|
||||
)}
|
||||
</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
slot="trigger"
|
||||
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
<mwc-list-item @tap=${this._switchYamlMode}>
|
||||
${this._yamlMode
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_ui"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_yaml"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item disabled>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.duplicate"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item @tap=${this._onDelete}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.delete"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
</div>
|
||||
<ha-automation-condition-editor
|
||||
.yamlMode=${this._yamlMode}
|
||||
@ -129,14 +125,17 @@ export default class HaAutomationConditionRow extends LitElement {
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
color: var(--primary-text-color);
|
||||
--mdc-theme-text-primary-on-background: var(--primary-text-color);
|
||||
}
|
||||
.rtl .card-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.card-menu paper-item {
|
||||
cursor: pointer;
|
||||
ha-button-menu {
|
||||
margin: 8px;
|
||||
}
|
||||
mwc-list-item[disabled] {
|
||||
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -2,8 +2,10 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import "../../../../components/ha-button-menu";
|
||||
import { mdiDotsVertical } from "@mdi/js";
|
||||
import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
|
||||
import "@polymer/paper-menu-button/paper-menu-button";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
@ -90,42 +92,36 @@ export default class HaAutomationTriggerRow extends LitElement {
|
||||
<ha-card>
|
||||
<div class="card-content">
|
||||
<div class="card-menu">
|
||||
<paper-menu-button
|
||||
no-animations
|
||||
horizontal-align="right"
|
||||
horizontal-offset="-5"
|
||||
vertical-offset="-5"
|
||||
close-on-activate
|
||||
>
|
||||
<ha-icon-button
|
||||
icon="hass:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
></ha-icon-button>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
<paper-item
|
||||
@tap=${this._switchYamlMode}
|
||||
.disabled=${selected === -1}
|
||||
>
|
||||
${yamlMode
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_ui"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_yaml"
|
||||
)}
|
||||
</paper-item>
|
||||
<paper-item disabled>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.triggers.duplicate"
|
||||
)}
|
||||
</paper-item>
|
||||
<paper-item @tap=${this._onDelete}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.triggers.delete"
|
||||
)}
|
||||
</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
slot="trigger"
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
<mwc-list-item
|
||||
@tap=${this._switchYamlMode}
|
||||
.disabled=${selected === -1}
|
||||
>
|
||||
${yamlMode
|
||||
? this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_ui"
|
||||
)
|
||||
: this.hass.localize(
|
||||
"ui.panel.config.automation.editor.edit_yaml"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item disabled>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.duplicate"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item @tap=${this._onDelete}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.editor.actions.delete"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
</div>
|
||||
${yamlMode
|
||||
? html`
|
||||
@ -232,14 +228,17 @@ export default class HaAutomationTriggerRow extends LitElement {
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
color: var(--primary-text-color);
|
||||
--mdc-theme-text-primary-on-background: var(--primary-text-color);
|
||||
}
|
||||
.rtl .card-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.card-menu paper-item {
|
||||
cursor: pointer;
|
||||
ha-button-menu {
|
||||
margin: 8px;
|
||||
}
|
||||
mwc-list-item[disabled] {
|
||||
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -1,3 +1,4 @@
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import "@polymer/paper-checkbox/paper-checkbox";
|
||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
||||
import "@polymer/paper-item/paper-icon-item";
|
||||
@ -31,6 +32,7 @@ import type {
|
||||
RowClickedEvent,
|
||||
SelectionChangedEvent,
|
||||
} from "../../../components/data-table/ha-data-table";
|
||||
import "../../../components/ha-button-menu";
|
||||
import "../../../components/ha-icon";
|
||||
import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
|
||||
import {
|
||||
@ -53,6 +55,7 @@ import {
|
||||
loadEntityEditorDialog,
|
||||
showEntityEditorDialog,
|
||||
} from "./show-dialog-entity-editor";
|
||||
import { mdiFilterVariant } from "@mdi/js";
|
||||
|
||||
export interface StateEntity extends EntityRegistryEntry {
|
||||
readonly?: boolean;
|
||||
@ -442,47 +445,55 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
|
||||
>
|
||||
</div>`
|
||||
: ""}
|
||||
<paper-menu-button no-animations horizontal-align="right">
|
||||
<ha-icon-button
|
||||
aria-label=${this.hass!.localize(
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.config.entities.picker.filter.filter"
|
||||
)}
|
||||
title="${this.hass!.localize(
|
||||
.title=${this.hass!.localize(
|
||||
"ui.panel.config.entities.picker.filter.filter"
|
||||
)}"
|
||||
icon="hass:filter-variant"
|
||||
slot="dropdown-trigger"
|
||||
></ha-icon-button>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
<paper-icon-item @tap="${this._showDisabledChanged}">
|
||||
<paper-checkbox
|
||||
.checked=${this._showDisabled}
|
||||
slot="item-icon"
|
||||
></paper-checkbox>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.entities.picker.filter.show_disabled"
|
||||
)}
|
||||
</paper-icon-item>
|
||||
<paper-icon-item @tap="${this._showRestoredChanged}">
|
||||
<paper-checkbox
|
||||
.checked=${this._showUnavailable}
|
||||
slot="item-icon"
|
||||
></paper-checkbox>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.entities.picker.filter.show_unavailable"
|
||||
)}
|
||||
</paper-icon-item>
|
||||
<paper-icon-item @tap="${this._showReadOnlyChanged}">
|
||||
<paper-checkbox
|
||||
.checked=${this._showReadOnly}
|
||||
slot="item-icon"
|
||||
></paper-checkbox>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.entities.picker.filter.show_readonly"
|
||||
)}
|
||||
</paper-icon-item>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon path=${mdiFilterVariant}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-list-item
|
||||
@click="${this._showDisabledChanged}"
|
||||
graphic="control"
|
||||
>
|
||||
<ha-checkbox
|
||||
slot="graphic"
|
||||
.checked=${this._showDisabled}
|
||||
></ha-checkbox>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.entities.picker.filter.show_disabled"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item
|
||||
@click="${this._showRestoredChanged}"
|
||||
graphic="control"
|
||||
>
|
||||
<ha-checkbox
|
||||
slot="graphic"
|
||||
.checked=${this._showUnavailable}
|
||||
></ha-checkbox>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.entities.picker.filter.show_unavailable"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item
|
||||
@click="${this._showReadOnlyChanged}"
|
||||
graphic="control"
|
||||
>
|
||||
<ha-checkbox
|
||||
slot="graphic"
|
||||
.checked=${this._showReadOnly}
|
||||
></ha-checkbox>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.entities.picker.filter.show_readonly"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
`;
|
||||
|
||||
return html`
|
||||
@ -733,6 +744,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
|
||||
ha-switch {
|
||||
margin-top: 16px;
|
||||
}
|
||||
ha-button-menu {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -1,4 +1,9 @@
|
||||
import "@material/mwc-fab";
|
||||
import "@material/mwc-icon-button";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import { mdiDotsVertical, mdiPlus } from "@mdi/js";
|
||||
import "@polymer/app-route/app-route";
|
||||
import Fuse from "fuse.js";
|
||||
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
@ -11,13 +16,16 @@ import {
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import memoizeOne from "memoize-one";
|
||||
import Fuse from "fuse.js";
|
||||
import { HASSDomEvent } from "../../../common/dom/fire_event";
|
||||
import "../../../common/search/search-input";
|
||||
import { caseInsensitiveCompare } from "../../../common/string/compare";
|
||||
import { LocalizeFunc } from "../../../common/translations/localize";
|
||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||
import { nextRender } from "../../../common/util/render-status";
|
||||
import "../../../components/entity/ha-state-icon";
|
||||
import "../../../components/ha-button-menu";
|
||||
import "../../../components/ha-card";
|
||||
import "@material/mwc-fab";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import {
|
||||
ConfigEntry,
|
||||
deleteConfigEntry,
|
||||
@ -42,23 +50,18 @@ import {
|
||||
import { domainToName } from "../../../data/integration";
|
||||
import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
|
||||
import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import "../../../layouts/hass-tabs-subpage";
|
||||
import "../../../layouts/hass-loading-screen";
|
||||
import "../../../layouts/hass-tabs-subpage";
|
||||
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import "../../../common/search/search-input";
|
||||
import "./ha-integration-card";
|
||||
import type {
|
||||
ConfigEntryRemovedEvent,
|
||||
ConfigEntryUpdatedEvent,
|
||||
HaIntegrationCard,
|
||||
} from "./ha-integration-card";
|
||||
import { HASSDomEvent } from "../../../common/dom/fire_event";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { mdiPlus } from "@mdi/js";
|
||||
import { LocalizeFunc } from "../../../common/translations/localize";
|
||||
|
||||
interface DataEntryFlowProgressExtended extends DataEntryFlowProgress {
|
||||
localized_title?: string;
|
||||
@ -258,28 +261,22 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
<paper-menu-button
|
||||
close-on-activate
|
||||
no-animations
|
||||
horizontal-align="right"
|
||||
horizontal-offset="-5"
|
||||
slot="toolbar-icon"
|
||||
>
|
||||
<ha-icon-button
|
||||
icon="hass:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
alt="menu"
|
||||
></ha-icon-button>
|
||||
<paper-listbox slot="dropdown-content" role="listbox">
|
||||
<paper-item @tap=${this._toggleShowIgnored}>
|
||||
${this.hass.localize(
|
||||
this._showIgnored
|
||||
? "ui.panel.config.integrations.ignore.hide_ignored"
|
||||
: "ui.panel.config.integrations.ignore.show_ignored"
|
||||
)}
|
||||
</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
slot="trigger"
|
||||
>
|
||||
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-list-item @click=${this._toggleShowIgnored}>
|
||||
${this.hass.localize(
|
||||
this._showIgnored
|
||||
? "ui.panel.config.integrations.ignore.hide_ignored"
|
||||
: "ui.panel.config.integrations.ignore.show_ignored"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
|
||||
${!this.narrow
|
||||
? html`
|
||||
|
@ -27,6 +27,7 @@ import {
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import "../../../components/ha-icon-next";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { mdiDotsVertical } from "@mdi/js";
|
||||
|
||||
export interface ConfigEntryUpdatedEvent {
|
||||
entry: ConfigEntry;
|
||||
@ -188,32 +189,25 @@ export class HaIntegrationCard extends LitElement {
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
<paper-menu-button
|
||||
horizontal-align="right"
|
||||
vertical-align="top"
|
||||
vertical-offset="40"
|
||||
close-on-activate
|
||||
>
|
||||
<ha-icon-button
|
||||
icon="hass:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.options"
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
.title=${this.hass.localize("ui.common.menu")}
|
||||
.label=${this.hass.localize("ui.common.overflow_menu")}
|
||||
slot="trigger"
|
||||
>
|
||||
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-list-item @click=${this._showSystemOptions}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.system_options"
|
||||
)}
|
||||
></ha-icon-button>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
<paper-item @tap=${this._showSystemOptions}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.system_options"
|
||||
)}</paper-item
|
||||
>
|
||||
<paper-item class="warning" @tap=${this._removeIntegration}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.delete"
|
||||
)}</paper-item
|
||||
>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
</mwc-list-item>
|
||||
<mwc-list-item class="warning" @click=${this._removeIntegration}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.delete"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
@ -379,9 +373,8 @@ export class HaIntegrationCard extends LitElement {
|
||||
margin-top: 0;
|
||||
min-height: 24px;
|
||||
}
|
||||
paper-menu-button {
|
||||
ha-button-menu {
|
||||
color: var(--secondary-text-color);
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-width: 563px) {
|
||||
paper-listbox {
|
||||
|
@ -1,7 +1,7 @@
|
||||
import "@material/mwc-button";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import "@polymer/paper-menu-button/paper-menu-button";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import "@material/mwc-icon-button";
|
||||
import "../../../components/ha-button-menu";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
@ -19,6 +19,7 @@ import { swapCard } from "../editor/config-util";
|
||||
import { confDeleteCard } from "../editor/delete-card";
|
||||
import { Lovelace, LovelaceCard } from "../types";
|
||||
import { computeCardSize } from "../common/compute-card-size";
|
||||
import { mdiDotsVertical, mdiArrowDown, mdiArrowUp } from "@mdi/js";
|
||||
|
||||
@customElement("hui-card-options")
|
||||
export class HuiCardOptions extends LitElement {
|
||||
@ -47,53 +48,52 @@ export class HuiCardOptions extends LitElement {
|
||||
>
|
||||
</div>
|
||||
<div class="secondary-actions">
|
||||
<ha-icon-button
|
||||
<mwc-icon-button
|
||||
title="Move card down"
|
||||
class="move-arrow"
|
||||
icon="hass:arrow-down"
|
||||
@click=${this._cardDown}
|
||||
?disabled=${this.lovelace!.config.views[this.path![0]].cards!
|
||||
.length ===
|
||||
this.path![1] + 1}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
>
|
||||
<ha-svg-icon path=${mdiArrowDown}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button
|
||||
title="Move card up"
|
||||
class="move-arrow"
|
||||
icon="hass:arrow-up"
|
||||
@click=${this._cardUp}
|
||||
?disabled=${this.path![1] === 0}
|
||||
></ha-icon-button>
|
||||
<paper-menu-button
|
||||
horizontal-align="right"
|
||||
vertical-align="bottom"
|
||||
vertical-offset="40"
|
||||
close-on-activate
|
||||
>
|
||||
<ha-icon-button
|
||||
icon="hass:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
><ha-svg-icon path=${mdiArrowUp}></ha-svg-icon
|
||||
></mwc-icon-button>
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
slot="trigger"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.options"
|
||||
)}
|
||||
></ha-icon-button>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
<paper-item @tap=${this._moveCard}>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.move"
|
||||
)}</paper-item
|
||||
>
|
||||
<paper-item @tap=${this._duplicateCard}
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.duplicate"
|
||||
)}</paper-item
|
||||
>
|
||||
<paper-item class="delete-item" @tap=${this._deleteCard}>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.delete"
|
||||
)}</paper-item
|
||||
>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.options"
|
||||
)}"
|
||||
>
|
||||
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
|
||||
<mwc-list-item @tap=${this._moveCard}>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.move"
|
||||
)}</mwc-list-item
|
||||
>
|
||||
<mwc-list-item @tap=${this._duplicateCard}
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.duplicate"
|
||||
)}</mwc-list-item
|
||||
>
|
||||
<mwc-list-item class="delete-item" @tap=${this._deleteCard}>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_card.delete"
|
||||
)}</mwc-list-item
|
||||
>
|
||||
</ha-button-menu>
|
||||
</div>
|
||||
</div>
|
||||
</ha-card>
|
||||
@ -103,7 +103,6 @@ export class HuiCardOptions extends LitElement {
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
:host(:hover) {
|
||||
overflow: hidden;
|
||||
outline: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
@ -132,23 +131,14 @@ export class HuiCardOptions extends LitElement {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ha-icon-button {
|
||||
mwc-icon-button {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
ha-icon-button.move-arrow[disabled] {
|
||||
mwc-icon-button.move-arrow[disabled] {
|
||||
color: var(--disabled-text-color);
|
||||
}
|
||||
|
||||
paper-menu-button {
|
||||
color: var(--secondary-text-color);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
paper-listbox {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
paper-item.header {
|
||||
color: var(--primary-text-color);
|
||||
text-transform: uppercase;
|
||||
|
@ -1,12 +1,17 @@
|
||||
import "@material/mwc-button";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import {
|
||||
mdiDotsVertical,
|
||||
mdiMicrophone,
|
||||
mdiPlus,
|
||||
mdiClose,
|
||||
mdiPencil,
|
||||
mdiHelpCircle,
|
||||
} from "@mdi/js";
|
||||
import "@polymer/app-layout/app-header-layout/app-header-layout";
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import "../../components/ha-icon-button";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import "@polymer/paper-menu-button/paper-menu-button";
|
||||
import "@polymer/paper-tabs/paper-tab";
|
||||
import "@polymer/paper-tabs/paper-tabs";
|
||||
import {
|
||||
@ -27,10 +32,12 @@ import { navigate } from "../../common/navigate";
|
||||
import { computeRTLDirection } from "../../common/util/compute_rtl";
|
||||
import { debounce } from "../../common/util/debounce";
|
||||
import { afterNextRender } from "../../common/util/render-status";
|
||||
import "../../components/ha-button-menu";
|
||||
import "../../components/ha-icon";
|
||||
import "../../components/ha-menu-button";
|
||||
import "../../components/ha-svg-icon";
|
||||
import "../../components/ha-icon-button-arrow-next";
|
||||
import "../../components/ha-icon-button-arrow-prev";
|
||||
import "../../components/ha-menu-button";
|
||||
import type {
|
||||
LovelaceConfig,
|
||||
LovelacePanelConfig,
|
||||
@ -99,78 +106,73 @@ class HUIRoot extends LitElement {
|
||||
${this._editMode
|
||||
? html`
|
||||
<app-toolbar class="edit-mode">
|
||||
<ha-icon-button
|
||||
aria-label="${this.hass!.localize(
|
||||
<mwc-icon-button
|
||||
.label="${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.exit_edit_mode"
|
||||
)}"
|
||||
title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.close"
|
||||
)}"
|
||||
icon="hass:close"
|
||||
@click="${this._editModeDisable}"
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<div main-title>
|
||||
${this.config.title ||
|
||||
this.hass!.localize("ui.panel.lovelace.editor.header")}
|
||||
<ha-icon-button
|
||||
<mwc-icon-button
|
||||
aria-label="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_lovelace.edit_title"
|
||||
)}"
|
||||
title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_lovelace.edit_title"
|
||||
)}"
|
||||
icon="hass:pencil"
|
||||
class="edit-icon"
|
||||
@click="${this._editLovelace}"
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
</div>
|
||||
<ha-icon-button
|
||||
icon="hass:help-circle"
|
||||
<mwc-icon-button
|
||||
title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.help"
|
||||
)}"
|
||||
@click="${this._handleHelp}"
|
||||
></ha-icon-button>
|
||||
<paper-menu-button
|
||||
no-animations
|
||||
horizontal-align="right"
|
||||
horizontal-offset="-5"
|
||||
>
|
||||
<ha-icon-button
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}
|
||||
title="${this.hass!.localize(
|
||||
<ha-svg-icon path=${mdiHelpCircle}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
slot="trigger"
|
||||
.title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}"
|
||||
icon="hass:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
></ha-icon-button>
|
||||
<paper-listbox
|
||||
@iron-select="${this._deselect}"
|
||||
slot="dropdown-content"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}
|
||||
>
|
||||
${__DEMO__ /* No unused entities available in the demo */
|
||||
? ""
|
||||
: html`
|
||||
<paper-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
@tap="${this._handleUnusedEntities}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
</paper-item>
|
||||
`}
|
||||
<paper-item @tap="${this.lovelace!.enableFullEditMode}">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.raw_editor"
|
||||
)}
|
||||
</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
${__DEMO__ /* No unused entities available in the demo */
|
||||
? ""
|
||||
: html`
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
@tap="${this._handleUnusedEntities}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
`}
|
||||
<mwc-list-item @tap="${this.lovelace!.enableFullEditMode}">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.raw_editor"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
</app-toolbar>
|
||||
`
|
||||
: html`
|
||||
@ -182,96 +184,88 @@ class HUIRoot extends LitElement {
|
||||
<div main-title>${this.config.title || "Home Assistant"}</div>
|
||||
${this._conversation(this.hass.config.components)
|
||||
? html`
|
||||
<ha-icon-button
|
||||
<mwc-icon-button
|
||||
label="Start conversation"
|
||||
icon="hass:microphone"
|
||||
@click=${this._showVoiceCommandDialog}
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon path=${mdiMicrophone}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`
|
||||
: ""}
|
||||
<paper-menu-button
|
||||
no-animations
|
||||
horizontal-align="right"
|
||||
horizontal-offset="-5"
|
||||
>
|
||||
<ha-icon-button
|
||||
aria-label=${this.hass!.localize(
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<mwc-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}
|
||||
title="${this.hass!.localize(
|
||||
.title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.menu.open"
|
||||
)}"
|
||||
icon="hass:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
></ha-icon-button>
|
||||
<paper-listbox
|
||||
@iron-select="${this._deselect}"
|
||||
slot="dropdown-content"
|
||||
>
|
||||
${this._yamlMode
|
||||
? html`
|
||||
<paper-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.refresh"
|
||||
)}
|
||||
@tap="${this._handleRefresh}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.refresh"
|
||||
)}
|
||||
</paper-item>
|
||||
<paper-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
@tap="${this._handleUnusedEntities}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
</paper-item>
|
||||
`
|
||||
: ""}
|
||||
${(this.hass.panels.lovelace
|
||||
?.config as LovelacePanelConfig)?.mode === "yaml"
|
||||
? html`
|
||||
<paper-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.reload_resources"
|
||||
)}
|
||||
@tap="${this._handleReloadResources}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.reload_resources"
|
||||
)}
|
||||
</paper-item>
|
||||
`
|
||||
: ""}
|
||||
${this.hass!.user!.is_admin &&
|
||||
!this.hass!.config.safe_mode
|
||||
? html`
|
||||
<paper-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.configure_ui"
|
||||
)}
|
||||
@tap="${this._editModeEnable}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.configure_ui"
|
||||
)}
|
||||
</paper-item>
|
||||
`
|
||||
: ""}
|
||||
<paper-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.help"
|
||||
)}
|
||||
@tap="${this._handleHelp}"
|
||||
>
|
||||
${this.hass!.localize("ui.panel.lovelace.menu.help")}
|
||||
</paper-item>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
${this._yamlMode
|
||||
? html`
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.refresh"
|
||||
)}
|
||||
@tap="${this._handleRefresh}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.refresh"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
@tap="${this._handleUnusedEntities}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${(this.hass.panels.lovelace?.config as LovelacePanelConfig)
|
||||
?.mode === "yaml"
|
||||
? html`
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.reload_resources"
|
||||
)}
|
||||
@tap="${this._handleReloadResources}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.reload_resources"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${this.hass!.user!.is_admin && !this.hass!.config.safe_mode
|
||||
? html`
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.configure_ui"
|
||||
)}
|
||||
@tap="${this._editModeEnable}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.configure_ui"
|
||||
)}
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.help"
|
||||
)}
|
||||
@tap="${this._handleHelp}"
|
||||
>
|
||||
${this.hass!.localize("ui.panel.lovelace.menu.help")}
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
</app-toolbar>
|
||||
`}
|
||||
${this.lovelace!.config.views.length > 1 || this._editMode
|
||||
@ -321,14 +315,14 @@ class HUIRoot extends LitElement {
|
||||
: view.title || "Unnamed view"}
|
||||
${this._editMode
|
||||
? html`
|
||||
<ha-icon
|
||||
<ha-svg-icon
|
||||
title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.edit"
|
||||
)}"
|
||||
class="edit-icon view"
|
||||
icon="hass:pencil"
|
||||
path=${mdiPencil}
|
||||
@click="${this._editView}"
|
||||
></ha-icon>
|
||||
></ha-svg-icon>
|
||||
<ha-icon-button-arrow-next
|
||||
title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.move_right"
|
||||
@ -346,14 +340,15 @@ class HUIRoot extends LitElement {
|
||||
)}
|
||||
${this._editMode
|
||||
? html`
|
||||
<ha-icon-button
|
||||
<mwc-icon-button
|
||||
id="add-view"
|
||||
@click="${this._addView}"
|
||||
title="${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_view.add"
|
||||
)}"
|
||||
icon="hass:plus"
|
||||
></ha-icon-button>
|
||||
>
|
||||
<ha-svg-icon path=${mdiPlus}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</paper-tabs>
|
||||
@ -500,10 +495,6 @@ class HUIRoot extends LitElement {
|
||||
navigate(this, `${this.route?.prefix}/hass-unused-entities`);
|
||||
}
|
||||
|
||||
private _deselect(ev): void {
|
||||
ev.target.selected = null;
|
||||
}
|
||||
|
||||
private _showVoiceCommandDialog(): void {
|
||||
showVoiceCommandDialog(this);
|
||||
}
|
||||
@ -671,9 +662,6 @@ class HUIRoot extends LitElement {
|
||||
ha-app-layout {
|
||||
min-height: 100%;
|
||||
}
|
||||
paper-menu-button {
|
||||
padding: 0;
|
||||
}
|
||||
paper-tabs {
|
||||
margin-left: 12px;
|
||||
--paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
|
||||
@ -702,10 +690,9 @@ class HUIRoot extends LitElement {
|
||||
position: absolute;
|
||||
height: 44px;
|
||||
}
|
||||
#add-view ha-icon {
|
||||
#add-view ha-svg-icon {
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 5px;
|
||||
margin-top: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
app-toolbar a {
|
||||
color: var(--text-primary-color, white);
|
||||
@ -740,9 +727,6 @@ class HUIRoot extends LitElement {
|
||||
#view.tabs-hidden {
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
paper-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.hide-tab {
|
||||
display: none;
|
||||
}
|
||||
|
@ -372,8 +372,6 @@ export class HUIView extends LitElement {
|
||||
flex: 1 0 0;
|
||||
max-width: 500px;
|
||||
min-width: 0;
|
||||
/* on iOS devices the column can become wider when toggling a switch */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.column > * {
|
||||
|
@ -8,7 +8,8 @@ import "@polymer/paper-item/paper-icon-item";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import "@polymer/paper-menu-button/paper-menu-button";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import "../../components/ha-button-menu";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
@ -18,6 +19,7 @@ import "../../components/ha-menu-button";
|
||||
import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
|
||||
import LocalizeMixin from "../../mixins/localize-mixin";
|
||||
import "../../styles/polymer-ha-style";
|
||||
import { mdiDotsVertical } from "@mdi/js";
|
||||
|
||||
/*
|
||||
* @appliesMixin LocalizeMixin
|
||||
@ -81,22 +83,17 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
|
||||
icon="hass:microphone"
|
||||
on-click="_showVoiceCommandDialog"
|
||||
></ha-icon-button>
|
||||
|
||||
<paper-menu-button
|
||||
horizontal-align="right"
|
||||
horizontal-offset="-5"
|
||||
vertical-offset="-5"
|
||||
>
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<ha-icon-button
|
||||
icon="hass:dots-vertical"
|
||||
slot="dropdown-trigger"
|
||||
></ha-icon-button>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
<paper-item on-click="_clearCompleted"
|
||||
>[[localize('ui.panel.shopping-list.clear_completed')]]</paper-item
|
||||
>
|
||||
</paper-listbox>
|
||||
</paper-menu-button>
|
||||
label="Menu"
|
||||
slot="trigger"
|
||||
>
|
||||
</ha-icon-button>
|
||||
<mwc-list-item on-click="_clearCompleted">
|
||||
[[localize('ui.panel.shopping-list.clear_completed')]]
|
||||
</mwc-list-item>
|
||||
</ha-button-menu>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
|
@ -243,6 +243,8 @@
|
||||
"save": "Save",
|
||||
"yes": "Yes",
|
||||
"no": "No",
|
||||
"menu": "Menu",
|
||||
"overflow_menu": "Overflow menu",
|
||||
"successfully_saved": "Successfully saved",
|
||||
"successfully_deleted": "Successfully deleted",
|
||||
"back": "Back",
|
||||
@ -765,6 +767,8 @@
|
||||
"save": "Save",
|
||||
"unsaved_confirm": "You have unsaved changes. Are you sure you want to leave?",
|
||||
"alias": "Name",
|
||||
"move_up": "Move up",
|
||||
"move_down": "Move down",
|
||||
"description": {
|
||||
"label": "Description",
|
||||
"placeholder": "Optional description"
|
||||
|
Loading…
x
Reference in New Issue
Block a user