mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-26 02:36:37 +00:00
Show a notification dot on toggle menu button in narrow mode (#3323)
* Show a notification dot on toggle menu button in narrow mode * Fix lint * Move menu button to sidebar * Fix height sidebar
This commit is contained in:
parent
0a7cb39500
commit
203b14613f
@ -36,6 +36,7 @@ customElements.get("paper-icon-button").prototype._keyBindings = {};
|
|||||||
class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
|
class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
|
||||||
@property() public hass!: HomeAssistant;
|
@property() public hass!: HomeAssistant;
|
||||||
@property() public panel!: HassioPanelInfo;
|
@property() public panel!: HassioPanelInfo;
|
||||||
|
@property() public narrow!: boolean;
|
||||||
|
|
||||||
protected routerOptions: RouterOptions = {
|
protected routerOptions: RouterOptions = {
|
||||||
// Hass.io has a page with tabs, so we route all non-matching routes to it.
|
// Hass.io has a page with tabs, so we route all non-matching routes to it.
|
||||||
@ -108,6 +109,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
|
|||||||
// As long as we have Polymer pages
|
// As long as we have Polymer pages
|
||||||
(el as PolymerElement).setProperties({
|
(el as PolymerElement).setProperties({
|
||||||
hass: this.hass,
|
hass: this.hass,
|
||||||
|
narrow: this.narrow,
|
||||||
supervisorInfo: this._supervisorInfo,
|
supervisorInfo: this._supervisorInfo,
|
||||||
hostInfo: this._hostInfo,
|
hostInfo: this._hostInfo,
|
||||||
hassInfo: this._hassInfo,
|
hassInfo: this._hassInfo,
|
||||||
@ -115,6 +117,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
|
|||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
el.hass = this.hass;
|
el.hass = this.hass;
|
||||||
|
el.narrow = this.narrow;
|
||||||
el.supervisorInfo = this._supervisorInfo;
|
el.supervisorInfo = this._supervisorInfo;
|
||||||
el.hostInfo = this._hostInfo;
|
el.hostInfo = this._hostInfo;
|
||||||
el.hassInfo = this._hassInfo;
|
el.hassInfo = this._hassInfo;
|
||||||
|
@ -34,6 +34,7 @@ const HAS_REFRESH_BUTTON = ["store", "snapshots"];
|
|||||||
@customElement("hassio-pages-with-tabs")
|
@customElement("hassio-pages-with-tabs")
|
||||||
class HassioPagesWithTabs extends LitElement {
|
class HassioPagesWithTabs extends LitElement {
|
||||||
@property() public hass!: HomeAssistant;
|
@property() public hass!: HomeAssistant;
|
||||||
|
@property() public narrow!: boolean;
|
||||||
@property() public route!: Route;
|
@property() public route!: Route;
|
||||||
@property() public supervisorInfo!: HassioSupervisorInfo;
|
@property() public supervisorInfo!: HassioSupervisorInfo;
|
||||||
@property() public hostInfo!: HassioHostInfo;
|
@property() public hostInfo!: HassioHostInfo;
|
||||||
@ -45,7 +46,11 @@ class HassioPagesWithTabs extends LitElement {
|
|||||||
<app-header-layout has-scrolling-region>
|
<app-header-layout has-scrolling-region>
|
||||||
<app-header fixed slot="header">
|
<app-header fixed slot="header">
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button hassio></ha-menu-button>
|
<ha-menu-button
|
||||||
|
.hass=${this.hass}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
hassio
|
||||||
|
></ha-menu-button>
|
||||||
<div main-title>Hass.io</div>
|
<div main-title>Hass.io</div>
|
||||||
${HAS_REFRESH_BUTTON.includes(page)
|
${HAS_REFRESH_BUTTON.includes(page)
|
||||||
? html`
|
? html`
|
||||||
|
@ -5,34 +5,113 @@ import {
|
|||||||
LitElement,
|
LitElement,
|
||||||
html,
|
html,
|
||||||
customElement,
|
customElement,
|
||||||
|
CSSResult,
|
||||||
|
css,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
|
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
|
import { HomeAssistant } from "../types";
|
||||||
|
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
|
import { subscribeNotifications } from "../data/persistent_notification";
|
||||||
|
import computeDomain from "../common/entity/compute_domain";
|
||||||
|
|
||||||
@customElement("ha-menu-button")
|
@customElement("ha-menu-button")
|
||||||
class HaMenuButton extends LitElement {
|
class HaMenuButton extends LitElement {
|
||||||
@property({ type: Boolean })
|
@property({ type: Boolean }) public hassio = false;
|
||||||
public hassio = false;
|
@property() public narrow!: boolean;
|
||||||
|
@property() public hass!: HomeAssistant;
|
||||||
|
@property() private _hasNotifications = false;
|
||||||
|
private _attachNotifOnConnect = false;
|
||||||
|
private _unsubNotifications?: UnsubscribeFunc;
|
||||||
|
|
||||||
|
public connectedCallback() {
|
||||||
|
super.connectedCallback();
|
||||||
|
if (this._attachNotifOnConnect) {
|
||||||
|
this._attachNotifOnConnect = false;
|
||||||
|
this._subscribeNotifications();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public disconnectedCallback() {
|
||||||
|
super.disconnectedCallback();
|
||||||
|
if (this._unsubNotifications) {
|
||||||
|
this._attachNotifOnConnect = true;
|
||||||
|
this._unsubNotifications();
|
||||||
|
this._unsubNotifications = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult | void {
|
protected render(): TemplateResult | void {
|
||||||
|
const hasNotifications =
|
||||||
|
this.narrow &&
|
||||||
|
(this._hasNotifications ||
|
||||||
|
Object.keys(this.hass.states).some(
|
||||||
|
(entityId) => computeDomain(entityId) === "configurator"
|
||||||
|
));
|
||||||
return html`
|
return html`
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
aria-label="Sidebar Toggle"
|
aria-label="Sidebar Toggle"
|
||||||
.icon=${this.hassio ? "hassio:menu" : "hass:menu"}
|
.icon=${this.hassio ? "hassio:menu" : "hass:menu"}
|
||||||
@click=${this._toggleMenu}
|
@click=${this._toggleMenu}
|
||||||
></paper-icon-button>
|
></paper-icon-button>
|
||||||
|
${hasNotifications
|
||||||
|
? html`
|
||||||
|
<div class="dot"></div>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// We are not going to use ShadowDOM as we're rendering a single element
|
protected updated(changedProps) {
|
||||||
// without any CSS used.
|
super.updated(changedProps);
|
||||||
protected createRenderRoot(): Element | ShadowRoot {
|
|
||||||
return this;
|
if (!changedProps.has("narrow")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.style.visibility = this.narrow ? "initial" : "hidden";
|
||||||
|
|
||||||
|
if (!this.narrow) {
|
||||||
|
this._hasNotifications = false;
|
||||||
|
if (this._unsubNotifications) {
|
||||||
|
this._unsubNotifications();
|
||||||
|
this._unsubNotifications = undefined;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._subscribeNotifications();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _subscribeNotifications() {
|
||||||
|
this._unsubNotifications = subscribeNotifications(
|
||||||
|
this.hass.connection,
|
||||||
|
(notifications) => {
|
||||||
|
this._hasNotifications = notifications.length > 0;
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _toggleMenu(): void {
|
private _toggleMenu(): void {
|
||||||
fireEvent(this, "hass-toggle-menu");
|
fireEvent(this, "hass-toggle-menu");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get styles(): CSSResult {
|
||||||
|
return css`
|
||||||
|
:host {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.dot {
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
top: 8px;
|
||||||
|
right: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
@ -14,6 +14,7 @@ import "@polymer/paper-listbox/paper-listbox";
|
|||||||
import "./ha-icon";
|
import "./ha-icon";
|
||||||
|
|
||||||
import "../components/user/ha-user-badge";
|
import "../components/user/ha-user-badge";
|
||||||
|
import "../components/ha-menu-button";
|
||||||
import { HomeAssistant, PanelInfo } from "../types";
|
import { HomeAssistant, PanelInfo } from "../types";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
import { DEFAULT_PANEL } from "../common/const";
|
import { DEFAULT_PANEL } from "../common/const";
|
||||||
@ -108,6 +109,7 @@ const renderPanel = (hass, panel) => html`
|
|||||||
*/
|
*/
|
||||||
class HaSidebar extends LitElement {
|
class HaSidebar extends LitElement {
|
||||||
@property() public hass!: HomeAssistant;
|
@property() public hass!: HomeAssistant;
|
||||||
|
@property() public narrow!: boolean;
|
||||||
|
|
||||||
@property({ type: Boolean }) public alwaysExpand = false;
|
@property({ type: Boolean }) public alwaysExpand = false;
|
||||||
@property({ type: Boolean, reflect: true }) public expanded = false;
|
@property({ type: Boolean, reflect: true }) public expanded = false;
|
||||||
@ -135,21 +137,18 @@ class HaSidebar extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
${this.expanded
|
<div class="menu">
|
||||||
? html`
|
${!this.narrow
|
||||||
<app-toolbar>
|
? html`
|
||||||
<div main-title>Home Assistant</div>
|
<paper-icon-button
|
||||||
</app-toolbar>
|
aria-label="Sidebar Toggle"
|
||||||
`
|
.icon=${hass.dockedSidebar ? "hass:menu-open" : "hass:menu"}
|
||||||
: html`
|
@click=${this._toggleSidebar}
|
||||||
<div class="logo">
|
></paper-icon-button>
|
||||||
<img
|
`
|
||||||
id="logo"
|
: ""}
|
||||||
src="/static/icons/favicon-192x192.png"
|
<span class="title">Home Assistant</span>
|
||||||
alt="Home Assistant logo"
|
</div>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
`}
|
|
||||||
|
|
||||||
<paper-listbox attr-for-selected="data-panel" .selected=${hass.panelUrl}>
|
<paper-listbox attr-for-selected="data-panel" .selected=${hass.panelUrl}>
|
||||||
<a
|
<a
|
||||||
@ -234,6 +233,7 @@ class HaSidebar extends LitElement {
|
|||||||
protected shouldUpdate(changedProps: PropertyValues): boolean {
|
protected shouldUpdate(changedProps: PropertyValues): boolean {
|
||||||
if (
|
if (
|
||||||
changedProps.has("expanded") ||
|
changedProps.has("expanded") ||
|
||||||
|
changedProps.has("narrow") ||
|
||||||
changedProps.has("alwaysExpand") ||
|
changedProps.has("alwaysExpand") ||
|
||||||
changedProps.has("_externalConfig") ||
|
changedProps.has("_externalConfig") ||
|
||||||
changedProps.has("_notifications")
|
changedProps.has("_notifications")
|
||||||
@ -264,26 +264,15 @@ class HaSidebar extends LitElement {
|
|||||||
this._externalConfig = conf;
|
this._externalConfig = conf;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.shadowRoot!.querySelector("paper-listbox")!.addEventListener(
|
this.addEventListener("mouseenter", () => {
|
||||||
"mouseenter",
|
this.expanded = true;
|
||||||
() => {
|
});
|
||||||
this.expanded = true;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
this.addEventListener("mouseleave", () => {
|
this.addEventListener("mouseleave", () => {
|
||||||
this._contract();
|
this._contract();
|
||||||
});
|
});
|
||||||
subscribeNotifications(this.hass.connection, (notifications) => {
|
subscribeNotifications(this.hass.connection, (notifications) => {
|
||||||
this._notifications = notifications;
|
this._notifications = notifications;
|
||||||
});
|
});
|
||||||
// Deal with configurator
|
|
||||||
// private _updateNotifications(
|
|
||||||
// states: HassEntities,
|
|
||||||
// persistent: unknown[]
|
|
||||||
// ): unknown[] {
|
|
||||||
// const configurator = computeNotifications(states);
|
|
||||||
// return persistent.concat(configurator);
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected updated(changedProps) {
|
protected updated(changedProps) {
|
||||||
@ -308,6 +297,10 @@ class HaSidebar extends LitElement {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _toggleSidebar() {
|
||||||
|
fireEvent(this, "hass-toggle-menu");
|
||||||
|
}
|
||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
:host {
|
:host {
|
||||||
@ -332,26 +325,35 @@ class HaSidebar extends LitElement {
|
|||||||
width: 256px;
|
width: 256px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.menu {
|
||||||
height: 65px;
|
height: 64px;
|
||||||
box-sizing: border-box;
|
display: flex;
|
||||||
padding: 8px;
|
padding: 0 12px;
|
||||||
border-bottom: 1px solid transparent;
|
border-bottom: 1px solid transparent;
|
||||||
}
|
|
||||||
.logo img {
|
|
||||||
width: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
app-toolbar {
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
border-bottom: 1px solid var(--divider-color);
|
border-bottom: 1px solid var(--divider-color);
|
||||||
background-color: var(--primary-background-color);
|
background-color: var(--primary-background-color);
|
||||||
|
font-size: 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
:host([expanded]) .menu {
|
||||||
|
width: 256px;
|
||||||
}
|
}
|
||||||
|
|
||||||
app-toolbar a {
|
.menu paper-icon-button {
|
||||||
color: var(--primary-text-color);
|
color: var(--sidebar-icon-color);
|
||||||
|
}
|
||||||
|
:host([expanded]) .menu paper-icon-button {
|
||||||
|
margin-right: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
:host([expanded]) .title {
|
||||||
|
display: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
paper-listbox {
|
paper-listbox {
|
||||||
|
@ -12,17 +12,23 @@ import {
|
|||||||
import "../components/ha-menu-button";
|
import "../components/ha-menu-button";
|
||||||
import "../components/ha-paper-icon-button-arrow-prev";
|
import "../components/ha-paper-icon-button-arrow-prev";
|
||||||
import { haStyle } from "../resources/styles";
|
import { haStyle } from "../resources/styles";
|
||||||
|
import { HomeAssistant } from "../types";
|
||||||
|
|
||||||
@customElement("hass-loading-screen")
|
@customElement("hass-loading-screen")
|
||||||
class HassLoadingScreen extends LitElement {
|
class HassLoadingScreen extends LitElement {
|
||||||
@property({ type: Boolean }) public rootnav? = false;
|
@property({ type: Boolean }) public rootnav? = false;
|
||||||
|
@property() public hass?: HomeAssistant;
|
||||||
|
@property() public narrow?: boolean;
|
||||||
|
|
||||||
protected render(): TemplateResult | void {
|
protected render(): TemplateResult | void {
|
||||||
return html`
|
return html`
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
${this.rootnav
|
${this.rootnav
|
||||||
? html`
|
? html`
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button
|
||||||
|
.hass=${this.hass}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
></ha-menu-button>
|
||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<ha-paper-icon-button-arrow-prev
|
<ha-paper-icon-button-arrow-prev
|
||||||
|
@ -15,25 +15,16 @@ class HassSubpage extends LitElement {
|
|||||||
@property()
|
@property()
|
||||||
public header?: string;
|
public header?: string;
|
||||||
|
|
||||||
@property({ type: Boolean })
|
|
||||||
public root = false;
|
|
||||||
|
|
||||||
@property({ type: Boolean })
|
@property({ type: Boolean })
|
||||||
public hassio = false;
|
public hassio = false;
|
||||||
|
|
||||||
protected render(): TemplateResult | void {
|
protected render(): TemplateResult | void {
|
||||||
return html`
|
return html`
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
${this.root
|
<ha-paper-icon-button-arrow-prev
|
||||||
? html`
|
.hassio=${this.hassio}
|
||||||
<ha-menu-button .hassio=${this.hassio}></ha-menu-button>
|
@click=${this._backTapped}
|
||||||
`
|
></ha-paper-icon-button-arrow-prev>
|
||||||
: html`
|
|
||||||
<ha-paper-icon-button-arrow-prev
|
|
||||||
.hassio=${this.hassio}
|
|
||||||
@click=${this._backTapped}
|
|
||||||
></ha-paper-icon-button-arrow-prev>
|
|
||||||
`}
|
|
||||||
|
|
||||||
<div main-title>${this.header}</div>
|
<div main-title>${this.header}</div>
|
||||||
<slot name="toolbar-icon"></slot>
|
<slot name="toolbar-icon"></slot>
|
||||||
|
@ -86,6 +86,8 @@ class PartialPanelResolver extends HassRouterPage {
|
|||||||
protected createLoadingScreen() {
|
protected createLoadingScreen() {
|
||||||
const el = super.createLoadingScreen();
|
const el = super.createLoadingScreen();
|
||||||
el.rootnav = true;
|
el.rootnav = true;
|
||||||
|
el.hass = this.hass;
|
||||||
|
el.narrow = this.narrow;
|
||||||
return el;
|
return el;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -67,7 +67,10 @@ class HaPanelCalendar extends LocalizeMixin(PolymerElement) {
|
|||||||
<app-header-layout has-scrolling-region>
|
<app-header-layout has-scrolling-region>
|
||||||
<app-header slot="header" fixed>
|
<app-header slot="header" fixed>
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button
|
||||||
|
hass="[[hass]]"
|
||||||
|
narrow="[[narrow]]"
|
||||||
|
></ha-menu-button>
|
||||||
<div main-title>[[localize('panel.calendar')]]</div>
|
<div main-title>[[localize('panel.calendar')]]</div>
|
||||||
</app-toolbar>
|
</app-toolbar>
|
||||||
</app-header>
|
</app-header>
|
||||||
|
@ -47,7 +47,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
|
|||||||
<app-header-layout has-scrolling-region="">
|
<app-header-layout has-scrolling-region="">
|
||||||
<app-header slot="header" fixed="">
|
<app-header slot="header" fixed="">
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button hass='[[hass]]' narrow='[[narrow]]'></ha-menu-button>
|
||||||
<div main-title="">[[localize('panel.config')]]</div>
|
<div main-title="">[[localize('panel.config')]]</div>
|
||||||
</app-toolbar>
|
</app-toolbar>
|
||||||
</app-header>
|
</app-header>
|
||||||
@ -125,6 +125,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
|
|||||||
static get properties() {
|
static get properties() {
|
||||||
return {
|
return {
|
||||||
hass: Object,
|
hass: Object,
|
||||||
|
narrow: Boolean,
|
||||||
isWide: Boolean,
|
isWide: Boolean,
|
||||||
cloudStatus: Object,
|
cloudStatus: Object,
|
||||||
showAdvanced: Boolean,
|
showAdvanced: Boolean,
|
||||||
|
@ -9,6 +9,7 @@ import {
|
|||||||
CoreFrontendUserData,
|
CoreFrontendUserData,
|
||||||
getOptimisticFrontendUserDataCollection,
|
getOptimisticFrontendUserDataCollection,
|
||||||
} from "../../data/frontend";
|
} from "../../data/frontend";
|
||||||
|
import { PolymerElement } from "@polymer/polymer";
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
// for fire event
|
// for fire event
|
||||||
@ -142,12 +143,29 @@ class HaPanelConfig extends HassRouterPage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected updatePageEl(el) {
|
protected updatePageEl(el) {
|
||||||
el.route = this.routeTail;
|
const showAdvanced = !!(
|
||||||
el.hass = this.hass;
|
this._coreUserData && this._coreUserData.showAdvanced
|
||||||
el.showAdvanced = !!(this._coreUserData && this._coreUserData.showAdvanced);
|
);
|
||||||
el.isWide = this.hass.dockedSidebar ? this._wideSidebar : this._wide;
|
const isWide = this.hass.dockedSidebar ? this._wideSidebar : this._wide;
|
||||||
el.narrow = this.narrow;
|
|
||||||
el.cloudStatus = this._cloudStatus;
|
if ("setProperties" in el) {
|
||||||
|
// As long as we have Polymer panels
|
||||||
|
(el as PolymerElement).setProperties({
|
||||||
|
route: this.routeTail,
|
||||||
|
hass: this.hass,
|
||||||
|
showAdvanced,
|
||||||
|
isWide,
|
||||||
|
narrow: this.narrow,
|
||||||
|
cloudStatus: this._cloudStatus,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
el.route = this.routeTail;
|
||||||
|
el.hass = this.hass;
|
||||||
|
el.showAdvanced = showAdvanced;
|
||||||
|
el.isWide = isWide;
|
||||||
|
el.narrow = this.narrow;
|
||||||
|
el.cloudStatus = this._cloudStatus;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _updateCloudStatus() {
|
private async _updateCloudStatus() {
|
||||||
|
@ -37,7 +37,10 @@ class PanelDeveloperTools extends LitElement {
|
|||||||
<app-header-layout has-scrolling-region>
|
<app-header-layout has-scrolling-region>
|
||||||
<app-header fixed slot="header">
|
<app-header fixed slot="header">
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button
|
||||||
|
.hass=${this.hass}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
></ha-menu-button>
|
||||||
<div main-title>Developer Tools</div>
|
<div main-title>Developer Tools</div>
|
||||||
</app-toolbar>
|
</app-toolbar>
|
||||||
<paper-tabs
|
<paper-tabs
|
||||||
|
@ -1,6 +1,3 @@
|
|||||||
import "@polymer/app-layout/app-header-layout/app-header-layout";
|
|
||||||
import "@polymer/app-layout/app-header/app-header";
|
|
||||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
|
||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
import "@polymer/paper-input/paper-textarea";
|
import "@polymer/paper-input/paper-textarea";
|
||||||
@ -8,7 +5,6 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
|
|||||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||||
|
|
||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import "../../../components/ha-menu-button";
|
|
||||||
import "../../../resources/ha-style";
|
import "../../../resources/ha-style";
|
||||||
import "../../../util/app-localstorage-document";
|
import "../../../util/app-localstorage-document";
|
||||||
|
|
||||||
@ -34,39 +30,28 @@ class HaPanelDevMqtt extends PolymerElement {
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<app-header-layout has-scrolling-region>
|
<app-localstorage-document key="panel-dev-mqtt-topic" data="{{topic}}">
|
||||||
<app-header slot="header" fixed>
|
</app-localstorage-document>
|
||||||
<app-toolbar>
|
<app-localstorage-document
|
||||||
<ha-menu-button></ha-menu-button>
|
key="panel-dev-mqtt-payload"
|
||||||
<div main-title>MQTT</div>
|
data="{{payload}}"
|
||||||
</app-toolbar>
|
>
|
||||||
</app-header>
|
</app-localstorage-document>
|
||||||
|
|
||||||
<app-localstorage-document key="panel-dev-mqtt-topic" data="{{topic}}">
|
<ha-card header="Publish a packet">
|
||||||
</app-localstorage-document>
|
<div class="card-content">
|
||||||
<app-localstorage-document
|
<paper-input label="topic" value="{{topic}}"></paper-input>
|
||||||
key="panel-dev-mqtt-payload"
|
|
||||||
data="{{payload}}"
|
|
||||||
>
|
|
||||||
</app-localstorage-document>
|
|
||||||
|
|
||||||
<div class="content">
|
<paper-textarea
|
||||||
<ha-card header="Publish a packet">
|
always-float-label
|
||||||
<div class="card-content">
|
label="Payload (template allowed)"
|
||||||
<paper-input label="topic" value="{{topic}}"></paper-input>
|
value="{{payload}}"
|
||||||
|
></paper-textarea>
|
||||||
<paper-textarea
|
|
||||||
always-float-label
|
|
||||||
label="Payload (template allowed)"
|
|
||||||
value="{{payload}}"
|
|
||||||
></paper-textarea>
|
|
||||||
</div>
|
|
||||||
<div class="card-actions">
|
|
||||||
<mwc-button on-click="_publish">Publish</mwc-button>
|
|
||||||
</div>
|
|
||||||
</ha-card>
|
|
||||||
</div>
|
</div>
|
||||||
</app-header-layout>
|
<div class="card-actions">
|
||||||
|
<mwc-button on-click="_publish">Publish</mwc-button>
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -65,7 +65,10 @@ class HaPanelHistory extends LocalizeMixin(PolymerElement) {
|
|||||||
<app-header-layout has-scrolling-region>
|
<app-header-layout has-scrolling-region>
|
||||||
<app-header slot="header" fixed>
|
<app-header slot="header" fixed>
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button
|
||||||
|
hass="[[hass]]"
|
||||||
|
narrow="[[narrow]]"
|
||||||
|
></ha-menu-button>
|
||||||
<div main-title>[[localize('panel.history')]]</div>
|
<div main-title>[[localize('panel.history')]]</div>
|
||||||
</app-toolbar>
|
</app-toolbar>
|
||||||
</app-header>
|
</app-header>
|
||||||
@ -116,9 +119,8 @@ class HaPanelHistory extends LocalizeMixin(PolymerElement) {
|
|||||||
|
|
||||||
static get properties() {
|
static get properties() {
|
||||||
return {
|
return {
|
||||||
hass: {
|
hass: Object,
|
||||||
type: Object,
|
narrow: Boolean,
|
||||||
},
|
|
||||||
|
|
||||||
stateHistory: {
|
stateHistory: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
@ -16,7 +16,7 @@ class HaPanelIframe extends PolymerElement {
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button hass="[[hass]]" narrow="[[narrow]]"></ha-menu-button>
|
||||||
<div main-title>[[panel.title]]</div>
|
<div main-title>[[panel.title]]</div>
|
||||||
</app-toolbar>
|
</app-toolbar>
|
||||||
|
|
||||||
@ -32,9 +32,9 @@ class HaPanelIframe extends PolymerElement {
|
|||||||
|
|
||||||
static get properties() {
|
static get properties() {
|
||||||
return {
|
return {
|
||||||
panel: {
|
hass: Object,
|
||||||
type: Object,
|
narrow: Boolean,
|
||||||
},
|
panel: Object,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -89,7 +89,10 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
|
|||||||
<app-header-layout has-scrolling-region>
|
<app-header-layout has-scrolling-region>
|
||||||
<app-header slot="header" fixed>
|
<app-header slot="header" fixed>
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button
|
||||||
|
hass="[[hass]]"
|
||||||
|
narrow="[[narrow]]"
|
||||||
|
></ha-menu-button>
|
||||||
<div main-title>[[localize('panel.logbook')]]</div>
|
<div main-title>[[localize('panel.logbook')]]</div>
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
icon="hass:refresh"
|
icon="hass:refresh"
|
||||||
@ -157,9 +160,8 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
|
|||||||
|
|
||||||
static get properties() {
|
static get properties() {
|
||||||
return {
|
return {
|
||||||
hass: {
|
hass: Object,
|
||||||
type: Object,
|
narrow: Boolean,
|
||||||
},
|
|
||||||
|
|
||||||
// ISO8601 formatted date string
|
// ISO8601 formatted date string
|
||||||
_currentDate: {
|
_currentDate: {
|
||||||
|
@ -95,7 +95,11 @@ class LovelacePanel extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<hass-loading-screen rootnav></hass-loading-screen>
|
<hass-loading-screen
|
||||||
|
rootnav
|
||||||
|
.hass=${this.hass}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
></hass-loading-screen>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -131,7 +131,10 @@ class HUIRoot extends LitElement {
|
|||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button
|
||||||
|
.hass=${this.hass}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
></ha-menu-button>
|
||||||
<div main-title>${this.config.title || "Home Assistant"}</div>
|
<div main-title>${this.config.title || "Home Assistant"}</div>
|
||||||
<ha-start-voice-button
|
<ha-start-voice-button
|
||||||
.hass="${this.hass}"
|
.hass="${this.hass}"
|
||||||
|
@ -80,7 +80,10 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||||||
<app-header-layout has-scrolling-region>
|
<app-header-layout has-scrolling-region>
|
||||||
<app-header slot="header" fixed>
|
<app-header slot="header" fixed>
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button
|
||||||
|
hass="[[hass]]"
|
||||||
|
narrow="[[narrow]]"
|
||||||
|
></ha-menu-button>
|
||||||
<div main-title>[[localize('panel.mailbox')]]</div>
|
<div main-title>[[localize('panel.mailbox')]]</div>
|
||||||
</app-toolbar>
|
</app-toolbar>
|
||||||
<div sticky hidden$="[[areTabsHidden(platforms)]]">
|
<div sticky hidden$="[[areTabsHidden(platforms)]]">
|
||||||
@ -128,9 +131,8 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||||||
|
|
||||||
static get properties() {
|
static get properties() {
|
||||||
return {
|
return {
|
||||||
hass: {
|
hass: Object,
|
||||||
type: Object,
|
narrow: Boolean,
|
||||||
},
|
|
||||||
|
|
||||||
platforms: {
|
platforms: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
@ -27,7 +27,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button hass="[[hass]]" narrow="[[narrow]]"></ha-menu-button>
|
||||||
<div main-title>[[localize('panel.map')]]</div>
|
<div main-title>[[localize('panel.map')]]</div>
|
||||||
</app-toolbar>
|
</app-toolbar>
|
||||||
|
|
||||||
@ -41,6 +41,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
|
|||||||
type: Object,
|
type: Object,
|
||||||
observer: "drawEntities",
|
observer: "drawEntities",
|
||||||
},
|
},
|
||||||
|
narrow: Boolean,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -55,7 +55,7 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||||||
<app-header-layout has-scrolling-region>
|
<app-header-layout has-scrolling-region>
|
||||||
<app-header slot="header" fixed>
|
<app-header slot="header" fixed>
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button hass='[[hass]]' narrow='[[narrow]]'></ha-menu-button>
|
||||||
<div main-title>[[localize('panel.profile')]]</div>
|
<div main-title>[[localize('panel.profile')]]</div>
|
||||||
</app-toolbar>
|
</app-toolbar>
|
||||||
</app-header>
|
</app-header>
|
||||||
|
@ -67,7 +67,10 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
|
|||||||
<app-header-layout has-scrolling-region>
|
<app-header-layout has-scrolling-region>
|
||||||
<app-header slot="header" fixed>
|
<app-header slot="header" fixed>
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button
|
||||||
|
hass="[[hass]]"
|
||||||
|
narrow="[[narrow]]"
|
||||||
|
></ha-menu-button>
|
||||||
<div main-title>[[localize('panel.shopping_list')]]</div>
|
<div main-title>[[localize('panel.shopping_list')]]</div>
|
||||||
<ha-start-voice-button
|
<ha-start-voice-button
|
||||||
hass="[[hass]]"
|
hass="[[hass]]"
|
||||||
@ -139,6 +142,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
|
|||||||
static get properties() {
|
static get properties() {
|
||||||
return {
|
return {
|
||||||
hass: Object,
|
hass: Object,
|
||||||
|
narrow: Boolean,
|
||||||
canListen: Boolean,
|
canListen: Boolean,
|
||||||
items: {
|
items: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
@ -65,7 +65,10 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
|
|||||||
<ha-app-layout id="layout">
|
<ha-app-layout id="layout">
|
||||||
<app-header effects="waterfall" condenses="" fixed="" slot="header">
|
<app-header effects="waterfall" condenses="" fixed="" slot="header">
|
||||||
<app-toolbar>
|
<app-toolbar>
|
||||||
<ha-menu-button></ha-menu-button>
|
<ha-menu-button
|
||||||
|
hass="[[hass]]"
|
||||||
|
narrow="[[narrow]]"
|
||||||
|
></ha-menu-button>
|
||||||
<div main-title="">
|
<div main-title="">
|
||||||
[[computeTitle(views, defaultView, locationName)]]
|
[[computeTitle(views, defaultView, locationName)]]
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user