diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts index 1824c2be90..5db8cc409c 100644 --- a/hassio/src/system/hassio-system.ts +++ b/hassio/src/system/hassio-system.ts @@ -1,4 +1,3 @@ -import "@polymer/paper-menu-button/paper-menu-button"; import { css, CSSResult, diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index 3ba40df40c..31f9105d93 100644 --- a/src/components/ha-button-menu.ts +++ b/src/components/ha-button-menu.ts @@ -40,7 +40,7 @@ export class HaButtonMenu extends LitElement { static get styles(): CSSResult { return css` :host { - display: block; + display: inline-block; position: relative; } `; diff --git a/src/components/ha-icon-button-arrow-next.ts b/src/components/ha-icon-button-arrow-next.ts index 269b7792a5..150f5b4b2d 100644 --- a/src/components/ha-icon-button-arrow-next.ts +++ b/src/components/ha-icon-button-arrow-next.ts @@ -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` + + `; + } } declare global { @@ -19,5 +39,3 @@ declare global { "ha-icon-button-arrow-next": HaIconButtonArrowNext; } } - -customElements.define("ha-icon-button-arrow-next", HaIconButtonArrowNext); diff --git a/src/components/ha-icon-button-arrow-prev.ts b/src/components/ha-icon-button-arrow-prev.ts index 59f5b7482f..06e97b290c 100644 --- a/src/components/ha-icon-button-arrow-prev.ts +++ b/src/components/ha-icon-button-arrow-prev.ts @@ -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); diff --git a/src/components/ha-icon-button-next.ts b/src/components/ha-icon-button-next.ts index 68bfa5004c..6e37d1c764 100644 --- a/src/components/ha-icon-button-next.ts +++ b/src/components/ha-icon-button-next.ts @@ -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` + + `; + } } declare global { @@ -19,5 +39,3 @@ declare global { "ha-icon-button-next": HaIconButtonNext; } } - -customElements.define("ha-icon-button-next", HaIconButtonNext); diff --git a/src/components/ha-icon-button-prev.ts b/src/components/ha-icon-button-prev.ts index 675719fc6e..7548004c02 100644 --- a/src/components/ha-icon-button-prev.ts +++ b/src/components/ha-icon-button-prev.ts @@ -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` + + `; + } } declare global { @@ -19,5 +39,3 @@ declare global { "ha-icon-button-prev": HaIconButtonPrev; } } - -customElements.define("ha-icon-button-prev", HaIconButtonPrev); diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts index 4f65237636..985678b03b 100644 --- a/src/components/ha-menu-button.ts +++ b/src/components/ha-menu-button.ts @@ -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 { diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 5ceb4950f9..70c2806800 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -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 {
${!this.narrow ? html` - + > + + ` : ""} Home Assistant @@ -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 ) )}
@@ -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` - + ${iconPath + ? html`` + : html``} ${title} @@ -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); } diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 8211046fbc..2cd6158fd3 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -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 {
${this.index !== 0 ? html` - + > + + ` : ""} ${this.index !== this.totalActions - 1 ? html` - + > + + ` : ""} - - - - - ${yamlMode - ? this.hass.localize( - "ui.panel.config.automation.editor.edit_ui" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.edit_yaml" - )} - - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.duplicate" - )} - - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.delete" - )} - - - + + + + + ${yamlMode + ? this.hass.localize( + "ui.panel.config.automation.editor.edit_ui" + ) + : this.hass.localize( + "ui.panel.config.automation.editor.edit_yaml" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + +
${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); } `; } diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index d25bd7d0e1..be81fda127 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -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 {
- - - - - ${this._yamlMode - ? this.hass.localize( - "ui.panel.config.automation.editor.edit_ui" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.edit_yaml" - )} - - - ${this.hass.localize( - "ui.panel.config.automation.editor.conditions.duplicate" - )} - - - ${this.hass.localize( - "ui.panel.config.automation.editor.conditions.delete" - )} - - - + + + + ${this._yamlMode + ? this.hass.localize( + "ui.panel.config.automation.editor.edit_ui" + ) + : this.hass.localize( + "ui.panel.config.automation.editor.edit_yaml" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + +
- - - - - ${yamlMode - ? this.hass.localize( - "ui.panel.config.automation.editor.edit_ui" - ) - : this.hass.localize( - "ui.panel.config.automation.editor.edit_yaml" - )} - - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.duplicate" - )} - - - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.delete" - )} - - - + + + + ${yamlMode + ? this.hass.localize( + "ui.panel.config.automation.editor.edit_ui" + ) + : this.hass.localize( + "ui.panel.config.automation.editor.edit_yaml" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.duplicate" + )} + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.delete" + )} + +
${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); } `; } diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 8abb0dcb4b..fcbbbef6b0 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -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) { >
` : ""} - - + - - - - ${this.hass!.localize( - "ui.panel.config.entities.picker.filter.show_disabled" - )} - - - - ${this.hass!.localize( - "ui.panel.config.entities.picker.filter.show_unavailable" - )} - - - - ${this.hass!.localize( - "ui.panel.config.entities.picker.filter.show_readonly" - )} - - - + )} + > + + + + + ${this.hass!.localize( + "ui.panel.config.entities.picker.filter.show_disabled" + )} + + + + ${this.hass!.localize( + "ui.panel.config.entities.picker.filter.show_unavailable" + )} + + + + ${this.hass!.localize( + "ui.panel.config.entities.picker.filter.show_readonly" + )} + + `; 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; diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 0de2540d1d..6838af965c 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -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) {
` : ""} - - - - - ${this.hass.localize( - this._showIgnored - ? "ui.panel.config.integrations.ignore.hide_ignored" - : "ui.panel.config.integrations.ignore.show_ignored" - )} - - - + + + + + + ${this.hass.localize( + this._showIgnored + ? "ui.panel.config.integrations.ignore.hide_ignored" + : "ui.panel.config.integrations.ignore.show_ignored" + )} + + ${!this.narrow ? html` diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts index f3c88c20da..8cb53bace6 100644 --- a/src/panels/config/integrations/ha-integration-card.ts +++ b/src/panels/config/integrations/ha-integration-card.ts @@ -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 { ` : ""}
- - + + + + + ${this.hass.localize( + "ui.panel.config.integrations.config_entry.system_options" )} - > - - - ${this.hass.localize( - "ui.panel.config.integrations.config_entry.system_options" - )} - - ${this.hass.localize( - "ui.panel.config.integrations.config_entry.delete" - )} - - + + + ${this.hass.localize( + "ui.panel.config.integrations.config_entry.delete" + )} + + `; @@ -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 { diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index e199c1b141..1d87c26803 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -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 { >
- - + + + - - + + - - - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_card.move" - )} - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_card.duplicate" - )} - - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_card.delete" - )} - - + title="${this.hass!.localize( + "ui.panel.lovelace.editor.edit_card.options" + )}" + > + + + + + ${this.hass!.localize( + "ui.panel.lovelace.editor.edit_card.move" + )} + ${this.hass!.localize( + "ui.panel.lovelace.editor.edit_card.duplicate" + )} + + ${this.hass!.localize( + "ui.panel.lovelace.editor.edit_card.delete" + )} +
@@ -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; diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 289100b08c..95843c2642 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -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` - + > + +
${this.config.title || this.hass!.localize("ui.panel.lovelace.editor.header")} - + > + +
- - - + - - ${__DEMO__ /* No unused entities available in the demo */ - ? "" - : html` - - ${this.hass!.localize( - "ui.panel.lovelace.unused_entities.title" - )} - - `} - - ${this.hass!.localize( - "ui.panel.lovelace.editor.menu.raw_editor" - )} - - - + + + ${__DEMO__ /* No unused entities available in the demo */ + ? "" + : html` + + ${this.hass!.localize( + "ui.panel.lovelace.unused_entities.title" + )} + + `} + + ${this.hass!.localize( + "ui.panel.lovelace.editor.menu.raw_editor" + )} + + ` : html` @@ -182,96 +184,88 @@ class HUIRoot extends LitElement {
${this.config.title || "Home Assistant"}
${this._conversation(this.hass.config.components) ? html` - + > + + ` : ""} - - + - - ${this._yamlMode - ? html` - - ${this.hass!.localize( - "ui.panel.lovelace.menu.refresh" - )} - - - ${this.hass!.localize( - "ui.panel.lovelace.unused_entities.title" - )} - - ` - : ""} - ${(this.hass.panels.lovelace - ?.config as LovelacePanelConfig)?.mode === "yaml" - ? html` - - ${this.hass!.localize( - "ui.panel.lovelace.menu.reload_resources" - )} - - ` - : ""} - ${this.hass!.user!.is_admin && - !this.hass!.config.safe_mode - ? html` - - ${this.hass!.localize( - "ui.panel.lovelace.menu.configure_ui" - )} - - ` - : ""} - - ${this.hass!.localize("ui.panel.lovelace.menu.help")} - - - + + + ${this._yamlMode + ? html` + + ${this.hass!.localize( + "ui.panel.lovelace.menu.refresh" + )} + + + ${this.hass!.localize( + "ui.panel.lovelace.unused_entities.title" + )} + + ` + : ""} + ${(this.hass.panels.lovelace?.config as LovelacePanelConfig) + ?.mode === "yaml" + ? html` + + ${this.hass!.localize( + "ui.panel.lovelace.menu.reload_resources" + )} + + ` + : ""} + ${this.hass!.user!.is_admin && !this.hass!.config.safe_mode + ? html` + + ${this.hass!.localize( + "ui.panel.lovelace.menu.configure_ui" + )} + + ` + : ""} + + ${this.hass!.localize("ui.panel.lovelace.menu.help")} + + `} ${this.lovelace!.config.views.length > 1 || this._editMode @@ -321,14 +315,14 @@ class HUIRoot extends LitElement { : view.title || "Unnamed view"} ${this._editMode ? html` - + > + > + + ` : ""} @@ -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; } diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index 0ff04793ab..ed5a68cc43 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -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 > * { diff --git a/src/panels/shopping-list/ha-panel-shopping-list.js b/src/panels/shopping-list/ha-panel-shopping-list.js index db11be6cc0..0f9e591367 100644 --- a/src/panels/shopping-list/ha-panel-shopping-list.js +++ b/src/panels/shopping-list/ha-panel-shopping-list.js @@ -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" > - - + - - [[localize('ui.panel.shopping-list.clear_completed')]] - - + label="Menu" + slot="trigger" + > + + + [[localize('ui.panel.shopping-list.clear_completed')]] + + diff --git a/src/translations/en.json b/src/translations/en.json index 2bb5d2bade..57e177903d 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -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"