github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

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:
Ryan Meek 2020-10-21 08:18:33 -04:00 committed by GitHub
parent fb9bd0eb7d
commit 3c4b0d4a74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 168 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ha-sidebar.ts
View File

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

13
src/components/ha-tabs.ts
View File

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

2
src/dialogs/notifications/notification-drawer.js
View File

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

2
src/layouts/hass-error-screen.ts
View File

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

2
src/layouts/hass-loading-screen.ts
View File

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

2
src/layouts/hass-subpage.ts
View File

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

2
src/layouts/hass-tabs-subpage-data-table.ts
View File

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

7
src/layouts/hass-tabs-subpage.ts
View File

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

2
src/panels/calendar/ha-panel-calendar.ts
View File

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

2
src/panels/config/entities/ha-config-entities.ts
View File

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

2
src/panels/iframe/ha-panel-iframe.js
View File

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

2
src/panels/lovelace/cards/hui-starting-card.ts
View File

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

160
src/panels/lovelace/hui-root.ts
View File

@ -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(
"ui.panel.lovelace.menu.refresh"
)}
<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(
"ui.panel.lovelace.unused_entities.title"
)}
<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");
}
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;
}

1
src/panels/lovelace/views/hui-masonry-view.ts
View File

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

1
src/panels/lovelace/views/hui-panel-view.ts
View File

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

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

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

2
src/panels/map/ha-panel-map.js
View File

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

3
src/panels/media-browser/ha-panel-media-browser.ts
View File

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

3
src/resources/ha-style.ts
View File

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

14
src/resources/styles.ts
View File

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

1
src/translations/en.json
View File

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