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