Compact header (#7369)

Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-sidebar.ts

@@ -736,8 +736,7 @@ class HaSidebar extends LitElement {
           border-left: 1px solid var(--divider-color);
         }
         .menu {
-          box-sizing: border-box;
+          height: var(--header-height);
-          height: 65px;
           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);

src/components/ha-tabs.ts

@@ -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;
     }
   }
 }

src/dialogs/notifications/notification-drawer.js

@@ -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);

src/layouts/hass-error-screen.ts

@@ -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;

src/layouts/hass-loading-screen.ts

@@ -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;

src/layouts/hass-subpage.ts

@@ -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;

src/layouts/hass-tabs-subpage-data-table.ts

@@ -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 {

src/layouts/hass-tabs-subpage.ts

@@ -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% - 1px - var(--header-height));
-        height: calc(100% - 65px - env(safe-area-inset-bottom));
+        height: calc(
-        overflow-y: auto;
+          100% - 1px - var(--header-height) - env(safe-area-inset-bottom)
+        );
         overflow: auto;
         -webkit-overflow-scrolling: touch;
       }

src/panels/calendar/ha-panel-calendar.ts

@@ -179,7 +179,7 @@ class PanelCalendar extends LitElement {
         }
 
         :host(:not([narrow])) .content {
-          height: calc(100vh - 64px);
+          height: calc(100vh - var(--header-height);
         }
 
         .calendar-list {

src/panels/config/entities/ha-config-entities.ts

@@ -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 {

src/panels/iframe/ha-panel-iframe.js

@@ -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>

src/panels/lovelace/cards/hui-starting-card.ts

@@ -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;

src/panels/lovelace/hui-root.ts

@@ -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.lovelace!.config.views.length > 1
-                  ${this._conversation(this.hass.config.components)
+                    ? 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
-                              "ui.panel.lovelace.menu.refresh"
+                              >${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
-                              "ui.panel.lovelace.unused_entities.title"
+                              >${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
+        <div id="view" @ll-rebuild="${this._debouncedConfigChanged}"></div>
-          id="view"
-          class="${classMap({
-            "tabs-hidden":
-              !this._editMode && this.lovelace!.config.views.length < 2,
-          })}"
-          @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
+        fireEvent(this, "iron-resize");
-        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);
+          width: 100%;
-          margin-right: max(env(safe-area-inset-right), 24px);
+          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;
         }

src/panels/lovelace/views/hui-masonry-view.ts

@@ -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;

src/panels/lovelace/views/hui-panel-view.ts

@@ -131,7 +131,6 @@ export class PanelView extends LitElement implements LovelaceViewElement {
     return css`
       :host {
         display: block;
-        background: var(--lovelace-background);
         height: 100%;
       }
 

src/panels/mailbox/ha-dialog-show-audio-message.js

@@ -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;

src/panels/map/ha-panel-map.js

@@ -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;

src/panels/media-browser/ha-panel-media-browser.ts

@@ -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;

src/resources/ha-style.ts

@@ -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;

src/resources/styles.ts

@@ -112,12 +112,16 @@ export const haStyle = css`
     color: var(--app-header-text-color, white);
   }
 
-  app-toolbar [main-title] {
+  app-toolbar {
-    margin-left: 20px;
+    height: var(--header-height);
   }
 
-  ha-menu-button {
+  app-header div[sticky] {
-    margin-left: 4px;
+    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;

src/translations/en.json

@@ -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"