mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-27 19:26:36 +00:00
Use mwc-drawer (#10335
* Use mwc-drawer * Update home-assistant-main.ts * Implement top-app-bar * Update home-assistant-main.ts * update hui-root * WIP tabs don't work yet * migrate most panels * fixed * notifications-drawer * developer tools * lovelace * Update hui-root.ts * Update hui-root.ts * Update notification-drawer.ts * fix dev tools * Update ha-panel-developer-tools.ts
This commit is contained in:
Bram Kragten
GitHub
parent
f19fdeacba
commit
f5a4affdec
@ -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;
|
||||
}
|
||||
|
||||
@ -597,10 +597,6 @@ export class DialogHassioNetwork
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
:host([rtl]) app-toolbar {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
.container {
|
||||
padding: 0 8px 4px;
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
22
src/components/ha-drawer.ts
Normal file
22
src/components/ha-drawer.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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%;
|
||||
|
||||
34
src/components/ha-top-app-bar-fixed.ts
Normal file
34
src/components/ha-top-app-bar-fixed.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
34
src/components/ha-top-app-bar.ts
Normal file
34
src/components/ha-top-app-bar.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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`
|
||||
<style>
|
||||
app-toolbar {
|
||||
color: var(--primary-text-color);
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
background-color: var(--primary-background-color);
|
||||
height: var(--header-height);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div[main-title] {
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
<app-drawer id="drawer" opened="{{open}}" disable-swipe align="start">
|
||||
<app-toolbar>
|
||||
<div main-title>[[localize('ui.notification_drawer.title')]]</div>
|
||||
<ha-icon-button-prev hass="[[hass]]" on-click="_closeDrawer"
|
||||
label="[[localize('ui.notification_drawer.close')]]">
|
||||
</ha-icon-button-prev>
|
||||
</app-toolbar>
|
||||
<div class="notifications">
|
||||
<template is="dom-if" if="[[!_empty(notifications)]]">
|
||||
<dom-repeat items="[[notifications]]">
|
||||
<template>
|
||||
<div class="notification">
|
||||
<notification-item hass="[[hass]]" notification="[[item]]"></notification-item>
|
||||
</div>
|
||||
</template>
|
||||
</dom-repeat>
|
||||
<template is="dom-if" if="[[_moreThanOne(notifications)]]">
|
||||
<div class="notification-actions">
|
||||
<mwc-button raised on-click="_dismissAll">
|
||||
[[localize('ui.notification_drawer.dismiss_all')]]
|
||||
</mwc-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template is="dom-if" if="[[_empty(notifications)]]">
|
||||
<div class="empty">[[localize('ui.notification_drawer.empty')]]<div>
|
||||
</template>
|
||||
</div>
|
||||
</app-drawer>
|
||||
`;
|
||||
}
|
||||
|
||||
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);
|
||||
190
src/dialogs/notifications/notification-drawer.ts
Normal file
190
src/dialogs/notifications/notification-drawer.ts
Normal file
@ -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`
|
||||
<ha-drawer
|
||||
type="modal"
|
||||
.open=${this._open}
|
||||
@MDCDrawer:closed=${this._closeDrawer}
|
||||
>
|
||||
<ha-header-bar>
|
||||
<div slot="title">
|
||||
${this.hass.localize("ui.notification_drawer.title")}
|
||||
</div>
|
||||
<ha-icon-button-prev
|
||||
slot="actionItems"
|
||||
.hass=${this.hass}
|
||||
@click=${this._closeDrawer}
|
||||
.label=${this.hass.localize("ui.notification_drawer.close")}
|
||||
>
|
||||
</ha-icon-button-prev>
|
||||
</ha-header-bar>
|
||||
<div class="notifications">
|
||||
${notifications.length
|
||||
? html`${notifications.map(
|
||||
(notification) => html`<div class="notification">
|
||||
<notification-item
|
||||
.hass=${this.hass}
|
||||
.notification=${notification}
|
||||
></notification-item>
|
||||
</div>`
|
||||
)}
|
||||
${this._notifications.length > 1
|
||||
? html`<div class="notification-actions">
|
||||
<mwc-button raised @click=${this._dismissAll}>
|
||||
${this.hass.localize(
|
||||
"ui.notification_drawer.dismiss_all"
|
||||
)}
|
||||
</mwc-button>
|
||||
</div>`
|
||||
: ""}`
|
||||
: html` <div class="empty">
|
||||
${this.hass.localize("ui.notification_drawer.empty")}
|
||||
<div></div>
|
||||
</div>`}
|
||||
</div>
|
||||
</ha-drawer>
|
||||
`;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<meta name='viewport' content='width=device-width, user-scalable=no, viewport-fit=cover, initial-scale=1'>
|
||||
<style>
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
font-family: Roboto, sans-serif;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "../components/ha-circular-progress";
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
/* eslint-disable lit/prefer-static-styles */
|
||||
import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
|
||||
import type { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
|
||||
import "@polymer/app-layout/app-drawer/app-drawer";
|
||||
import type { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
@ -11,6 +7,7 @@ import {
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
} from "lit";
|
||||
import "@material/mwc-drawer/mwc-drawer";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent, HASSDomEvent } from "../common/dom/fire_event";
|
||||
import { listenMediaQuery } from "../common/dom/media_query";
|
||||
@ -19,8 +16,6 @@ import { showNotificationDrawer } from "../dialogs/notifications/show-notificati
|
||||
import type { HomeAssistant, Route } from "../types";
|
||||
import "./partial-panel-resolver";
|
||||
|
||||
const NON_SWIPABLE_PANELS = ["map"];
|
||||
|
||||
declare global {
|
||||
// for fire event
|
||||
interface HASSDomEvents {
|
||||
@ -49,6 +44,8 @@ export class HomeAssistantMain extends LitElement {
|
||||
|
||||
@state() private _externalSidebar = false;
|
||||
|
||||
@state() private _drawerOpen = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
listenMediaQuery("(max-width: 870px)", (matches) => {
|
||||
@ -57,54 +54,28 @@ export class HomeAssistantMain extends LitElement {
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const hass = this.hass;
|
||||
const sidebarNarrow = this._sidebarNarrow || this._externalSidebar;
|
||||
const disableSwipe =
|
||||
this._sidebarEditMode ||
|
||||
!sidebarNarrow ||
|
||||
NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1 ||
|
||||
this._externalSidebar;
|
||||
|
||||
// Style block in render because of the mixin that is not supported
|
||||
return html`
|
||||
<style>
|
||||
app-drawer {
|
||||
--app-drawer-content-container: {
|
||||
background-color: var(--primary-background-color, #fff);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<app-drawer-layout
|
||||
fullbleed
|
||||
.forceNarrow=${sidebarNarrow}
|
||||
responsive-width="0"
|
||||
>
|
||||
<app-drawer
|
||||
id="drawer"
|
||||
align="start"
|
||||
slot="drawer"
|
||||
.disableSwipe=${disableSwipe}
|
||||
.swipeOpen=${!disableSwipe}
|
||||
.persistent=${!this.narrow &&
|
||||
this.hass.dockedSidebar !== "always_hidden"}
|
||||
@app-drawer-transitioned=${this._drawerTransitioned}
|
||||
<mwc-drawer
|
||||
.type=${sidebarNarrow ? "modal" : ""}
|
||||
.open=${sidebarNarrow ? this._drawerOpen : undefined}
|
||||
@MDCDrawer:closed=${this._drawerClosed}
|
||||
>
|
||||
<ha-sidebar
|
||||
.hass=${hass}
|
||||
.hass=${this.hass}
|
||||
.narrow=${sidebarNarrow}
|
||||
.route=${this.route}
|
||||
.editMode=${this._sidebarEditMode}
|
||||
.alwaysExpand=${sidebarNarrow ||
|
||||
this.hass.dockedSidebar === "docked"}
|
||||
.alwaysExpand=${sidebarNarrow || this.hass.dockedSidebar === "docked"}
|
||||
></ha-sidebar>
|
||||
</app-drawer>
|
||||
|
||||
<partial-panel-resolver
|
||||
.narrow=${this.narrow}
|
||||
.hass=${hass}
|
||||
.hass=${this.hass}
|
||||
.route=${this.route}
|
||||
slot="appContent"
|
||||
></partial-panel-resolver>
|
||||
</app-drawer-layout>
|
||||
</mwc-drawer>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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`
|
||||
<ha-app-layout>
|
||||
<app-header fixed slot="header">
|
||||
<app-toolbar>
|
||||
<ha-top-app-bar-fixed>
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.calendar")}</div>
|
||||
<div slot="title">${this.hass.localize("panel.calendar")}</div>
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
.path=${mdiRefresh}
|
||||
.label=${this.hass.localize("ui.common.refresh")}
|
||||
@click=${this._handleRefresh}
|
||||
></ha-icon-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
<div class="content">
|
||||
<div class="calendar-list">
|
||||
<div class="calendar-list-header">
|
||||
@ -108,7 +104,7 @@ class PanelCalendar extends LitElement {
|
||||
@view-changed=${this._handleViewChanged}
|
||||
></ha-full-calendar>
|
||||
</div>
|
||||
</ha-app-layout>
|
||||
</ha-top-app-bar-fixed>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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,20 +180,22 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
|
||||
this._repairsIssues;
|
||||
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header fixed slot="header">
|
||||
<app-toolbar>
|
||||
<ha-top-app-bar-fixed>
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.config")}</div>
|
||||
<div slot="title">${this.hass.localize("panel.config")}</div>
|
||||
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
.label=${this.hass.localize("ui.dialogs.quick-bar.title")}
|
||||
.path=${mdiMagnify}
|
||||
@click=${this._showQuickBar}
|
||||
></ha-icon-button>
|
||||
<ha-button-menu
|
||||
slot="actionItems"
|
||||
corner="BOTTOM_START"
|
||||
@action=${this._handleMenuAction}
|
||||
>
|
||||
@ -217,8 +217,6 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
|
||||
<ha-svg-icon slot="graphic" .path=${mdiPower}></ha-svg-icon>
|
||||
</ha-list-item>
|
||||
</ha-button-menu>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<ha-config-section
|
||||
.narrow=${this.narrow}
|
||||
@ -292,7 +290,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
|
||||
</ha-card>
|
||||
<ha-tip .hass=${this.hass}>${this._tip}</ha-tip>
|
||||
</ha-config-section>
|
||||
</ha-app-layout>
|
||||
</ha-top-app-bar-fixed>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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,16 +24,18 @@ class PanelDeveloperTools extends LitElement {
|
||||
protected render(): TemplateResult {
|
||||
const page = this._page;
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header fixed slot="header">
|
||||
<app-toolbar>
|
||||
<div class="header">
|
||||
<div class="toolbar">
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.developer_tools")}</div>
|
||||
</app-toolbar>
|
||||
<ha-tabs
|
||||
<div class="main-title">
|
||||
${this.hass.localize("panel.developer_tools")}
|
||||
</div>
|
||||
</div>
|
||||
<paper-tabs
|
||||
scrollable
|
||||
attr-for-selected="page-name"
|
||||
.selected=${page}
|
||||
@ -46,9 +45,7 @@ class PanelDeveloperTools extends LitElement {
|
||||
${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")}
|
||||
</paper-tab>
|
||||
<paper-tab page-name="state">
|
||||
${this.hass.localize(
|
||||
"ui.panel.developer-tools.tabs.states.title"
|
||||
)}
|
||||
${this.hass.localize("ui.panel.developer-tools.tabs.states.title")}
|
||||
</paper-tab>
|
||||
<paper-tab page-name="service">
|
||||
${this.hass.localize(
|
||||
@ -61,23 +58,20 @@ class PanelDeveloperTools extends LitElement {
|
||||
)}
|
||||
</paper-tab>
|
||||
<paper-tab page-name="event">
|
||||
${this.hass.localize(
|
||||
"ui.panel.developer-tools.tabs.events.title"
|
||||
)}
|
||||
${this.hass.localize("ui.panel.developer-tools.tabs.events.title")}
|
||||
</paper-tab>
|
||||
<paper-tab page-name="statistics">
|
||||
${this.hass.localize(
|
||||
"ui.panel.developer-tools.tabs.statistics.title"
|
||||
)}
|
||||
</paper-tab>
|
||||
</ha-tabs>
|
||||
</app-header>
|
||||
</paper-tabs>
|
||||
</div>
|
||||
<developer-tools-router
|
||||
.route=${this.route}
|
||||
.narrow=${this.narrow}
|
||||
.hass=${this.hass}
|
||||
></developer-tools-router>
|
||||
</ha-app-layout>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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`
|
||||
<ha-app-layout>
|
||||
<app-header fixed slot="header">
|
||||
<app-toolbar>
|
||||
<ha-top-app-bar-fixed>
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.energy")}</div>
|
||||
<div slot="title">${this.hass.localize("panel.energy")}</div>
|
||||
${this.narrow
|
||||
? ""
|
||||
: html`
|
||||
<hui-energy-period-selector
|
||||
slot="actionItems"
|
||||
.hass=${this.hass}
|
||||
collectionKey="energy_dashboard"
|
||||
.narrow=${false}
|
||||
></hui-energy-period-selector>
|
||||
`}
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
<hui-view
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
@ -87,7 +84,7 @@ class PanelEnergy extends LitElement {
|
||||
.index=${this._viewIndex}
|
||||
@reload-energy-panel=${this._reloadView}
|
||||
></hui-view>
|
||||
</ha-app-layout>
|
||||
</ha-top-app-bar-fixed>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,25 +136,26 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header slot="header" fixed>
|
||||
<app-toolbar>
|
||||
<ha-top-app-bar-fixed>
|
||||
${this._showBack
|
||||
? html`
|
||||
<ha-icon-button-arrow-prev
|
||||
slot="navigationIcon"
|
||||
@click=${this._goBack}
|
||||
></ha-icon-button-arrow-prev>
|
||||
`
|
||||
: html`
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
`}
|
||||
<div main-title>${this.hass.localize("panel.history")}</div>
|
||||
<div slot="title">${this.hass.localize("panel.history")}</div>
|
||||
${this._targetPickerValue
|
||||
? html`
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
@click=${this._removeAll}
|
||||
.disabled=${this._isLoading}
|
||||
.path=${mdiFilterRemove}
|
||||
@ -164,13 +164,12 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
|
||||
`
|
||||
: ""}
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
@click=${this._getHistory}
|
||||
.disabled=${this._isLoading || !this._targetPickerValue}
|
||||
.path=${mdiRefresh}
|
||||
.label=${this.hass.localize("ui.common.refresh")}
|
||||
></ha-icon-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class="flex content">
|
||||
<div class="filters">
|
||||
@ -210,7 +209,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
|
||||
</state-history-charts>
|
||||
`}
|
||||
</div>
|
||||
</ha-app-layout>
|
||||
</ha-top-app-bar-fixed>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -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`
|
||||
<ha-app-layout>
|
||||
<app-header slot="header" fixed>
|
||||
<app-toolbar>
|
||||
<ha-top-app-bar-fixed>
|
||||
${this._showBack
|
||||
? html`
|
||||
<ha-icon-button-arrow-prev
|
||||
slot="navigationIcon"
|
||||
@click=${this._goBack}
|
||||
></ha-icon-button-arrow-prev>
|
||||
`
|
||||
: html`
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
`}
|
||||
<div main-title>${this.hass.localize("panel.logbook")}</div>
|
||||
<div slot="title">${this.hass.localize("panel.logbook")}</div>
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
@click=${this._refreshLogbook}
|
||||
.path=${mdiRefresh}
|
||||
.label=${this.hass!.localize("ui.common.refresh")}
|
||||
></ha-icon-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class="filters">
|
||||
<ha-date-range-picker
|
||||
@ -114,7 +112,7 @@ export class HaPanelLogbook extends LitElement {
|
||||
.entityIds=${this._entityIds}
|
||||
virtualize
|
||||
></ha-logbook>
|
||||
</ha-app-layout>
|
||||
</ha-top-app-bar-fixed>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -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,8 +56,10 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
|
||||
|
||||
public connectedCallback() {
|
||||
super.connectedCallback();
|
||||
if (this.narrow !== false) {
|
||||
toggleAttribute(this, "narrow", this.offsetWidth < 600);
|
||||
}
|
||||
}
|
||||
|
||||
public hassSubscribe(): UnsubscribeFunc[] {
|
||||
return [
|
||||
|
||||
@ -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,20 +48,18 @@ class LovelaceFullConfigEditor extends LitElement {
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header slot="header">
|
||||
<app-toolbar>
|
||||
<ha-top-app-bar-fixed>
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
.path=${mdiClose}
|
||||
@click=${this._closeEditor}
|
||||
.label=${this.hass!.localize("ui.common.close")}
|
||||
></ha-icon-button>
|
||||
<div main-title>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.raw_editor.header"
|
||||
)}
|
||||
<div slot="title">
|
||||
${this.hass!.localize("ui.panel.lovelace.editor.raw_editor.header")}
|
||||
</div>
|
||||
<div
|
||||
slot="actionItems"
|
||||
class="save-button
|
||||
${classMap({
|
||||
saved: this._saving! === false || this._changed === true,
|
||||
@ -73,20 +69,17 @@ class LovelaceFullConfigEditor extends LitElement {
|
||||
? 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.saved")}
|
||||
</div>
|
||||
<mwc-button
|
||||
raised
|
||||
slot="actionItems"
|
||||
@click=${this._handleSave}
|
||||
.disabled=${!this._changed}
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.raw_editor.save"
|
||||
)}</mwc-button
|
||||
>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
<div class="content">
|
||||
<ha-code-editor
|
||||
mode="yaml"
|
||||
@ -100,7 +93,7 @@ class LovelaceFullConfigEditor extends LitElement {
|
||||
>
|
||||
</ha-code-editor>
|
||||
</div>
|
||||
</ha-app-layout>
|
||||
</ha-top-app-bar-fixed>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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`
|
||||
<ha-app-layout
|
||||
class=${classMap({
|
||||
<div
|
||||
class=" ${classMap({
|
||||
"edit-mode": this._editMode,
|
||||
})}
|
||||
id="layout"
|
||||
})}"
|
||||
>
|
||||
<app-header slot="header" effects="waterfall" fixed condenses>
|
||||
<div class="header">
|
||||
<div class="toolbar">
|
||||
${this._editMode
|
||||
? html`
|
||||
<app-toolbar class="edit-mode">
|
||||
<div main-title>
|
||||
<div class="main-title">
|
||||
${this.config.title ||
|
||||
this.hass!.localize("ui.panel.lovelace.editor.header")}
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.edit_lovelace.edit_title"
|
||||
)}
|
||||
@ -143,6 +137,7 @@ class HUIRoot extends LitElement {
|
||||
@click=${this._editLovelace}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
<div class="action-items">
|
||||
<mwc-button
|
||||
outlined
|
||||
class="exit-edit-mode"
|
||||
@ -218,7 +213,8 @@ class HUIRoot extends LitElement {
|
||||
${this.hass.userData?.showAdvanced
|
||||
? html`<mwc-list-item
|
||||
graphic="icon"
|
||||
@request-selected=${this._handleManageResources}
|
||||
@request-selected=${this
|
||||
._handleManageResources}
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
@ -230,27 +226,29 @@ class HUIRoot extends LitElement {
|
||||
</mwc-list-item>`
|
||||
: ""} `}
|
||||
</ha-button-menu>
|
||||
</app-toolbar>
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<app-toolbar>
|
||||
${curViewConfig?.subview
|
||||
? html`
|
||||
<ha-icon-button-arrow-prev
|
||||
slot="navigationIcon"
|
||||
@click=${this._goBack}
|
||||
></ha-icon-button-arrow-prev>
|
||||
`
|
||||
: html`
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
`}
|
||||
${curViewConfig?.subview
|
||||
? html`<div main-title>${curViewConfig.title}</div>`
|
||||
? html`<div class="main-title">${curViewConfig.title}</div>`
|
||||
: views.filter((view) => !view.subview).length > 1
|
||||
? html`
|
||||
<ha-tabs
|
||||
slot="title"
|
||||
scrollable
|
||||
.selected=${this._curView}
|
||||
@iron-activate=${this._handleViewSelected}
|
||||
@ -286,10 +284,12 @@ class HUIRoot extends LitElement {
|
||||
)}
|
||||
</ha-tabs>
|
||||
`
|
||||
: html`<div main-title>${this.config.title}</div>`}
|
||||
: html`<div class="main-title">${this.config.title}</div>`}
|
||||
<div class="action-items">
|
||||
${!this.narrow
|
||||
? html`
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.search"
|
||||
)}
|
||||
@ -302,6 +302,7 @@ class HUIRoot extends LitElement {
|
||||
this._conversation(this.hass.config.components)
|
||||
? html`
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.assist"
|
||||
)}
|
||||
@ -312,7 +313,10 @@ class HUIRoot extends LitElement {
|
||||
: ""}
|
||||
${this._showButtonMenu
|
||||
? html`
|
||||
<ha-button-menu corner="BOTTOM_START">
|
||||
<ha-button-menu
|
||||
corner="BOTTOM_START"
|
||||
slot="actionItems"
|
||||
>
|
||||
<ha-icon-button
|
||||
slot="trigger"
|
||||
.label=${this.hass!.localize(
|
||||
@ -325,7 +329,8 @@ class HUIRoot extends LitElement {
|
||||
? html`
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
@request-selected=${this._handleShowQuickBar}
|
||||
@request-selected=${this
|
||||
._handleShowQuickBar}
|
||||
>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.search"
|
||||
@ -450,11 +455,11 @@ class HUIRoot extends LitElement {
|
||||
</ha-button-menu>
|
||||
`
|
||||
: ""}
|
||||
</app-toolbar>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
${this._editMode
|
||||
? html`
|
||||
<div sticky>
|
||||
<paper-tabs
|
||||
scrollable
|
||||
.selected=${this._curView}
|
||||
@ -539,12 +544,11 @@ class HUIRoot extends LitElement {
|
||||
`
|
||||
: ""}
|
||||
</paper-tabs>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</app-header>
|
||||
</div>
|
||||
<div id="view" @ll-rebuild=${this._debouncedConfigChanged}></div>
|
||||
</ha-app-layout>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -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 > * {
|
||||
/**
|
||||
|
||||
@ -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`
|
||||
<ha-app-layout>
|
||||
<app-header fixed slot="header">
|
||||
<app-toolbar>
|
||||
<ha-top-app-bar-fixed>
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.map")}</div>
|
||||
<div slot="title">${this.hass.localize("panel.map")}</div>
|
||||
${!__DEMO__ && this.hass.user?.is_admin
|
||||
? html` <ha-icon-button
|
||||
slot="actionItems"
|
||||
.label=${this.hass!.localize("ui.panel.map.edit_zones")}
|
||||
.path=${mdiPencil}
|
||||
@click=${this._openZonesEditor}
|
||||
></ha-icon-button>`
|
||||
: ""}
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
<ha-map
|
||||
.hass=${this.hass}
|
||||
.entities=${this._entities}
|
||||
autoFit
|
||||
interactiveZones
|
||||
></ha-map>
|
||||
</ha-app-layout>
|
||||
</ha-top-app-bar-fixed>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -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,23 +80,23 @@ class PanelMediaBrowser extends LitElement {
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header fixed slot="header">
|
||||
<app-toolbar>
|
||||
<ha-top-app-bar-fixed>
|
||||
${this._navigateIds.length > 1
|
||||
? html`
|
||||
<ha-icon-button-arrow-prev
|
||||
slot="navigationIcon"
|
||||
.path=${mdiArrowLeft}
|
||||
@click=${this._goBack}
|
||||
></ha-icon-button-arrow-prev>
|
||||
`
|
||||
: html`
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
`}
|
||||
<div main-title>
|
||||
<div slot="title">
|
||||
${!this._currentItem
|
||||
? this.hass.localize(
|
||||
"ui.components.media-browser.media-player-browser"
|
||||
@ -106,12 +104,11 @@ class PanelMediaBrowser extends LitElement {
|
||||
: this._currentItem.title}
|
||||
</div>
|
||||
<ha-media-manage-button
|
||||
slot="actionItems"
|
||||
.hass=${this.hass}
|
||||
.currentItem=${this._currentItem}
|
||||
@media-refresh=${this._refreshMedia}
|
||||
></ha-media-manage-button>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
<ha-media-player-browse
|
||||
.hass=${this.hass}
|
||||
.entityId=${this._entityId}
|
||||
@ -119,7 +116,7 @@ class PanelMediaBrowser extends LitElement {
|
||||
@media-picked=${this._mediaPicked}
|
||||
@media-browsed=${this._mediaBrowsed}
|
||||
></ha-media-player-browse>
|
||||
</ha-app-layout>
|
||||
</ha-top-app-bar-fixed>
|
||||
<ha-bar-media-player
|
||||
.hass=${this.hass}
|
||||
.entityId=${this._entityId}
|
||||
@ -275,7 +272,7 @@ class PanelMediaBrowser extends LitElement {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
app-toolbar {
|
||||
ha-media-manage-button {
|
||||
--mdc-theme-primary: var(--app-header-text-color);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
import "@material/mwc-button";
|
||||
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, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
@ -14,7 +12,6 @@ import {
|
||||
} from "../../data/frontend";
|
||||
import { RefreshToken } from "../../data/refresh_token";
|
||||
import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
|
||||
import "../../layouts/ha-app-layout";
|
||||
import { haStyle } from "../../resources/styles";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "./ha-advanced-mode-row";
|
||||
@ -33,6 +30,7 @@ import "./ha-push-notifications-row";
|
||||
import "./ha-refresh-tokens-card";
|
||||
import "./ha-set-suspend-row";
|
||||
import "./ha-set-vibrate-row";
|
||||
import "../../components/ha-top-app-bar-fixed";
|
||||
|
||||
@customElement("ha-panel-profile")
|
||||
class HaPanelProfile extends LitElement {
|
||||
@ -67,16 +65,13 @@ class HaPanelProfile extends LitElement {
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header slot="header" fixed>
|
||||
<app-toolbar>
|
||||
<ha-top-app-bar-fixed>
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.profile")}</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
<div slot="title">${this.hass.localize("panel.profile")}</div>
|
||||
|
||||
<div class="content">
|
||||
<ha-card .header=${this.hass.user!.name}>
|
||||
@ -205,7 +200,7 @@ class HaPanelProfile extends LitElement {
|
||||
@hass-refresh-tokens=${this._refreshRefreshTokens}
|
||||
></ha-long-lived-access-tokens-card>
|
||||
</div>
|
||||
</ha-app-layout>
|
||||
</ha-top-app-bar-fixed>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -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,17 +49,17 @@ class PanelShoppingList extends LitElement {
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header fixed slot="header">
|
||||
<app-toolbar>
|
||||
<ha-top-app-bar-fixed>
|
||||
<ha-menu-button
|
||||
slot="navigationIcon"
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.shopping_list")}</div>
|
||||
<div slot="title">${this.hass.localize("panel.shopping_list")}</div>
|
||||
${this._conversation(this.hass.config.components)
|
||||
? html`
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.shopping_list.start_conversation"
|
||||
)}
|
||||
@ -70,12 +68,10 @@ class PanelShoppingList extends LitElement {
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
<div id="columns">
|
||||
<div class="column">${this._card}</div>
|
||||
</div>
|
||||
</ha-app-layout>
|
||||
</ha-top-app-bar-fixed>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user