diff --git a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts index 2d8c43c614..3791ffd2e0 100644 --- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts +++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts @@ -50,20 +50,7 @@ class HassioMarkdownDialog extends LitElement { haStyleDialog, hassioStyle, css` - app-toolbar { - margin: 0; - padding: 0 16px; - color: var(--primary-text-color); - background-color: var(--secondary-background-color); - } - app-toolbar [main-title] { - margin-left: 16px; - } @media all and (max-width: 450px), all and (max-height: 500px) { - app-toolbar { - color: var(--text-primary-color); - background-color: var(--primary-color); - } ha-markdown { padding: 16px; } diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts index b8d949daf1..027b8b53ab 100644 --- a/hassio/src/dialogs/network/dialog-hassio-network.ts +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -597,10 +597,6 @@ export class DialogHassioNetwork margin-left: 8px; } - :host([rtl]) app-toolbar { - direction: rtl; - text-align: right; - } .container { padding: 0 8px 4px; } diff --git a/package.json b/package.json index 0a22ba8fd3..58513dbc1d 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "@material/mwc-tab-bar": "0.27.0", "@material/mwc-textarea": "0.27.0", "@material/mwc-textfield": "0.27.0", + "@material/mwc-top-app-bar": "0.27.0", "@material/mwc-top-app-bar-fixed": "0.27.0", "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0", "@material/web": "=1.0.0-pre.4", diff --git a/src/components/ha-drawer.ts b/src/components/ha-drawer.ts new file mode 100644 index 0000000000..dd1a6d99be --- /dev/null +++ b/src/components/ha-drawer.ts @@ -0,0 +1,22 @@ +import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base"; +import { styles } from "@material/mwc-drawer/mwc-drawer.css"; +import { css } from "lit"; +import { customElement } from "lit/decorators"; + +@customElement("ha-drawer") +export class HaDrawer extends DrawerBase { + static override styles = [ + styles, + css` + .mdc-drawer { + top: 0; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-drawer": HaDrawer; + } +} diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts index c778b00331..2d55a1998d 100644 --- a/src/components/ha-header-bar.ts +++ b/src/components/ha-header-bar.ts @@ -32,6 +32,9 @@ export class HaHeaderBar extends LitElement { return [ unsafeCSS(topAppBarStyles), css` + .mdc-top-app-bar__row { + height: var(--header-bar-height, 64px); + } .mdc-top-app-bar { position: static; color: var(--mdc-theme-on-primary, #fff); diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index a3fd399b08..156b4e777c 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -846,17 +846,9 @@ class HaSidebar extends SubscribeMixin(LitElement) { -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; - border-right: 1px solid var(--divider-color); background-color: var(--sidebar-background-color); - width: 56px; - } - :host([expanded]) { - width: 256px; - width: calc(256px + env(safe-area-inset-left)); - } - :host([rtl]) { - border-right: 0; - border-left: 1px solid var(--divider-color); + width: 100%; + box-sizing: border-box; } .menu { height: var(--header-height); @@ -1070,8 +1062,8 @@ class HaSidebar extends SubscribeMixin(LitElement) { .notification-badge, .configuration-badge { - left: calc(var(--app-drawer-width) - 42px); position: absolute; + left: calc(var(--app-drawer-width, 248px) - 42px); min-width: 20px; box-sizing: border-box; border-radius: 50%; diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts new file mode 100644 index 0000000000..39e223b537 --- /dev/null +++ b/src/components/ha-top-app-bar-fixed.ts @@ -0,0 +1,34 @@ +import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base"; +import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css"; +import { css } from "lit"; +import { customElement } from "lit/decorators"; + +@customElement("ha-top-app-bar-fixed") +export class HaTopAppBarFixed extends TopAppBarFixedBase { + static override styles = [ + styles, + css` + .mdc-top-app-bar__row { + height: var(--header-height); + } + .mdc-top-app-bar--fixed-adjust { + padding-top: var(--header-height); + } + .mdc-top-app-bar { + --mdc-typography-headline6-font-weight: 400; + color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff)); + background-color: var( + --app-header-background-color, + var(--mdc-theme-primary) + ); + border-bottom: var(--app-header-border-bottom); + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-top-app-bar-fixed": HaTopAppBarFixed; + } +} diff --git a/src/components/ha-top-app-bar.ts b/src/components/ha-top-app-bar.ts new file mode 100644 index 0000000000..02330c8b56 --- /dev/null +++ b/src/components/ha-top-app-bar.ts @@ -0,0 +1,34 @@ +import { TopAppBarBase } from "@material/mwc-top-app-bar/mwc-top-app-bar-base"; +import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css"; +import { css } from "lit"; +import { customElement } from "lit/decorators"; + +@customElement("ha-top-app-bar") +export class HaTopAppBar extends TopAppBarBase { + static override styles = [ + styles, + css` + .mdc-top-app-bar__row { + height: var(--header-height); + } + .mdc-top-app-bar--fixed-adjust { + padding-top: var(--header-height); + } + .mdc-top-app-bar { + --mdc-typography-headline6-font-weight: 400; + color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff)); + background-color: var( + --app-header-background-color, + var(--mdc-theme-primary) + ); + border-bottom: var(--app-header-border-bottom); + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-top-app-bar": HaTopAppBar; + } +} diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js deleted file mode 100644 index 303c2aaae6..0000000000 --- a/src/dialogs/notifications/notification-drawer.js +++ /dev/null @@ -1,207 +0,0 @@ -import "@material/mwc-button"; -import "@polymer/app-layout/app-drawer/app-drawer"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import { computeDomain } from "../../common/entity/compute_domain"; -import "../../components/ha-icon-button-prev"; -import { subscribeNotifications } from "../../data/persistent_notification"; -import { EventsMixin } from "../../mixins/events-mixin"; -import LocalizeMixin from "../../mixins/localize-mixin"; -import "./notification-item"; - -/* - * @appliesMixin EventsMixin - * @appliesMixin LocalizeMixin - */ -export class HuiNotificationDrawer extends EventsMixin( - LocalizeMixin(PolymerElement) -) { - static get template() { - return html` - - - -
[[localize('ui.notification_drawer.title')]]
- - - -
- - -
- - `; - } - - static get properties() { - return { - hass: Object, - open: { - type: Boolean, - observer: "_openChanged", - }, - notifications: { - type: Array, - computed: "_computeNotifications(open, hass, _notificationsBackend)", - observer: "_notificationsChanged", - }, - _notificationsBackend: { - type: Array, - value: [], - }, - }; - } - - ready() { - super.ready(); - window.addEventListener("location-changed", () => { - // close drawer when we navigate away. - if (this.open) { - this.open = false; - } - }); - } - - _closeDrawer(ev) { - ev.stopPropagation(); - this.open = false; - } - - _dismissAll() { - this.notifications.forEach((notification) => { - this.hass.callService("persistent_notification", "dismiss", { - notification_id: notification.notification_id, - }); - }); - this.open = false; - } - - _empty(notifications) { - return notifications.length === 0; - } - - _moreThanOne(notifications) { - return notifications.length > 1; - } - - _openChanged(open) { - if (open) { - // Render closed then animate open - this._unsubNotifications = subscribeNotifications( - this.hass.connection, - (notifications) => { - this._notificationsBackend = notifications; - } - ); - } else if (this._unsubNotifications) { - this._unsubNotifications(); - this._unsubNotifications = undefined; - } - } - - _notificationsChanged(newNotifications, oldNotifications) { - // automatically close drawer when last notification has been dismissed - if ( - this.open && - oldNotifications.length > 0 && - newNotifications.length === 0 - ) { - this.open = false; - } - } - - _computeNotifications(open, hass, notificationsBackend) { - if (!open) { - return []; - } - - const configuratorEntities = Object.keys(hass.states) - .filter((entityId) => computeDomain(entityId) === "configurator") - .map((entityId) => hass.states[entityId]); - - const notifications = notificationsBackend.concat(configuratorEntities); - - notifications.sort((n1, n2) => { - const d1 = new Date(n1.created_at); - const d2 = new Date(n2.created_at); - - if (d1 < d2) { - return 1; - } - if (d1 > d2) { - return -1; - } - return 0; - }); - - return notifications; - } - - showDialog({ narrow }) { - this.style.setProperty( - "--app-drawer-width", - narrow ? window.innerWidth + "px" : "500px" - ); - this.$.drawer.open(); - } -} -customElements.define("notification-drawer", HuiNotificationDrawer); diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts new file mode 100644 index 0000000000..15b39e54e0 --- /dev/null +++ b/src/dialogs/notifications/notification-drawer.ts @@ -0,0 +1,190 @@ +import "@material/mwc-button"; +import { UnsubscribeFunc } from "home-assistant-js-websocket"; +import { LitElement, html, css, nothing } from "lit"; +import { customElement, property, state } from "lit/decorators"; +import { fireEvent } from "../../common/dom/fire_event"; +import { computeDomain } from "../../common/entity/compute_domain"; +import "../../components/ha-icon-button-prev"; +import { + PersistentNotification, + subscribeNotifications, +} from "../../data/persistent_notification"; +import { HomeAssistant } from "../../types"; +import "./notification-item"; +import "../../components/ha-header-bar"; +import "../../components/ha-drawer"; + +@customElement("notification-drawer") +export class HuiNotificationDrawer extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @state() private _notifications: PersistentNotification[] = []; + + @state() private _open = false; + + private _unsubNotifications?: UnsubscribeFunc; + + connectedCallback() { + super.connectedCallback(); + window.addEventListener("location-changed", this.closeDialog); + } + + disconnectedCallback() { + super.disconnectedCallback(); + window.addEventListener("location-changed", this.closeDialog); + } + + showDialog({ narrow }) { + this._unsubNotifications = subscribeNotifications( + this.hass.connection, + (notifications) => { + if (this._notifications.length && !notifications.length) { + this.closeDialog(); + return; + } + this._notifications = notifications; + } + ); + this.style.setProperty( + "--mdc-drawer-width", + narrow ? window.innerWidth + "px" : "500px" + ); + this._open = true; + } + + closeDialog = () => { + if (this._unsubNotifications) { + this._unsubNotifications(); + this._unsubNotifications = undefined; + } + this._notifications = []; + this._open = false; + fireEvent(this, "dialog-closed", { dialog: this.localName }); + }; + + protected render() { + if (!this._open) { + return nothing; + } + const configuratorEntities = Object.keys(this.hass.states) + .filter((entityId) => computeDomain(entityId) === "configurator") + .map((entityId) => this.hass.states[entityId]); + + // @ts-ignore + const notifications = this._notifications.concat(configuratorEntities); + + notifications.sort((n1, n2) => { + const d1 = new Date(n1.created_at); + const d2 = new Date(n2.created_at); + + if (d1 < d2) { + return 1; + } + if (d1 > d2) { + return -1; + } + return 0; + }); + + return html` + + +
+ ${this.hass.localize("ui.notification_drawer.title")} +
+ + + +
+ ${notifications.length + ? html`${notifications.map( + (notification) => html`
+ +
` + )} + ${this._notifications.length > 1 + ? html`
+ + ${this.hass.localize( + "ui.notification_drawer.dismiss_all" + )} + +
` + : ""}` + : html`
+ ${this.hass.localize("ui.notification_drawer.empty")} +
+
`} +
+ + `; + } + + private _closeDrawer(ev) { + ev.stopPropagation(); + this.closeDialog(); + } + + private _dismissAll() { + this._notifications.forEach((notification) => { + this.hass.callService("persistent_notification", "dismiss", { + notification_id: notification.notification_id, + }); + }); + this.closeDialog(); + } + + static styles = css` + ha-header-bar { + --mdc-theme-on-primary: var(--primary-text-color); + --mdc-theme-primary: var(--primary-background-color); + border-bottom: 1px solid var(--divider-color); + display: block; + --header-bar-height: var(--header-height); + } + + .notifications { + overflow-y: auto; + padding-top: 16px; + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + padding-bottom: env(safe-area-inset-bottom); + height: calc(100% - 1px - var(--header-height)); + box-sizing: border-box; + background-color: var(--primary-background-color); + color: var(--primary-text-color); + } + + .notification { + padding: 0 16px 16px; + } + + .notification-actions { + padding: 0 16px 16px; + text-align: center; + } + + .empty { + padding: 16px; + text-align: center; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "notification-drawer": HuiNotificationDrawer; + } +} diff --git a/src/dialogs/notifications/show-notification-drawer.ts b/src/dialogs/notifications/show-notification-drawer.ts index 5d4902f64a..c18ab74570 100644 --- a/src/dialogs/notifications/show-notification-drawer.ts +++ b/src/dialogs/notifications/show-notification-drawer.ts @@ -9,7 +9,7 @@ export const showNotificationDrawer = ( dialogParams: NotificationDrawerParams ): void => { fireEvent(element, "show-dialog", { - dialogTag: "notification-drawer" as any, // Not in TS yet + dialogTag: "notification-drawer", dialogImport: () => import("./notification-drawer"), dialogParams, }); diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index 44bd2c1382..12b72f9b1d 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -30,7 +30,6 @@ import { import { debounce } from "../../common/util/debounce"; import "../../components/ha-chip"; import "../../components/ha-circular-progress"; -import "../../components/ha-header-bar"; import "../../components/ha-icon-button"; import "../../components/ha-list-item"; import "../../components/ha-textfield"; diff --git a/src/html/_style_base.html.template b/src/html/_style_base.html.template index e1e60a32b6..34de4456f5 100644 --- a/src/html/_style_base.html.template +++ b/src/html/_style_base.html.template @@ -1,5 +1,8 @@ - - - - - + - + `; } @@ -126,12 +97,11 @@ export class HomeAssistantMain extends LitElement { if (this._sidebarEditMode) { if (this._sidebarNarrow) { - this.drawer.open(); + this._drawerOpen = true; } else { fireEvent(this, "hass-dock-sidebar", { dock: "docked", }); - setTimeout(() => this.appLayout.resetLayout()); } } } @@ -148,16 +118,11 @@ export class HomeAssistantMain extends LitElement { return; } if (this._sidebarNarrow) { - if (this.drawer.opened) { - this.drawer.close(); - } else { - this.drawer.open(); - } + this._drawerOpen = !this._drawerOpen; } else { fireEvent(this, "hass-dock-sidebar", { dock: this.hass.dockedSidebar === "auto" ? "docked" : "auto", }); - setTimeout(() => this.appLayout.resetLayout()); } }); @@ -168,6 +133,12 @@ export class HomeAssistantMain extends LitElement { }); } + public willUpdate(changedProps: PropertyValues) { + if (changedProps.has("route") && this._sidebarNarrow) { + this._drawerOpen = false; + } + } + protected updated(changedProps: PropertyValues) { super.updated(changedProps); @@ -176,40 +147,15 @@ export class HomeAssistantMain extends LitElement { "expanded", this.narrow || this.hass.dockedSidebar !== "auto" ); - - if (changedProps.has("route") && this._sidebarNarrow) { - this.drawer.close(); - } - - if (!changedProps.has("hass")) { - return; - } - - const oldHass = changedProps.get("hass") as HomeAssistant | undefined; - - // Make app-drawer adjust to a potential LTR/RTL change - if (oldHass && oldHass.language !== this.hass!.language) { - this.drawer._resetPosition(); - } - } - - private _drawerTransitioned(ev: CustomEvent) { - const drawer = ev.currentTarget as AppDrawerElement; - if (!drawer.opened) { - this._sidebarEditMode = false; - } } private get _sidebarNarrow() { return this.narrow || this.hass.dockedSidebar === "always_hidden"; } - private get drawer(): AppDrawerElement { - return this.shadowRoot!.querySelector("app-drawer")!; - } - - private get appLayout(): AppDrawerLayoutElement { - return this.shadowRoot!.querySelector("app-drawer-layout")!; + private _drawerClosed() { + this._drawerOpen = false; + this._sidebarEditMode = false; } static get styles(): CSSResultGroup { @@ -218,16 +164,21 @@ export class HomeAssistantMain extends LitElement { color: var(--primary-text-color); /* remove the grey tap highlights in iOS on the fullscreen touch targets */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - --app-drawer-width: 56px; + --mdc-drawer-width: 56px; } :host([expanded]) { - --app-drawer-width: calc(256px + env(safe-area-inset-left)); + --mdc-drawer-width: calc(256px + env(safe-area-inset-left)); } partial-panel-resolver, ha-sidebar { /* allow a light tap highlight on the actual interface elements */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); } + @media (min-width: 870px) { + partial-panel-resolver { + --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width)); + } + } `; } } diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts index de3410f3a8..88933e214a 100644 --- a/src/panels/calendar/ha-panel-calendar.ts +++ b/src/panels/calendar/ha-panel-calendar.ts @@ -1,8 +1,6 @@ import "@material/mwc-checkbox"; import "@material/mwc-formfield"; import { mdiRefresh } from "@mdi/js"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, CSSResultGroup, @@ -25,10 +23,10 @@ import { fetchCalendarEvents, getCalendars, } from "../../data/calendar"; -import "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; import type { CalendarViewChanged, HomeAssistant } from "../../types"; import "./ha-full-calendar"; +import "../../components/ha-top-app-bar-fixed"; @customElement("ha-panel-calendar") class PanelCalendar extends LitElement { @@ -59,21 +57,19 @@ class PanelCalendar extends LitElement { protected render(): TemplateResult { return html` - - - - -
${this.hass.localize("panel.calendar")}
- - - + + +
${this.hass.localize("panel.calendar")}
+
@@ -108,7 +104,7 @@ class PanelCalendar extends LitElement { @view-changed=${this._handleViewChanged} >
- + `; } diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 3000c3ba91..ddc424f20d 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -14,8 +14,6 @@ import { mdiStopCircleOutline, mdiTransitConnection, } from "@mdi/js"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, @@ -54,7 +52,6 @@ import { showAlertDialog, showConfirmationDialog, } from "../../../dialogs/generic/show-dialog-box"; -import "../../../layouts/ha-app-layout"; import "../../../layouts/hass-subpage"; import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin"; import { haStyle } from "../../../resources/styles"; diff --git a/src/panels/config/core/updates/dialog-join-beta.ts b/src/panels/config/core/updates/dialog-join-beta.ts index c6647b93a6..600ac954c9 100644 --- a/src/panels/config/core/updates/dialog-join-beta.ts +++ b/src/panels/config/core/updates/dialog-join-beta.ts @@ -5,7 +5,6 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-alert"; import { createCloseHeading } from "../../../../components/ha-dialog"; -import "../../../../components/ha-header-bar"; import { HassDialog } from "../../../../dialogs/make-dialog-manager"; import { haStyleDialog } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 7c539b720d..b8d8ee15ab 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -6,8 +6,6 @@ import { mdiPower, mdiUpdate, } from "@mdi/js"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import { HassEntities, UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, @@ -28,6 +26,7 @@ import "../../../components/ha-list-item"; import "../../../components/ha-menu-button"; import "../../../components/ha-svg-icon"; import "../../../components/ha-tip"; +import "../../../components/ha-top-app-bar-fixed"; import { CloudStatus } from "../../../data/cloud"; import { RepairsIssue, @@ -41,7 +40,6 @@ import { } from "../../../data/update"; import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar"; import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart"; -import "../../../layouts/ha-app-layout"; import { PageNavigation } from "../../../layouts/hass-tabs-subpage"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { haStyle } from "../../../resources/styles"; @@ -182,43 +180,43 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) { this._repairsIssues; return html` - - - - -
${this.hass.localize("panel.config")}
- - - + + +
${this.hass.localize("panel.config")}
- - ${this.hass.localize("ui.panel.config.updates.check_updates")} - - + + + - - ${this.hass.localize( - "ui.panel.config.system_dashboard.restart_homeassistant" - )} - - - - - + + ${this.hass.localize("ui.panel.config.updates.check_updates")} + + + + + ${this.hass.localize( + "ui.panel.config.system_dashboard.restart_homeassistant" + )} + + + ${this._tip} - + `; } diff --git a/src/panels/config/network/supervisor-hostname.ts b/src/panels/config/network/supervisor-hostname.ts index 85dd0bf471..ac03896260 100644 --- a/src/panels/config/network/supervisor-hostname.ts +++ b/src/panels/config/network/supervisor-hostname.ts @@ -10,7 +10,6 @@ import "../../../components/ha-card"; import "../../../components/ha-circular-progress"; import "../../../components/ha-expansion-panel"; import "../../../components/ha-formfield"; -import "../../../components/ha-header-bar"; import "../../../components/ha-icon-button"; import "../../../components/ha-radio"; import "../../../components/ha-settings-row"; diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts index e0a087886e..e6ac16e72b 100644 --- a/src/panels/config/network/supervisor-network.ts +++ b/src/panels/config/network/supervisor-network.ts @@ -14,7 +14,6 @@ import "../../../components/ha-card"; import "../../../components/ha-circular-progress"; import "../../../components/ha-expansion-panel"; import "../../../components/ha-formfield"; -import "../../../components/ha-header-bar"; import "../../../components/ha-icon-button"; import "../../../components/ha-radio"; import { extractApiErrorMessage } from "../../../data/hassio/common"; @@ -549,12 +548,6 @@ export class HassioNetwork extends LitElement { static get styles(): CSSResultGroup { return [ css` - ha-header-bar { - --mdc-theme-on-primary: var(--primary-text-color); - --mdc-theme-primary: var(--mdc-theme-surface); - flex-shrink: 0; - } - mwc-tab-bar { border-bottom: 1px solid var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)); @@ -573,11 +566,6 @@ export class HassioNetwork extends LitElement { mwc-button.scan { margin-left: 8px; } - - :host([rtl]) app-toolbar { - direction: rtl; - text-align: right; - } ha-expansion-panel { --expansion-panel-summary-padding: 0 16px; margin: 4px 0; diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 68cc411a2c..7858cde13c 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -9,8 +9,6 @@ import { mdiPlay, mdiTransitConnection, } from "@mdi/js"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, CSSResultGroup, @@ -54,7 +52,6 @@ import { triggerScript, } from "../../../data/script"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; -import "../../../layouts/ha-app-layout"; import "../../../layouts/hass-subpage"; import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin"; import { haStyle } from "../../../resources/styles"; diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index 9f9f6f1f7f..728398a2c9 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -1,12 +1,9 @@ -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/paper-tabs/paper-tab"; +import "@polymer/paper-tabs/paper-tabs"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { navigate } from "../../common/navigate"; import "../../components/ha-menu-button"; -import "../../components/ha-tabs"; -import "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; import { HomeAssistant, Route } from "../../types"; import "./developer-tools-router"; @@ -27,57 +24,54 @@ class PanelDeveloperTools extends LitElement { protected render(): TemplateResult { const page = this._page; return html` - - - - -
${this.hass.localize("panel.developer_tools")}
- - - - ${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")} - - - ${this.hass.localize( - "ui.panel.developer-tools.tabs.states.title" - )} - - - ${this.hass.localize( - "ui.panel.developer-tools.tabs.services.title" - )} - - - ${this.hass.localize( - "ui.panel.developer-tools.tabs.templates.title" - )} - - - ${this.hass.localize( - "ui.panel.developer-tools.tabs.events.title" - )} - - - ${this.hass.localize( - "ui.panel.developer-tools.tabs.statistics.title" - )} - - - - - +
+
+ +
+ ${this.hass.localize("panel.developer_tools")} +
+
+ + + ${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")} + + + ${this.hass.localize("ui.panel.developer-tools.tabs.states.title")} + + + ${this.hass.localize( + "ui.panel.developer-tools.tabs.services.title" + )} + + + ${this.hass.localize( + "ui.panel.developer-tools.tabs.templates.title" + )} + + + ${this.hass.localize("ui.panel.developer-tools.tabs.events.title")} + + + ${this.hass.localize( + "ui.panel.developer-tools.tabs.statistics.title" + )} + + +
+ `; } @@ -99,14 +93,36 @@ class PanelDeveloperTools extends LitElement { haStyle, css` :host { + display: block; + height: 100%; color: var(--primary-text-color); --paper-card-header-color: var(--primary-text-color); } + .header { + background-color: var(--app-header-background-color); + color: var(--app-header-text-color, white); + border-bottom: var(--app-header-border-bottom, none); + } + .toolbar { + height: var(--header-height); + display: flex; + align-items: center; + font-size: 20px; + padding: 0 16px; + font-weight: 400; + box-sizing: border-box; + } + .main-title { + margin: 0 0 0 24px; + line-height: 20px; + flex-grow: 1; + } developer-tools-router { display: block; - height: calc(100vh - 104px); + height: calc(100% - var(--header-height) - 48px); + overflow: auto; } - ha-tabs { + paper-tabs { margin-left: max(env(safe-area-inset-left), 24px); margin-right: max(env(safe-area-inset-right), 24px); --paper-tabs-selection-bar-color: var( diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts index a81a6afef2..6c32b790ff 100644 --- a/src/panels/energy/ha-panel-energy.ts +++ b/src/panels/energy/ha-panel-energy.ts @@ -1,5 +1,3 @@ -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, CSSResultGroup, @@ -11,12 +9,12 @@ import { import { customElement, property, state } from "lit/decorators"; import "../../components/ha-menu-button"; import { LovelaceConfig } from "../../data/lovelace"; -import "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; import { HomeAssistant } from "../../types"; import "../lovelace/components/hui-energy-period-selector"; import { Lovelace } from "../lovelace/types"; import "../lovelace/views/hui-view"; +import "../../components/ha-top-app-bar-fixed"; const ENERGY_LOVELACE_CONFIG: LovelaceConfig = { views: [ @@ -62,24 +60,23 @@ class PanelEnergy extends LitElement { protected render(): TemplateResult { return html` - - - - -
${this.hass.localize("panel.energy")}
- ${this.narrow - ? "" - : html` - - `} - - + + +
${this.hass.localize("panel.energy")}
+ ${this.narrow + ? "" + : html` + + `} - + `; } @@ -119,10 +116,6 @@ class PanelEnergy extends LitElement { return [ haStyle, css` - app-toolbar { - display: flex; - justify-content: space-between; - } hui-energy-period-selector { width: 100%; padding-left: 16px; diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index 5a4af1673a..b5f1c2bc13 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -1,6 +1,4 @@ import { mdiFilterRemove, mdiRefresh } from "@mdi/js"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import { addDays, differenceInHours, @@ -54,10 +52,11 @@ import { HistoryResult, subscribeHistory, } from "../../data/history"; -import "../../layouts/ha-app-layout"; import { SubscribeMixin } from "../../mixins/subscribe-mixin"; import { haStyle } from "../../resources/styles"; import { HomeAssistant } from "../../types"; +import "../../components/ha-top-app-bar-fixed"; +import "../../components/ha-icon-button-arrow-prev"; class HaPanelHistory extends SubscribeMixin(LitElement) { @property({ attribute: false }) hass!: HomeAssistant; @@ -137,40 +136,40 @@ class HaPanelHistory extends SubscribeMixin(LitElement) { protected render() { return html` - - - - ${this._showBack - ? html` - - ` - : html` - - `} -
${this.hass.localize("panel.history")}
- ${this._targetPickerValue - ? html` - - ` - : ""} - - - + + ${this._showBack + ? html` + + ` + : html` + + `} +
${this.hass.localize("panel.history")}
+ ${this._targetPickerValue + ? html` + + ` + : ""} +
@@ -210,7 +209,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) { `}
- + `; } diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts index 45adbd6180..aba47b77d4 100644 --- a/src/panels/logbook/ha-panel-logbook.ts +++ b/src/panels/logbook/ha-panel-logbook.ts @@ -1,6 +1,4 @@ import { mdiRefresh } from "@mdi/js"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import { addDays, endOfToday, @@ -24,9 +22,10 @@ import "../../components/entity/ha-entity-picker"; import "../../components/ha-date-range-picker"; import type { DateRangePickerRanges } from "../../components/ha-date-range-picker"; import "../../components/ha-icon-button"; +import "../../components/ha-icon-button-arrow-prev"; import "../../components/ha-menu-button"; +import "../../components/ha-top-app-bar-fixed"; import { filterLogbookCompatibleEntities } from "../../data/logbook"; -import "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; import { HomeAssistant } from "../../types"; import "./ha-logbook"; @@ -64,29 +63,28 @@ export class HaPanelLogbook extends LitElement { protected render() { return html` - - - - ${this._showBack - ? html` - - ` - : html` - - `} -
${this.hass.localize("panel.logbook")}
- - - + + ${this._showBack + ? html` + + ` + : html` + + `} +
${this.hass.localize("panel.logbook")}
+
- + `; } diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index ef733beeb4..4cfc118b69 100644 --- a/src/panels/lovelace/components/hui-energy-period-selector.ts +++ b/src/panels/lovelace/components/hui-energy-period-selector.ts @@ -44,7 +44,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { @property() public collectionKey?: string; - @property({ type: Boolean, reflect: true }) public narrow = false; + @property({ type: Boolean, reflect: true }) public narrow?; @state() _startDate?: Date; @@ -56,7 +56,9 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { public connectedCallback() { super.connectedCallback(); - toggleAttribute(this, "narrow", this.offsetWidth < 600); + if (this.narrow !== false) { + toggleAttribute(this, "narrow", this.offsetWidth < 600); + } } public hassSubscribe(): UnsubscribeFunc[] { diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index 4d200be7a5..9bf7cb9cc5 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -1,8 +1,6 @@ import { undoDepth } from "@codemirror/commands"; import "@material/mwc-button"; import { mdiClose } from "@mdi/js"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import { dump, load } from "js-yaml"; import { css, @@ -25,11 +23,11 @@ import { showAlertDialog, showConfirmationDialog, } from "../../dialogs/generic/show-dialog-box"; -import "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import { showToast } from "../../util/toast"; import type { Lovelace } from "./types"; +import "../../components/ha-top-app-bar-fixed"; const lovelaceStruct = type({ title: optional(string()), @@ -50,43 +48,38 @@ class LovelaceFullConfigEditor extends LitElement { protected render(): TemplateResult | void { return html` - - - - -
- ${this.hass!.localize( - "ui.panel.lovelace.editor.raw_editor.header" - )} -
-
+
+ ${this.hass!.localize("ui.panel.lovelace.editor.raw_editor.header")} +
+
- ${this._changed - ? this.hass!.localize( - "ui.panel.lovelace.editor.raw_editor.unsaved_changes" - ) - : this.hass!.localize( - "ui.panel.lovelace.editor.raw_editor.saved" - )} -
- ${this.hass!.localize( - "ui.panel.lovelace.editor.raw_editor.save" - )} - - + saved: this._saving! === false || this._changed === true, + })}" + > + ${this._changed + ? this.hass!.localize( + "ui.panel.lovelace.editor.raw_editor.unsaved_changes" + ) + : this.hass!.localize("ui.panel.lovelace.editor.raw_editor.saved")} +
+ ${this.hass!.localize( + "ui.panel.lovelace.editor.raw_editor.save" + )}
- + `; } @@ -142,15 +135,11 @@ class LovelaceFullConfigEditor extends LitElement { css` :host { --code-mirror-height: 100%; - } - - ha-app-layout { - height: 100vh; - } - - app-toolbar { - background-color: var(--app-header-edit-background-color, #455a64); - color: var(--app-header-edit-text-color, #fff); + --app-header-background-color: var( + --app-header-edit-background-color, + #455a64 + ); + --app-header-text-color: var(--app-header-edit-text-color, #fff); } mwc-button[disabled] { @@ -158,14 +147,14 @@ class LovelaceFullConfigEditor extends LitElement { border-radius: 4px; } - .comments { - font-size: 16px; - } - .content { height: calc(100vh - var(--header-height)); } + .comments { + font-size: 16px; + } + .save-button { opacity: 0; font-size: 14px; diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index ae5bef430e..84ffc69bbe 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -16,9 +16,6 @@ import { mdiShape, mdiViewDashboard, } from "@mdi/js"; -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 "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tabs"; import { @@ -35,7 +32,6 @@ import { ifDefined } from "lit/directives/if-defined"; import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { fireEvent } from "../../common/dom/fire_event"; -import scrollToTarget from "../../common/dom/scroll-to-target"; import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event"; import { navigate } from "../../common/navigate"; import { constructUrlCurrentPath } from "../../common/url/construct-url"; @@ -66,8 +62,6 @@ import { } from "../../dialogs/generic/show-dialog-box"; import { showQuickBar } from "../../dialogs/quick-bar/show-dialog-quick-bar"; import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog"; -import "../../layouts/ha-app-layout"; -import type { haAppLayout } from "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import { documentationUrl } from "../../util/documentation-url"; @@ -93,7 +87,7 @@ class HUIRoot extends LitElement { @state() private _curView?: number | "hass-unused-entities"; - @query("ha-app-layout", true) private _appLayout!: haAppLayout; + @query("#view", true) _view!: HTMLDivElement; private _viewCache?: { [viewId: string]: HUIView }; @@ -121,20 +115,20 @@ class HUIRoot extends LitElement { typeof this._curView === "number" ? views[this._curView] : undefined; return html` - - - ${this._editMode - ? html` - -
+
+
+ ${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 config available in the demo */ - ? "" - : html` - - ${this.hass!.localize( - "ui.panel.lovelace.editor.menu.manage_dashboards" - )} - - ${this.hass.userData?.showAdvanced - ? html` + + + + ${__DEMO__ /* No unused entities available in the demo */ + ? "" + : html` + + - - ${this.hass!.localize( - "ui.panel.lovelace.editor.menu.manage_resources" - )} - ` - : ""} `} - - - ` - : html` - + + ${this.hass!.localize( + "ui.panel.lovelace.unused_entities.title" + )} + + `} + + + ${this.hass!.localize( + "ui.panel.lovelace.editor.menu.raw_editor" + )} + + ${__DEMO__ /* No config available in the demo */ + ? "" + : html` + + ${this.hass!.localize( + "ui.panel.lovelace.editor.menu.manage_dashboards" + )} + + ${this.hass.userData?.showAdvanced + ? html` + + ${this.hass!.localize( + "ui.panel.lovelace.editor.menu.manage_resources" + )} + ` + : ""} `} + +
+ ` + : html` ${curViewConfig?.subview ? html` ` : html` `} ${curViewConfig?.subview - ? html`
${curViewConfig.title}
` + ? html`
${curViewConfig.title}
` : views.filter((view) => !view.subview).length > 1 ? html` ` - : html`
${this.config.title}
`} - ${!this.narrow - ? html` - - ` - : ""} - ${!this.narrow && - this._conversation(this.hass.config.components) - ? html` - - ` - : ""} - ${this._showButtonMenu - ? html` - - - - ${this.narrow - ? html` - - ${this.hass!.localize( - "ui.panel.lovelace.menu.search" - )} - - - - ` - : ""} - ${this.narrow && - this._conversation(this.hass.config.components) - ? html` - - ${this.hass!.localize( - "ui.panel.lovelace.menu.assist" - )} - - - - ` - : ""} - ${this._yamlMode - ? html` - - ${this.hass!.localize("ui.common.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._editMode - ? html` - - - ${this.hass!.localize( - "ui.panel.lovelace.menu.help" - )} - - - - ` - : ""} - - ` - : ""} - - `} - ${this._editMode - ? html` -
- - ${views.map( - (view) => html` - e.user === this.hass!.user?.id - )) || - view.visible === false) - ), - })} - > - ${this._editMode - ? html` - - ` - : ""} - ${view.icon - ? html` - - ` - : view.title || "Unnamed view"} - ${this._editMode - ? html` - - - ` - : ""} - - ` - )} - ${this._editMode + : html`
${this.config.title}
`} +
+ ${!this.narrow ? html` ` : ""} - -
+ ${!this.narrow && + this._conversation(this.hass.config.components) + ? html` + + ` + : ""} + ${this._showButtonMenu + ? html` + + + + ${this.narrow + ? html` + + ${this.hass!.localize( + "ui.panel.lovelace.menu.search" + )} + + + + ` + : ""} + ${this.narrow && + this._conversation(this.hass.config.components) + ? html` + + ${this.hass!.localize( + "ui.panel.lovelace.menu.assist" + )} + + + + ` + : ""} + ${this._yamlMode + ? html` + + ${this.hass!.localize("ui.common.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._editMode + ? html` + + + ${this.hass!.localize( + "ui.panel.lovelace.menu.help" + )} + + + + ` + : ""} + + ` + : ""} +
+ `} +
+ ${this._editMode + ? html` + + ${views.map( + (view) => html` + e.user === this.hass!.user?.id + )) || + view.visible === false) + ), + })} + > + ${this._editMode + ? html` + + ` + : ""} + ${view.icon + ? html` + + ` + : view.title || "Unnamed view"} + ${this._editMode + ? html` + + + ` + : ""} + + ` + )} + ${this._editMode + ? html` + + ` + : ""} + ` : ""} - +
- +
`; } @@ -668,10 +672,6 @@ class HUIRoot extends LitElement { return this.lovelace!.editMode; } - private get _layout(): any { - return this.shadowRoot!.getElementById("layout"); - } - private get _viewRoot(): HTMLDivElement { return this.shadowRoot!.getElementById("view") as HTMLDivElement; } @@ -862,7 +862,7 @@ class HUIRoot extends LitElement { const path = this.config.views[viewIndex].path || viewIndex; this._navigateToView(path); } - scrollToTarget(this, this._layout.header.scrollTarget); + this._view.scrollTo(0, 0); } private _selectView(viewIndex: HUIRoot["_curView"], force: boolean): void { @@ -920,12 +920,9 @@ class HUIRoot extends LitElement { const configBackground = viewConfig.background || this.config.background; if (configBackground) { - this._appLayout.style.setProperty( - "--lovelace-background", - configBackground - ); + this.style.setProperty("--lovelace-background", configBackground); } else { - this._appLayout.style.removeProperty("--lovelace-background"); + this.style.removeProperty("--lovelace-background"); } root.appendChild(view); @@ -942,20 +939,43 @@ class HUIRoot extends LitElement { -webkit-user-select: none; -moz-user-select: none; } - - ha-app-layout { - min-height: 100%; + .header { + background-color: var(--app-header-background-color); + color: var(--app-header-text-color, white); + border-bottom: var(--app-header-border-bottom, none); + position: fixed; + top: 0; + width: var(--mdc-top-app-bar-width, 100%); + z-index: 2; + } + .edit-mode .header { + background-color: var(--app-header-edit-background-color, #455a64); + color: var(--app-header-edit-text-color, white); + } + .toolbar { + height: var(--header-height); + display: flex; + align-items: center; + font-size: 20px; + padding: 0 16px; + font-weight: 400; + box-sizing: border-box; + } + .main-title { + margin: 0 0 0 24px; + line-height: 20px; + flex-grow: 1; + } + .action-items { + white-space: nowrap; + display: flex; + align-items: center; } ha-tabs { width: 100%; height: 100%; margin-left: 4px; } - paper-tabs { - margin-left: 12px; - margin-left: max(env(safe-area-inset-left), 12px); - margin-right: env(safe-area-inset-right); - } ha-tabs, paper-tabs { --paper-tabs-selection-bar-color: var( @@ -964,15 +984,13 @@ class HUIRoot extends LitElement { ); text-transform: uppercase; } - - .edit-mode app-header, - .edit-mode app-toolbar { - background-color: var(--app-header-edit-background-color, #455a64); - color: var(--app-header-edit-text-color, #fff); - } .edit-mode div[main-title] { pointer-events: auto; } + .edit-mode paper-tabs { + background-color: var(--app-header-edit-background-color, #455a64); + color: var(--app-header-edit-text-color, #fff); + } paper-tab.iron-selected .edit-icon { display: inline-flex; } @@ -995,14 +1013,15 @@ class HUIRoot extends LitElement { background-color: var(--accent-color); border-radius: 4px; } - app-toolbar a { + a { color: var(--text-primary-color, white); } mwc-button.warning:not([disabled]) { color: var(--error-color); } #view { - min-height: calc( + margin-top: var(--header-height); + height: calc( 100vh - var(--header-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) ); @@ -1015,15 +1034,17 @@ class HUIRoot extends LitElement { */ position: relative; display: flex; + overflow: auto; } /** * In edit mode we have the tab bar on a new line * */ .edit-mode #view { - min-height: calc( + height: calc( 100vh - var(--header-height) - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom) ); + margin-top: calc(var(--header-height) + 48px); } #view > * { /** diff --git a/src/panels/map/ha-panel-map.ts b/src/panels/map/ha-panel-map.ts index ca1d5456ec..5fb3ecd83e 100644 --- a/src/panels/map/ha-panel-map.ts +++ b/src/panels/map/ha-panel-map.ts @@ -1,13 +1,12 @@ import { mdiPencil } from "@mdi/js"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import { customElement, property } from "lit/decorators"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { navigate } from "../../common/navigate"; -import "../../components/ha-menu-button"; import "../../components/ha-icon-button"; +import "../../components/ha-menu-button"; +import "../../components/ha-top-app-bar-fixed"; import "../../components/map/ha-map"; -import "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; import { HomeAssistant } from "../../types"; @@ -21,30 +20,28 @@ class HaPanelMap extends LitElement { protected render() { return html` - - - - -
${this.hass.localize("panel.map")}
- ${!__DEMO__ && this.hass.user?.is_admin - ? html` ` - : ""} - - + + +
${this.hass.localize("panel.map")}
+ ${!__DEMO__ && this.hass.user?.is_admin + ? html` ` + : ""} - + `; } diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts index 2de0f6c4de..cab9c9826d 100644 --- a/src/panels/media-browser/ha-panel-media-browser.ts +++ b/src/panels/media-browser/ha-panel-media-browser.ts @@ -1,6 +1,4 @@ import { mdiArrowLeft } from "@mdi/js"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@material/mwc-button"; import { css, @@ -33,7 +31,6 @@ import { ResolvedMediaSource, resolveMediaSource, } from "../../data/media_source"; -import "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; import type { HomeAssistant, Route } from "../../types"; import "./ha-bar-media-player"; @@ -44,6 +41,7 @@ import { getEntityIdFromCameraMediaSource, isCameraMediaSource, } from "../../data/camera"; +import "../../components/ha-top-app-bar-fixed"; const createMediaPanelUrl = (entityId: string, items: MediaPlayerItemId[]) => { let path = `/media-browser/${entityId}`; @@ -82,36 +80,35 @@ class PanelMediaBrowser extends LitElement { protected render(): TemplateResult { return html` - - - - ${this._navigateIds.length > 1 - ? html` - - ` - : html` - - `} -
- ${!this._currentItem - ? this.hass.localize( - "ui.components.media-browser.media-player-browser" - ) - : this._currentItem.title} -
- - - + + ${this._navigateIds.length > 1 + ? html` + + ` + : html` + + `} +
+ ${!this._currentItem + ? this.hass.localize( + "ui.components.media-browser.media-player-browser" + ) + : this._currentItem.title} +
+ - + - - - -
${this.hass.localize("panel.profile")}
- - + + +
${this.hass.localize("panel.profile")}
@@ -205,7 +200,7 @@ class HaPanelProfile extends LitElement { @hass-refresh-tokens=${this._refreshRefreshTokens} >
- + `; } diff --git a/src/panels/shopping-list/ha-panel-shopping-list.ts b/src/panels/shopping-list/ha-panel-shopping-list.ts index 7a3947dd44..41d9c63931 100644 --- a/src/panels/shopping-list/ha-panel-shopping-list.ts +++ b/src/panels/shopping-list/ha-panel-shopping-list.ts @@ -1,6 +1,4 @@ import { mdiMicrophone } from "@mdi/js"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, CSSResultGroup, @@ -14,8 +12,8 @@ import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; import "../../components/ha-icon-button"; import "../../components/ha-menu-button"; +import "../../components/ha-top-app-bar-fixed"; import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog"; -import "../../layouts/ha-app-layout"; import { haStyle } from "../../resources/styles"; import { HomeAssistant } from "../../types"; import { HuiErrorCard } from "../lovelace/cards/hui-error-card"; @@ -51,31 +49,29 @@ class PanelShoppingList extends LitElement { protected render(): TemplateResult { return html` - - - - -
${this.hass.localize("panel.shopping_list")}
- ${this._conversation(this.hass.config.components) - ? html` - - ` - : ""} - - + + +
${this.hass.localize("panel.shopping_list")}
+ ${this._conversation(this.hass.config.components) + ? html` + + ` + : ""}
${this._card}
- + `; } @@ -87,21 +83,6 @@ class PanelShoppingList extends LitElement { return [ haStyle, css` - :host { - display: block; - height: 100%; - } - app-header { - --mdc-theme-primary: var(--app-header-text-color); - } - :host([narrow]) app-toolbar mwc-button { - width: 65px; - } - .heading { - overflow: hidden; - white-space: nowrap; - margin-top: 4px; - } #columns { display: flex; flex-direction: row; diff --git a/src/resources/styles.ts b/src/resources/styles.ts index a67cd35753..e94aedc60c 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -175,24 +175,6 @@ export const haStyle = css` line-height: var(--paper-font-body1_-_line-height); } - app-header-layout, - ha-app-layout { - background-color: var(--primary-background-color); - } - - app-header, - app-toolbar { - background-color: var(--app-header-background-color); - font-weight: 400; - color: var(--app-header-text-color, white); - } - - app-toolbar { - height: var(--header-height); - border-bottom: var(--app-header-border-bottom); - box-sizing: border-box; - } - app-header div[sticky] { height: 48px; } diff --git a/yarn.lock b/yarn.lock index 4c7fef9b88..ffe0f51be5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2732,7 +2732,7 @@ __metadata: languageName: node linkType: hard -"@material/mwc-top-app-bar@npm:^0.27.0": +"@material/mwc-top-app-bar@npm:0.27.0, @material/mwc-top-app-bar@npm:^0.27.0": version: 0.27.0 resolution: "@material/mwc-top-app-bar@npm:0.27.0" dependencies: @@ -9451,6 +9451,7 @@ __metadata: "@material/mwc-tab-bar": 0.27.0 "@material/mwc-textarea": 0.27.0 "@material/mwc-textfield": 0.27.0 + "@material/mwc-top-app-bar": 0.27.0 "@material/mwc-top-app-bar-fixed": 0.27.0 "@material/top-app-bar": =14.0.0-canary.53b3cad2f.0 "@material/web": =1.0.0-pre.4