Replace paper-menu-button (#6132)

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

View File

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

View File

@ -40,7 +40,7 @@ export class HaButtonMenu extends LitElement {
static get styles(): CSSResult {
return css`
:host {
display: block;
display: inline-block;
position: relative;
}
`;

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() {
super.connectedCallback();
// wait to check for direction since otherwise direction is wrong even though top level is RTL
setTimeout(() => {
this.icon =
this._icon =
window.getComputedStyle(this).direction === "ltr"
? "hass:arrow-right"
: "hass:arrow-left";
? mdiArrowRight
: mdiArrowLeft;
}, 100);
}
protected render(): TemplateResult {
return html`<mwc-icon-button .disabled=${this.disabled}>
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
</mwc-icon-button> `;
}
}
declare global {
@ -19,5 +39,3 @@ declare global {
"ha-icon-button-arrow-next": HaIconButtonArrowNext;
}
}
customElements.define("ha-icon-button-arrow-next", HaIconButtonArrowNext);

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 "@material/mwc-icon-button/mwc-icon-button";
import "./ha-svg-icon";
@customElement("ha-icon-button-arrow-prev")
export class HaIconButtonArrowPrev extends LitElement {
@property({ type: Boolean }) public disabled = false;
@ -32,5 +39,3 @@ declare global {
"ha-icon-button-arrow-prev": HaIconButtonArrowPrev;
}
}
customElements.define("ha-icon-button-arrow-prev", HaIconButtonArrowPrev);

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() {
super.connectedCallback();
// wait to check for direction since otherwise direction is wrong even though top level is RTL
setTimeout(() => {
this.icon =
this._icon =
window.getComputedStyle(this).direction === "ltr"
? "hass:chevron-right"
: "hass:chevron-left";
? mdiChevronRight
: mdiChevronLeft;
}, 100);
}
protected render(): TemplateResult {
return html`<mwc-icon-button .disabled=${this.disabled}>
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
</mwc-icon-button> `;
}
}
declare global {
@ -19,5 +39,3 @@ declare global {
"ha-icon-button-next": HaIconButtonNext;
}
}
customElements.define("ha-icon-button-next", HaIconButtonNext);

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() {
super.connectedCallback();
// wait to check for direction since otherwise direction is wrong even though top level is RTL
setTimeout(() => {
this.icon =
this._icon =
window.getComputedStyle(this).direction === "ltr"
? "hass:chevron-left"
: "hass:chevron-right";
? mdiChevronLeft
: mdiChevronRight;
}, 100);
}
protected render(): TemplateResult {
return html`<mwc-icon-button .disabled=${this.disabled}>
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
</mwc-icon-button> `;
}
}
declare global {
@ -19,5 +39,3 @@ declare global {
"ha-icon-button-prev": HaIconButtonPrev;
}
}
customElements.define("ha-icon-button-prev", HaIconButtonPrev);

View File

@ -1,3 +1,5 @@
import "@material/mwc-icon-button";
import { mdiMenu } from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
@ -12,8 +14,7 @@ import { fireEvent } from "../common/dom/fire_event";
import { computeDomain } from "../common/entity/compute_domain";
import { subscribeNotifications } from "../data/persistent_notification";
import { HomeAssistant } from "../types";
import "./ha-icon-button";
import { mdiMenu } from "@mdi/js";
import "./ha-svg-icon";
@customElement("ha-menu-button")
class HaMenuButton extends LitElement {

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 "./ha-icon-button";
import "@polymer/paper-item/paper-icon-item";
import type { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item";
@ -29,9 +35,9 @@ import {
getExternalConfig,
} from "../external_app/external_config";
import type { HomeAssistant, PanelInfo } from "../types";
import "./ha-svg-icon";
import "./ha-icon";
import "./ha-menu-button";
import "./ha-svg-icon";
import "./user/ha-user-badge";
const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"];
@ -153,13 +159,16 @@ class HaSidebar extends LitElement {
<div class="menu">
${!this.narrow
? html`
<ha-icon-button
aria-label=${hass.localize("ui.sidebar.sidebar_toggle")}
.icon=${hass.dockedSidebar === "docked"
? "hass:menu-open"
: "hass:menu"}
<mwc-icon-button
.label=${hass.localize("ui.sidebar.sidebar_toggle")}
@click=${this._toggleSidebar}
></ha-icon-button>
>
<ha-svg-icon
.path=${hass.dockedSidebar === "docked"
? mdiMenuOpen
: mdiMenu}
></ha-svg-icon>
</mwc-icon-button>
`
: ""}
<span class="title">Home Assistant</span>
@ -174,14 +183,16 @@ class HaSidebar extends LitElement {
>
${this._renderPanel(
defaultPanel.url_path,
defaultPanel.icon || "hass:view-dashboard",
defaultPanel.title || hass.localize("panel.states")
defaultPanel.title || hass.localize("panel.states"),
defaultPanel.icon,
!defaultPanel.icon ? mdiViewDashboard : undefined
)}
${beforeSpacer.map((panel) =>
this._renderPanel(
panel.url_path,
hass.localize(`panel.${panel.title}`) || panel.title,
panel.icon,
hass.localize(`panel.${panel.title}`) || panel.title
undefined
)
)}
<div class="spacer" disabled></div>
@ -189,8 +200,9 @@ class HaSidebar extends LitElement {
${afterSpacer.map((panel) =>
this._renderPanel(
panel.url_path,
hass.localize(`panel.${panel.title}`) || panel.title,
panel.icon,
hass.localize(`panel.${panel.title}`) || panel.title
undefined
)
)}
${this._externalConfig && this._externalConfig.hasSettingsScreen
@ -443,7 +455,12 @@ class HaSidebar extends LitElement {
fireEvent(this, "hass-toggle-menu");
}
private _renderPanel(urlPath, icon, title) {
private _renderPanel(
urlPath: string,
title: string | null,
icon?: string | null,
iconPath?: string | null
) {
return html`
<a
aria-role="option"
@ -454,7 +471,12 @@ class HaSidebar extends LitElement {
@mouseleave=${this._itemMouseLeave}
>
<paper-icon-item>
<ha-icon slot="item-icon" .icon="${icon}"></ha-icon>
${iconPath
? html`<ha-svg-icon
slot="item-icon"
.path=${iconPath}
></ha-svg-icon>`
: html`<ha-icon slot="item-icon" .icon=${icon}></ha-icon>`}
<span class="item-text">${title}</span>
</paper-icon-item>
</a>
@ -496,13 +518,13 @@ class HaSidebar extends LitElement {
width: 256px;
}
.menu ha-icon-button {
.menu mwc-icon-button {
color: var(--sidebar-icon-color);
}
:host([expanded]) .menu ha-icon-button {
:host([expanded]) .menu mwc-icon-button {
margin-right: 23px;
}
:host([expanded][_rtl]) .menu ha-icon-button {
:host([expanded][_rtl]) .menu mwc-icon-button {
margin-right: 0px;
margin-left: 23px;
}
@ -714,7 +736,7 @@ class HaSidebar extends LitElement {
font-weight: 500;
}
:host([_rtl]) .menu ha-icon-button {
:host([_rtl]) .menu mwc-icon-button {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}

View File

@ -1,9 +1,12 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "../../../../components/ha-icon-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-icon-button";
import "../../../../components/ha-button-menu";
import "../../../../components/ha-svg-icon";
import { mdiDotsVertical, mdiArrowUp, mdiArrowDown } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-menu-button/paper-menu-button";
import {
css,
CSSResult,
@ -96,56 +99,64 @@ export default class HaAutomationActionRow extends LitElement {
<div class="card-menu">
${this.index !== 0
? html`
<ha-icon-button
icon="hass:arrow-up"
<mwc-icon-button
.title=${this.hass.localize(
"ui.panel.config.automation.editor.move_up"
)}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.move_up"
)}
@click=${this._moveUp}
></ha-icon-button>
>
<ha-svg-icon path=${mdiArrowUp}></ha-svg-icon>
</mwc-icon-button>
`
: ""}
${this.index !== this.totalActions - 1
? html`
<ha-icon-button
icon="hass:arrow-down"
<mwc-icon-button
.title=${this.hass.localize(
"ui.panel.config.automation.editor.move_down"
)}
.label=${this.hass.localize(
"ui.panel.config.automation.editor.move_down"
)}
@click=${this._moveDown}
></ha-icon-button>
>
<ha-svg-icon path=${mdiArrowDown}></ha-svg-icon>
</mwc-icon-button>
`
: ""}
<paper-menu-button
no-animations
horizontal-align="right"
horizontal-offset="-5"
vertical-offset="-5"
close-on-activate
>
<ha-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
></ha-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item
@tap=${this._switchYamlMode}
.disabled=${selected === -1}
>
${yamlMode
? this.hass.localize(
"ui.panel.config.automation.editor.edit_ui"
)
: this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml"
)}
</paper-item>
<paper-item disabled>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate"
)}
</paper-item>
<paper-item @tap=${this._onDelete}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
</paper-item>
</paper-listbox>
</paper-menu-button>
<ha-button-menu corner="BOTTOM_START">
<mwc-icon-button
slot="trigger"
.title=${this.hass.localize("ui.common.menu")}
.label=${this.hass.localize("ui.common.overflow_menu")}
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item
@tap=${this._switchYamlMode}
.disabled=${selected === -1}
>
${yamlMode
? this.hass.localize(
"ui.panel.config.automation.editor.edit_ui"
)
: this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml"
)}
</mwc-list-item>
<mwc-list-item disabled>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate"
)}
</mwc-list-item>
<mwc-list-item @tap=${this._onDelete}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
</mwc-list-item>
</ha-button-menu>
</div>
${yamlMode
? html`
@ -259,14 +270,17 @@ export default class HaAutomationActionRow extends LitElement {
top: 0;
right: 0;
z-index: 3;
color: var(--primary-text-color);
--mdc-theme-text-primary-on-background: var(--primary-text-color);
}
.rtl .card-menu {
right: auto;
left: 0;
}
.card-menu paper-item {
cursor: pointer;
ha-button-menu {
margin: 8px;
}
mwc-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
`;
}

View File

@ -1,6 +1,8 @@
import "../../../../components/ha-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-menu-button/paper-menu-button";
import "@material/mwc-list/mwc-list-item";
import "../../../../components/ha-button-menu";
import { mdiDotsVertical } from "@mdi/js";
import {
css,
CSSResult,
@ -61,39 +63,33 @@ export default class HaAutomationConditionRow extends LitElement {
<ha-card>
<div class="card-content">
<div class="card-menu">
<paper-menu-button
no-animations
horizontal-align="right"
horizontal-offset="-5"
vertical-offset="-5"
close-on-activate
>
<ha-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
></ha-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item @tap=${this._switchYamlMode}>
${this._yamlMode
? this.hass.localize(
"ui.panel.config.automation.editor.edit_ui"
)
: this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml"
)}
</paper-item>
<paper-item disabled>
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.duplicate"
)}
</paper-item>
<paper-item @tap=${this._onDelete}>
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.delete"
)}
</paper-item>
</paper-listbox>
</paper-menu-button>
<ha-button-menu corner="BOTTOM_START">
<mwc-icon-button
.title=${this.hass.localize("ui.common.menu")}
.label=${this.hass.localize("ui.common.overflow_menu")}
slot="trigger"
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon
></mwc-icon-button>
<mwc-list-item @tap=${this._switchYamlMode}>
${this._yamlMode
? this.hass.localize(
"ui.panel.config.automation.editor.edit_ui"
)
: this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml"
)}
</mwc-list-item>
<mwc-list-item disabled>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate"
)}
</mwc-list-item>
<mwc-list-item @tap=${this._onDelete}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
</mwc-list-item>
</ha-button-menu>
</div>
<ha-automation-condition-editor
.yamlMode=${this._yamlMode}
@ -129,14 +125,17 @@ export default class HaAutomationConditionRow extends LitElement {
top: 0;
right: 0;
z-index: 3;
color: var(--primary-text-color);
--mdc-theme-text-primary-on-background: var(--primary-text-color);
}
.rtl .card-menu {
right: auto;
left: 0;
}
.card-menu paper-item {
cursor: pointer;
ha-button-menu {
margin: 8px;
}
mwc-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
`;
}

View File

@ -2,8 +2,10 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "../../../../components/ha-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@material/mwc-list/mwc-list-item";
import "../../../../components/ha-button-menu";
import { mdiDotsVertical } from "@mdi/js";
import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-menu-button/paper-menu-button";
import {
css,
CSSResult,
@ -90,42 +92,36 @@ export default class HaAutomationTriggerRow extends LitElement {
<ha-card>
<div class="card-content">
<div class="card-menu">
<paper-menu-button
no-animations
horizontal-align="right"
horizontal-offset="-5"
vertical-offset="-5"
close-on-activate
>
<ha-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
></ha-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item
@tap=${this._switchYamlMode}
.disabled=${selected === -1}
>
${yamlMode
? this.hass.localize(
"ui.panel.config.automation.editor.edit_ui"
)
: this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml"
)}
</paper-item>
<paper-item disabled>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.duplicate"
)}
</paper-item>
<paper-item @tap=${this._onDelete}>
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.delete"
)}
</paper-item>
</paper-listbox>
</paper-menu-button>
<ha-button-menu corner="BOTTOM_START">
<mwc-icon-button
slot="trigger"
.title=${this.hass.localize("ui.common.menu")}
.label=${this.hass.localize("ui.common.overflow_menu")}
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon
></mwc-icon-button>
<mwc-list-item
@tap=${this._switchYamlMode}
.disabled=${selected === -1}
>
${yamlMode
? this.hass.localize(
"ui.panel.config.automation.editor.edit_ui"
)
: this.hass.localize(
"ui.panel.config.automation.editor.edit_yaml"
)}
</mwc-list-item>
<mwc-list-item disabled>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.duplicate"
)}
</mwc-list-item>
<mwc-list-item @tap=${this._onDelete}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}
</mwc-list-item>
</ha-button-menu>
</div>
${yamlMode
? html`
@ -232,14 +228,17 @@ export default class HaAutomationTriggerRow extends LitElement {
top: 0;
right: 0;
z-index: 3;
color: var(--primary-text-color);
--mdc-theme-text-primary-on-background: var(--primary-text-color);
}
.rtl .card-menu {
right: auto;
left: 0;
}
.card-menu paper-item {
cursor: pointer;
ha-button-menu {
margin: 8px;
}
mwc-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
`;
}

View File

@ -1,3 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-icon-item";
@ -31,6 +32,7 @@ import type {
RowClickedEvent,
SelectionChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/ha-button-menu";
import "../../../components/ha-icon";
import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
import {
@ -53,6 +55,7 @@ import {
loadEntityEditorDialog,
showEntityEditorDialog,
} from "./show-dialog-entity-editor";
import { mdiFilterVariant } from "@mdi/js";
export interface StateEntity extends EntityRegistryEntry {
readonly?: boolean;
@ -442,47 +445,55 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
>
</div>`
: ""}
<paper-menu-button no-animations horizontal-align="right">
<ha-icon-button
aria-label=${this.hass!.localize(
<ha-button-menu corner="BOTTOM_START">
<mwc-icon-button
slot="trigger"
.label=${this.hass!.localize(
"ui.panel.config.entities.picker.filter.filter"
)}
title="${this.hass!.localize(
.title=${this.hass!.localize(
"ui.panel.config.entities.picker.filter.filter"
)}"
icon="hass:filter-variant"
slot="dropdown-trigger"
></ha-icon-button>
<paper-listbox slot="dropdown-content">
<paper-icon-item @tap="${this._showDisabledChanged}">
<paper-checkbox
.checked=${this._showDisabled}
slot="item-icon"
></paper-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_disabled"
)}
</paper-icon-item>
<paper-icon-item @tap="${this._showRestoredChanged}">
<paper-checkbox
.checked=${this._showUnavailable}
slot="item-icon"
></paper-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_unavailable"
)}
</paper-icon-item>
<paper-icon-item @tap="${this._showReadOnlyChanged}">
<paper-checkbox
.checked=${this._showReadOnly}
slot="item-icon"
></paper-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_readonly"
)}
</paper-icon-item>
</paper-listbox>
</paper-menu-button>
)}
>
<ha-svg-icon path=${mdiFilterVariant}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item
@click="${this._showDisabledChanged}"
graphic="control"
>
<ha-checkbox
slot="graphic"
.checked=${this._showDisabled}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_disabled"
)}
</mwc-list-item>
<mwc-list-item
@click="${this._showRestoredChanged}"
graphic="control"
>
<ha-checkbox
slot="graphic"
.checked=${this._showUnavailable}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_unavailable"
)}
</mwc-list-item>
<mwc-list-item
@click="${this._showReadOnlyChanged}"
graphic="control"
>
<ha-checkbox
slot="graphic"
.checked=${this._showReadOnly}
></ha-checkbox>
${this.hass!.localize(
"ui.panel.config.entities.picker.filter.show_readonly"
)}
</mwc-list-item>
</ha-button-menu>
`;
return html`
@ -733,6 +744,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
ha-switch {
margin-top: 16px;
}
ha-button-menu {
margin-right: 8px;
}
.table-header {
display: flex;
justify-content: space-between;

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 Fuse from "fuse.js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
@ -11,13 +16,16 @@ import {
TemplateResult,
} from "lit-element";
import memoizeOne from "memoize-one";
import Fuse from "fuse.js";
import { HASSDomEvent } from "../../../common/dom/fire_event";
import "../../../common/search/search-input";
import { caseInsensitiveCompare } from "../../../common/string/compare";
import { LocalizeFunc } from "../../../common/translations/localize";
import { computeRTL } from "../../../common/util/compute_rtl";
import { nextRender } from "../../../common/util/render-status";
import "../../../components/entity/ha-state-icon";
import "../../../components/ha-button-menu";
import "../../../components/ha-card";
import "@material/mwc-fab";
import "../../../components/ha-svg-icon";
import {
ConfigEntry,
deleteConfigEntry,
@ -42,23 +50,18 @@ import {
import { domainToName } from "../../../data/integration";
import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
import "../../../layouts/hass-tabs-subpage";
import "../../../layouts/hass-loading-screen";
import "../../../layouts/hass-tabs-subpage";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route } from "../../../types";
import { configSections } from "../ha-panel-config";
import "../../../common/search/search-input";
import "./ha-integration-card";
import type {
ConfigEntryRemovedEvent,
ConfigEntryUpdatedEvent,
HaIntegrationCard,
} from "./ha-integration-card";
import { HASSDomEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-svg-icon";
import { mdiPlus } from "@mdi/js";
import { LocalizeFunc } from "../../../common/translations/localize";
interface DataEntryFlowProgressExtended extends DataEntryFlowProgress {
localized_title?: string;
@ -258,28 +261,22 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
</div>
`
: ""}
<paper-menu-button
close-on-activate
no-animations
horizontal-align="right"
horizontal-offset="-5"
slot="toolbar-icon"
>
<ha-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
alt="menu"
></ha-icon-button>
<paper-listbox slot="dropdown-content" role="listbox">
<paper-item @tap=${this._toggleShowIgnored}>
${this.hass.localize(
this._showIgnored
? "ui.panel.config.integrations.ignore.hide_ignored"
: "ui.panel.config.integrations.ignore.show_ignored"
)}
</paper-item>
</paper-listbox>
</paper-menu-button>
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
<mwc-icon-button
.title=${this.hass.localize("ui.common.menu")}
.label=${this.hass.localize("ui.common.overflow_menu")}
slot="trigger"
>
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item @click=${this._toggleShowIgnored}>
${this.hass.localize(
this._showIgnored
? "ui.panel.config.integrations.ignore.hide_ignored"
: "ui.panel.config.integrations.ignore.show_ignored"
)}
</mwc-list-item>
</ha-button-menu>
${!this.narrow
? html`

View File

@ -27,6 +27,7 @@ import {
import { haStyle } from "../../../resources/styles";
import "../../../components/ha-icon-next";
import { fireEvent } from "../../../common/dom/fire_event";
import { mdiDotsVertical } from "@mdi/js";
export interface ConfigEntryUpdatedEvent {
entry: ConfigEntry;
@ -188,32 +189,25 @@ export class HaIntegrationCard extends LitElement {
`
: ""}
</div>
<paper-menu-button
horizontal-align="right"
vertical-align="top"
vertical-offset="40"
close-on-activate
>
<ha-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
aria-label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.options"
<ha-button-menu corner="BOTTOM_START">
<mwc-icon-button
.title=${this.hass.localize("ui.common.menu")}
.label=${this.hass.localize("ui.common.overflow_menu")}
slot="trigger"
>
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item @click=${this._showSystemOptions}>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.system_options"
)}
></ha-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item @tap=${this._showSystemOptions}>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.system_options"
)}</paper-item
>
<paper-item class="warning" @tap=${this._removeIntegration}>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.delete"
)}</paper-item
>
</paper-listbox>
</paper-menu-button>
</mwc-list-item>
<mwc-list-item class="warning" @click=${this._removeIntegration}>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.delete"
)}
</mwc-list-item>
</ha-button-menu>
</div>
</ha-card>
`;
@ -379,9 +373,8 @@ export class HaIntegrationCard extends LitElement {
margin-top: 0;
min-height: 24px;
}
paper-menu-button {
ha-button-menu {
color: var(--secondary-text-color);
padding: 0;
}
@media (min-width: 563px) {
paper-listbox {

View File

@ -1,7 +1,7 @@
import "@material/mwc-button";
import "../../../components/ha-icon-button";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-menu-button/paper-menu-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-icon-button";
import "../../../components/ha-button-menu";
import {
css,
CSSResult,
@ -19,6 +19,7 @@ import { swapCard } from "../editor/config-util";
import { confDeleteCard } from "../editor/delete-card";
import { Lovelace, LovelaceCard } from "../types";
import { computeCardSize } from "../common/compute-card-size";
import { mdiDotsVertical, mdiArrowDown, mdiArrowUp } from "@mdi/js";
@customElement("hui-card-options")
export class HuiCardOptions extends LitElement {
@ -47,53 +48,52 @@ export class HuiCardOptions extends LitElement {
>
</div>
<div class="secondary-actions">
<ha-icon-button
<mwc-icon-button
title="Move card down"
class="move-arrow"
icon="hass:arrow-down"
@click=${this._cardDown}
?disabled=${this.lovelace!.config.views[this.path![0]].cards!
.length ===
this.path![1] + 1}
></ha-icon-button>
<ha-icon-button
>
<ha-svg-icon path=${mdiArrowDown}></ha-svg-icon>
</mwc-icon-button>
<mwc-icon-button
title="Move card up"
class="move-arrow"
icon="hass:arrow-up"
@click=${this._cardUp}
?disabled=${this.path![1] === 0}
></ha-icon-button>
<paper-menu-button
horizontal-align="right"
vertical-align="bottom"
vertical-offset="40"
close-on-activate
>
<ha-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
><ha-svg-icon path=${mdiArrowUp}></ha-svg-icon
></mwc-icon-button>
<ha-button-menu corner="BOTTOM_START">
<mwc-icon-button
slot="trigger"
aria-label=${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.options"
)}
></ha-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item @tap=${this._moveCard}>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move"
)}</paper-item
>
<paper-item @tap=${this._duplicateCard}
>${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.duplicate"
)}</paper-item
>
<paper-item class="delete-item" @tap=${this._deleteCard}>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.delete"
)}</paper-item
>
</paper-listbox>
</paper-menu-button>
title="${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.options"
)}"
>
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item @tap=${this._moveCard}>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move"
)}</mwc-list-item
>
<mwc-list-item @tap=${this._duplicateCard}
>${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.duplicate"
)}</mwc-list-item
>
<mwc-list-item class="delete-item" @tap=${this._deleteCard}>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.delete"
)}</mwc-list-item
>
</ha-button-menu>
</div>
</div>
</ha-card>
@ -103,7 +103,6 @@ export class HuiCardOptions extends LitElement {
static get styles(): CSSResult {
return css`
:host(:hover) {
overflow: hidden;
outline: 2px solid var(--primary-color);
}
@ -132,23 +131,14 @@ export class HuiCardOptions extends LitElement {
text-align: right;
}
ha-icon-button {
mwc-icon-button {
color: var(--primary-text-color);
}
ha-icon-button.move-arrow[disabled] {
mwc-icon-button.move-arrow[disabled] {
color: var(--disabled-text-color);
}
paper-menu-button {
color: var(--secondary-text-color);
padding: 0;
}
paper-listbox {
padding: 0;
}
paper-item.header {
color: var(--primary-text-color);
text-transform: uppercase;

View File

@ -1,12 +1,17 @@
import "@material/mwc-button";
import "@material/mwc-list/mwc-list-item";
import {
mdiDotsVertical,
mdiMicrophone,
mdiPlus,
mdiClose,
mdiPencil,
mdiHelpCircle,
} from "@mdi/js";
import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "../../components/ha-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-menu-button/paper-menu-button";
import "@polymer/paper-tabs/paper-tab";
import "@polymer/paper-tabs/paper-tabs";
import {
@ -27,10 +32,12 @@ import { navigate } from "../../common/navigate";
import { computeRTLDirection } from "../../common/util/compute_rtl";
import { debounce } from "../../common/util/debounce";
import { afterNextRender } from "../../common/util/render-status";
import "../../components/ha-button-menu";
import "../../components/ha-icon";
import "../../components/ha-menu-button";
import "../../components/ha-svg-icon";
import "../../components/ha-icon-button-arrow-next";
import "../../components/ha-icon-button-arrow-prev";
import "../../components/ha-menu-button";
import type {
LovelaceConfig,
LovelacePanelConfig,
@ -99,78 +106,73 @@ class HUIRoot extends LitElement {
${this._editMode
? html`
<app-toolbar class="edit-mode">
<ha-icon-button
aria-label="${this.hass!.localize(
<mwc-icon-button
.label="${this.hass!.localize(
"ui.panel.lovelace.menu.exit_edit_mode"
)}"
title="${this.hass!.localize(
"ui.panel.lovelace.menu.close"
)}"
icon="hass:close"
@click="${this._editModeDisable}"
></ha-icon-button>
>
<ha-svg-icon path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
<div main-title>
${this.config.title ||
this.hass!.localize("ui.panel.lovelace.editor.header")}
<ha-icon-button
<mwc-icon-button
aria-label="${this.hass!.localize(
"ui.panel.lovelace.editor.edit_lovelace.edit_title"
)}"
title="${this.hass!.localize(
"ui.panel.lovelace.editor.edit_lovelace.edit_title"
)}"
icon="hass:pencil"
class="edit-icon"
@click="${this._editLovelace}"
></ha-icon-button>
>
<ha-svg-icon path=${mdiPencil}></ha-svg-icon>
</mwc-icon-button>
</div>
<ha-icon-button
icon="hass:help-circle"
<mwc-icon-button
title="${this.hass!.localize(
"ui.panel.lovelace.menu.help"
)}"
@click="${this._handleHelp}"
></ha-icon-button>
<paper-menu-button
no-animations
horizontal-align="right"
horizontal-offset="-5"
>
<ha-icon-button
aria-label=${this.hass!.localize(
"ui.panel.lovelace.editor.menu.open"
)}
title="${this.hass!.localize(
<ha-svg-icon path=${mdiHelpCircle}></ha-svg-icon>
</mwc-icon-button>
<ha-button-menu corner="BOTTOM_START">
<mwc-icon-button
slot="trigger"
.title="${this.hass!.localize(
"ui.panel.lovelace.editor.menu.open"
)}"
icon="hass:dots-vertical"
slot="dropdown-trigger"
></ha-icon-button>
<paper-listbox
@iron-select="${this._deselect}"
slot="dropdown-content"
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.menu.open"
)}
>
${__DEMO__ /* No unused entities available in the demo */
? ""
: html`
<paper-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
@tap="${this._handleUnusedEntities}"
>
${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
</paper-item>
`}
<paper-item @tap="${this.lovelace!.enableFullEditMode}">
${this.hass!.localize(
"ui.panel.lovelace.editor.menu.raw_editor"
)}
</paper-item>
</paper-listbox>
</paper-menu-button>
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
${__DEMO__ /* No unused entities available in the demo */
? ""
: html`
<mwc-list-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
@tap="${this._handleUnusedEntities}"
>
${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
</mwc-list-item>
`}
<mwc-list-item @tap="${this.lovelace!.enableFullEditMode}">
${this.hass!.localize(
"ui.panel.lovelace.editor.menu.raw_editor"
)}
</mwc-list-item>
</ha-button-menu>
</app-toolbar>
`
: html`
@ -182,96 +184,88 @@ class HUIRoot extends LitElement {
<div main-title>${this.config.title || "Home Assistant"}</div>
${this._conversation(this.hass.config.components)
? html`
<ha-icon-button
<mwc-icon-button
label="Start conversation"
icon="hass:microphone"
@click=${this._showVoiceCommandDialog}
></ha-icon-button>
>
<ha-svg-icon path=${mdiMicrophone}></ha-svg-icon>
</mwc-icon-button>
`
: ""}
<paper-menu-button
no-animations
horizontal-align="right"
horizontal-offset="-5"
>
<ha-icon-button
aria-label=${this.hass!.localize(
<ha-button-menu corner="BOTTOM_START">
<mwc-icon-button
slot="trigger"
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.menu.open"
)}
title="${this.hass!.localize(
.title="${this.hass!.localize(
"ui.panel.lovelace.editor.menu.open"
)}"
icon="hass:dots-vertical"
slot="dropdown-trigger"
></ha-icon-button>
<paper-listbox
@iron-select="${this._deselect}"
slot="dropdown-content"
>
${this._yamlMode
? html`
<paper-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.refresh"
)}
@tap="${this._handleRefresh}"
>
${this.hass!.localize(
"ui.panel.lovelace.menu.refresh"
)}
</paper-item>
<paper-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
@tap="${this._handleUnusedEntities}"
>
${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
</paper-item>
`
: ""}
${(this.hass.panels.lovelace
?.config as LovelacePanelConfig)?.mode === "yaml"
? html`
<paper-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.reload_resources"
)}
@tap="${this._handleReloadResources}"
>
${this.hass!.localize(
"ui.panel.lovelace.menu.reload_resources"
)}
</paper-item>
`
: ""}
${this.hass!.user!.is_admin &&
!this.hass!.config.safe_mode
? html`
<paper-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.configure_ui"
)}
@tap="${this._editModeEnable}"
>
${this.hass!.localize(
"ui.panel.lovelace.menu.configure_ui"
)}
</paper-item>
`
: ""}
<paper-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.help"
)}
@tap="${this._handleHelp}"
>
${this.hass!.localize("ui.panel.lovelace.menu.help")}
</paper-item>
</paper-listbox>
</paper-menu-button>
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
${this._yamlMode
? html`
<mwc-list-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.refresh"
)}
@tap="${this._handleRefresh}"
>
${this.hass!.localize(
"ui.panel.lovelace.menu.refresh"
)}
</mwc-list-item>
<mwc-list-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
@tap="${this._handleUnusedEntities}"
>
${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
</mwc-list-item>
`
: ""}
${(this.hass.panels.lovelace?.config as LovelacePanelConfig)
?.mode === "yaml"
? html`
<mwc-list-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.reload_resources"
)}
@tap="${this._handleReloadResources}"
>
${this.hass!.localize(
"ui.panel.lovelace.menu.reload_resources"
)}
</mwc-list-item>
`
: ""}
${this.hass!.user!.is_admin && !this.hass!.config.safe_mode
? html`
<mwc-list-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.configure_ui"
)}
@tap="${this._editModeEnable}"
>
${this.hass!.localize(
"ui.panel.lovelace.menu.configure_ui"
)}
</mwc-list-item>
`
: ""}
<mwc-list-item
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.help"
)}
@tap="${this._handleHelp}"
>
${this.hass!.localize("ui.panel.lovelace.menu.help")}
</mwc-list-item>
</ha-button-menu>
</app-toolbar>
`}
${this.lovelace!.config.views.length > 1 || this._editMode
@ -321,14 +315,14 @@ class HUIRoot extends LitElement {
: view.title || "Unnamed view"}
${this._editMode
? html`
<ha-icon
<ha-svg-icon
title="${this.hass!.localize(
"ui.panel.lovelace.editor.edit_view.edit"
)}"
class="edit-icon view"
icon="hass:pencil"
path=${mdiPencil}
@click="${this._editView}"
></ha-icon>
></ha-svg-icon>
<ha-icon-button-arrow-next
title="${this.hass!.localize(
"ui.panel.lovelace.editor.edit_view.move_right"
@ -346,14 +340,15 @@ class HUIRoot extends LitElement {
)}
${this._editMode
? html`
<ha-icon-button
<mwc-icon-button
id="add-view"
@click="${this._addView}"
title="${this.hass!.localize(
"ui.panel.lovelace.editor.edit_view.add"
)}"
icon="hass:plus"
></ha-icon-button>
>
<ha-svg-icon path=${mdiPlus}></ha-svg-icon>
</mwc-icon-button>
`
: ""}
</paper-tabs>
@ -500,10 +495,6 @@ class HUIRoot extends LitElement {
navigate(this, `${this.route?.prefix}/hass-unused-entities`);
}
private _deselect(ev): void {
ev.target.selected = null;
}
private _showVoiceCommandDialog(): void {
showVoiceCommandDialog(this);
}
@ -671,9 +662,6 @@ class HUIRoot extends LitElement {
ha-app-layout {
min-height: 100%;
}
paper-menu-button {
padding: 0;
}
paper-tabs {
margin-left: 12px;
--paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
@ -702,10 +690,9 @@ class HUIRoot extends LitElement {
position: absolute;
height: 44px;
}
#add-view ha-icon {
#add-view ha-svg-icon {
background-color: var(--accent-color);
border-radius: 5px;
margin-top: 4px;
border-radius: 4px;
}
app-toolbar a {
color: var(--text-primary-color, white);
@ -740,9 +727,6 @@ class HUIRoot extends LitElement {
#view.tabs-hidden {
min-height: calc(100vh - 64px);
}
paper-item {
cursor: pointer;
}
.hide-tab {
display: none;
}

View File

@ -372,8 +372,6 @@ export class HUIView extends LitElement {
flex: 1 0 0;
max-width: 500px;
min-width: 0;
/* on iOS devices the column can become wider when toggling a switch */
overflow-x: hidden;
}
.column > * {

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-body";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-menu-button/paper-menu-button";
import "@material/mwc-list/mwc-list-item";
import "../../components/ha-button-menu";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -18,6 +19,7 @@ import "../../components/ha-menu-button";
import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
import LocalizeMixin from "../../mixins/localize-mixin";
import "../../styles/polymer-ha-style";
import { mdiDotsVertical } from "@mdi/js";
/*
* @appliesMixin LocalizeMixin
@ -81,22 +83,17 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
icon="hass:microphone"
on-click="_showVoiceCommandDialog"
></ha-icon-button>
<paper-menu-button
horizontal-align="right"
horizontal-offset="-5"
vertical-offset="-5"
>
<ha-button-menu corner="BOTTOM_START">
<ha-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"
></ha-icon-button>
<paper-listbox slot="dropdown-content">
<paper-item on-click="_clearCompleted"
>[[localize('ui.panel.shopping-list.clear_completed')]]</paper-item
>
</paper-listbox>
</paper-menu-button>
label="Menu"
slot="trigger"
>
</ha-icon-button>
<mwc-list-item on-click="_clearCompleted">
[[localize('ui.panel.shopping-list.clear_completed')]]
</mwc-list-item>
</ha-button-menu>
</app-toolbar>
</app-header>

View File

@ -243,6 +243,8 @@
"save": "Save",
"yes": "Yes",
"no": "No",
"menu": "Menu",
"overflow_menu": "Overflow menu",
"successfully_saved": "Successfully saved",
"successfully_deleted": "Successfully deleted",
"back": "Back",
@ -765,6 +767,8 @@
"save": "Save",
"unsaved_confirm": "You have unsaved changes. Are you sure you want to leave?",
"alias": "Name",
"move_up": "Move up",
"move_down": "Move down",
"description": {
"label": "Description",
"placeholder": "Optional description"