Compact header (#7369)
Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io> Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
fb9bd0eb7d
commit
3c4b0d4a74
|
@ -736,8 +736,7 @@ class HaSidebar extends LitElement {
|
|||
border-left: 1px solid var(--divider-color);
|
||||
}
|
||||
.menu {
|
||||
box-sizing: border-box;
|
||||
height: 65px;
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
padding: 0 8.5px;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
@ -794,7 +793,10 @@ class HaSidebar extends LitElement {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 196px - env(safe-area-inset-bottom));
|
||||
height: calc(100% - var(--header-height) - 132px);
|
||||
height: calc(
|
||||
100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
|
||||
);
|
||||
overflow-x: hidden;
|
||||
background: none;
|
||||
margin-left: env(safe-area-inset-left);
|
||||
|
|
|
@ -34,14 +34,17 @@ export class HaTabs extends PaperTabs {
|
|||
|
||||
superStyle!.appendChild(
|
||||
document.createTextNode(`
|
||||
:host {
|
||||
padding-top: .5px;
|
||||
}
|
||||
.not-visible {
|
||||
display: none;
|
||||
}
|
||||
:host > paper-icon-button:first-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
paper-icon-button {
|
||||
margin: 0 -8px 0 0;
|
||||
width: 24px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
`)
|
||||
);
|
||||
|
@ -85,7 +88,7 @@ export class HaTabs extends PaperTabs {
|
|||
|
||||
if (this._lastLeftHiddenState !== this._leftHidden) {
|
||||
this._lastLeftHiddenState = this._leftHidden;
|
||||
this.$.tabsContainer.scrollLeft += this._leftHidden ? -46 : 46;
|
||||
this.$.tabsContainer.scrollLeft += this._leftHidden ? -23 : 23;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -40,7 +40,7 @@ export class HuiNotificationDrawer extends EventsMixin(
|
|||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
height: calc(100% - 65px);
|
||||
height: calc(100% - 1px - var(--header-height));
|
||||
box-sizing: border-box;
|
||||
background-color: var(--primary-background-color);
|
||||
color: var(--primary-text-color);
|
||||
|
|
|
@ -64,7 +64,7 @@ class HassErrorScreen extends LitElement {
|
|||
}
|
||||
.content {
|
||||
color: var(--primary-text-color);
|
||||
height: calc(100% - 64px);
|
||||
height: calc(100% - var(--header-height));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
@ -80,7 +80,7 @@ class HassLoadingScreen extends LitElement {
|
|||
pointer-events: auto;
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 64px);
|
||||
height: calc(100% - var(--header-height));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
@ -97,7 +97,7 @@ class HassSubpage extends LitElement {
|
|||
.content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 65px);
|
||||
height: calc(100% - 1px - var(--header-height));
|
||||
overflow-y: auto;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
|
|
@ -227,7 +227,7 @@ export class HaTabsSubpageDataTable extends LitElement {
|
|||
--data-table-border-width: 0;
|
||||
}
|
||||
:host(:not([narrow])) ha-data-table {
|
||||
height: calc(100vh - 65px);
|
||||
height: calc(100vh - 1px - var(--header-height));
|
||||
display: block;
|
||||
}
|
||||
.table-header {
|
||||
|
|
|
@ -278,9 +278,10 @@ class HassTabsSubpage extends LitElement {
|
|||
);
|
||||
margin-left: env(safe-area-inset-left);
|
||||
margin-right: env(safe-area-inset-right);
|
||||
height: calc(100% - 65px);
|
||||
height: calc(100% - 65px - env(safe-area-inset-bottom));
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 1px - var(--header-height));
|
||||
height: calc(
|
||||
100% - 1px - var(--header-height) - env(safe-area-inset-bottom)
|
||||
);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
|
|
@ -179,7 +179,7 @@ class PanelCalendar extends LitElement {
|
|||
}
|
||||
|
||||
:host(:not([narrow])) .content {
|
||||
height: calc(100vh - 64px);
|
||||
height: calc(100vh - var(--header-height);
|
||||
}
|
||||
|
||||
.calendar-list {
|
||||
|
|
|
@ -834,7 +834,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
|
|||
--data-table-border-width: 0;
|
||||
}
|
||||
:host(:not([narrow])) ha-data-table {
|
||||
height: calc(100vh - 65px);
|
||||
height: calc(100vh - 1px - var(--header-height));
|
||||
display: block;
|
||||
}
|
||||
ha-button-menu {
|
||||
|
|
|
@ -13,7 +13,7 @@ class HaPanelIframe extends PolymerElement {
|
|||
border: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: calc(100% - 64px);
|
||||
height: calc(100% - var(--header-height));
|
||||
background-color: var(--primary-background-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -57,7 +57,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
|
|||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
height: calc(100vh - 64px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
}
|
||||
ha-circular-progress {
|
||||
padding-bottom: 20px;
|
||||
|
|
|
@ -3,11 +3,15 @@ import "@material/mwc-list/mwc-list-item";
|
|||
import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
|
||||
import {
|
||||
mdiClose,
|
||||
mdiCog,
|
||||
mdiDotsVertical,
|
||||
mdiHelp,
|
||||
mdiHelpCircle,
|
||||
mdiMicrophone,
|
||||
mdiPencil,
|
||||
mdiPlus,
|
||||
mdiRefresh,
|
||||
mdiShape,
|
||||
} from "@mdi/js";
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
|
||||
|
@ -21,6 +25,7 @@ import {
|
|||
LitElement,
|
||||
property,
|
||||
PropertyValues,
|
||||
query,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
|
@ -51,6 +56,7 @@ import {
|
|||
} from "../../dialogs/generic/show-dialog-box";
|
||||
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";
|
||||
|
@ -72,6 +78,8 @@ class HUIRoot extends LitElement {
|
|||
|
||||
@internalProperty() private _curView?: number | "hass-unused-entities";
|
||||
|
||||
@query("ha-app-layout", true) private _appLayout!: haAppLayout;
|
||||
|
||||
private _viewCache?: { [viewId: string]: HUIView };
|
||||
|
||||
private _debouncedConfigChanged: () => void;
|
||||
|
@ -187,11 +195,50 @@ class HUIRoot extends LitElement {
|
|||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.config.title || "Home Assistant"}</div>
|
||||
${this._conversation(this.hass.config.components)
|
||||
${this.lovelace!.config.views.length > 1
|
||||
? html`
|
||||
<ha-tabs
|
||||
scrollable
|
||||
.selected="${this._curView}"
|
||||
@iron-activate="${this._handleViewSelected}"
|
||||
dir="${computeRTLDirection(this.hass!)}"
|
||||
>
|
||||
${this.lovelace!.config.views.map(
|
||||
(view) => html`
|
||||
<paper-tab
|
||||
aria-label="${view.title}"
|
||||
class="${classMap({
|
||||
"hide-tab": Boolean(
|
||||
view.visible !== undefined &&
|
||||
((Array.isArray(view.visible) &&
|
||||
!view.visible.some(
|
||||
(e) => e.user === this.hass!.user!.id
|
||||
)) ||
|
||||
view.visible === false)
|
||||
),
|
||||
})}"
|
||||
>
|
||||
${view.icon
|
||||
? html`
|
||||
<ha-icon
|
||||
title="${view.title}"
|
||||
.icon="${view.icon}"
|
||||
></ha-icon>
|
||||
`
|
||||
: view.title || "Unnamed view"}
|
||||
</paper-tab>
|
||||
`
|
||||
)}
|
||||
</ha-tabs>
|
||||
`
|
||||
: html`<div main-title>${this.config.title}</div>`}
|
||||
${!this.narrow &&
|
||||
this._conversation(this.hass.config.components)
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
label="Start conversation"
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.start_conversation"
|
||||
)}
|
||||
@click=${this._showVoiceCommandDialog}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiMicrophone}></ha-svg-icon>
|
||||
|
@ -210,27 +257,63 @@ class HUIRoot extends LitElement {
|
|||
>
|
||||
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
${this.narrow &&
|
||||
this._conversation(this.hass.config.components)
|
||||
? html`
|
||||
<mwc-list-item
|
||||
.label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.start_conversation"
|
||||
)}
|
||||
graphic="icon"
|
||||
@request-selected=${this._showVoiceCommandDialog}
|
||||
>
|
||||
<span
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.start_conversation"
|
||||
)}</span
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiMicrophone}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${this._yamlMode
|
||||
? html`
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.refresh"
|
||||
)}
|
||||
graphic="icon"
|
||||
@request-selected="${this._handleRefresh}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
<span
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.refresh"
|
||||
)}
|
||||
)}</span
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiRefresh}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
<mwc-list-item
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
graphic="icon"
|
||||
@request-selected="${this._handleUnusedEntities}"
|
||||
>
|
||||
${this.hass!.localize(
|
||||
<span
|
||||
>${this.hass!.localize(
|
||||
"ui.panel.lovelace.unused_entities.title"
|
||||
)}
|
||||
)}</span
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiShape}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
|
@ -238,6 +321,7 @@ class HUIRoot extends LitElement {
|
|||
?.mode === "yaml"
|
||||
? html`
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.reload_resources"
|
||||
)}
|
||||
|
@ -246,12 +330,17 @@ class HUIRoot extends LitElement {
|
|||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.reload_resources"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiRefresh}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
${this.hass!.user?.is_admin && !this.hass!.config.safe_mode
|
||||
? html`
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.configure_ui"
|
||||
)}
|
||||
|
@ -260,6 +349,10 @@ class HUIRoot extends LitElement {
|
|||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.configure_ui"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiCog}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
`
|
||||
: ""}
|
||||
|
@ -270,17 +363,22 @@ class HUIRoot extends LitElement {
|
|||
target="_blank"
|
||||
>
|
||||
<mwc-list-item
|
||||
graphic="icon"
|
||||
aria-label=${this.hass!.localize(
|
||||
"ui.panel.lovelace.menu.help"
|
||||
)}
|
||||
>
|
||||
${this.hass!.localize("ui.panel.lovelace.menu.help")}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiHelp}
|
||||
></ha-svg-icon>
|
||||
</mwc-list-item>
|
||||
</a>
|
||||
</ha-button-menu>
|
||||
</app-toolbar>
|
||||
`}
|
||||
${this.lovelace!.config.views.length > 1 || this._editMode
|
||||
${this._editMode
|
||||
? html`
|
||||
<div sticky>
|
||||
<ha-tabs
|
||||
|
@ -368,14 +466,7 @@ class HUIRoot extends LitElement {
|
|||
`
|
||||
: ""}
|
||||
</app-header>
|
||||
<div
|
||||
id="view"
|
||||
class="${classMap({
|
||||
"tabs-hidden":
|
||||
!this._editMode && this.lovelace!.config.views.length < 2,
|
||||
})}"
|
||||
@ll-rebuild="${this._debouncedConfigChanged}"
|
||||
></div>
|
||||
<div id="view" @ll-rebuild="${this._debouncedConfigChanged}"></div>
|
||||
</ha-app-layout>
|
||||
`;
|
||||
}
|
||||
|
@ -443,10 +534,7 @@ class HUIRoot extends LitElement {
|
|||
if (!oldLovelace || oldLovelace.editMode !== this.lovelace!.editMode) {
|
||||
const views = this.config && this.config.views;
|
||||
|
||||
// Adjust for higher header
|
||||
if (!views || views.length < 2) {
|
||||
fireEvent(this, "iron-resize");
|
||||
}
|
||||
|
||||
// Leave unused entities when leaving edit mode
|
||||
if (
|
||||
|
@ -643,12 +731,6 @@ class HUIRoot extends LitElement {
|
|||
unusedEntities.lovelace = this.lovelace!;
|
||||
unusedEntities.narrow = this.narrow;
|
||||
});
|
||||
if (this.config.background) {
|
||||
unusedEntities.style.setProperty(
|
||||
"--lovelace-background",
|
||||
this.config.background
|
||||
);
|
||||
}
|
||||
root.appendChild(unusedEntities);
|
||||
return;
|
||||
}
|
||||
|
@ -675,7 +757,12 @@ class HUIRoot extends LitElement {
|
|||
const configBackground = viewConfig.background || this.config.background;
|
||||
|
||||
if (configBackground) {
|
||||
view.style.setProperty("--lovelace-background", configBackground);
|
||||
this._appLayout.style.setProperty(
|
||||
"--lovelace-background",
|
||||
configBackground
|
||||
);
|
||||
} else {
|
||||
this._appLayout.style.removeProperty("--lovelace-background");
|
||||
}
|
||||
|
||||
root.appendChild(view);
|
||||
|
@ -697,13 +784,19 @@ class HUIRoot extends LitElement {
|
|||
|
||||
ha-app-layout {
|
||||
min-height: 100%;
|
||||
background: var(--lovelace-background);
|
||||
}
|
||||
ha-tabs {
|
||||
margin-left: max(env(safe-area-inset-left), 24px);
|
||||
margin-right: max(env(safe-area-inset-right), 24px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 4px;
|
||||
--paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.edit-mode ha-tabs {
|
||||
margin-left: max(env(safe-area-inset-left), 24px);
|
||||
margin-right: max(env(safe-area-inset-right), 24px);
|
||||
}
|
||||
.edit-mode {
|
||||
background-color: var(--dark-color, #455a64);
|
||||
color: var(--text-dark-color);
|
||||
|
@ -738,7 +831,7 @@ class HUIRoot extends LitElement {
|
|||
color: var(--error-color);
|
||||
}
|
||||
#view {
|
||||
min-height: calc(100vh - 112px);
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
/**
|
||||
* Since we only set min-height, if child nodes need percentage
|
||||
* heights they must use absolute positioning so we need relative
|
||||
|
@ -761,9 +854,6 @@ class HUIRoot extends LitElement {
|
|||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
#view.tabs-hidden {
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
.hide-tab {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -260,7 +260,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
|
|||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
background: var(--lovelace-background);
|
||||
padding-top: 4px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
|
|
@ -131,7 +131,6 @@ export class PanelView extends LitElement implements LovelaceViewElement {
|
|||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
background: var(--lovelace-background);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
|
@ -21,7 +21,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
|
|||
ha-paper-dialog {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-height: calc(100% - 64px);
|
||||
max-height: calc(100% - var(--header-height));
|
||||
|
||||
position: fixed !important;
|
||||
bottom: 0px;
|
||||
|
|
|
@ -25,7 +25,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
|
|||
return html`
|
||||
<style include="ha-style">
|
||||
#map {
|
||||
height: calc(100vh - 64px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
background: inherit;
|
||||
|
|
|
@ -137,7 +137,7 @@ class PanelMediaBrowser extends LitElement {
|
|||
--mdc-theme-primary: var(--app-header-text-color);
|
||||
}
|
||||
ha-media-player-browse {
|
||||
height: calc(100vh - 64px);
|
||||
height: calc(100vh - var(--header-height));
|
||||
}
|
||||
:host([narrow]) app-toolbar mwc-button {
|
||||
width: 65px;
|
||||
|
@ -145,6 +145,7 @@ class PanelMediaBrowser extends LitElement {
|
|||
.heading {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.heading .secondary-text {
|
||||
font-size: 14px;
|
||||
|
|
|
@ -48,6 +48,9 @@ documentContainer.innerHTML = `<custom-style>
|
|||
--primary-background-color: #fafafa;
|
||||
--secondary-background-color: #e5e5e5; /* behind the cards on state */
|
||||
|
||||
/* for header */
|
||||
--header-height: 64px;
|
||||
|
||||
/* for label-badge */
|
||||
--label-badge-red: #DF4C1E;
|
||||
--label-badge-blue: #039be5;
|
||||
|
|
|
@ -112,12 +112,16 @@ export const haStyle = css`
|
|||
color: var(--app-header-text-color, white);
|
||||
}
|
||||
|
||||
app-toolbar [main-title] {
|
||||
margin-left: 20px;
|
||||
app-toolbar {
|
||||
height: var(--header-height);
|
||||
}
|
||||
|
||||
ha-menu-button {
|
||||
margin-left: 4px;
|
||||
app-header div[sticky] {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
app-toolbar [main-title] {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
@ -277,7 +281,7 @@ export const haStyleDialog = css`
|
|||
max-width: calc(
|
||||
100% - env(safe-area-inset-right) - env(safe-area-inset-left)
|
||||
) !important;
|
||||
max-height: calc(100% - 64px);
|
||||
max-height: calc(100% - var(--header-height));
|
||||
|
||||
position: fixed !important;
|
||||
bottom: 0px;
|
||||
|
|
|
@ -2279,6 +2279,7 @@
|
|||
"configure_ui": "Edit Dashboard",
|
||||
"help": "Help",
|
||||
"refresh": "Refresh",
|
||||
"start_conversation": "Start conversation",
|
||||
"reload_resources": "Reload resources",
|
||||
"exit_edit_mode": "Exit UI edit mode",
|
||||
"close": "Close"
|
||||
|
|
Loading…
Reference in New Issue