Keep root state when replacing, fix subpages for menu button on mobile (#8837)
This commit is contained in:
parent
2aac8c55e7
commit
26c4591baa
|
@ -12,12 +12,16 @@ declare global {
|
|||
export const navigate = (_node: any, path: string, replace = false) => {
|
||||
if (__DEMO__) {
|
||||
if (replace) {
|
||||
history.replaceState(null, "", `${location.pathname}#${path}`);
|
||||
history.replaceState(
|
||||
history.state?.root ? { root: true } : null,
|
||||
"",
|
||||
`${location.pathname}#${path}`
|
||||
);
|
||||
} else {
|
||||
window.location.hash = path;
|
||||
}
|
||||
} else if (replace) {
|
||||
history.replaceState(null, "", path);
|
||||
history.replaceState(history.state?.root ? { root: true } : null, "", path);
|
||||
} else {
|
||||
history.pushState(null, "", path);
|
||||
}
|
||||
|
|
|
@ -89,15 +89,12 @@ class HassSubpage extends LitElement {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ha-menu-button,
|
||||
ha-icon-button-arrow-prev,
|
||||
::slotted([slot="toolbar-icon"]) {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
ha-icon-button-arrow-prev.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
margin: 0 0 0 24px;
|
||||
line-height: 20px;
|
||||
|
|
|
@ -140,7 +140,7 @@ class HassTabsSubpage extends LitElement {
|
|||
const showTabs = tabs.length > 1 || !this.narrow;
|
||||
return html`
|
||||
<div class="toolbar">
|
||||
${this.mainPage || history.state?.root
|
||||
${this.mainPage || (!this.backPath && history.state?.root)
|
||||
? html`
|
||||
<ha-menu-button
|
||||
.hassio=${this.supervisor}
|
||||
|
@ -289,8 +289,10 @@ class HassTabsSubpage extends LitElement {
|
|||
}
|
||||
|
||||
:host([narrow]) .content.tabs {
|
||||
height: calc(100% - 128px);
|
||||
height: calc(100% - 128px - env(safe-area-inset-bottom));
|
||||
height: calc(100% - 2 * var(--header-height));
|
||||
height: calc(
|
||||
100% - 2 * var(--header-height) - env(safe-area-inset-bottom)
|
||||
);
|
||||
}
|
||||
|
||||
#fab {
|
||||
|
|
|
@ -62,7 +62,11 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||
color: var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
<hass-subpage hass="[[hass]]" header="Home Assistant Cloud">
|
||||
<hass-subpage
|
||||
hass="[[hass]]"
|
||||
narrow="[[narrow]]"
|
||||
header="Home Assistant Cloud"
|
||||
>
|
||||
<div class="content">
|
||||
<ha-config-section is-wide="[[isWide]]">
|
||||
<span slot="header">Home Assistant Cloud</span>
|
||||
|
@ -167,6 +171,7 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||
return {
|
||||
hass: Object,
|
||||
isWide: Boolean,
|
||||
narrow: Boolean,
|
||||
cloudStatus: Object,
|
||||
_subscription: {
|
||||
type: Object,
|
||||
|
|
|
@ -47,6 +47,7 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||
</style>
|
||||
<hass-subpage
|
||||
hass="[[hass]]"
|
||||
narrow="[[narrow]]"
|
||||
header="[[localize('ui.panel.config.cloud.forgot_password.title')]]"
|
||||
>
|
||||
<div class="content">
|
||||
|
@ -84,6 +85,7 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
narrow: Boolean,
|
||||
email: {
|
||||
type: String,
|
||||
notify: true,
|
||||
|
|
|
@ -128,6 +128,7 @@ class HaConfigCloud extends HassRouterPage {
|
|||
hass: this.hass,
|
||||
email: this._loginEmail,
|
||||
isWide: this.isWide,
|
||||
narrow: this.narrow,
|
||||
cloudStatus: this.cloudStatus,
|
||||
flashMessage: this._flashMessage,
|
||||
});
|
||||
|
|
|
@ -85,7 +85,11 @@ class CloudLogin extends LocalizeMixin(
|
|||
align-self: flex-end;
|
||||
}
|
||||
</style>
|
||||
<hass-subpage hass="[[hass]]" header="Home Assistant Cloud">
|
||||
<hass-subpage
|
||||
hass="[[hass]]"
|
||||
narrow="[[narrow]]"
|
||||
header="Home Assistant Cloud"
|
||||
>
|
||||
<div class="content">
|
||||
<ha-config-section is-wide="[[isWide]]">
|
||||
<span slot="header">Home Assistant Cloud</span>
|
||||
|
@ -186,6 +190,7 @@ class CloudLogin extends LocalizeMixin(
|
|||
return {
|
||||
hass: Object,
|
||||
isWide: Boolean,
|
||||
narrow: Boolean,
|
||||
email: {
|
||||
type: String,
|
||||
notify: true,
|
||||
|
|
|
@ -47,7 +47,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||
display: none;
|
||||
}
|
||||
</style>
|
||||
<hass-subpage hass="[[hass]]" header="[[localize('ui.panel.config.cloud.register.title')]]">
|
||||
<hass-subpage hass="[[hass]]" narrow="[[narrow]]" header="[[localize('ui.panel.config.cloud.register.title')]]">
|
||||
<div class="content">
|
||||
<ha-config-section is-wide="[[isWide]]">
|
||||
<span slot="header">[[localize('ui.panel.config.cloud.register.headline')]]</span>
|
||||
|
@ -100,6 +100,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||
return {
|
||||
hass: Object,
|
||||
isWide: Boolean,
|
||||
narrow: Boolean,
|
||||
email: {
|
||||
type: String,
|
||||
notify: true,
|
||||
|
|
|
@ -68,6 +68,7 @@ export class ZHAAddGroupPage extends LitElement {
|
|||
return html`
|
||||
<hass-subpage
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.header=${this.hass.localize("ui.panel.config.zha.groups.create_group")}
|
||||
>
|
||||
<ha-config-section .isWide=${!this.narrow}>
|
||||
|
|
|
@ -103,7 +103,11 @@ export class ZHAGroupPage extends LitElement {
|
|||
}
|
||||
|
||||
return html`
|
||||
<hass-subpage .hass=${this.hass} .header=${this.group.name}>
|
||||
<hass-subpage
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.header=${this.group.name}
|
||||
>
|
||||
<ha-icon-button
|
||||
slot="toolbar-icon"
|
||||
icon="hass:delete"
|
||||
|
|
|
@ -135,6 +135,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
|
|||
return html`
|
||||
<hass-subpage
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.header=${this.hass.localize(
|
||||
"ui.panel.config.zha.visualization.header"
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue