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

Replace paper-menu-button (#6132)

Browse Source
This commit is contained in:
Bram Kragten 2020-06-09 22:30:36 +02:00 committed by GitHub
parent 168cc607aa
commit 25cc76e022
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 553 additions and 483 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
hassio/src/system/hassio-system.ts
View File

@ -1,4 +1,3 @@
import "@polymer/paper-menu-button/paper-menu-button";
import { import {
css, css,
CSSResult, CSSResult,

2
src/components/ha-button-menu.ts
View File

@ -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;
} }
`; `;

32
src/components/ha-icon-button-arrow-next.ts
View File

@ -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);

11
src/components/ha-icon-button-arrow-prev.ts
View File

@ -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);

32
src/components/ha-icon-button-next.ts
View File

@ -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);

32
src/components/ha-icon-button-prev.ts
View File

@ -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);

5
src/components/ha-menu-button.ts
View File

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

60
src/components/ha-sidebar.ts
View File

@ -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);
} }

108
src/panels/config/automation/action/ha-automation-action-row.ts
View File

@ -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);
} }
`; `;
} }

73
src/panels/config/automation/condition/ha-automation-condition-row.ts
View File

@ -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);
} }
`; `;
} }

79
src/panels/config/automation/trigger/ha-automation-trigger-row.ts
View File

@ -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);
} }
`; `;
} }

90
src/panels/config/entities/ha-config-entities.ts
View File

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

57
src/panels/config/integrations/ha-config-integrations.ts
View File

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

47
src/panels/config/integrations/ha-integration-card.ts
View File

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

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

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

286
src/panels/lovelace/hui-root.ts
View File

@ -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;
} }

2
src/panels/lovelace/views/hui-view.ts
View File

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

27
src/panels/shopping-list/ha-panel-shopping-list.js
View File

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

4
src/translations/en.json
View File

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