Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-02-15 07:25:54 +00:00
Code Activity

Update top bar title margin on config and dashboard page (#29212)

Browse Source
This commit is contained in:
Paul Bottein
2026-01-27 21:32:43 +01:00
committed by GitHub
parent 4c25c639af
commit c66b4e2027
10 changed files with 48 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/util/compute_rtl.ts
View File

@@ -34,10 +34,6 @@ export function setDirectionStyles(direction: string, element: LitElement) {
"--float-end",
direction === "ltr" ? "right" : "left"
);
element.style.setProperty(
"--margin-title",
direction === "ltr" ? "var(--margin-title-ltr)" : "var(--margin-title-rtl)"
);
element.style.setProperty(
"--scale-direction",
direction === "ltr" ? "1" : "-1"

5
src/components/ha-top-app-bar-fixed.ts
View File

@@ -42,9 +42,12 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
}
.mdc-top-app-bar__title {
font-size: var(--ha-font-size-xl);
padding-inline-start: 24px;
padding-inline-start: var(--ha-space-6);
padding-inline-end: initial;
}
:host([narrow]) .mdc-top-app-bar__title {
padding-inline-start: var(--ha-space-2);
}
`,
];
}

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

@@ -1,6 +1,7 @@
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, eventOptions, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { restoreScroll } from "../common/decorators/restore-scroll";
import { goBack } from "../common/navigate";
import "../components/ha-icon-button-arrow-prev";
@@ -27,7 +28,7 @@ class HassSubpage extends LitElement {
protected render(): TemplateResult {
return html`
<div class="toolbar">
<div class="toolbar ${classMap({ narrow: this.narrow })}">
<div class="toolbar-content">
${this.mainPage || history.state?.root
? html`
@@ -132,7 +133,7 @@ class HassSubpage extends LitElement {
}
.main-title {
margin: var(--margin-title);
margin-inline-start: var(--ha-space-6);
line-height: var(--ha-line-height-normal);
min-width: 0;
flex-grow: 1;
@@ -143,6 +144,9 @@ class HassSubpage extends LitElement {
overflow: hidden;
text-overflow: ellipsis;
}
.narrow .main-title {
margin-inline-start: var(--ha-space-2);
}
.content {
position: relative;

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

@@ -131,7 +131,7 @@ class HassTabsSubpage extends LitElement {
);
const showTabs = tabs.length > 1;
return html`
<div class="toolbar">
<div class="toolbar ${classMap({ narrow: this.narrow })}">
<slot name="toolbar">
<div class="toolbar-content">
${this.mainPage || (!this.backPath && history.state?.root)
@@ -320,7 +320,10 @@ class HassTabsSubpage extends LitElement {
max-height: var(--header-height);
line-height: var(--ha-line-height-normal);
color: var(--sidebar-text-color);
margin: var(--main-title-margin, var(--margin-title));
margin-inline-start: var(--main-title-margin, var(--ha-space-6));
}
.narrow .main-title {
margin-inline-start: var(--main-title-margin, var(--ha-space-2));
}
.content {

8
src/panels/app/ha-panel-app.ts
View File

@@ -3,6 +3,7 @@ import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { createRef, ref } from "lit/directives/ref";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";
import { navigate } from "../../common/navigate";
@@ -116,7 +117,7 @@ class HaPanelApp extends LitElement {
${!this._kioskMode &&
(this.narrow || this.hass.dockedSidebar === "always_hidden")
? html`
<div class="header">
<div class="header ${classMap({ narrow: this.narrow })}">
<ha-icon-button
.label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
.path=${mdiMenu}
@@ -452,10 +453,13 @@ class HaPanelApp extends LitElement {
}
.main-title {
margin: var(--margin-title);
margin-inline-start: var(--ha-space-6);
line-height: var(--ha-line-height-condensed);
flex-grow: 1;
}
.narrow .main-title {
margin-inline-start: var(--ha-space-2);
}
ha-icon-button {
pointer-events: auto;

10
src/panels/climate/ha-panel-climate.ts
View File

@@ -1,6 +1,7 @@
import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { goBack } from "../../common/navigate";
import { debounce } from "../../common/util/debounce";
import { deepEqual } from "../../common/util/deep-equal";
@@ -12,8 +13,8 @@ import type { HomeAssistant } from "../../types";
import { generateLovelaceViewStrategy } from "../lovelace/strategies/get-strategy";
import type { Lovelace } from "../lovelace/types";
import "../lovelace/views/hui-view";
import "../lovelace/views/hui-view-container";
import "../lovelace/views/hui-view-background";
import "../lovelace/views/hui-view-container";
const CLIMATE_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
strategy: {
@@ -95,7 +96,7 @@ class PanelClimate extends LitElement {
protected render() {
return html`
<div class="header">
<div class="header ${classMap({ narrow: this.narrow })}">
<div class="toolbar">
${
this._searchParms.has("historyBack")
@@ -225,10 +226,13 @@ class PanelClimate extends LitElement {
padding: 0 4px;
}
.main-title {
margin: var(--margin-title);
margin-inline-start: var(--ha-space-6);
line-height: var(--ha-line-height-normal);
flex-grow: 1;
}
.narrow .main-title {
margin-inline-start: var(--ha-space-2);
}
hui-view-container {
position: relative;
display: flex;

8
src/panels/developer-tools/ha-panel-developer-tools.ts
View File

@@ -2,6 +2,7 @@ import { mdiDotsVertical } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { goBack, navigate } from "../../common/navigate";
import "../../components/ha-dropdown";
import "../../components/ha-dropdown-item";
@@ -30,7 +31,7 @@ class PanelDeveloperTools extends LitElement {
protected render(): TemplateResult {
const page = this._page;
return html`
<div class="header">
<div class="header ${classMap({ narrow: this.narrow })}">
<div class="toolbar">
<ha-icon-button-arrow-prev
slot="navigationIcon"
@@ -188,10 +189,13 @@ class PanelDeveloperTools extends LitElement {
padding: var(--ha-space-1);
}
.main-title {
margin: var(--margin-title);
margin-inline-start: var(--ha-space-6);
line-height: var(--ha-line-height-normal);
flex-grow: 1;
}
.narrow .main-title {
margin-inline-start: var(--ha-space-2);
}
developer-tools-router {
display: block;
padding-top: calc(

8
src/panels/light/ha-panel-light.ts
View File

@@ -1,6 +1,7 @@
import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { goBack } from "../../common/navigate";
import { debounce } from "../../common/util/debounce";
import { deepEqual } from "../../common/util/deep-equal";
@@ -95,7 +96,7 @@ class PanelLight extends LitElement {
protected render() {
return html`
<div class="header">
<div class="header ${classMap({ narrow: this.narrow })}">
<div class="toolbar">
${
this._searchParms.has("historyBack")
@@ -225,10 +226,13 @@ class PanelLight extends LitElement {
padding: 0 4px;
}
.main-title {
margin: var(--margin-title);
margin-inline-start: var(--ha-space-6);
line-height: var(--ha-line-height-normal);
flex-grow: 1;
}
.narrow .main-title {
margin-inline-start: var(--ha-space-2);
}
hui-view-container {
position: relative;
display: flex;

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

@@ -1364,7 +1364,7 @@ class HUIRoot extends LitElement {
padding: 0 4px;
}
.main-title {
margin: var(--margin-title);
margin-inline-start: var(--ha-space-6);
line-height: var(--ha-line-height-normal);
flex-grow: 1;
text-overflow: ellipsis;
@@ -1373,8 +1373,7 @@ class HUIRoot extends LitElement {
min-width: 0;
}
.narrow .main-title {
margin: 0;
margin-inline-start: 8px;
margin-inline-start: var(--ha-space-2);
}
.action-items {
white-space: nowrap;

8
src/panels/security/ha-panel-security.ts
View File

@@ -1,6 +1,7 @@
import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { goBack } from "../../common/navigate";
import { debounce } from "../../common/util/debounce";
import { deepEqual } from "../../common/util/deep-equal";
@@ -95,7 +96,7 @@ class PanelSecurity extends LitElement {
protected render() {
return html`
<div class="header">
<div class="header ${classMap({ narrow: this.narrow })}">
<div class="toolbar">
${
this._searchParms.has("historyBack")
@@ -225,10 +226,13 @@ class PanelSecurity extends LitElement {
padding: 0 4px;
}
.main-title {
margin: var(--margin-title);
margin-inline-start: var(--ha-space-6);
line-height: var(--ha-line-height-normal);
flex-grow: 1;
}
.narrow .main-title {
margin-inline-start: var(--ha-space-2);
}
hui-view-container {
position: relative;
display: flex;